Code to Design

Was macht Code to Design?

Transformieren Sie Ihren vorhandenen Frontend-Code (React + Vite, Next.js, Angular, Vue, usw.) in ein Stitch-Design, damit Sie ihn mit Stitch iterieren und verbessern können.

Dieses Skill orchestriert drei andere Skills in einer Sequenz:

1. extract-static-html: Extrahiert eine einzelne, in sich geschlossene HTML-Datei aus Ihrem Build-Output oder einem laufenden Dev-Server (z.B. Vite Dev-Server oder Angular CLI ng serve).
2. extract-design-md: Analysiert den Quellcode (einschließlich Angular angular.json, externe .html-Templates, Theme-Dateien und Komponenten), um ein Design-System (DESIGN.md) zu erstellen.
3. upload-to-stitch: Lädt diese HTML-Datei und das Design-System in Ihr Stitch-Projekt hoch.

Workflow

Befolgen Sie diese Schritte, um Ihren vorhandenen Code zu konvertieren.

Voraussetzungen

• Ein laufender lokaler Dev-Server (z.B. npm run dev, ng serve) ODER ein Build-Verzeichnis der Webanwendung, das index.html und Assets enthält.
• Ziel-Stitch projectId (verwenden Sie list_projects, falls unbekannt).

Schritte

1. Selbstständiges HTML extrahieren

Delegieren Sie an das Skill extract-static-html, um eine eigenständige HTML-Datei zu generieren. Lesen Sie skills/extract-static-html/SKILL.md für detaillierte Anweisungen und Skriptnutzung.

Erwartete Ausgabe: Eine einzelne Datei wie /path/to/extracted/standalone.html.

2. HTML überprüfen (Optional – Benutzergesteuert)

Informieren Sie den Benutzer nach der Extraktion über den Pfad der Ausgabedatei, damit dieser sie bei Bedarf manuell in einem Browser überprüfen kann. Blockieren Sie nicht aufgrund der Überprüfung – fahren Sie direkt mit Schritt 3 fort.

Wenn der Benutzer nach der Überprüfung Probleme meldet, beheben Sie diese, bevor Sie fortfahren.

3. Design-System extrahieren (Datei)

Delegieren Sie an das Skill extract-design-md, um die Quelldateien des Projekts zu analysieren (Komponenten, Stylesheets, Theme-Konfigurationen) und ein Design-System zu erstellen. Lesen Sie skills/extract-design-md/SKILL.md für den vollständigen Analyse-Workflow.

Schreiben Sie .stitch/DESIGN.md gemäß der Ausgabestruktur des Skills extract-design-md.

4. DESIGN.md hochladen und Design-System in Stitch erstellen

Delegieren Sie an das Skill manage-design-system, um die DESIGN.md hochzuladen und das Design-System in Stitch zu erstellen. Lesen Sie skills/manage-design-system/SKILL.md für den vollständigen Workflow (Skriptnutzung, create_design_system_from_design_md-Aufruf und erforderliche Schemas). Übergeben Sie --generated-by 'stitch::code-to-design' beim Hochladen.

5. HTML in Stitch hochladen

Verwenden Sie dasselbe Skript des Skills upload-to-stitch, um die extrahierte HTML-Datei hochzuladen. Lesen Sie skills/upload-to-stitch/SKILL.md für detaillierte Anweisungen und Skriptnutzung.

Sie benötigen:

• Den Pfad zur eigenständigen HTML-Datei, die in Schritt 1 generiert wurde.
• Ihren Stitch API-Key (derselbe Schlüssel wie in Schritt 4).
• Die Ziel-projectId.
• Das --generated-by-Argument, das auf 'stitch::extract-static-html' gesetzt ist.
• Das --title-Argument, das auf den Routenpfad der Seite gesetzt ist (z.B. '/dashboard', '/settings/profile', '/inbox'), damit der Bildschirmname/Titel in Stitch seine Route in der Anwendung eindeutig identifiziert.