A Claude Code skill that creates a pixel-perfect design-to-code workflow using Google Stitch MCP for AI-generated UI designs and browser-use CLI for automated screenshot comparison.
DESIGN ──▶ IMPLEMENT ──▶ COMPARE ──▶ REFINE ──┐
(Stitch) (Your code) (browser-use) │
◀─────────────────┘
(loop until pixel-perfect)
- Design — Generate screens with Google Stitch MCP from detailed text prompts
- Implement — Extract the design system and apply it to your codebase
- Compare — Screenshot your implementation with browser-use, compare to Stitch reference
- Refine — Fix every difference (fonts, colors, spacing, radius, shadows, icons)
- Repeat — Loop steps 3-4 until pixel-perfect
| Tool | Purpose | Install |
|---|---|---|
| Claude Code | AI coding agent | npm install -g @anthropic-ai/claude-code |
| Google Stitch | AI UI design generation | Get API key at settings |
| browser-use | Headless browser screenshots | curl -fsSL https://browser-use.com/cli/install.sh | bash |
git clone https://github.com/rifaisiciliadao/desi.gitPersonal skill (available in all your projects):
mkdir -p ~/.claude/skills
ln -s "$(pwd)/desi" ~/.claude/skills/desiProject skill (available in one project):
mkdir -p .claude/skills
ln -s /path/to/desi .claude/skills/desiGet an API key at stitch.withgoogle.com/settings, then:
claude mcp add stitch \
--transport http https://stitch.googleapis.com/mcp \
--header "X-Goog-Api-Key: YOUR_API_KEY" \
-s usercurl -fsSL https://browser-use.com/cli/install.sh | bashOr run the setup script which checks everything:
bash /path/to/desi/scripts/setup.shRestart for the Stitch MCP tools to load.
Invoke directly with /desi:
/desi redesign the homepage hero section
/desi create a modern donation page with tier cards
/desi generate a mobile navigation component
/desi make our checkout page match the Stitch design
Or just discuss UI improvements — Claude will invoke the skill automatically when relevant.
- Creates a Stitch project for your work
- Generates screen designs from detailed text prompts
- Downloads the HTML and screenshots as references
- Opens designs in your browser for review
From every Stitch output, the skill extracts:
- Fonts — headline + body families and weights
- Colors — full palette from Stitch's tailwind config
- Border radius — card, button, and input corner styles
- Component patterns — glass cards, buttons, section labels, icons
- Material Symbols — Google's icon font with filled variants
- Applies design system globally (fonts, tailwind config, CSS)
- Updates components page by page
- Never touches logic, routing, i18n, or event handlers — CSS only
- Ensures consistent max-width and spacing across all pages
- Screenshots your running dev server with browser-use
- Compares against Stitch reference screenshots
- Lists every visual difference (fonts, colors, spacing, radius, shadows)
- Fixes each difference and re-screenshots
- Loops until the implementation matches the design
DeSi can also generate standalone graphics like Instagram banners, stories, and OG cards:
/desi create Instagram banners to promote our donation feature in Italian
It creates self-contained HTML files at exact pixel dimensions, then converts them to PNG using Playwright:
# Capture a 1080x1080 Instagram post
node /path/to/desi/scripts/capture.mjs banner.html post.png 1080 1080
# Capture a 1080x1920 Instagram story
node /path/to/desi/scripts/capture.mjs story.html story.png 1080 1920| Format | Dimensions | Use |
|---|---|---|
| Instagram square post | 1080x1080 | Feed posts |
| Instagram story | 1080x1920 | Stories, reels cover |
| Open Graph card | 1200x630 | Link previews |
| Twitter card | 1200x675 | Twitter link previews |
cd /tmp && npm install playwright
npx playwright install chromiumdesi/
├── SKILL.md # Skill entry point (loaded by Claude Code)
├── README.md # This file (for humans)
├── reference/
│ └── browser-use.md # Full browser-use CLI command reference
└── scripts/
├── setup.sh # Prerequisite checker/installer
└── capture.mjs # HTML-to-image converter (Playwright)
Google Stitch is a remote MCP server at stitch.googleapis.com/mcp that generates UI designs from text prompts. It provides these tools:
| Tool | Purpose |
|---|---|
create_project |
Create a design project |
list_projects / get_project |
Browse your projects |
generate_screen_from_text |
Generate a UI screen from a text prompt |
edit_screens |
Edit existing screens with a prompt |
generate_variants |
Create design variants |
list_screens / get_screen |
Retrieve screen HTML and screenshots |
The skill teaches Claude to write high-quality Stitch prompts with exact typography, colors, spacing, and component specifications.
browser-use is a CLI for headless browser automation. The skill uses it to:
browser-use open http://localhost:3000 # Open a page
browser-use screenshot /tmp/page.png # Capture screenshot
browser-use scroll down # Scroll 500px
browser-use keys End # Jump to bottomScreenshots are read by Claude (multimodal) and compared pixel-by-pixel against Stitch references.
Here's what a typical session looks like:
You: /desi redesign the donation page
Claude: [Creates Stitch project]
[Generates screen with detailed prompt]
[Downloads HTML, opens in browser for review]
You: looks good, implement it
Claude: [Extracts fonts, colors, radius from Stitch HTML]
[Updates tailwind.config, index.html, index.css]
[Rewrites Donate.tsx with new classes]
[Screenshots with browser-use]
[Compares with Stitch reference]
[Lists 5 differences: font weight, card radius, icon style...]
[Fixes each one]
[Re-screenshots — now matches]
You: the buttons need to be more rounded
Claude: [Updates button classes]
[Screenshots again]
[Confirms match]
MIT