Claude Code Skill wandelt Stickdesigns in Next.js um – ohne Pixelversatz

Was dieses Tool leistet

Eine Claude Code-Fähigkeit (Slash-Befehl) wandelt Google Stitch AI-Designs in Next.js-Komponenten um und verhindert dabei den Pixelversatz, der typischerweise auftritt, wenn Claude für diese Aufgabe verwendet wird. Das Tool behebt spezifische Probleme, bei denen Claude Werte wie text-[15px] auf text-sm runden, exakte Farben wie #1E293B durch ungefähre Tailwind-Klassen wie bg-slate-800 ersetzen, Bild-Assets aufgrund abgelaufener CDN-URLs verlieren oder Schriftarten übersehen würde.

Wichtige Funktionen und Prozess

• Extrahiert exaktes HTML/CSS aus Stitch über MCP – kein Kopieren/Einfügen oder Screenshots
• Bewahrt exakte Pixelwerte durchgängig (text-[15px] bleibt text-[15px], wird nicht auf eine Tailwind-Klasse gerundet)
• Lädt alle Bilder von der Stitch-CDN herunter, bevor die URLs ablaufen
• Ordnet alle 29 Stitch-Schriftarten korrekt next/font/google zu
• Enthält 5 obligatorische Verifizierungsprüfpunkte, die die Ausgabe vor dem Fortfahren mit der Quelle vergleichen
• Erstellt einen vollständigen Prüfbericht, der genau zeigt, was bewahrt wurde und wo Entscheidungen erforderlich waren
• Unterstützt ShadCN/UI-Komponentenzuordnung mit exakten Stilüberschreibungen

Installation und Einrichtung

Installieren mit: curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash

Die Installation konfiguriert den stitch-mcp-Server automatisch.

Warum Verifizierungsprüfpunkte notwendig sind

Die Verifizierungsprüfpunkte beheben Claudes Tendenz, bei freier Hand zu Tailwind-Konventionen abzudriften. Die Fähigkeit markiert dieses Muster explizit und erzwingt eine erneute Überprüfung in jeder Phase. Obwohl nicht narrensicher, fängt dieser Ansatz häufige Fehlerquellen ab, bevor sie sich verstärken.

Das Tool ist auf GitHub verfügbar: https://github.com/yshaish1/stitch-to-nextjs