iyuyoung/young-design

Young Design

Erstelle Websites, die sich jung, autoritativ und produktgeführt anfühlen, ohne kindisch, dekorativ oder generisch zu wirken. Behandle visuelle Qualität und Implementierungsqualität als ein System. Passe den visuellen Ausdruck an das Produkt an, anstatt ein festes Unternehmensdesign anzuwenden.

Wähle den Aufgabenmodus

Wähle vor der Arbeit einen Modus aus:

• Richtung: Definiere die visuelle Sprache, Seitenhierarchie, Tokens und repräsentative Komponenten.
• Design: Erstelle eine vollständige Seite oder ein Mockup mit realistischen Inhalten und responsiver Absicht.
• Implementierung: Übersetze eine genehmigte Richtung oder Referenz in Produktionscode.
• Verfeinerung: Überprüfe eine bestehende Website, identifiziere die wirkungsvollsten Lücken und verbessere sie, ohne das Verhalten zu destabilisieren.
• Überprüfung: Gib evidenzbasierte visuelle Rückmeldungen, ohne Dateien zu ändern, es sei denn, du wirst darum gebeten.

Wenn der Nutzer nur ein Design anfordert, implementiere nicht das Produktionsprojekt. Wenn der Nutzer bittet, die Website zu erstellen oder zu optimieren, führe die Arbeit bis zur Verifizierung durch.

Lege den Designvertrag fest

Bevor du Farben oder Komponenten auswählst, bestimme:

1. Zielgruppe – wer kommt und in welchem emotionalen Zustand.
2. Versprechen – die eine Sache, die der erste Viewport klar machen muss.
3. Primäre Aktion – der wertvollste nächste Schritt.
4. Persönlichkeit – drei nützliche Adjektive und drei Eigenschaften, die vermieden werden sollten.
5. Einschränkungen – Framework, Marken-Assets, SEO, Leistung, Barrierefreiheit, Druck- oder Bereitstellungsanforderungen.

Leite diese nach Möglichkeit aus dem Repository, dem Brief und früheren Entscheidungen ab. Frage nur, wenn eine fehlende Antwort das Design wesentlich verändern würde.

Definiere dann einen Design-Fingerabdruck von 1–5 für Wärme, Verspieltheit, Haptik, Dichte, Präzision und visuellen Kontrast. Notiere die Werte und einen Satz, der die resultierende Richtung erklärt. Gib verschiedenen Produkten nicht standardmäßig denselben Fingerabdruck.

Verwende realistische Produkttexte und repräsentative Daten. Lorem Ipsum, generische Dashboards und erfundene soziale Beweise verbergen Hierarchieprobleme.

Erstelle das visuelle System vor der Seite

Lies references/visual-language.md, wenn du das Erscheinungsbild definierst oder änderst. Leite ein dominantes visuelles Motiv aus dem Produkt, der Zielgruppe oder dem Arbeitsablauf ab; Papier und Collage sind Optionen, nicht die Voreinstellung.

Erstelle ein kleines, kohärentes System:

• Farbrollen, nicht eine Sammlung von Farben;
• Display-, Textkörper- und optionale Anmerkungstypografie;
• Abstandsrhythmus und Inhaltsbreiten;
• Rahmen-, Radius-, Schatten- und Materialregeln;
• Ikonen- und Illustrationssprache;
• Interaktions- und Bewegungsverhalten;
• Kompositionsregeln für Desktop, Tablet und Mobilgeräte.

Verwende Design-Tokens oder gemeinsame Variablen. Vermeide es, jeden Abschnitt als isoliertes Poster zu gestalten.

Behalte die Unterscheidung bei zwischen:

• Markenebene – wiedererkennbare Stimme, Zeichen, Farben, Typografie;
• Produktebene – Aufgabenablauf, Steuerelemente, Zustände, Feedback;
• Inhaltsebene – Hierarchie, Scannen, Vertrauen, SEO-Text;
• Materialebene – Papier, Klebeband, Bleistift, Textur oder Collage-Akzente.

Materialdetails müssen die Hierarchie unterstützen. Halte sie sparsam genug, dass das Produkt glaubwürdig und nutzbar bleibt.

Komponiere um den Produktmoment herum

Verwende nicht standardmäßig eine Überschrift links und einen willkürlichen Dashboard-Screenshot rechts. Identifiziere den Moment, der beweist, dass das Produkt funktioniert: eine Empfehlung, Vorschau, Ergebnis, Transformation, Arbeitsblatt, Vergleich oder nächster Schritt.

Der erste Viewport sollte normalerweise enthalten:

• ein spezifisches Versprechen;
• einen lesbaren Produktmoment;
• eine primäre Aktion;
• prägnante Vertrauens- oder Einschränkungshinweise;
• genug Asymmetrie oder Materialcharakter, um sich autoritativ anzufühlen.

Sekundäre Abschnitte sollten unterschiedliche Fragen beantworten. Wiederhole nicht dasselbe Kartenraster unter verschiedenen Überschriften.

Lies references/component-patterns.md, wenn du Helden-, Auswahl-, Karten-, Werkzeug-, Verzeichnis- oder redaktionelle Muster auswählst.

Liefere das richtige Artefakt

Lies references/output-contracts.md und befolge den Vertrag für den ausgewählten Aufgabenmodus. Mache Annahmen, Entscheidungen, responsive Absicht und Verifizierungsnachweise explizit genug, dass ein anderer Designer oder Entwickler die Arbeit fortsetzen kann.

Implementiere als echtes System

Lies references/implementation-playbook.md, bevor du ein Repository änderst oder eine Referenz in Code übersetzt.

Wenn du in einem bestehenden Projekt arbeitest:

1. Überprüfe das Framework, die Routen, gemeinsamen Layouts, Tokens, Komponenten, Tests und generierten Assets.
2. Trenne beabsichtigte Quellcodeänderungen von generierten Ausgaben und Formatierungsrauschen.
3. Bewahre Verhaltensverträge, URLs, Analytics-Hooks, Test-Selektoren, Semantik und Druckregeln.
4. Füge gemeinsame Grundlagen hinzu oder überarbeite sie, bevor du seiten-spezifische Überschreibungen vornimmst.
5. Implementiere wiederverwendbare Komponenten für wiederholte visuelle und verhaltensbezogene Muster.
6. Überprüfe alle relevanten Zustände: initial, ausgewählt, hover, fokus, laden, leer, fehler, erfolg und gegebenenfalls drucken.
7. Validiere auf Desktop-, Tablet- und schmalen Mobilgerätebreiten.

Bevorzuge lokale oder selbst gehostete Schriftarten, SVG-Marken und eine konsistente Icon-Bibliothek. Verwende generierte Bilder nur, wenn sie einen echten narrativen Wert haben. Kompensiere keine schwache Hierarchie mit dekorativen Bildern.

Verfeinere in der Reihenfolge der Auswirkungen

Wenn sich eine Website „alt“, „generisch“ oder „nicht wie das Design“ anfühlt, behebe die Probleme in dieser Reihenfolge:

1. Typografie-Charakter und Hierarchie;
2. Komposition des ersten Viewports;
3. Abstandsrhythmus und Inhaltsdichte;
4. Komponentengeometrie und Interaktionszustände;
5. Farbrollen und Kontrast;
6. Materialdetails und Mikro-Dekoration;
7. Bewegung und Verfeinerung.

Beginne nicht mit dem Hinzufügen von Schatten, Verläufen, Blobs oder Animationen. Diese reparieren selten eine schwache Komposition.

Verifiziere, bevor du es als erledigt bezeichnest

Lies references/quality-gates.md für die Implementierung oder abschließende Überprüfung. Lies references/review-rubric.md, wenn du entscheidest, ob ein Ergebnis präsentiert, ausgeliefert oder veröffentlicht werden kann.

Überprüfe mindestens:

• kein versehentlicher horizontaler Seitenüberlauf;
• sichtbarer Oberflächentext ist mindestens 14px, es sei denn, es handelt sich um nicht essenzielle Kunst;
• normaler Textkontrast erfüllt 4,5:1 und großer Text erfüllt 3:1;
• Tastaturfokus ist klar und interaktive Steuerelemente sind bequem berührungsgroß;
• Mobilgeräte sind neu komponiert, nicht nur verkleinert;
• Schriftarten, Radien, Schatten, Symbole und Materialien bleiben konsistent;
• der implementierte erste Viewport bewahrt die Hierarchie des genehmigten Designs;
• Funktionalität, SEO-Struktur, generierte Dateien, Downloads und Druckausgabe funktionieren noch;
• Typprüfungen, Tests, Builds und Browser-Checks bestehen, wenn das Projekt sie bereitstellt.

Verlange eine Bewertung von mindestens 85/100 ohne kritischen Blocker, bevor du ein Ergebnis als veröffentlichungsreif bezeichnest. Verwende die Bewertung diagnostisch; überhöhe sie nicht, um die Schwelle zu erfüllen.

Wenn die Browser-Ausführung lokal nicht verfügbar ist, gib die Umgebungseinschränkung an und verwende die CI des Projekts, anstatt eine visuelle Überprüfung zu behaupten.

Vermeide Young-Design-Fehlermodi

Verwende niemals standardmäßig:

• generische Startup-Verläufe und schwebende Glaskarten;
• eine altmodische Serife als Hauptquelle für „Persönlichkeit“;
• übermäßige Pillenformen, übergroße Radien oder einheitliche Kartenraster;
• Pastellfarben überall mit unzureichendem Kontrast;
• zufällige Drehungen, Klebeband, Kritzeleien oder Papierstrukturen auf jedem Element;
• winzige Metadaten und Etiketten zur Erzeugung von Raffinesse;
• mobile Layouts, die den Kernproduktwert verbergen oder einen horizontalen Scroll auf Seitenebene erzwingen;
• Umschreiben vorhandener Produktlogik nur zur Unterbringung eines visuellen Redesigns;
• wörtliches Kopieren einer Referenz über nicht verwandte Marken hinweg.
• Anwenden von warmem Papier, Pastellfarben oder abgerundeten Karten, wenn die Domäne einen schärferen, dichteren oder technischeren Ausdruck erfordert.

Das Ergebnis sollte sich autoritativ, nützlich und aktuell anfühlen: freundlich ohne kindisch zu sein, ausdrucksstark ohne laut zu sein und poliert ohne steril zu wirken.