Frontend & Design Workflow
Ein Router, kein Monolith. Diese Fähigkeit erledigt nicht die Designarbeit selbst – sie entscheidet, welche spezialisierte Fähigkeit wann ausgeführt wird, und setzt die Disziplinen durch, die verhindern, dass Ergebnisse KI-generiert aussehen. Das eigentliche Handwerk lebt in den zugrunde liegenden Fähigkeiten, die in references/skill-registry.md aufgeführt sind.
Arbeitsprinzipien
- Router, nicht neu erfinden. Jede Stufe benennt die Fähigkeit, die sie besitzt. Wenn diese Fähigkeit nicht installiert ist, gibt
references/skill-registry.mdan, wo sie zu bekommen ist. Implementiere die Aufgabe einer Fähigkeit nicht inline neu. - Recherche vor Pixeln. Öffne niemals eine leere Leinwand kalt. Stufe 1 ist eine grundlegende Voraussetzung für jede echte Designaufgabe.
- Auf Abruf, nicht automatisch. Diese Fähigkeit wird absichtlich (per Name / Slash-Befehl) aufgerufen. Sie installiert keine Hooks und löst nichts von selbst aus. Replikationsschritte (Klonen / Extrahieren) werden vorgeschlagen; der Benutzer zieht den Auslöser.
- Anti-Slop ist ein Tor, kein Vorschlag. Stufe 3 wird vor "fertig" ausgeführt. Das Durchfallen einer P0-Anti-Slop-Regel ist eine Regression, keine Geschmacksfrage.
- Mit einem separaten Durchlauf verifizieren. Die Fähigkeit, die die UI erstellt hat, genehmigt sie nicht. Die Überprüfung ist eine eigene Spur (
design-review/ ein neuer Prüfer).
Der Workflow
┌── Stufe 4: STACK & VOKABULAR (Referenzschicht – während des gesamten Prozesses konsultiert) ──┐
│ tech-stack.md · design-vocabulary.md │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
IDEE ─▶ Stufe 1: RECHERCHE ─▶ Stufe 2: OUTPUT ─▶ Stufe 3: REVIEW ─▶ AUSLIEFERUNG
(Recherche + Klon- (Richtung + (Anti-Slop +
Entscheidung) Hi-Fi-Erstellung) a11y-Tor)
Stufe 1 — Recherche + Klon-Entscheidung → references/stage-1-research-and-clone.md
Führe vor dem Designen eine Runde Wettbewerbs-Motion-Recherche durch und entscheide dann über den Replikationspfad (nur Inspiration / vollständiges Site-Klonen / Einzeleffekt-Extraktion). Besitzt den Entscheidungsbaum, der deep-research → web-clone → web-shader-extractor verknüpft.
Stufe 2 — Design-Output + Richtung → references/stage-2-design-output.md
Erstelle das Hi-Fi-Prototyp / die Seite / die Komponente. Wenn das Briefing vage ist, wechsle zuerst in den Design-Richtungsberater-Modus. Leitet an huashu-design / frontend-design und deren Satelliten (Bewegung, Farbe, Diagramme, Folien, algorithmische Kunst) weiter.
Stufe 3 — Review + Anti-Slop-Tor → references/stage-3-review-anti-slop.md
Führe die sieben Todsünden-Anti-Slop-Checkliste, Animationsdisziplin-Zahlen, Barrierefreiheits-Baseline und einen separaten Design-Review-Durchlauf aus. Dies ist das Auslieferungstor.
Stufe 4 — Stack + Vokabular → references/stage-4-stack-and-vocab.md
Die Referenzschicht, kein sequenzieller Schritt. Wähle Bibliotheken aus tech-stack.md; benenne Mechanismen (nicht Symptome) mit design-vocabulary.md beim Schreiben von Prompts oder beim Review. Wird während 1–3 konsultiert, niemals übersprungen, wenn eine Abhängigkeit oder eine vage Beschreibung auftaucht.
Schnell-Routing-Tabelle
| Der Benutzer ist… | Gehe zu | Primäre Fähigkeit(en) |
|---|---|---|
| Startet eine echte UI-Aufgabe | Zuerst Stufe 1 | deep-research |
| "Diese ganze Seite replizieren" | Stufe 1 → Klon-Zweig | web-clone |
| "Nur diesen Hintergrund-Effekt holen" | Stufe 1 → Extraktions-Zweig | web-shader-extractor |
| "Ein Prototyp / eine Seite / eine Komponente erstellen" | Stufe 2 | huashu-design, frontend-design |
| "Ich weiß nicht, welchen Stil ich will" | Stufe 2, Beratermodus | huashu-design, creative-director |
| "Mach es gut aussehen / weniger KI" | Stufe 3 | design-review, Anti-Slop-Checkliste |
| "Was soll ich für X verwenden?" | Stufe 4 | tech-stack.md |
| "Wie heißt dieser Effekt?" | Stufe 4 | animation-vocabulary |
Anmerkungen zur Herkunft
Diese Fähigkeit ist eine Orchestrierungsschicht, die erstellt wurde, um eine Reihe von unabhängig verwalteten Fähigkeiten zu sequenzieren. Sie bündelt nur originales/ kuratiertes Referenzmaterial (references/design-vocabulary.md, references/tech-stack.md und die Stufenanleitungen). Jede Drittanbieter-Fähigkeit, an die sie weiterleitet, wird mit ihrer Quelle in references/skill-registry.md genannt und nicht hier weiterverteilt – installiere sie separat. Siehe README.md für die vollständige Zuschreibungsliste.