{
  "markdown": "<p align=\"center\">\n  <img src=\".github/assets/banner.svg\" alt=\"Stitch to Next.js\" width=\"100%\" />\n</p>\n\n<p align=\"center\">\n  <strong>Convert Google Stitch designs into pixel-perfect Next.js components</strong>\n</p>\n\n<p align=\"center\">\n  <a href=\"#quick-install\">Quick Install</a> -\n  <a href=\"#what-it-does\">What It Does</a> -\n  <a href=\"#usage\">Usage</a> -\n  <a href=\"#how-it-works\">How It Works</a> -\n  <a href=\"#configuration\">Configuration</a> -\n  <a href=\"QUICKSTART.md\">Quick Start Guide</a>\n</p>\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/badge/Claude_Code-Plugin-blueviolet\" alt=\"Claude Code Plugin\" />\n  <img src=\"https://img.shields.io/badge/Next.js-14%2B-black\" alt=\"Next.js 14+\" />\n  <img src=\"https://img.shields.io/badge/Tailwind_CSS-v3%20%7C%20v4-38bdf8\" alt=\"Tailwind CSS\" />\n  <img src=\"https://img.shields.io/badge/Stitch-Google_Labs-4285F4\" alt=\"Google Stitch\" />\n  <img src=\"https://img.shields.io/badge/MCP-Auto--configured-22C55E\" alt=\"MCP Auto-configured\" />\n  <img src=\"https://img.shields.io/badge/license-MIT-green\" alt=\"MIT License\" />\n</p>\n\n---\n\n## The Problem\n\nWhen you convert Stitch designs to code manually or with generic AI tools, things drift:\n\n| What Stitch designed | What you get |\n|---|---|\n| `Inter` at `15px` | `text-sm` (14px) |\n| `#1E293B` background | `bg-slate-800` (close but wrong) |\n| `18px` padding | `p-4` (16px) |\n| Specific hero image | Placeholder or missing |\n| `border-radius: 12px` | `rounded-lg` (8px) |\n\n**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.\n\n---\n\n## Quick Install\n\n### One-liner (recommended)\n\n```bash\ncurl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash\n```\n\nThis automatically:\n- Installs the skill to `~/.claude/commands/`\n- Adds the plugin marketplace to your Claude Code settings\n- Checks stitch-mcp authentication status\n\nThen restart Claude Code and run `/stitch-to-nextjs list`.\n\n### Alternative: Plugin install\n\nIf you prefer the plugin system:\n\n```\n/plugin install stitch-to-nextjs\n```\n\n> Requires marketplace to be added first. The install script above handles this automatically.\n\n---\n\n## Prerequisites\n\n- [Claude Code](https://claude.ai/code) CLI installed\n- A [Google Stitch](https://stitch.withgoogle.com) account with at least one project\n- Built-in Stitch MCP enabled in Claude Code (available by default on claude.ai)\n- One-time `npx @_davideast/stitch-mcp init` to authenticate with Google (the install script will remind you if needed)\n\n---\n\n## What It Does\n\n| Feature | Description |\n|---|---|\n| **Pixel-perfect CSS** | Preserves exact values - `text-[15px]`, `bg-[#1E293B]`, `p-[18px]` - never rounds to Tailwind defaults |\n| **Font matching** | Maps all 29 Stitch fonts to `next/font/google` with CSS variables |\n| **Image downloading** | Downloads all images from Stitch CDN before URLs expire, saves to `public/assets/` |\n| **Design tokens** | Extracts colors, roundness, color mode from Stitch design systems |\n| **ShadCN mapping** | Detects ShadCN/UI and maps Stitch patterns to ShadCN components with exact style overrides |\n| **Server Components** | Uses React Server Components by default, extracts `\"use client\"` only when needed |\n| **Tailwind v3 + v4** | Auto-detects your Tailwind version and generates compatible code |\n| **Visual validation** | Saves Stitch screenshot as reference for side-by-side comparison |\n\n---\n\n## Usage\n\n### Browse your Stitch projects\n\n```\n/stitch-to-nextjs list\n```\n\n### Convert a specific screen\n\n```\n/stitch-to-nextjs 4044680601076201931 98b50e2ddc9943efb387052637738f61\n```\n\n### Convert by project name\n\n```\n/stitch-to-nextjs \"My Landing Page\" \"Hero Section\"\n```\n\n---\n\n## How It Works\n\nThe skill runs a 7-phase pipeline:\n\n```\n Phase 1      Phase 2       Phase 3        Phase 4          Phase 5        Phase 6       Phase 7\n----------   ----------   -----------   ---------------   -----------   -----------   -----------\n Discovery    Design       HTML/Code     Component         Asset          Font          Visual\n & Setup      Tokens       Extraction    Generation        Download       Setup         Validation\n----------   ----------   -----------   ---------------   -----------   -----------   -----------\n Resolve      Extract      get_screen    Convert to        Download      Load fonts    Screenshot\n project &    fonts,       _code for     Next.js TSX       images to     via next/     comparison\n screen IDs   colors,      exact HTML    with exact        public/       font/google   + checklist\n              roundness    + Tailwind    Tailwind classes  assets/\n```\n\n### Phase 1: Discovery\n\n- Resolves project/screen IDs from names or IDs\n- Fetches project details, screen data, and design system\n- Detects your Next.js project setup (Tailwind version, ShadCN, existing fonts)\n\n### Phase 2: Design Token Extraction\n\n- Maps Stitch font enums to `next/font/google` imports (29 fonts supported)\n- Extracts Material Design 3 color tokens (primary, secondary, tertiary, neutral)\n- Maps roundness values to Tailwind border-radius classes\n\n### Phase 3: HTML/Code Extraction\n\n- Uses `get_screen_code` from davideast/stitch-mcp (if available) for exact HTML\n- Falls back to built-in Stitch MCP `get_screen` response\n- Captures screenshot via `get_screen_image` for validation\n\n### Phase 4: Component Generation\n\nFollows a strict CSS fidelity hierarchy:\n\n1. **Stitch Tailwind classes verbatim** - never renamed or simplified\n2. **Arbitrary values** for custom measurements - `text-[15px]`, `w-[372px]`, `bg-[#1E293B]`\n3. **tailwind.config.ts extensions** only for repeating design tokens\n4. **Inline styles** only as a last resort for CSS Tailwind cannot express\n\n### Phase 5: Asset Handling\n\n- Scans HTML for all `<img>` tags, `background-image` URLs, and SVG references\n- Downloads images immediately (Stitch CDN URLs can expire)\n- Converts to `next/image` `<Image>` components with proper dimensions\n\n### Phase 6: Font Setup\n\n- Adds missing fonts via `next/font/google` with CSS variables\n- Handles the METROPOLIS edge case (not on Google Fonts - uses `next/font/local`)\n- Extends Tailwind config with font family references\n\n### Phase 7: Validation\n\n- Saves Stitch screenshot as reference image\n- Presents a pixel-perfect validation checklist\n- Suggests running the dev server for side-by-side comparison\n\n---\n\n## Output Structure\n\nThe skill generates files following this structure:\n\n```\nsrc/\n  components/\n    stitch/\n      [ScreenName]/\n        [ScreenName].tsx            # Main Server Component\n        [ScreenName].client.tsx     # Client interactive parts (if needed)\n        index.ts                    # Re-export\npublic/\n  assets/\n    stitch/\n      [screen-name]/\n        hero-image.png              # Downloaded images\n        stitch-reference.png        # Design screenshot for comparison\n```\n\n---\n\n## Supported Stitch Fonts\n\nAll 29 Stitch design system fonts are mapped to `next/font/google`:\n\n| Stitch Font | next/font Import | CSS Variable |\n|---|---|---|\n| INTER | `Inter` | `--font-inter` |\n| GEIST | `Geist` | `--font-geist` |\n| DM_SANS | `DM_Sans` | `--font-dm-sans` |\n| MANROPE | `Manrope` | `--font-manrope` |\n| MONTSERRAT | `Montserrat` | `--font-montserrat` |\n| PLUS_JAKARTA_SANS | `Plus_Jakarta_Sans` | `--font-plus-jakarta-sans` |\n| SPACE_GROTESK | `Space_Grotesk` | `--font-space-grotesk` |\n| RUBIK | `Rubik` | `--font-rubik` |\n| SORA | `Sora` | `--font-sora` |\n| ... | [28 more](skills/stitch-to-nextjs/references/font-mapping.md) | ... |\n\n> METROPOLIS is handled via `next/font/local` since it's not available on Google Fonts.\n\n---\n\n## Configuration\n\n### MCP Setup\n\nWhen installed as a plugin, the MCP server is auto-configured. The skill uses two MCP servers:\n\n| MCP Server | Tools Used | Setup |\n|---|---|---|\n| Built-in Stitch (Claude.ai) | `get_screen`, `get_project`, `list_screens`, `list_design_systems` | Automatic |\n| [davideast/stitch-mcp](https://github.com/davideast/stitch-mcp) | `get_screen_code`, `get_screen_image` | Auto-configured by plugin |\n\n#### Manual MCP Configuration\n\nIf you installed the skill file manually (not as a plugin), add this to your project's `.mcp.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"stitch-dev\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@_davideast/stitch-mcp\", \"proxy\"]\n    }\n  }\n}\n```\n\n### Customization\n\nThe skill auto-detects your project setup:\n\n- **Tailwind version** - from `tailwind.config.ts` or CSS imports\n- **ShadCN/UI** - from `components/ui/` directory or `components.json`\n- **Existing fonts** - from root `layout.tsx`\n- **Package manager** - from lockfile type\n\n---\n\n## Examples\n\n### Simple landing page section\n\n```\n/stitch-to-nextjs list\n> Select project: \"Marketing Site\"\n> Select screen: \"Hero Section\"\n```\n\nGenerates:\n- `src/components/stitch/HeroSection/HeroSection.tsx` - Server Component with exact Tailwind\n- `public/assets/stitch/hero-section/hero-bg.jpg` - Downloaded hero image\n- Updated `layout.tsx` with required fonts\n- Validation checklist\n\n### Dashboard with interactive elements\n\n```\n/stitch-to-nextjs 123456789 abcdef123456\n```\n\nGenerates:\n- `src/components/stitch/Dashboard/Dashboard.tsx` - Server Component (layout)\n- `src/components/stitch/Dashboard/Dashboard.client.tsx` - Client Component (charts, filters)\n- `src/components/stitch/Dashboard/index.ts` - Re-export\n- All chart images and icons downloaded\n\n---\n\n## Comparison\n\n| Feature | Manual Conversion | Generic AI | stitch-to-nextjs |\n|---|---|---|---|\n| Font accuracy | Approximate | Often wrong | Exact match |\n| Color fidelity | Copy-paste hex | Nearest Tailwind | Exact hex values |\n| Spacing precision | Rounded to scale | Rounded to scale | Exact pixel values |\n| Image handling | Manual download | Placeholders | Auto-download |\n| Design tokens | Manual extraction | Ignored | Auto-extracted |\n| ShadCN integration | Manual | No | Auto-detected |\n| Validation | Visual inspection | None | Screenshot + checklist |\n\n---\n\n## Troubleshooting\n\n### \"get_screen_code not found\"\n\nIf installed as a plugin, the MCP server should be auto-configured. Try restarting Claude Code. If using the manual skill file install, see [Manual MCP Configuration](#manual-mcp-configuration).\n\nYou also need to run the one-time auth setup:\n```bash\nnpx @_davideast/stitch-mcp init\n```\n\nThe skill will fall back to built-in Stitch MCP tools, but fidelity may be lower.\n\n### Images not loading\n\nStitch CDN URLs expire. The skill downloads images immediately, but if you re-run the conversion, old URLs may be invalid. Re-run the skill to get fresh URLs.\n\n### Font not loading\n\nCheck that the font is added to your root `layout.tsx` and the CSS variable is applied to the `<html>` element. The skill handles this automatically, but manual changes may have overwritten it.\n\n---\n\n## Contributing\n\nContributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\nIdeas for contributions:\n- Support for additional frameworks (React, Svelte, Vue)\n- Improved responsive design handling\n- Automated visual regression testing\n- Additional design system token extraction\n\n---\n\n## License\n\n[MIT](LICENSE) - Use it however you want.\n\n---\n\n## Credits\n\n- [Google Stitch](https://stitch.withgoogle.com) - AI-powered UI design tool\n- [davideast/stitch-mcp](https://github.com/davideast/stitch-mcp) - Stitch MCP server for code/image export\n- [Claude Code](https://claude.ai/code) - AI coding agent by Anthropic\n\n---\n\n<p align=\"center\">\n  Built for developers who care about design fidelity.\n</p>\n",
  "bytes": 11591,
  "sha": "90801dfaf7f62a6d317a5136eac4049e6cdd1bebfbf0451311fa1d4bab739d29",
  "repo_slug": "yshaish1/stitch-to-nextjs",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_yshaish1_stitch_to_nextjs_stitch_to_next_02b1ab56/readme"
}