See the production version of your design.
CSSpeek speaks design language. Type sizes, line heights, and spacing values — in human-readable numbers, one click away.
The gap CSSpeek closes
Designers spend a lot of time in Figma with pixel-precise intent, and then see the same layout shipped with values that drifted — by two pixels here, four there — in ways DevTools makes tedious to verify. CSSpeek collapses that verification loop to a single click per element.
Concrete workflows
- Compare spec to implementation. Open Figma. Open the shipped page. Click the headline. CSSpeek reports font-size 72px, line-height 72px, font-family ui-sans-serif. Verify against the spec. Done.
- Gather inspiration. Something on another site caught your eye. Click it. Grab the type scale, the spacing rhythm, and the color tokens into a Figma doc — no screenshots required.
- QA a handoff without engineering help. Find the five discrepancies in the new release. File them as tickets with actual measurements attached. Engineering fixes the real issues instead of debating interpretation.
- Speak the same language as developers. Reports like 'padding should be 16px, shipped as 12px' are precise, reproducible, and hard to misinterpret.
What designers consistently tell us they love
- Spot-checking typography at a glance on any site
- Verifying implementation against Figma specs
- Gathering visual inspiration with real numbers attached
- Writing implementation feedback engineers can act on directly
- Learning CSS by reading sites they admire
You don't need to know CSS to use CSSpeek
The panel uses familiar words (size, spacing, color) and shows dimensions in the classic box-model diagram. If you've used Figma's inspector, CSSpeek will feel immediately familiar.
For designers: frequently asked questions
- I don't know how to use Chrome DevTools. Is CSSpeek different?
- Yes, deliberately. CSSpeek is built to be readable by designers without any DevTools training. The panel uses plain numbers and visual diagrams, not a tree of nodes and computed-style rules.
- Can I share what CSSpeek shows me with a developer?
- Every value in the panel is copyable. Paste measurements directly into Jira, Linear, Slack, or wherever your team communicates — they're just text.
- Will it tell me the design tokens a site uses?
- CSSpeek shows resolved values (e.g., #4f46e5), not token names. If a team's site exposes tokens as CSS custom properties, DevTools' Computed panel will show them — but for design QA, resolved values are usually what you want.
- Do I need to install anything besides the extension?
- No. CSSpeek is a browser extension. Install it from the Chrome Web Store and you're ready.