Claude Code Skill Converts Stitch Designs to Next.js with Zero Pixel Drift
What This Tool Does
A Claude Code skill (slash command) converts Google Stitch AI designs to Next.js components while preventing the pixel drift that typically occurs when using Claude for this task. The tool addresses specific pain points where Claude would round values like text-[15px] to text-sm, swap exact colors like #1E293B for approximate Tailwind classes like bg-slate-800, lose image assets due to expired CDN URLs, or miss fonts.
Key Features and Process
- Extracts exact HTML/CSS from Stitch via MCP - no copy-pasting or screenshots
- Preserves exact pixel values throughout (text-[15px] stays text-[15px], not rounded to a Tailwind class)
- Downloads all images from the Stitch CDN before URLs expire
- Maps all 29 Stitch fonts to next/font/google properly
- Includes 5 mandatory verification checkpoints that compare output against source before moving on
- Generates a full audit report showing exactly what was preserved and what needed judgment calls
- Supports ShadCN/UI component mapping with exact style overrides
Installation and Setup
Install with: curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash
The installation also auto-configures the stitch-mcp server automatically.
Why Verification Checkpoints Are Necessary
The verification checkpoints address Claude's tendency to drift toward Tailwind conventions when left to its own devices. The skill's prompt explicitly flags this pattern and forces re-verification at each stage. While not foolproof, this approach catches common failure modes before they compound.
The tool is available on GitHub: https://github.com/yshaish1/stitch-to-nextjs
📖 Read the full source: r/ClaudeAI
👀 See Also
Open-source Claude Code plugin captures books and converts them to structured Markdown
A developer has open-sourced a Claude Code plugin that automatically captures book pages via screenshots, performs OCR with macOS Vision, and generates structured Markdown files organized by theme rather than chapter order. The tool supports Kindle, Apple Books, Kindle Cloud Reader, and scanned PDFs on macOS.
ANE Optimization Through Phone-Steered AI Experiments Shows Kernel Fusion Benefits
A developer ran 55 experiments on Apple Neural Engine optimization, steering the process from their phone using Claude for brainstorming. Key improvements included fusing 3 ANE kernels into 1 mega-kernel, reducing validation loss from 3.75 to 2.49 and step time from 176ms to 96ms.
Codegraph: Pre-indexed knowledge graph cuts Claude/Cursor tool calls by 94%
Codegraph uses a pre-indexed knowledge graph of symbol relationships, call graphs, and code structure to reduce API tool calls by up to 94% and speed up usage by ~77% for Claude, Cursor, Codex, and OpenCode agents.
Pi Coding Agent with Qwen 35B Q2: Using Filesystem as External Memory and Enforcing Context Guards
A Reddit user built a stack around Pi coding agent with Qwen 35B Q2_K_XL quant that enforces guards — rejects edits over 100 lines, caps thinking blocks at 2000 chars, and monitors context at 65%/80% — treating the filesystem as the model's memory, not the context window.