majiayu000/claude-skill-registry

Web Design Wizard

Übersicht

Generiere mehrere unterschiedliche Designstile für eine Webseite in parallelen Worktrees, sodass der Nutzer vergleichen und verfeinern kann, bevor er sich auf eine Richtung festlegt. Kernprinzip: divergent erkunden, dann auf die beste Option konvergieren.

Wann verwenden

• Der Nutzer möchte verschiedene Designstile für eine Webseite erkunden
• Der Nutzer fragt nach Designoptionen, visueller Richtung oder Stilvergleich
• Der Nutzer möchte mehrere Implementierungen zur Auswahl

NICHT verwenden, wenn:

• Der Nutzer bereits ein spezifisches Design definiert hat → saurun:react-tailwind-v4-components oder frontend-design direkt verwenden
• Der Nutzer ein bestehendes Design modifizieren möchte, anstatt neue zu erstellen

Voraussetzungen

Alle folgenden Fähigkeiten müssen installiert sein. Wenn eine fehlt, anhalten und den Nutzer informieren.

Fähigkeit	Verwendet in	Zweck
ui-ux-pro-max	Phase 2	Design-System-Generierung
superpowers:using-git-worktrees	Phase 6	Parallele Worktree-Einrichtung
frontend-design	Phase 6	Produktionsreife Implementierung
vercel-react-best-practices	Phase 6	React-Optimierung
copywriting	Phase 6	Text-Verfeinerung
nano-banana-pro	Phase 6	Bildgenerierung — Installation: npx skills add intellectronica/agent-skills@nano-banana-pro -g -y

Workflow

digraph design_wizard {
    "Benutzeranfrage" [shape=doublecircle];
    "Discovery" [shape=box];
    "Stil-Generierung" [shape=box];
    "Nutzer zufrieden?" [shape=diamond];
    "Verfeinerung" [shape=box];
    "Grafik-Präferenz" [shape=box];
    "Projekt-Einrichtung" [shape=box];
    "Parallele Implementierung" [shape=box];
    "Parallele Verifikation" [shape=box];
    "Fertig" [shape=doublecircle];

    "Benutzeranfrage" -> "Discovery";
    "Discovery" -> "Stil-Generierung";
    "Stil-Generierung" -> "Nutzer zufrieden?";
    "Nutzer zufrieden?" -> "Verfeinerung" [label="nein"];
    "Verfeinerung" -> "Nutzer zufrieden?";
    "Nutzer zufrieden?" -> "Grafik-Präferenz" [label="ja"];
    "Grafik-Präferenz" -> "Projekt-Einrichtung";
    "Projekt-Einrichtung" -> "Parallele Implementierung";
    "Parallele Implementierung" -> "Parallele Verifikation";
    "Parallele Verifikation" -> "Fertig";
}

Phase 1: Discovery

Verwende AskUserQuestion, um Kontext zu sammeln. Batch-Fragen — bis zu 4 Fragen pro Aufruf. Offensichtliche Antworten ableiten (z. B. ein Café ist verbraucherorientiert, wahrscheinlich warme Stimmung).

Sammeln:

1. Projektname — aus package.json oder Git-Repo-Namen erkennen, mit Nutzer bestätigen
2. Seitentyp — Landing, Portfolio, Blog, E-Commerce, SaaS, Dokumentation
3. Zielgruppe — Fachleute, Verbraucher, Entwickler, Kreativbranche
4. Stimmung/Gefühl — Professionell, Verspielt, Luxuriös, Minimalistisch, Mutig, Warm, Futuristisch
5. Inhaltssprache — Englisch, Dänisch, etc.
6. Stilpräferenzen/Anti-Präferenzen — nur, wenn nicht offensichtlich

Fragen überspringen, wenn die Antwort aus der Anfrage des Nutzers offensichtlich ist.

Phase 2: Stil-Generierung

Designstile mit ui-ux-pro-max generieren:

Standard: 4 Stile (Nutzer kann andere Anzahl anfordern).

Für jeden Stil:

1. Vielfältige Schlüsselwörter aus den Discovery-Antworten erstellen. Kombinieren: Seitentyp + Zielgruppe + Stimmung + einzigartige Ästhetik. Sicherstellen, dass alle Stile variieren.

2. Design-System generieren: ui-ux-pro-max über das Skill-Tool mit Argumenten aufrufen: "[Schlüsselwörter]" --design-system --persist -p "[ProjektName]" --page "[Stilname]" Speichert unter: design-system/pages/[Stilname].md im aktuellen Arbeitsverzeichnis.

3. Dem Nutzer präsentieren mit: Stilname, Hauptfarben, Typografie, Stimmungs-Adjektive und bester Anwendungsfall.

Generierte Stile verfolgen, um doppelte Schlüsselwörter in Verfeinerungsrunden zu vermeiden.

Phase 3: Verfeinerung (Iterativ)

Nutzer sagt	Aktion
"Gib mir N komplett andere Stile"	N NEUE Stile mit unterschiedlichen Schlüsselwörtern generieren
"Gib mir N weitere Optionen"	N NEUE generieren (vorherige Schlüsselwörter vermeiden)
"Ich mag X und Y, gib mir mehr wie X"	X & Y behalten, Variationen von X generieren
"Kombiniere Stile X und Y"	1 neuen generieren, der diese Ästhetiken mischt
"Implementiere X, Y, Z" oder "Implementiere alle"	Mit Auswahl zu Phase 4 wechseln

Phase 4: Grafik-Präferenz

Vor der Implementierung nach Grafiken für alle ausgewählten Stile auf einmal fragen:

Verwende AskUserQuestion mit Optionen:

• "Viele Grafiken für alle (Hero + Akzentgrafiken + Illustrationen)"
• "Minimale Grafiken für alle (nur Hero-Bild)"
• "Das Design bestimmt die Grafiken" (Empfohlen)
• "Ich möchte pro Stil wählen"

Nur pro Stil fragen, wenn der Nutzer die letzte Option wählt.

Phase 5: Projekt-Einrichtung

Projektort bestätigen

Vorschlag: designs/[Projektname]/ im aktuellen Arbeitsverzeichnis.

Nutzer bitten, zu bestätigen oder zu überschreiben.

Projekt erstellen

1. mkdir -p [Ort]
2. concept.md schreiben — siehe concept-template.md für die Vorlage. Aus den Discovery-Antworten befüllen. Nur Felder ausfüllen, zu denen du Daten hast — Abschnitte ohne Informationen weglassen.
3. git init NICHT ausführen — das bestehende Repo verwenden. Projektdokumente im aktuellen Branch committen.

git add designs/[Projektname]/concept.md
git commit -m "docs: [Projektname] Design-Exploration initialisieren"

Projektstruktur

[Repo-Wurzel]/
├── designs/[Projektname]/
│   └── concept.md
├── design-system/pages/
│   ├── [Stil-1].md
│   └── [Stil-2].md
└── .worktrees/
    ├── [Stil-1-Branch]/    # React + Vite + TypeScript Projekt
    └── [Stil-2-Branch]/

Phase 6: Parallele Implementierung

KRITISCH: Alle Implementierungs-Agenten in EINER EINZIGEN Nachricht mit mehreren Task-Tool-Aufrufen starten.

Für jeden ausgewählten Stil einen Sub-Agenten starten. Siehe implementation-prompt.md für die vollständige Prompt-Vorlage. [absoluter-Pfad-zur-Repo-Wurzel] durch den tatsächlichen Repo-Wurzel-Pfad ersetzen, damit Sub-Agenten Cross-Worktree-Referenzen auflösen können.

Wichtige Punkte für jeden Sub-Agenten:

• superpowers:using-git-worktrees verwenden, um Worktree unter .worktrees/[Stilname]/ zu erstellen
• React + Vite + TypeScript Projekt erstellen: npm create vite@latest . -- --template react-ts
• Design-Spezifikation aus design-system/pages/[Stilname].md lesen
• Skill-Tool verwenden, um aufzurufen: frontend-design, vercel-react-best-practices, copywriting, nano-banana-pro
• Bilder gemäß Grafik-Präferenz generieren
• Mit npm run build bauen, um zu verifizieren
• Alle Änderungen committen

Auf ALLE Agenten warten, bevor Phase 7 beginnt.

Phase 7: Parallele Verifikation

KRITISCH: Alle Verifikations-Agenten in EINER EINZIGEN Nachricht mit mehreren Task-Tool-Aufrufen starten.

Für jede Implementierung einen Verifikations-Sub-Agenten starten. Siehe verification-prompt.md für die vollständige Prompt-Vorlage. Ports sequenziell zuweisen (5173, 5174, 5175, ...) und [absoluter-Pfad-zur-Repo-Wurzel] durch den tatsächlichen Pfad ersetzen.

Verifikationsprüfungen:

• Dev-Server startet ohne Fehler
• Alle URLs/Links sind gültig
• Bilder existieren und sind korrekt referenziert
• Einhaltung der Design-Spezifikation (Farbe, Typografie, Layout, Effekte) — Bewertung 1-10
• Produktions-Build erfolgreich

Nachdem alle fertig sind, Vergleichszusammenfassung anzeigen:

Stil 1: [Name] — ✅ Alles bestanden — Design: 8.5/10
Stil 2: [Name] — ⚠️ 2 defekte URLs — Design: 9.0/10
Stil 3: [Name] — ❌ Build fehlgeschlagen — Siehe Bericht

Den besten Stil basierend auf den Ergebnissen empfehlen.

Kurzreferenz

Phase	Aktion	Wichtiges Werkzeug
1. Discovery	Kontext via AskUserQuestion sammeln (Batch bis zu 4)	AskUserQuestion
2. Stil-Generierung	4 Design-Systeme via ui-ux-pro-max generieren	Skill
3. Verfeinerung	Iterieren, bis der Nutzer Stile auswählt	AskUserQuestion
4. Grafiken	Grafik-Präferenz für ausgewählte Stile erfragen	AskUserQuestion
5. Projekt-Einrichtung	concept.md erstellen, Gerüst committen	Write, Bash
6. Implementierung	Parallele Sub-Agenten pro Stil starten	Task
7. Verifikation	Parallele Verifikations-Agenten starten, Vergleich anzeigen	Task

Häufige Fehler

• Design-Spezifikationen in Sub-Agenten neu generieren — Design-Spezifikationen werden in Phase 2 erstellt. Sub-Agenten LESEN sie, rufen ui-ux-pro-max nie erneut auf.
• Sequenzielles Starten von Sub-Agenten — Phase 6 und 7 MÜSSEN alle Agenten in EINER Nachricht mit mehreren Task-Aufrufen starten. Niemals einzeln.
• Grafik-Präferenz überspringen — immer vor der Implementierung fragen. Nicht annehmen.
• git add . in Worktrees verwenden — nur bestimmte Pfade stagen, um node_modules, .env oder OS-Dateien nicht zu committen.
• Identische Schlüsselwörter über Stile hinweg — verwendete Schlüsselwörter verfolgen, um Vielfalt sicherzustellen. Doppelte Schlüsselwörter erzeugen doppelte Designs.

Fehlerbehandlung

Fehler	Wiederherstellung
ui-ux-pro-max-Skript schlägt fehl	Mit einfacheren Schlüsselwörtern erneut versuchen. Wenn anhaltend, Design-System manuell aus den Stil-Schlüsselwörtern erstellen.
Alle Stile abgelehnt	Nutzer nach spezifischer Richtung fragen: "Was hat dir nicht gefallen? Farben? Layout? Gesamteindruck?"
Sub-Agenten-Fähigkeit nicht gefunden	Der Agent sollte das Skill-Tool zum Aufrufen verwenden. Wenn die Fähigkeit wirklich fehlt, diesen Verbesserungsschritt überspringen und notieren.
Implementierungs-Build schlägt fehl	Im Worktree reparieren, Build erneut ausführen. Problem melden, wenn nicht behebbar.