Specter — design inspector 作成者: Eni

Specter — DevTools, reimagined for designers.

You shouldn't need to open DevTools and read a wall of computed styles just to answer "what's the padding here?" or "is this even our blue?" Specter turns any webpage into something you can read like a design file. Hover an element, see the truth. Pin it, dig in.

It's the inspector built for the people who actually care about the pixels — product designers, UX engineers, and front-end devs shipping on-brand, accessible UI.

See what anything is made of
Hover to reveal the box model, typography, colours, border and shadow values, and the full flex/grid layout — in plain, copyable CSS. Those 1px hairlines and inset shadows you can never click? Specter reads their exact colour and width for you, swatch included.

Catch what the eye misses
Live WCAG AA/AAA contrast checks tell you instantly if text passes — and suggest the closest colour that would. Flex and grid gaps are drawn right on the page so you see where the spacing lives, not just a number.

Hold the page to your design system
Paste your design tokens (or let Specter auto-detect them) and every off-token colour, size, and radius gets flagged — per element, or across the whole page with a one-glance fidelity score and a heatmap of every offender.

Measure, simulate, compare, ship
Simulate :hover / :focus / :active. Measure the distance between any two elements. Compare two components side by side and export the redline. Run a page-health scan for Core Web Vitals, weight, and the slowest resources.

Take it with you
Copy CSS, copy as Tailwind, copy matched tokens, or grab a colour with the eyedropper. Screenshot any element in full — or the entire page top to bottom. Save images as optimized WebP or full-res original, and export SVGs as a file or as markup.

Private by design. Specter runs 100% locally. No accounts, no tracking, nothing ever leaves your browser.

Stop guessing. Start inspecting.
Made by eneapapa.com