CLAUDE CODE PLUGIN

SnipCSS for Claude Code

The most accurate way to convert a repo to Tailwind or extract pixel-perfect designs from any website. Give Claude design super-powers.

Install in Seconds

Run these two commands in Claude Code to get started:

# Add the SnipCSS marketplace
❯ /plugin marketplace add mrieck/snipcss-claude-plugin
# Install the plugin
❯ /plugin install snipcss@snipcss

You only need to run these once. The plugin is then available across all your projects.

Takes annotated screenshots with numbered labels so Claude can see the page and identify exactly which element you want.

Uses Playwright CDP to extract real matched CSS rules — fonts, animations, pseudo-elements, media queries, and CSS variables.

Converts extracted CSS to Tailwind utility classes automatically. The most accurate CSS-to-Tailwind converter available.

Claude reads your codebase, understands your framework (React, Vue, Svelte, Rails, etc.), and integrates the extracted design automatically.

SnipCSS takes an annotated screenshot of the target page with numbered labels on every element. Claude sees the page visually.

Claude matches your description ("the pricing cards", "the sidebar") to the numbered elements. If ambiguous, it asks you to clarify.

SnipCSS extracts the complete CSS, HTML, fonts, animations, and generates Tailwind classes — across all responsive breakpoints.

Claude adapts the extracted design to your project's framework and coding style, then places it exactly where it belongs.

Get 25 free extractions to try the plugin. For unlimited extractions, upgrade to SnipCSS Pro.

Pro users: find your API key on your dashboard and set it in Claude Code using the set_api_key tool.