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

✍️ OpenClawRadar📅 Veröffentlicht: 13. April 2026🔗 Source
Claude Code Skill wandelt Stickdesigns in Next.js um – ohne Pixelversatz
Ad

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
Ad

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

Ad

👀 Siehe auch

Open-Source-Methodik für eine partnerschaftliche KI-Entwicklung mit Claude
Werkzeuge

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.

OpenClawRadar
Claude Code-Fähigkeit erstellt App Store-Screenshots mit Gemini AI
Werkzeuge

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.

OpenClawRadar
AgentMail-Gründer erläutert agentennatives Onboarding nachdem OpenClaw CAPTCHA-Block aufdeckte
Werkzeuge

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.

OpenClawRadar
Claude Usage Monitor: Kostenlose macOS-Menüleisten-App zur Überwachung der Claude.ai-Limits
Werkzeuge

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.

OpenClawRadar