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-Methodik für eine partnerschaftliche KI-Entwicklung mit Claude
Ein Entwickler hat ein 25.000 Wörter umfassendes Papier veröffentlicht und Open-Source-Vorlagen für den Aufbau eines persistenten Partnerschaftssystems mit Claude bereitgestellt, das gemeinsamen Speicher über Sitzungen hinweg, kognitive Überwachung und Multi-KI-Beratung nutzt.
Claude Code-Fähigkeit erstellt App Store-Screenshots mit Gemini AI
Eine neue Claude Code-Fähigkeit namens /aso-cosmicmeta-ss erstellt App Store- und Google Play-Screenshots über einen 6-Phasen-Workflow, der Codebasen analysiert und Gemini AI zur Verbesserung nutzt. Die Fähigkeit enthält eine Freigabestufe, um Layoutprobleme zu erkennen, bevor API-Guthaben verwendet werden.
AgentMail-Gründer erläutert agentennatives Onboarding nachdem OpenClaw CAPTCHA-Block aufdeckte
AgentMail, eine E-Mail-API für KI-Agenten, hat seinen Onboarding-Prozess neu aufgebaut, nachdem sein eigener OpenClaw-Agent an einem Cloudflare-CAPTCHA gescheitert war. Das neue System bietet einen einzigen REST-Endpunkt für die programmatische Kontenerstellung, während Menschen für die Verifizierung im Prozess bleiben.
Claude Usage Monitor: Kostenlose macOS-Menüleisten-App zur Überwachung der Claude.ai-Limits
Ein Entwickler hat Claude Usage Monitor erstellt, eine kostenlose macOS-Menüleisten-App, die die Claude.ai-Nutzung mit farbcodierten Symbolen, Live-Zählern und Reset-Timern anzeigt. Die App liest direkt aus Claude.ai-Sitzungen, ohne dass ein API-Schlüssel erforderlich ist.