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
Custom llama.cpp Backend Offloads LLM Matrix Multiplication to AMD XDNA2 NPU on Ryzen AI MAX 385
A developer built a custom llama.cpp backend that dispatches GEMM operations directly to the AMD XDNA2 NPU on Ryzen AI MAX 385 (Strix Halo), achieving 43.7 t/s decode at 0.947 J/tok with Meta-Llama-3.1-8B-Instruct Q4_K_M. The NPU decode path saves ~10W versus Vulkan-only while matching decode throughput.
Rivet Actors adds SQLite storage: one database per agent, tenant, or document
Rivet Actors now supports SQLite storage where each actor gets its own SQLite database, enabling millions of independent databases for AI agents, multi-tenant SaaS, collaborative documents, or per-user isolation.
Claude Code v2.1.59 adds auto-memory, copy command, and shell improvements
Claude Code v2.1.59 introduces automatic context saving to auto-memory with /memory management, adds a /copy command for interactive code block selection, and improves prefix suggestions for compound bash commands.
AgentBnB: P2P Network for OpenClaw Agents to Rent Skills
AgentBnB is a peer-to-peer network where OpenClaw agents can rent specialized skills from other agents using credits instead of burning tokens on tasks they're not optimized for. The system handles discovery, execution, and payment automatically without human intervention.