stitch-to-nextjs

Convert Google Stitch designs into pixel-perfect Next.js components

Quick Install - What It Does - Usage - How It Works - Configuration - Quick Start Guide

---

The Problem

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.

---

Quick Install

One-liner (recommended)

curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash

This automatically:

• Installs the skill to ~/.claude/commands/
• Adds the plugin marketplace to your Claude Code settings
• Checks stitch-mcp authentication status

Then restart Claude Code and run /stitch-to-nextjs list.

Alternative: Plugin install

If you prefer the plugin system:

/plugin install stitch-to-nextjs

Requires marketplace to be added first. The install script above handles this automatically.

---

Prerequisites

• Claude Code CLI installed
• A Google Stitch account with at least one project
• Built-in Stitch MCP enabled in Claude Code (available by default on claude.ai)
• One-time npx @_davideast/stitch-mcp init to authenticate with Google (the install script will remind you if needed)

---

What It Does

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

---

Usage

Browse your Stitch projects

/stitch-to-nextjs list

Convert a specific screen

/stitch-to-nextjs 4044680601076201931 98b50e2ddc9943efb387052637738f61

Convert by project name

/stitch-to-nextjs "My Landing Page" "Hero Section"

---

How It Works

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/

Phase 1: Discovery

• Resolves project/screen IDs from names or IDs
• Fetches project details, screen data, and design system
• Detects your Next.js project setup (Tailwind version, ShadCN, existing fonts)

Phase 2: Design Token Extraction