Pixel-perfect Google Stitch to Next.js converter
npx claudepluginhub yshaish1/stitch-to-nextjsPixel-perfect Google Stitch designs to Next.js + Tailwind components
yshaish1
Convert Google Stitch designs into pixel-perfect Next.js components
Quick Install - What It Does - Usage - How It Works - Configuration - Quick Start Guide
When you convert Stitch designs to code manually or with generic AI tools, things drift:
| What Stitch designed | What you get |
|---|---|
Inter at 15px | text-sm (14px) |
#1E293B background | bg-slate-800 (close but wrong) |
18px padding | p-4 (16px) |
| Specific hero image | Placeholder or missing |
border-radius: 12px | rounded-lg (8px) |
stitch-to-nextjs eliminates this drift entirely. It extracts the exact HTML, CSS, fonts, colors, and images from your Stitch design and produces a Next.js component that is visually identical.
curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash
This automatically:
~/.claude/commands/Then restart Claude Code and run /stitch-to-nextjs list.
If you prefer the plugin system:
/plugin install stitch-to-nextjs
Requires marketplace to be added first. The install script above handles this automatically.
npx @_davideast/stitch-mcp init to authenticate with Google (the install script will remind you if needed)| Feature | Description |
|---|---|
| Pixel-perfect CSS | Preserves exact values - text-[15px], bg-[#1E293B], p-[18px] - never rounds to Tailwind defaults |
| Font matching | Maps all 29 Stitch fonts to next/font/google with CSS variables |
| Image downloading | Downloads all images from Stitch CDN before URLs expire, saves to public/assets/ |
| Design tokens | Extracts colors, roundness, color mode from Stitch design systems |
| ShadCN mapping | Detects ShadCN/UI and maps Stitch patterns to ShadCN components with exact style overrides |
| Server Components | Uses React Server Components by default, extracts "use client" only when needed |
| Tailwind v3 + v4 | Auto-detects your Tailwind version and generates compatible code |
| Visual validation | Saves Stitch screenshot as reference for side-by-side comparison |
/stitch-to-nextjs list
/stitch-to-nextjs 4044680601076201931 98b50e2ddc9943efb387052637738f61
/stitch-to-nextjs "My Landing Page" "Hero Section"
The skill runs a 7-phase pipeline:
Phase 1 Phase 2 Phase 3 Phase 4 Phase 5 Phase 6 Phase 7
---------- ---------- ----------- --------------- ----------- ----------- -----------
Discovery Design HTML/Code Component Asset Font Visual
& Setup Tokens Extraction Generation Download Setup Validation
---------- ---------- ----------- --------------- ----------- ----------- -----------
Resolve Extract get_screen Convert to Download Load fonts Screenshot
project & fonts, _code for Next.js TSX images to via next/ comparison
screen IDs colors, exact HTML with exact public/ font/google + checklist
roundness + Tailwind Tailwind classes assets/