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
📖 Read the full source: r/ClaudeAI
👀 Siehe auch

Open-Source-Persistenzspeichersystem für Claude Code löst Kontextverlust zwischen Sitzungen
Ein Entwickler hat ein dateibasiertes Speichersystem für Claude Code erstellt, das automatisch Projektkontext erfasst, ohne Plugins oder API-Schlüssel zu benötigen. Es nutzt Konversationsprotokolle, eine Eingangsdatei und nächtliche Cron-Jobs, um dauerhaften Speicher über Sitzungen hinweg zu erhalten.

PicoClaw scheitert am Bau eines F1-KI-Agents und verbrennt 20 US-Dollar an API-Guthaben.
Ein Entwickler versuchte, einen F1-Informationsbot mit PicoClaw auf einem Raspberry Pi Zero 2W zu erstellen, doch das Tool nutzte standardmäßig Version 11, erzeugte halluzinierte Python-Codes und verbrauchte 20 US-Dollar an DeepSeek-API-Guthaben, ohne eine funktionierende Lösung zu liefern.

Claude Code Best Practice Repo erreicht 50k Sterne, vollständig mit KI-Agenten erstellt
Ein GitHub-Repository vollgepackt mit Claude-Best-Practices, das zu 100 % von autonomen Claude-Code-Workflows entwickelt und gepflegt wird, hat 50.000 Sterne überschritten – und ist damit das meistgestirnte Repository Pakistans im Jahr 2026.

Aurelius: Ein React-Framework, entwickelt mit 48 Claude Code Agents und einer Figma-zu-React-Pipeline
Aurelius ist ein Open-Source-React-Framework, das 48 hierarchisch organisierte Claude-Code-Agenten nutzt, um autonom React-Anwendungen aus Figma-Designs zu erstellen. Das Framework erzwingt TDD, visuelle QA mit Pixel-Differenz-Vergleich und Qualitätskontrollen vor dem Deployment.