SnipKiwi for Claude Code · also Codex CLI

Point Claude at any page.
Get UI like it.

SnipKiwi opens the page in a headless browser, reads the real CSS the way DevTools does, converts it to Tailwind, and Claude adapts it to your codebase. Free, no account.

Install

❯ /plugin marketplace add mrieck/snipkiwi-design-extract

❯ /plugin install snipkiwi@snipkiwi

Run both once, inside Claude Code. The plugin is then available in every project. One more step below installs the browser engine.

❯ git clone https://github.com/mrieck/snipkiwi-design-extract ~/snipkiwi

❯ cd ~/snipkiwi && npm install --omit=dev && npx patchright install chromium

❯ codex mcp add snipkiwi -- node ~/snipkiwi/dist/mcp-server.js

Complex pages can take a while: add tool_timeout_sec = 120 under [mcp_servers.snipkiwi] in ~/.codex/config.toml.

Needs Node 18 or newer. Nothing is published to npm; the code is on GitHub.

> Build a feature grid like the one on tailwindcss.com, using our tokens

● snipkiwi · screenshot_page tailwindcss.com · 1440 px · 31 elements labelled

● snipkiwi · extract_css_convert_tailwind #features · 284 rules → 38 Tailwind classes

● build-like mapping 6 colours and 3 radii onto tailwind.config.ts

✓ Wrote components/Features.tsx. Three columns, 24 px icons, 32 px gaps at 1440 and a single column under 640. Same hierarchy as the reference, your palette and type scale.

> make the yearly toggle a segmented control like linear.app

Ground truth, not a guess: every matched rule, variables resolved, hover and focus states included.

How it works

Three tools and one skill. Claude decides when to call them; you just describe what you want.

You name a page

"Like the sidebar on linear.app." If you don't know the selector, screenshot_page returns an annotated screenshot with a numbered legend and list_page_elements lists what is on the page.

SnipKiwi reads the real styles

A headless Chromium on your machine opens the page and asks the DevTools protocol for every matched rule, resolves var(), forces hover and focus states, and collects fonts and keyframes.

Claude builds it in your stack

You get clean CSS, Tailwind, or both. The build-like skill maps the values onto your own design tokens and checks the result against the reference.

The tools Claude gets

Use them to build a hero, sidebar or pricing section like any site you point at, convert a CSS codebase to Tailwind, or pull exact spacing, type and colour tokens from a live page.

Tool	What it does
`extract_css_convert_tailwind`	Extract the CSS for a URL and selector; returns CSS, Tailwind, or both.
`list_page_elements`	Discover the structural elements on a page to find the right selector.
`screenshot_page`	Annotated screenshot at any viewport, with a numbered legend to pick from.
`compare_to_reference`	After Claude builds it, compares your local page with the original: side-by-side screenshots and a list of style deviations to fix.

Nothing to set up

Claude Code installs the plugin's packages itself when it adds the plugin. You need Node 18 or newer and Google Chrome (without Chrome, SnipKiwi falls back to a bundled Chromium and tells you how to fetch it). Codex users run the install step once after cloning, as shown above.

❯ /snipkiwi:build-like a feature grid like tailwindcss.com

Point Claude at any page.Get UI like it.