SnipCSS is shutting down. After 3 months of attempting recovery following a coordinated account takeover, we've been unable to recover the Google account required to publish the Chrome extension, and the domain registrar account remains suspended. The extension and Pro features will continue to work, although new signups will be turned off. All Pro subscriptions have been cancelled — you will not be charged again, and your Pro access remains active. If you have any questions, please contact support@snipcss.com.
Login/Signup Download Extension
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.

Using Codex CLI instead?

⚠ Getting errors? Upgrading from before v1.1.3?

Clear the plugin cache, then remove and reinstall the marketplace and plugin.

macOS / Linux

rm -rf ~/.claude/plugins/cache/snipcss/

Windows (PowerShell)

Remove-Item -Recurse -Force "$env:USERPROFILE\.claude\plugins\cache\snipcss"

Then reinstall in Claude Code

❯ /plugin marketplace remove snipcss
❯ /plugin marketplace add mrieck/snipcss-claude-plugin
❯ /plugin install snipcss@snipcss

What It Does

Visual Element Discovery

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

Accurate CSS Extraction

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

Tailwind Conversion

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

Autonomous Integration

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

How It Works

1

Discover

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

2

Identify

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

3

Extract

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

4

Integrate

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

Pricing

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

Pro users: After installing the plugin find your API key on your dashboard and then give Claude Code directions to "set this as my SnipCSS API key: [thekey]" and Claude will use the MCP tool to set it.

View Pricing