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
Benchmark Results: 331 GGUF Models Tested on Mac Mini M4 16GB
A benchmark of 331 GGUF models on a Mac Mini M4 with 16GB RAM reveals only 11 Pareto-optimal models, all Mixture-of-Experts architectures. Mixture-of-Experts models dominate performance with median 20.0 tokens/second versus 4.4 for dense models.
CipherClaw: Using a Security Persona to Audit Code with Claude
A developer used CipherClaw, a CLAUDE.md persona called TALON, to make Claude Code think like a security architect. Running it on a Next.js app revealed 17 security findings including critical vulnerabilities like unauthenticated endpoints returning admin data and hardcoded auth tokens.
OpenClaw's AWS Deployment: A Focus on Automation
OpenClaw's tool allows for one-click deployment to AWS, simplifying cloud operations for developers using AI coding agents.
LystBot: An MCP Server for Claude to Manage Lists and Tasks
LystBot is a list management app with a native MCP server that allows Claude to directly interact with grocery lists, todos, and packing lists. Built primarily with Claude Code, it includes a Flutter mobile app, REST API, CLI, and open-source Node.js MCP server.