Design-System als Markdown-Datei exportieren und wiederverwenden
Exportiere dein von Stitch generiertes Design-System als Markdown-Datei, um es in mehreren Projekten zu nutzen und mit anderen KI-Modellen zu integrieren. Dies ermöglicht konsistente AI-generierte Designs über Projekte hinweg.
Originalvideo ansehen: Google just changed the future of UI/UX design...5 Schritte
1
Design-System in Stitch erstellen
Generiere zunächst ein vollständiges Design-System, z.B. durch die Analyse einer bestehenden Website
Tipp: Nutze die URL-Import-Funktion für konsistente Design-Systeme
2
Design-Datei als Markdown exportieren
Navigiere zum Export-Menü und wähle Markdown-Format als Exportziel
Tipp: Die Markdown-Datei enthält alle Design-Tokens und Komponenten-Definitionen
3
Markdown-Datei in Text-Editor öffnen
Öffne die exportierte Datei in einem beliebigen Text-Editor (VS Code, Sublime, etc.)
Tipp: Die Markdown-Struktur ist human-readable und leicht zu verstehen
4
Design-System mit KI-Modellen integrieren
Nutze die Markdown-Datei als Kontext für Claude, OpenAI oder andere Coding-Modelle bei der Implementierung
# Design-System Beispiel
## Farben
- Primary: #3B82F6
- Secondary: #10B981
## Typografie
- Header: Inter, 24px, Bold
- Body: Inter, 16px, RegularTipp: Füge die Markdown-Inhalte als System-Prompt oder Kontext ein
5
Design-System über mehrere Projekte verteilen
Speichere die Markdown-Datei im Repository und referenziere sie in jedem neuen Projekt
Tipp: Dies garantiert Design-Konsistenz über alle Projekte hinweg