PixelKit — 웹 디자인 툴킷

About

PixelKit — All-in-One Web Design Inspector & Editor

  Extract colors, copy CSS, take screenshots, overlay grids, edit
  styles live, and test APIs — all inside your browser. PixelKit
  brings together the tools designers, developers, and QA teams use
  every day into a single extension.


  Why PixelKit?

  ✔ Work directly on the page you're viewing — no tab switching
  ✔ Replace 10+ separate extensions with one unified toolkit
  ✔ Skip heavy desktop apps like Figma or Postman — your browser is
  enough


  — Free Features —

  ▸ Color Picker
    Click any element to instantly extract its color. Supports HEX,
  RGB, HSL, and OKLCH formats. Every color you pick is saved to your
  history automatically.

  ▸ Hoverify (Element Inspector)
    Hover over any element to see its dimensions, tag, and class names
   at a glance. Click to view detailed CSS properties.

  ▸ Visible Area Screenshot
    Capture what you see in one click.

  ▸ Grid Overlay
    Display Figma-style grids on top of any page. Supports Columns,
  Rows, and Grid (px) types with multiple layers. Includes presets for
   Bootstrap 12-col, 8px Baseline, 960 Grid, and more. Freely adjust
  column count, gutter, margin, max width, color, and opacity.

  ▸ Image Detection
    Hover over images on the page to detect and download them
  instantly.


  — Pro Features —

  ▸ Palette Extractor
    Automatically analyze and categorize the key colors used on any
  page. Perfect for studying design systems or identifying brand
  colors.

  ▸ Font Inspector
    View font family, size, weight, line height, and other typography
  details for any selected element.

  ▸ Spacing Measurement
    Measure the exact pixel distance, padding, and margin between any
  two elements. Instantly verify if implementation matches the design
  spec.

  ▸ Contrast Checker (WCAG)
    Calculate the contrast ratio between background and text colors.
  Shows WCAG AA/AAA pass/fail status — essential for accessibility
  audits.

  ▸ CSS Copy
    Extract CSS from any selected element. Choose from 4 scopes: All,
  Typography, Layout, or Colors — copy only what you need.

  ▸ Area Selection Capture
    Drag to capture a precise region of the page.

  ▸ Full Page Capture
    Capture the entire page including scrollable areas as a single
  image.

  ▸ Annotated Capture
    Draw arrows, boxes, and text before capturing. Ideal for bug
  reports and design feedback.

  ▸ Visual Editor
    Click any element and edit its styles in real time — colors,
  fonts, sizes, and more. Supports Undo/Redo, and all changes can be
  saved as presets for later.

  ▸ Style Strip
    Progressively strip CSS in 4 levels: Grayscale → Remove
  backgrounds → Remove decorations → Naked HTML. Useful for analyzing
  layout structure or testing accessibility.

  ▸ Quick Themes
    Apply built-in themes like Dark Pro, Minimal White, and Terminal
  with one click. Great for dark mode testing or quick visual
  experiments.

  ▸ API Tester
    Send HTTP requests and inspect responses right in your browser —
  no Postman needed.

  ▸ CORS Bypass
    Toggle CORS restrictions on and off during development with a
  single click.

  ▸ Header Modifier
    Add or modify request and response headers freely. Test with
  different auth tokens, User-Agent strings, and more.

  ▸ GraphQL Client
    Execute GraphQL queries and inspect results instantly.

  ▸ JWT Decoder
    Paste any JWT token to automatically decode its header and
  payload.

  ▸ Cookie Manager
    View, edit, and delete cookies for the current domain.

  ▸ Response Viewer & TTFB
    Log API responses in real time and measure Time to First Byte.

  ▸ Dummy Data Generator
    Generate test data (names, emails, addresses, etc.) in JSON or CSV
   format instantly.

  ▸ Preset Manager
    Save your edited styles, hidden elements, and applied themes as
  presets. Reapply them anytime, and export/import as JSON to share
  with your team.


  — Who is PixelKit for? —

  • Designers — Analyze colors, fonts, and spacing from any live site
  in seconds
  • Frontend Developers — Copy CSS, experiment with styles in real
  time, and test APIs without leaving the browser
  • QA & Testers — Create clear bug reports with annotated screenshots
   and accessibility checks
  • PMs & Product Owners — Measure and verify the gap between design
  specs and actual implementation


  — Technical Details —

  • Built on Manifest V3
  • Shadow DOM ensures complete isolation from page styles
  • Zero impact on page performance (pointer-events: none overlay)
  • All data stored locally — nothing is sent to external servers