ishan-parihar/website-design

Was macht website-design?

Eine Pipeline, die jeden KI-Agenten, auch kleine oder schwache Modelle, in eine Instanz verwandelt, die erstklassige, ästhetische, funktionsreiche Websites baut und deployed. Jede Phase produziert ein benanntes Artefakt, das die nächste Phase erneut liest, sodass keine Entscheidung jemals neu getroffen oder verloren geht. Auslösung über Skill-Creator-Konventionen; jede Beschreibung ist ein einzeiliger String in Anführungszeichen.

Pipeline-Artefakte (das Arbeitsgedächtnis): DESIGN BRIEF (Zielgruppe, Vibe, Dials) → DIRECTION (Stil, Palette, Typografie, Erlaubt/Verboten) → TOKENS (kanonische CSS-Custom-Properties, Dark-Mode) → SECTION MAP (geordnete Sektionen mit Überschrift/Text/Asset/CTA-Slots) → DEPLOY SPEC (Host, Typ, URL, Rollback).

Routing-Muster: Pipeline + Facetten

Pipeline (in Reihenfolge, niemals eine Phase überspringen):

1. briefing - extrahiere den DESIGN BRIEF aus Benutzernachricht, Links, Screenshots, Repo.
2. direction - wähle Stil, Palette, Typografie VOR jeglichem HTML oder CSS.
3. system - wandle DIRECTION in TOKENS und verdrahte Theme/Dark-Mode.
4. structure - wandle TOKENS und DIRECTION in die SECTION MAP.
5. components - baue jede Sektion aus Blockrezepten (Unterknoten: Navigation, Helden, Feature-Sektionen, Social-Proof, Conversion, Formulare).
6. content - fülle jeden SECTION-MAP-Slot mit echten Texten und echten Assets.
7. motion - sektionsspezifische Animationsspezifikationen aus dem MOTION-Dial.
8. quality - reine Review-Gates: Anti-Slop, Accessibility, Performance, Audit, Production, Preflight (finales Gate).
9. deploy - wähle Host: higgsfield oder generic.

Facetten (Einstiegspunkte, keine Phasen):

• Website existiert bereits (URL, Repo, Dateien) → starte bei redesign VOR briefing, trete dann wieder in die Pipeline ein.
• quality/*-Blätter sind reine Review-Blätter; lade sie beim Prüfen, nicht beim Bauen.
• version-control läuft NEBEN jeder Phase: committe jedes Artefakt, sobald es produziert wird. Arbeiten in einem webdev-verwalteten Site-Repo (WEBSITES/) macht dies verpflichtend.

Kinder

• briefing - immer zuerst bei Neubauten; produziert DESIGN BRIEF mit VARIANCE/MOTION/DENSITY-Dials.
• direction - Stil, Palette, Typografie über ui-ux-pro-max-verifizierte Suche; produziert DIRECTION.md.
• system - kanonische Tokens, Theme, Dark-Mode; produziert TOKENS.
• structure - geordnete Sektionen und Slot-Anzahlen; produziert SECTION MAP.
• components - Blockrezepte pro Sektionsart; lädt ein Blatt pro Sektion.
• content - echte Texte, echte Bilder, keine Füllmasse; produziert CONTENT.
• motion - Animationsspezifikationen, GSAP-Skelette, Reduced-Motion-Pfade.
• preflight - finales Gate; konsultiert alle Quality-Geschwister, übergibt dann an deploy.
• deploy - Hosting-Router: higgsfield (Website/App/Spiel) oder generischer statischer Host; produziert DEPLOY SPEC.
• redesign - Audit-zuerst-Einstieg, wenn eine Website bereits existiert.
• version-control - Git-Disziplin über alle Phasen hinweg; lasse niemals Arbeit uncommitted.

Navigation (nur Root-Router)

• Springe: kennst du die Phase? Lade dieses Kind direkt; lade niemals den ganzen Baum.
• Gehe: nur wenn die Entscheidung selbst unklar ist; lies einen Router nach dem anderen.
• Gib die Phase bekannt, unter der du arbeitest; wenn sie wechselt, sage dies.
• Route um: wenn das geladene Blatt der Aufgabe widerspricht, kehre hierher zurück und wähle erneut; improvisiere niemals ein Blatt.
• Delegiere breite Äste an einen Unteragenten mit dem Pfad des Kindes und einer geteilten Aufgabe; nur dieser Teilbaum wird geladen.
• Obergrenze: ein Blatt überschreitet niemals die Regeln seines Vorfahren; diese Datei gewinnt bei Konflikten.

Konventionen

Hochgestuft aus _build/plan-expanded.md; bindend für jeden Knoten im Teilbaum.

• Schwachmodell-Absicherung: Entscheidungstabellen, konkrete Zahlen („Padding 96-128px“, niemals „großzügig“), 3-8 Bestehen/Nichtbestehen-Prüfungen pro Blatt, die zählbar und grepbar sind. Erkläre in einer Zeile, damit intelligentere Modelle generalisieren; die mechanische Regel steht für sich allein.
• Fachliche Verankerung: jede ästhetische Wahl verankert sich im konkreten Subjekt, der Zielgruppe und der primären Aufgabe (Branche, Materialien, Umgangssprache). Ein Spielzeugladen für Mädchen von 8-11 und ein Werkzeug für Finanzanalysten müssen divergieren. ECHTER Content durchgehend; wenn Content fehlt, schlage konkrete Texte via briefing vor und bestätige.
• Sprachagnostisch: Prinzipien leben in semantischem HTML + CSS in references/stack-adapters.md. Nie von React, Tailwind oder einem Framework abhängig.
• Kanonische Tokens: definiert in system, überall verwendet: --bg --surface --text --text-muted --accent --accent-contrast --border --destructive, --radius --radius-lg, --font-display --font-body --font-mono, --space-1..--space-10 (4 8 12 16 24 32 48 64 96 128), --container, --shadow-1 --shadow-2.
• Dials aus briefing: Ganzzahlen 1-10, exakte Namen VARIANCE (1 minimal, 10 asymmetrisch/künstlerisch), MOTION (1 statisch, 10 filmisch), DENSITY (1 spärlich, 10 dicht). Erfinde niemals neue Dials.
• ui-ux-pro-max-Protokoll: Direction/System-Entscheidungen werden gegen die Stil-/Palette-/Typographie-Daten des Pakets verifiziert; bei leeren Ergebnissen auf integrierte Tabellen zurückfallen und dies angeben.
• Fünf Artefakte reisen als fenced-Blöcke, werden namentlich erneut gelesen, niemals aus dem Gedächtnis.
• Frontmatter: name: entspricht dir, description: einzeiliger quoted Trigger-String.
• Stil: kein Gedankenstrich (verwende Bindestrich oder Punkt), keine Emojis, absolute Verbote leben NUR in anti-slop, Querverweise auf Geschwister sind root-relativ (heroes).

Unverhandelbar

• Kein Gedankenstrich irgendwo in einem Knoten; der Detektor des Anti-Slop-Blattes sucht danach.
• Keine erfundenen Logos, Testimonials, Statistiken oder Markenbilder; content schlägt vor, Benutzer bestätigt.
• Keine Platzhalter-Tokens; jede Sektion rendert durch den kanonischen Token-Satz.
• Kein Mischen von Designsystemen: eine Stilfamilie, eine Palette, eine Typografie-Paarung pro Build.
• Keine uncommitteten Artefakte: version-control committed jede Phasenausgabe, bevor die nächste Phase beginnt.
• Kein Deploy ohne bestandenes preflight.
• Diagramme sind explizit nicht im Umfang dieses Skills. Für Datenvisualisierung (25 Diagrammtypen in ui-ux-pro-max) rufe python ~/.agents/skills/ui-ux-pro-max/scripts/search.py "<data shape>" --domain chart auf, anstatt Raster + Balken zu improvisieren.

OMO_INTERNAL_INITIATOR