Communitygithub.com

aubarcito48/portfolio

Erstelle neue Bildschirme aus Text- oder Bildvorlagen, bearbeite bestehende Bildschirme mit Prompts und Design-System-Tokens und generiere Designvarianten mit Stitch MCP. Inklusive Prompt-Verbesserungspipeline, Design-Mappings, professioneller UI/UX-Terminologie, Design-Tokens und Theme-System-Funktionen.

Was ist portfolio?

Diese Fähigkeit ermöglicht es Entwicklern und KI-Agenten, Design-Screens effizient in Stitch zu erstellen, zu bearbeiten und zu variieren. Sie unterstützt die Erstellung neuer Screens aus Textbeschreibungen oder Bildern, das gezielte Editieren bestehender Screens mit spezifischen Anweisungen und das Generieren von Layout-, Farb- oder Inhaltsvarianten. Die integrierte Prompt-Verbesserungspipeline ersetzt vage UI-Begriffe durch professionelle Terminologie und stellt sicher, dass generierte Designs nahtlos mit dem projektweiten Design-System harmonieren – ohne Konflikte durch doppelte Farb-, Schrift- oder Theme-Angaben. Nach jeder Aktion werden die Ergebnisse (HTML- und Screenshot-URLs) automatisch in das lokale `.stitch/designs`-Verzeichnis heruntergeladen und die Projekt-Metadaten aktualisiert. Die Fähigkeit ist für den Einsatz mit dem Stitch MCP optimiert und unterstützt die Modi „Aus Text generieren“, „Aus Bild generieren“, „Bearbeiten“ und „Varianten generieren“.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/aubarcito48/portfolio/tree/HEAD/.agents/skills/stitch-generate-design
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Design generieren

Erstelle neue Design-Bildschirme aus Textbeschreibungen, Bildern oder Mockups, bearbeite bestehende Bildschirme mit Prompts und Design-System-Tokens und generiere Designvarianten mit Stitch MCP.

[!NOTE] Beachte die Anweisungen in deinem System-Prompt zur Behandlung von MCP-Tool-Präfixen für alle in dieser Fähigkeit genannten Tools (z. B. list_projects, generate_screen_from_text, edit_screens).

🎨 Prompt-Verbesserungspipeline

Bevor du ein Stitch-Generierungs- oder -Bearbeitungstool aufrufst, MUSST du den Prompt des Benutzers verbessern.

1. Kontext analysieren

  • Projekt: Verwende list_projects, um die korrekte projectId zu finden. Falls kein passendes Projekt existiert, erstelle eines mit create_project.
  • Design-System: Prüfe mit list_design_systems, ob für das Projekt ein Design-System existiert. Falls ja, werden Design-Tokens (Farben, Schriften, Rundungen) bereits auf Projektebene angewendet – füge KEINE Farb-, Schrift- oder Theme-Anweisungen in den Generierungs-Prompt ein. Falls kein Design-System existiert, delegiere zuerst an die Fähigkeit manage-design-system, bevor du Bildschirme generierst.

2. UI/UX-Terminologie verfeinern

Ziehe die Design-Mappings zu Rate, um vage Begriffe zu ersetzen.

  • Vage: „Erstelle einen schönen Header“
  • Professionell: „Sticky-Navigationsleiste mit Glassmorphismus-Effekt und zentriertem Logo“

Verwende die Prompting-Keywords für Komponentennamen, Adjektivpaletten, Farbrollen und Formbeschreibungen.

3. Finalen Prompt strukturieren

Formatiere den verbesserten Prompt für Stitch. Konzentriere dich ausschließlich auf Layout, Inhalt und Struktur – füge niemals Farben, Schriften oder Theme-Anweisungen ein (diese werden von der Fähigkeit manage-design-system auf Projektebene behandelt).

Für neue Bildschirme verwende diese Vorlage:

[Allgemeiner Zweck und Benutzerintention der Seite]

**PLATTFORM:** [Web/Mobil], [Desktop/Mobil]-first

**SEITENSTRUKTUR:**
1. **Header:** [Beschreibung der Navigation und des Brandings]
2. **Hero-Bereich:** [Überschrift, Untertext und primärer CTA]
3. **Primärer Inhaltsbereich:** [Detaillierte Komponentenaufschlüsselung]
4. **Footer:** [Links und Urheberrechtsinformationen]

Für Bearbeitungen sei spezifisch, was geändert werden soll:

  • Ort: „Ändere die [primäre Schaltfläche] im [Hero-Bereich]...“
  • Visuelles: „...zu einem dunkleren Blau (#004080) und füge einen dezenten Schatten hinzu.“
  • Struktur: „Füge eine sekundäre Schaltfläche neben der primären hinzu mit dem Text 'Mehr erfahren'.“

[!CAUTION] Füge KEINE Hex-Codes, Schriftnamen, Farbpaletten, Rundungswerte oder andere Design-System-Tokens in einen Generierungs-Prompt ein. Diese werden auf Projektebene durch die Fähigkeit manage-design-system angewendet und würden bei Doppelung zu Konflikten führen. (Für Bearbeitungs-Prompts sind Hex-Codes für präzise Farbanpassungen akzeptabel.)

4. KI-Erkenntnisse präsentieren

Zeige dem Benutzer nach jedem Tool-Aufruf stets die outputComponents (Textbeschreibung und Vorschläge) an.

Siehe examples/enhanced-prompt.md für ein vollständiges Vorher/Nachher-Beispiel der Prompt-Verbesserung.

Schritte

Modus bestimmen

Entscheide anhand des Benutzerwunsches, welcher Ablauf verwendet wird:

  • Benutzer möchte aus einer Textbeschreibung erstellen → Ablauf Aus Text generieren
  • Benutzer stellt ein Bild, einen Screenshot oder ein Mockup bereit → Ablauf Aus Bild generieren
  • Benutzer möchte einen vorhandenen Bildschirm ändern → Ablauf Bearbeiten
  • Benutzer möchte Layout-/Farb-/Inhaltsvarianten → Ablauf Varianten generieren

Ablauf „Aus Text generieren“ (Neuer Bildschirm)

1. Benutzer-Prompt verbessern

Wende die oben beschriebene Prompt-Verbesserungspipeline an.

2. Projekt identifizieren

Verwende list_projects, um die korrekte projectId zu finden, falls sie nicht bereits bekannt ist.

3. Bildschirm generieren

Rufe das Tool generate_screen_from_text mit dem verbesserten Prompt und der designSystem-ID (falls in Schritt 1 gefunden) auf.

{
  "projectId": "...",
  "prompt": "[Dein verbesserter Prompt]",
  "designSystem": "assets/...", // Optional: übergeben, falls in Schritt 1 gefunden
  "deviceType": "DESKTOP"  // Optionen: MOBILE, DESKTOP, TABLET
}

4. KI-Feedback präsentieren

Zeige dem Benutzer stets die Textbeschreibung und Vorschläge aus outputComponents an.

5. Design-Assets herunterladen

Lade nach der Generierung die HTML- und Screenshot-URLs aus outputComponents in das Verzeichnis .stitch/designs herunter.

  • Benennung: Verwende die Bildschirm-ID oder einen beschreibenden Slug für den Dateinamen.
  • Tools: Verwende curl -o über run_command oder ähnliches.
  • Verzeichnis: Stelle sicher, dass .stitch/designs existiert.

6. Überprüfen und verfeinern

  • Falls das Ergebnis nicht genau den Erwartungen entspricht, fahre mit dem Ablauf Bearbeiten fort, um gezielte Anpassungen vorzunehmen.
  • Generiere NICHT von Grund auf neu, es sei denn, das grundlegende Layout ist falsch.

Ablauf „Aus Bild generieren“ (Bild/Mockup → Design)

Verwende diesen Ablauf, wenn der Benutzer ein Bild, einen Screenshot oder ein Design-Mockup bereitstellt, das in Stitch nachgebildet werden soll.

1. Projekt identifizieren

Verwende list_projects, um die korrekte projectId zu finden. Falls kein passendes Projekt existiert, erstelle eines mit create_project.

2. Bild hochladen

Delegiere an die Fähigkeit upload-to-stitch, um das Bild in das Projekt hochzuladen. Dadurch wird ein neuer Bildschirm mit dem Bild als Inhalt erstellt.

3. Mit Bearbeitung verfeinern

Verwende nach dem Upload list_screens, um die neu erstellte screenId zu finden, und rufe dann edit_screens mit einem beschreibenden Prompt auf, um das Design zu verfeinern:

{
  "projectId": "...",
  "selectedScreenIds": ["<hochgeladene-screen-id>"],
  "prompt": "[Beschreibe, was an diesem Mockup angepasst, verbessert oder nachgebildet werden soll]"
}

[!TIP] Für beste Ergebnisse beschreibe die Absicht hinter dem Bild, anstatt nur zu sagen „mach es so aussehen wie dieses“. Zum Beispiel: „Dies ist ein Dashboard-Mockup – erstelle es mit einer ordentlichen Datentabelle, seitlicher Navigation und Diagramm-Widgets.“

4. KI-Feedback präsentieren

Zeige dem Benutzer stets die Textbeschreibung und Vorschläge aus outputComponents an.

5. Design-Assets herunterladen

Lade die HTML- und Screenshot-URLs aus outputComponents in das Verzeichnis .stitch/designs herunter.

  • Benennung: Verwende die Bildschirm-ID oder einen beschreibenden Slug für den Dateinamen.
  • Tools: Verwende curl -o über run_command oder ähnliches.
  • Verzeichnis: Stelle sicher, dass .stitch/designs existiert.

Ablauf „Bearbeiten“ (Vorhandenen Bildschirm ändern)

1. Bildschirm identifizieren

Verwende list_screens oder get_screen, um die korrekte projectId und screenId zu finden.

2. Bearbeitungs-Prompt formulieren

Wende die Prompt-Verbesserungspipeline an und achte auf Spezifität:

  • Ort: „Ändere die Farbe der [primären Schaltfläche] im [Hero-Bereich]...“
  • Visuelles: „...zu einem dunkleren Blau (#004080) und füge einen dezenten Schatten hinzu.“
  • Struktur: „Füge eine sekundäre Schaltfläche neben der primären hinzu mit dem Text 'Mehr erfahren'.“

3. Bearbeitung anwenden

Rufe das Tool edit_screens auf.

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Dein gezielter Bearbeitungs-Prompt]"
}

4. KI-Feedback präsentieren

Zeige dem Benutzer stets die Textbeschreibung und Vorschläge aus outputComponents an.

5. Design-Assets herunterladen

Lade nach der Bearbeitung die aktualisierten HTML- und Screenshot-URLs aus outputComponents in das Verzeichnis .stitch/designs herunter. Überschreibe dabei vorherige Versionen, um sicherzustellen, dass die lokalen Dateien die neuesten Bearbeitungen widerspiegeln.

  • Benennung: Verwende die Bildschirm-ID oder einen beschreibenden Slug für den Dateinamen.
  • Tools: Verwende curl -o über run_command oder ähnliches.
  • Verzeichnis: Stelle sicher, dass .stitch/designs existiert.

6. Projekt-Metadaten aktualisieren

Aktualisiere nach dem Herunterladen der Assets .stitch/metadata.json, um Änderungen widerzuspiegeln (z. B. aktualisierte Bildschirmtitel oder neue Bildschirm-IDs aus der Bearbeitung). Die Metadaten-Datei verfolgt alle Bildschirme, ihre Gerätetypen und Design-System-Informationen. Siehe das examples/metadata.json der Fähigkeit manage-design-system für das Format.

7. Überprüfen und wiederholen

  • Überprüfe den Ausgabe-Bildschirm, ob die Änderungen korrekt angewendet wurden.
  • Falls weitere Verfeinerungen nötig sind, wiederhole den Bearbeitungsablauf mit einem neuen spezifischen Prompt.

Ablauf „Varianten generieren“ (Varianten erkunden)

Verwende diesen Ablauf, wenn der Benutzer alternative Layouts, Farbschemata oder Inhaltsvarianten eines vorhandenen Bildschirms erkunden möchte.

1. Bildschirm identifizieren

Verwende list_screens oder get_screen, um die korrekte projectId und screenId zu finden.

2. Variantenoptionen konfigurieren

Rufe das Tool generate_variants mit den entsprechenden Optionen auf:

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Beschreibe die Richtung für die Varianten]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

Variantenoptionen:

  • variantCount: 1–5 Varianten (Standard: 3)
  • creativeRange: REFINE (subtil), EXPLORE (ausgewogen) oder REIMAGINE (radikal)
  • aspects: Fokussiere auf bestimmte Dimensionen – LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT oder leer lassen für alle

3. KI-Feedback präsentieren

Zeige dem Benutzer stets die Textbeschreibung und Vorschläge aus outputComponents an.

4. Design-Assets herunterladen

Lade die HTML- und Screenshot-URLs der Varianten aus outputComponents in das Verzeichnis .stitch/designs herunter.

  • Benennung: Verwende die Bildschirm-ID oder einen beschreibenden Slug für den Dateinamen.
  • Tools: Verwende curl -o über run_command oder ähnliches.
  • Verzeichnis: Stelle sicher, dass .stitch/designs existiert.

💡 Tipps

  • Sei strukturell: Zerlege die Seite in Header, Hero, Funktionen und Footer in deinem Prompt.
  • Inhalt zuerst: Beschreibe, was jeder Abschnitt enthält (Text, Bilder, CTAs), nicht wie er aussieht.
  • Iterative Verfeinerung: Bevorzuge Bearbeitungen für gezielte Anpassungen gegenüber einer vollständigen Neugenerierung.
  • Kein Theme-Leakage: Füge niemals Hex-Codes, Schriftnamen oder Farbrollen in einen Generierungs-Prompt ein – das Design-System übernimmt das gesamte visuelle Styling.
  • Interaktionen angeben: Erwähne Hover-Zustände, Animationen und Klickverhalten statt visueller Gestaltung.
  • Bearbeitungen fokussiert halten: Eine Bearbeitung auf einmal ist oft besser als eine lange Liste von Änderungen.
  • Komponenten referenzieren: Verwende professionelle Begriffe wie „Navigationsleiste“, „Hero-Bereich“, „Footer“, „Kartenraster“.
  • Präzise Farben bei Bearbeitungen: Verwende Hex-Codes für exakte Farbabstimmung beim Bearbeiten vorhandener Bildschirme.

📚 Referenzen

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

aubarcito48/portfolio

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

aubarcito48/portfolio

>- Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.

aubarcito48/portfolio

>- Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code.

aubarcito48/portfolio

>- Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community