ahtserhsuddav/website-design

Was macht website-design?

Jedes Projekt erhält sein eigenes Erscheinungsbild, das auf seinem Thema und echten Referenzen basiert. Dieser Skill definiert die Reihenfolge der Arbeiten und die Dateien des Projekts; die handwerkliche Umsetzung erfolgt durch die parallel installierten Design-Skills.

Das Tor

Kein Seiten- oder Komponentencode, bis design/DESIGN.md → Design-Eingaben alle vier Zeilen in der richtigen Reihenfolge ausgefüllt enthält: für jede eine Quelle oder „none“, geschrieben von dir. Eine kleine Anpassung an einem bestehenden Design ist die einzige Ausnahme (siehe Regeln).

1. Sammle die Eingaben in dieser Reihenfolge

Jeder Schritt liest das, was die vorherigen Schritte entschieden haben. Eine frühere Eingabe hat immer Vorrang vor einer späteren.

1. Die Referenzen und Designdokumente des Menschen (höchste Priorität).
   • Lese design/DESIGN.md. Wenn es ausgefüllt ist (die Farb-Token haben Werte), ist es die Basis: gehe zu Schritt 3.
   • design/references/: lies jedes Bild einmal und schreibe eine Zeile pro Bild in DESIGN.md → Referenzen (file → take: … · avoid: …). Arbeite anschließend mit diesem Text.
   • Links, Brand Guides, Logos, Farben oder Schriftarten, die der Mensch dir im Gespräch gegeben hat, sowie PROJECT.md.
   • Brief leer? Stelle dem Menschen in einer Nachricht 3 kurze Fragen: was es ist und für wen; drei Wörter für das Gefühl; Seiten, die sie mögen oder nicht mögen. Schreibe die Antworten in DESIGN.md → Brief.
   • Schreibe Design-Eingaben → Referenzen (was du gefunden hast, oder „none“).
2. Wenn Schritt 1 keine Designsprache ergeben hat: eine awesome-design-md-Basis.
   • {{run}} design:md list gibt den Katalog nach Kategorien aus, eine Zeile pro Eintrag (--category <wort> eingrenzen). Schlage 2–3 vor, die zum Brief passen, jeweils mit einem Satz zur Begründung, und lass den Menschen wählen.
   • {{run}} design:md use <name> kopiert den Eintrag nach design/DESIGN.md mit der Quellenangabe. Ersetze jeden Markennamen, jedes Logo und jede Marke durch die des eigenen Projekts.
   • Überspringe diesen Schritt, wenn Schritt 1 eine Designsprache ergeben hat oder wenn DESIGN.md bereits auf einem Eintrag basiert (die Kopfzeile gibt dies an).
   • Schreibe Design-Eingaben → Basis (den Eintrag oder „none: basierend auf den Referenzen des Menschen“).
3. taste-skill (Skill design-taste-frontend): die Kunstrichtung.
   • Führe die Schritte 1–4 (Brief und Bestandsaufnahme des Themas, das Argument, die Richtung, die Idee) für diese Seite aus.
   • Wenn die Schritte 1–2 Farben und Schriftarten festgelegt haben, verwende --keep palette,type, damit die Kunstrichtung Komposition, Bilder und Abschnitte innerhalb der Designsprache plant, anstatt sie zu ersetzen.
   • Schreibe die gewählte Richtung in die Abschnitte von DESIGN.md (Theme, Layout, Komponenten) und Design-Eingaben → Richtung (die Richtungs-ID und ein Satz zur Begründung).
4. Reale Websites für die Anforderungen dieser Seite.
   • Öffne den Abschnitt deines Projekttyps in references/project-types.md (rg -n "^## " <datei>) und, für die spezifischen Muster, die diese Seite benötigt (Preise, Checkout, Doku, Dashboard, Onboarding…), die Galerien in references/inspiration.md.
   • Studiere 2–3 Live-Seiten für diese Muster (Hierarchie, Dichte, wie sie Dinge erklären), in einem Browser-Tool. Schreibe eine Zeile pro Seite in DESIGN.md → Referenzen.
   • Schreibe Design-Eingaben → Referenzseiten.

2. Bauen

• Token: Bilde die Tokens von DESIGN.md auf das Theme in {{#tanstack-start}}src/styles.css{{/tanstack-start}}{{#next}}src/app/globals.css{{/next}}{{#shadcn}} (shadcn/ui's --background, --primary, --radius…){{/shadcn}} ab. Keine rohen Hex-Werte in Komponenten.
• Bauen mit Skill frontend-design, gemäß dem Richtungsblatt von taste-skill (dessen Schritte 5–6). {{#shadcn}} Verwende shadcn/ui-Komponenten (Skill shadcn; {{dlx}} shadcn@latest add <component>). {{/shadcn}} Komponenten- und Icon-Auswahl: references/libraries.md.
• Inhalte: echte Inhalte. Frage danach oder schreibe spezifischen Klartext. Kein Lorem Ipsum, keine Fake-Logos, Statistiken oder Testimonials. Mache eine Sache einprägsam und halte den Rest ruhig.
• Basis: responsiv ab 360px, sichtbarer Fokus, prefers-reduced-motion, WCAG 2.2 AA-Kontrast, sowie leere, Lade- und Fehlerzustände.

3. Review

• taste-skill's Tor- und Look-Schritte (dessen Schritte 7–8), mit Screenshots bei 390, 768 und 1440px (Skill playwright-cli{{#next}}, oder next-dev-loop gegen den Dev-Server{{/next}}).
• Skill web-design-guidelines für Barrierefreiheit und UX, Skill writing-guidelines für jeden Textabschnitt und Skill web-perf für die Ladeleistung der Hauptseiten.
• Behebe die 3 größten Probleme, dann entferne eine Dekoration, bevor du fertig bist.

Regeln

• Lerne Prinzipien aus Referenzen (Hierarchie, Rhythmus, Dichte, Schriftart, Farbe). Kopiere niemals das Layout, den Text, Logos, Illustrationen oder Code einer Seite und verwende niemals den Namen, das Logo oder die Marke einer anderen Marke.
• Der Brief und die Referenzen des Menschen schlagen die awesome-design-md-Basis, die die Voreinstellungen von taste-skill schlägt, die wiederum deinen eigenen Geschmack schlagen.
• Eine kleine visuelle Anpassung an einem bestehenden Design (Abstand, eine Farbe innerhalb der Palette, eine Komponente) ist eine schnelle Änderung: folge DESIGN.md und führe die Eingaben nicht erneut aus.