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
Benutzerdefinierte llama.cpp-Backend verlagert LLM-Matrixmultiplikation auf AMD XDNA2 NPU in Ryzen AI MAX 385
Ein Entwickler hat ein benutzerdefiniertes llama.cpp-Backend erstellt, das GEMM-Operationen direkt an den AMD XDNA2 NPU auf Ryzen AI MAX 385 (Strix Halo) weiterleitet und dabei 43,7 t/s Dekodierung bei 0,947 J/tok mit Meta-Llama-3.1-8B-Instruct Q4_K_M erreicht. Der NPU-Dekodierungspfad spart im Vergleich zu reinem Vulkan etwa 10W, während der Dekodierungsdurchsatz gleich bleibt.
„Gefundene-Probleme“-Plugin protokolliert Fehler, die Claude bei anderen Aufgaben ignoriert
Ein Claude Code Plugin, das einzeilige Einträge in docs/found-issues.md schreibt, wenn der Agent Bugs außerhalb des Aufgabenbereichs entdeckt, mit automatischer Schließung bei PR-Merge und Tombstone-Erkennung.
Claude File History: VS-Code-Erweiterung zur Verfolgung von Claude-Code-Sitzungen
Eine VS Code-Erweiterung namens Claude File History verfolgt jede Claude Code-Sitzung, die Ihre Dateien berührt hat, sodass Sie frühere Gespräche finden, eine Vorschau der Diskussionen anzeigen und Gespräche per Doppelklick fortsetzen können.
Vorab: Ein Claude-Code-Plugin, das zum Nachdenken vor dem Programmieren zwingt
Upfront ist ein Claude Code-Plugin mit 20 Fähigkeiten, das Entwickler herausfordert, bevor es Code generiert. Es verwendet drei Befehle: /upfront:feature, um vage Anforderungen zurückzuweisen, /upfront:plan, um Arbeit in Phasen von etwa 400 LOC zu unterteilen, und /upfront:build, um mit TDD und Überprüfung pro Phase auszuführen.