Wie man die Entwicklungszeit verkürzt, indem man Stitch Design Tokens sofort auf Themenvariablen abbildet
makedream١٤ مايو ٢٠٢٦
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
Für Entwickler, die Services alleine aufbauen, ist Design oft ein Kopfzerbrechen. Selbst wenn man Bildschirme mit KI erstellt, ist es ermüdend, jeden einzelnen Farbwert manuell in den Code zu kopieren. Durch die Kombination von Stitch aus den Google Labs und Claude von Anthropic lässt sich dieser mühsame Prozess automatisieren. Hier sind die technischen Schritte zusammengefasst, um nicht nur hübsche Bilder, sondern tatsächlich funktionierende Produkte zu erstellen.
Stitch nutzt Gemini 2.5 Pro, um natürliche Sprache in eine Datei namens DESIGN.md umzuwandeln. Diese enthält Vereinbarungen wie Markenfarben oder Schriftgrößen. Es ist Zeitverschwendung, Stile manuell einzeln anzuwenden. Änderungen im Design-System müssen direkt in den Code einfließen.
npx @_davideast/stitch-mcp init im Terminal aus, um das Projekt zu verknüpfen.DESIGN.md zu lesen und die tailwind.config.js zu aktualisieren.Durch diesen Prozess lässt sich die Zeit für manuelles Styling um mehr als 80 % reduzieren. Entwickler können mehr Zeit für die Geschäftslogik aufwenden, anstatt Hex-Codes abzugleichen. Da Designänderungen mit einer einzigen Befehlszeile auf die gesamte Codebasis angewendet werden können, ist es zudem einfach, die Konsistenz zu wahren.
In der Phase, in der statische Bildschirme zum Leben erweckt werden, sind die interaktiven Kommentare von Claude Design äußerst nützlich. Das liegt daran, dass Claude den intern funktionierenden Code direkt rendert. Dies glänzt besonders bei der Definition von leicht zu übersehenden Ausnahmesituationen wie Lade-Spinnern oder Feedback nach dem Absenden eines Formulars.
Laden Sie die in Stitch erstellte UI in Claude Design hoch und klicken Sie auf eine bestimmte Schaltfläche. Hinterlassen Sie einfach einen Kommentar wie: "Beim Hovern soll es um das 1,05-fache vergrößert werden, beim Klicken in den Ladezustand wechseln und nach 2 Sekunden eine Erfolgsmeldung anzeigen." Claude liefert daraufhin React-Code basierend auf Framer Motion. Kopieren Sie diesen Code einfach und fügen Sie ihn in Ihr Projekt ein. Visuelle Absicht und logische Struktur werden so gleichzeitig gelöst.
Bilder, die mit dem Nano Banana-Modell von Stitch erstellt wurden, haben eine gute Qualität, sind aber Rasterdateien mit undurchsichtigem Hintergrund. Um sie direkt in einem echten Service zu verwenden, ist die Dateigröße oft zu groß und der Hintergrund muss entfernt werden. Mit der Methode des Difference Matting lassen sich transparente Bilder gewinnen, bei denen selbst feine Schatten erhalten bleiben.
Am saubersten lässt sich dies über ein Automatisierungsskript lösen:
cwebp in das WebP-Format. Die Dateigröße wird dadurch um mehr als 30 % im Vergleich zum Original reduziert./public/assets von Next.js sendet, mit Ihrer Deployment-Pipeline.Dies beschleunigt die Ladezeit der Website und spart Serverkosten. Sie befreien sich von der mühsamen Arbeit, Hintergründe manuell in Photoshop auszuschneiden.
KI-generierter Code befindet sich oft in einem "Spaghetti-Zustand", bei dem die gesamte Logik in einer einzigen Datei zusammengefasst ist. Das mag im Moment funktionieren, bereitet aber später beim Ändern Kopfschmerzen. Daher ist ein Refactoring, das visuelle Elemente und Logik trennt, unerlässlich.
Lagern Sie zunächst Elemente wie Schaltflächen oder Karten in den Ordner /components/ui aus. Schreiben Sie dann für alle Komponenten ein TypeScript interface Props. Passen Sie fest kodierte Texte so an, dass sie über children empfangen werden. Geben Sie der KI schließlich den Befehl: "Verwende für alle Farben nur Themenvariablen und keine direkten Farbcodes", um den Code zu bereinigen.
Solche Aufgaben verlangsamen die anfängliche Release-Geschwindigkeit nicht wesentlich, wirken aber wie eine Versicherung gegen technische Schulden in der Zukunft. Letztendlich zeigt sich die Kompetenz eines Einzelunternehmers nicht darin, wie gut er KI-Tools beherrscht, sondern in der Designfähigkeit, fragmentierte Tools zu einer reibungslosen Pipeline zu verknüpfen.