Not every team has a Figma file. Not every project starts with a design system. A lot of real-world development — indie projects, internal tools, early-stage startups, developers working solo — happens without a designer in the loop at all. When you hit that situation and you need some form of design spec, your options are more interesting than you might expect.
This post compares five tools that solve adjacent problems in the design-spec space: Design Catcher, Impeccable, CSS Peeper, Storybook, and Figma Dev Mode with Code Connect. Each one has a genuine sweet spot. None of them is universally better than the others. The useful question isn't "which is best" but "which fits my situation."
What each tool actually does
Design Catcher
Design Catcher is a Chrome extension that captures the design system of any live webpage. You navigate to a URL, click the extension, and within a few seconds you have three markdown files: DESIGN.md (token vocabulary), STRUCTURE.md (component inventory), UI-KIT.md (usage rules). The extraction is done client-side using computed CSS and DOM inspection; synthesis is done by Gemini 2.5 Flash on GCP. Free, no API key, no account required.
The key characteristic: it works on any live URL. You don't own the codebase. You don't have a design file. You just have a browser.
Impeccable
Impeccable (impeccable.dev) generates a design spec from your own codebase. You point it at your project and it reads your CSS files, Tailwind config, CSS variables, and component source to produce a portable design document. The output is your own design system, documented.
The key characteristic: it works from source code you control. It's documentation generation for a design system that already exists in your codebase. If you don't have a design system yet, it has nothing to read.
CSS Peeper
CSS Peeper is a Chrome extension for single-element inspection. You activate it, click any element on a page, and it shows you that element's computed styles, colors, typography, and assets in a readable panel. It's the visual polish on top of the browser's built-in inspector.
The key characteristic: it's for spot-checking individual elements, not for capturing an entire system. Fast for one-off questions ("what font does that heading use?"), not built for comprehensive token extraction.
Storybook
Storybook is a component development environment. You write stories that document each component's states and variants, then run a local server that renders all of them. It's the standard for teams building a component library who need to document component behavior as it's built.
The key characteristic: it documents components you've already built. Storybook is the output of a functioning design system, not a tool for capturing or creating one from scratch. It also requires maintenance — every new component and variant needs a new story.
Figma Dev Mode + Code Connect
Figma Dev Mode is the developer-facing view inside Figma that shows CSS properties, component annotations, and design measurements. Code Connect is a newer layer on top that links Figma components directly to your codebase components, so developers see code snippets alongside design specs.
The key characteristic: it bridges an existing Figma design system to an existing codebase. Both sides need to exist and be maintained. It's the gold standard when you have a mature design process; it's not useful when you don't have a Figma file.
Decision matrix
Let's be specific about who should use what. These aren't vague recommendations — they're based on what each tool actually requires and produces.
Solo developer with no design system
Use Design Catcher.
You need a design direction. You have a site or product you admire. Capture its design system, drop the three markdown files into your project, and use them as context when prompting Cursor or Claude Code. You now have a design spec with real values (actual colors, actual font sizes, actual spacing) rather than invented ones. The entire workflow takes under two minutes.
Impeccable doesn't help here — you have no codebase design system to document. CSS Peeper helps for spot-checking individual elements but won't give you a systematic token vocabulary. Storybook is for documenting components you've already built. Figma Dev Mode requires a Figma file you don't have.
Small team with a designer who uses Figma
Use Figma Dev Mode. Add Code Connect when your component library stabilizes.
If you have a Figma file with components and a design system, Figma's built-in tooling is purpose-built for this. Dev Mode lets developers inspect any frame and see measurements and CSS. Code Connect closes the loop between Figma components and code components once you've built enough of the library to justify the mapping setup.
Design Catcher is complementary here: if the designer is referencing another site for inspiration, capture that site's system to get its token vocabulary as a starting point. But for your own design-to-code pipeline, Figma Dev Mode is the right tool.
Team with a codebase design system and no Figma
Use Impeccable.
If your design system lives in CSS variables, a Tailwind config, or a tokens.json file — and your team has standardized on those tokens but never formalized the documentation — Impeccable generates that documentation from your source. It produces something you can share with new team members, reference in AI agent prompts, and keep up to date as the design system evolves.
Developer who needs to study a competitor's UI
Use Design Catcher, then CSS Peeper for detail work.
Competitive research is one of Design Catcher's strongest use cases. Navigate to a competitor's product, capture it, and you have a structured breakdown of their color palette, typography scale, and component patterns. For deeper investigation of specific interactions or component states, CSS Peeper gives you per-element detail without leaving the browser.
Team building a new component library from scratch
Use Storybook from day one. Design Catcher to bootstrap the token vocabulary.
Storybook pays off when you're actively building a component library and need to document each component as it's built. Set it up at the start. Use Design Catcher to get an initial token vocabulary from a reference site (or capture your own marketing site if it's further along), then define your own tokens in code with Storybook documenting the components that consume them.
Are Design Catcher and Impeccable competitive?
No, and it's worth being direct about this. They solve different problems for different moments in a project's lifecycle.
Design Catcher answers the question: "What is the design system of this site I'm looking at?" It's an observation tool. It works on URLs you don't own. The output is useful for inspiration, competitive research, onboarding onto an unfamiliar codebase, or bootstrapping a new project with a reference aesthetic.
Impeccable answers the question: "What is the design system of my own codebase?" It's a documentation tool. It works from source code you control. The output is useful for developer onboarding, AI agent context, and maintaining a written record of design decisions your team has already made in code.
The most productive teams probably use both: Design Catcher when exploring and referencing external work, Impeccable once an internal design system exists and needs documentation. They're not competing for the same workflow.
A note on CSS Peeper's position
CSS Peeper deserves more credit than it gets in these comparisons. It's extremely fast for its specific job: "I need to know the exact computed styles of this specific element right now." If you're debugging a spacing discrepancy or trying to match a specific button style, CSS Peeper is faster than opening DevTools and navigating the computed styles panel.
It's not a system-capture tool, and it doesn't try to be. Think of it as a precision instrument for element-level questions, while Design Catcher is a system-level one. They're complementary even within the "inspect someone else's site" workflow.
What all of these tools share
Every tool on this list is moving toward the same goal from a different direction: making design information accessible to the people writing the code. The specific form varies — a Figma panel, a browser extension popup, a local documentation server — but the underlying problem is identical. Developers need accurate design values, and reading specs manually is slow, error-prone, and breaks the flow of building.
The shift toward markdown-first, machine-readable design specs is not specific to any one of these tools. It's the direction the whole ecosystem is moving as AI coding agents become capable enough to consume structured context and act on it faithfully. All of these tools are, at some level, a bet on that future.
The right choice for your team depends on what you have and what you're missing. If you have a design file, use Dev Mode. If you have a codebase system, use Impeccable. If you have neither, use Design Catcher to get started. None of these answers is wrong.