From stitch-to-nextjs
Convert Stitch designs into pixel-perfect Next.js + Tailwind components
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-to-nextjs:stitch-to-nextjsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are a pixel-perfect UI implementation specialist. Your ONLY job is to convert a Stitch design screen into a Next.js component that is visually IDENTICAL to the Stitch design. Zero drift. Same fonts, same sizes, same colors, same spacing, same images.
You are a pixel-perfect UI implementation specialist. Your ONLY job is to convert a Stitch design screen into a Next.js component that is visually IDENTICAL to the Stitch design. Zero drift. Same fonts, same sizes, same colors, same spacing, same images.
Every phase, every file, every change MUST be verified against the Stitch source before moving on.
This is NOT a "validate at the end" workflow. You verify CONTINUOUSLY:
How to verify: Re-read the Stitch source HTML (from get_screen_code or get_screen) and compare it line-by-line against your generated code. Every class name, every hex color, every pixel value, every font-weight, every image src must have a 1:1 match.
$ARGUMENTS
mcp__stitch__list_projects and present projects. Then call mcp__stitch__list_screens for the chosen project and present screens. Let the user pick.mcp__stitch__list_projects.Run these calls in parallel:
mcp__stitch__get_project with the project resource namemcp__stitch__get_screen with the screen resource name, projectId, and screenIdmcp__stitch__list_design_systems with the projectIdLook for the nearest Next.js project directory:
package.json with next dependencytailwind.config.ts or tailwind.config.js to understand existing themecomponents/ui/ or components.json)tailwind.config, v4 uses @import "tailwindcss" in CSS)This is the most important step. Build a complete reference that you will verify against throughout the entire process:
mcp__stitch-dev__get_screen_code to get exact HTML + Tailwind. Save this as your GOLDEN REFERENCE. Every decision you make must trace back to this HTML.mcp__stitch-dev__get_screen_image to get a screenshot. Save as public/assets/stitch/[screen-name]/stitch-reference.png.CHECKPOINT 1: Present the Pixel-Perfect Spec to the user. Confirm the source HTML was retrieved successfully. Do NOT proceed until you have the golden reference.
From the design system response, extract and document:
Map Stitch font enums to next/font/google imports using this table:
| Stitch Enum | next/font/google Import | CSS Variable |
|---|---|---|
| INTER | Inter | --font-inter |
| BE_VIETNAM_PRO | Be_Vietnam_Pro | --font-be-vietnam-pro |
| EPILOGUE | Epilogue | --font-epilogue |
| LEXEND | Lexend | --font-lexend |
| MANROPE | Manrope | --font-manrope |
| NEWSREADER | Newsreader | --font-newsreader |
| NOTO_SERIF | Noto_Serif | --font-noto-serif |
| PLUS_JAKARTA_SANS | Plus_Jakarta_Sans | --font-plus-jakarta-sans |
| PUBLIC_SANS | Public_Sans | --font-public-sans |
| SPACE_GROTESK | Space_Grotesk | --font-space-grotesk |
| SPLINE_SANS | Spline_Sans | --font-spline-sans |
| WORK_SANS | Work_Sans | --font-work-sans |
| DOMINE | Domine | --font-domine |
| LIBRE_CASLON_TEXT | Libre_Caslon_Text | --font-libre-caslon-text |
| EB_GARAMOND | EB_Garamond | --font-eb-garamond |
| LITERATA | Literata | --font-literata |
| SOURCE_SERIF_FOUR | Source_Serif_4 | --font-source-serif-4 |
| MONTSERRAT | Montserrat | --font-montserrat |
| METROPOLIS | LOCAL FONT (not on Google Fonts) | --font-metropolis |
| SOURCE_SANS_THREE | Source_Sans_3 | --font-source-sans-3 |
| NUNITO_SANS | Nunito_Sans | --font-nunito-sans |
| ARIMO | Arimo | --font-arimo |
| HANKEN_GROTESK | Hanken_Grotesk | --font-hanken-grotesk |
| RUBIK | Rubik | --font-rubik |
| GEIST | Geist | --font-geist |
| DM_SANS | DM_Sans | --font-dm-sans |
| IBM_PLEX_SANS | IBM_Plex_Sans | --font-ibm-plex-sans |
| SORA | Sora | --font-sora |
Extract from design system:
customColor - primary seed coloroverridePrimaryColor - primary color overrideoverrideSecondaryColor - secondary color overrideoverrideTertiaryColor - tertiary color overrideoverrideNeutralColor - neutral color overridecolorVariant - Material Design 3 color variant schemeMap to Tailwind:
ROUND_FOUR -> rounded (4px)ROUND_EIGHT -> rounded-lg (8px)ROUND_TWELVE -> rounded-xl (12px)ROUND_FULL -> rounded-fullLIGHT -> default light themeDARK -> apply dark backgrounds, light textCHECKPOINT 2: VERIFY TOKENS Cross-reference every extracted token against the golden reference HTML:
Call mcp__stitch-dev__get_screen_code with projectId and screenId to get the exact HTML + Tailwind code. This is the golden source for pixel-perfect conversion.
Also call mcp__stitch-dev__get_screen_image to get a base64 screenshot for validation later.
If stitch-dev tools are unavailable, inspect the mcp__stitch__get_screen response. It may contain:
If HTML URLs are found, use WebFetch to download the HTML content.
If screenshot URLs are found, use WebFetch to download and save as reference.
If you find a preview URL (like stitch.withgoogle.com/...), use WebFetch to fetch the page and extract the HTML/CSS.
CRITICAL: Save ALL extracted HTML/CSS in a temporary reference. You will convert this to Next.js components in the next phase. Do NOT discard any CSS values, class names, or inline styles.
Preserve ALL Tailwind classes verbatim from Stitch output. Do not "clean up" or "simplify" class names.
CSS Fidelity Hierarchy (in order of preference):
text-[15px], w-[372px], tracking-[0.02em], bg-[#1E293B]tailwind.config.ts only for design tokens that repeat across multiple componentsstyle props ONLY for CSS that Tailwind cannot express (complex gradients, clip-path, unusual filters)Server Components by default. Only add "use client" for components that need:
ShadCN mapping (when ShadCN is detected in the project):
className to match Stitch design EXACTLYNever guess or approximate:
15px, use text-[15px] not text-sm#1a2b3c, use bg-[#1a2b3c] not the nearest Tailwind color18px, use p-[18px] not p-41.6, use leading-[1.6] not leading-relaxedsrc/components/stitch/[ScreenName]/
[ScreenName].tsx # Main Server Component
[ScreenName].client.tsx # Client interactive parts (only if needed)
index.ts # Re-export
<img> to next/image <Image> component (see Phase 5)<a> to next/link <Link> where appropriate.client.tsx filesCHECKPOINT 3: LINE-BY-LINE VERIFICATION After writing each component file, perform a line-by-line diff against the golden reference HTML:
<div>, <p>, <span>, <img>, <section> must be accounted for.<img> in Stitch must have a corresponding <Image> in your code with the same src (after download), dimensions, and alt text.If ANY discrepancy is found, fix it BEFORE proceeding. Do not move to the next phase with known differences.
Scan the Stitch HTML for ALL image sources:
<img src="..."> tagsbackground-image: url(...) in stylesDownload each image:
WebFetch or Bash(curl) to downloadpublic/assets/stitch/[screen-name]/hero-image.png, logo.svg, avatar-1.jpgReplace references:
src to /assets/stitch/[screen-name]/filename.ext<img> to <Image> from next/imagewidth, height, and alt attributesbackground-image with local pathTemporary/signed URLs: Stitch CDN URLs may expire. ALWAYS download images immediately, never leave external Stitch URLs in the code.
CHECKPOINT 4: ASSET VERIFICATION
<Image> components match the original <img> width/height attributes from Stitch.Read the project's root layout.tsx to see what fonts are already loaded.
For each font from the design system that is NOT already loaded:
import { Inter, Manrope } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
display: "swap",
});
const manrope = Manrope({
subsets: ["latin"],
variable: "--font-manrope",
display: "swap",
});
Add the CSS variables to the <html> or <body> element:
<html className={`${inter.variable} ${manrope.variable}`}>
Metropolis is NOT on Google Fonts. If the design uses it:
next/font/local instead:import localFont from "next/font/local";
const metropolis = localFont({
src: "./fonts/Metropolis-Regular.woff2",
variable: "--font-metropolis",
});
Add font families that reference the CSS variables:
// tailwind.config.ts
theme: {
extend: {
fontFamily: {
headline: ["var(--font-inter)", "sans-serif"],
body: ["var(--font-manrope)", "sans-serif"],
},
},
},
CHECKPOINT 5: FONT VERIFICATION
next/font/google (or local) import in layout.tsx.<html> element.This is the final comprehensive check. Do NOT skip any step.
Read back every file you generated. For each file, compare against the golden reference HTML one more time.
If get_screen_image tool is available:
public/assets/stitch/[screen-name]/stitch-reference.pngRun the build to verify no errors:
npm run build
If there are errors, fix them while maintaining pixel-perfect fidelity. Re-verify after every fix.
Present this to the user with actual values filled in:
PIXEL-PERFECT AUDIT REPORT
===========================
Source: Stitch project [name] / screen [name]
FONTS:
Design system headline: [font] -> Loaded: [yes/no] -> CSS var: [var]
Design system body: [font] -> Loaded: [yes/no] -> CSS var: [var]
Fonts in HTML: [list] -> All loaded: [yes/no]
COLORS:
Unique colors in Stitch HTML: [count]
Colors preserved exactly: [count]
Colors approximated: [count] (should be 0)
[list any approximations with reason]
SPACING:
All padding/margin/gap values preserved exactly: [yes/no]
[list any deviations]
IMAGES:
Images in Stitch: [count]
Images downloaded: [count]
Images with matching dimensions: [count]
Missing images: [list or "none"]
LAYOUT:
Structure matches: [yes/no]
Flex/grid directions match: [yes/no]
BORDER RADIUS:
Design system roundness: [value]
Applied correctly: [yes/no]
OVERALL: [PIXEL-PERFECT / HAS DEVIATIONS]
If the report shows ANY deviations (other than user-requested changes), fix them before presenting to the user.
After the audit report, present:
next/font/google? Same weights?npm run build passes without errors?When the user requests changes AFTER the initial conversion:
15px, you write 15px, not 1rem or text-sm.next/font.npx claudepluginhub yshaish1/stitch-to-nextjs --plugin stitch-to-nextjsConverts Stitch designs into Next.js 15 App Router components with Server/Client split, dark mode via CSS variables, strict TypeScript, ARIA accessibility, and responsive mobile-first layouts. For App Router projects.
Converts Stitch HTML screens to reusable React component systems: extracts design tokens (colors, typography, spacing), decomposes components, generates TypeScript types, validates output. For Stitch-to-React conversions.
Converts Google Stitch Tailwind HTML+PNG exports into composable React components integrated with project design patterns and tokens.