Guide · comparison
uiscanner vs Snable: a CSS inspector, or a build brief for your AI?
Both tools start the same way. You point them at a public page and get its colors and type back. They finish in completely different places: Snable is built for a person looking at a design, and uiscanner is built for an AI building one. If you're trying to decide between them, that one sentence is most of the answer, but the reasons are worth spelling out.
what Snable is good at
Snable is a Chrome extension that deconstructs any website into its visual pieces: real-time color and font analysis, a read on the visual hierarchy, a clean report, page bookmarking, and a companion Figma plugin so you can push what you find into a file. It sits at a healthy 4.6 stars on the Chrome Web Store, and for its actual job, it earns that. If you are a designer collecting inspiration, checking a brand for consistency, or moving a palette into Figma, it is a fast, pleasant way to do it.
Most of the category works this way. Browser extensions like Peek and the various "design token extractor" plugins, and crawlers like CSS Stats and Project Wallace, all surface a page's values for a human to read: here are the colors, here are the font sizes, here is how often each one is used. The output is a panel you look at. That is the shape of the whole space, and it is genuinely useful when a person is the one doing the next step.
where uiscanner is doing a different job
uiscanner's output is not a panel for you to read. It is a brief for your agent to build from. The difference shows up in three places:
- It reads the rendered page, not just the CSS. A stylesheet lists every color and size that exists, including the ones that never really show up. uiscanner reads how the page actually looks, so it can tell you the real primary button rather than the first one in the source, whether the hero is centered or split, and which imagery is decorative, with prompts to recreate it as originals instead of copying it.
- It captures structure, not just tokens. You get a section-by-section map of how the page is assembled, which is the part an AI needs to lay out a comparable page and the part a color panel throws away.
- It writes a build prompt. The teardown ends in a prompt tailored to an archetype (landing, dashboard, marketing, ecommerce, portfolio, mobile) that you hand to your coding agent. That prompt, plus the tokens and structure, is the deliverable.
None of that is a knock on Snable. It is a different tool for a different reader.
the pipeline difference, and why it matters for AI coding
Here is the practical gap. With an inspector, you read a value, then you retype it into your own code, one at a time. That is fine for a person doing careful work. It falls apart the moment the thing writing the code is an AI, because the AI never saw the panel.
uiscanner closes that loop by being an MCP server and a CLI. One line connects it to Claude Code, Cursor, or Codex:
claude mcp add uiscanner -- npx -y uiscanner-mcp@latest
After that, your agent can scan a URL and receive the whole teardown as structured data: tokens, section structure, brand read, and the build prompt, all in one call. It is the difference between "here are some values for you to copy" and "here is a design system your model can build against." This agent surface is the part the extension category does not have, and it is the reason uiscanner exists as its own thing rather than as one more panel.
side by side
| Snable | uiscanner | |
|---|---|---|
| Surface | Chrome extension | Web app, MCP server, and CLI |
| Reads | The page's CSS and computed styles | The rendered page plus the DOM |
| Output | A visual panel, Figma handoff | Tokens, section structure, and a build prompt |
| Built for | A designer looking at a page | An AI agent building a page |
| Handoff | You copy values by hand | Structured data piped into your agent |
| Best at | Inspiration, brand checks, Figma | Rebuilding a design language without generic defaults |
which one you actually want
If your next step is a human one, an inspector is the right call. You want to eyeball a palette, sanity-check a brand, or drop some colors into a Figma file, so reach for Snable or Peek and move on.
If your next step is an AI one, uiscanner is built for it. You want your coding agent to rebuild a page's design language, and you do not want it to fall back on the same generic defaults every AI ships by default. Point uiscanner at a reference, hand the teardown to the agent, and it builds from a real system instead of guessing.
They can even sit side by side. Nothing stops you from using an inspector to browse and uiscanner to feed the agent once you have found a page worth learning from.
One honest note on both: reputable tools in this space are transformative, not extractive. uiscanner describes and tokenizes a page, and never re-hosts the original site's assets. You build in your own stack from the tokens and structure, which is the only version of this that is fair to the sites you learn from.
try it
The web app scans a URL straight from the address bar, or wire the MCP and CLI into your agent with the one-liner above. Browse example teardowns to see the output first, including full breakdowns of the Stripe and Linear design systems. The free plan includes 5 scans per rolling 30 days, and paid plans (Indie at 100 scans, Studio at 400) share the same quota across the web app, MCP, and CLI.