cubxxw/deepen-design (Design vertiefen)

Design vertiefen

Erstelle ein eigenständigeres Design, nicht nur ein weiteres dekoriertes.

Lies references/recursive-tree.md vor der Arbeit. Wenn der Nutzer auf ein unbefriedigendes vorheriges Ergebnis reagiert, lies auch references/failure-patterns.md.

Kernunterscheidung

Granularität hat Ebenen:

1. Produktwahrheit und gewünschte Überzeugung;
2. Brand-Theorem und narratives Metapher;
3. Seitenarchitektur und Tempo;
4. Abschnittskomposition und Interaktion;
5. Komponentensprache;
6. Typografie, Farbe, Abstände, Rahmen, Schatten und Bewegungsqualität.

Gehe immer in dieser Reihenfolge vor. Ein größerer Zeichensatz, mehr Schatten oder mehr Mikrointeraktionen sind kein tieferes Design, wenn die Ebenen 1-4 unverändert bleiben.

Beginne mit gerenderten Beweisen

Für eine bestehende Benutzeroberfläche:

1. Behalte die aktuelle Implementierung und die Änderungen des Nutzers bei.
2. Erfasse den aktuellen Desktop- und Mobil-Erstansicht.
3. Inspiziere mindestens zwei spätere Abschnitte und eine bedeutungsvolle Interaktion.
4. Formuliere, was objektiv funktioniert.
5. Formuliere, warum die Seite in fünf Sekunden vergessen wird.
6. Trenne funktionale Tore von Geschmacksurteilen.

Behandle „immer noch mittelmäßig“ als nicht bestandenen Design-Test. Verteidige keine frühere Bewertung oder setze dieselbe Richtung standardmäßig fort.

Erstelle einen begrenzten binären Baum

An jedem richtungsändernden Knoten erzeuge genau zwei materiell unterschiedliche Zweige. Ein gültiger Zweig ändert das visuelle Argument, die Informationsstruktur oder die Signature-Interaktion. Ein Farbtausch ist kein Zweig.

Verwende Beam Search:

• expandiere zwei Zweige;
• mache beide in der günstigsten nützlichen Detailstufe sichtbar;
• vergleiche sie paarweise;
• behalte den stärksten Zweig und einen glaubwürdigen Herausforderer;
• gehe eine Ebene tiefer;
• gehe zurück, wenn beide Kinder dieselbe Schwäche erben.

Konstruiere nicht jedes mögliche Blatt. Investiere Tiefe in folgenreiche Entscheidungen, nicht in kombinatorische Masse.

Erforderliche Tiefen-Gates

Tiefe 0: Produktinvariante

Schreibe:

• den Besucher;
• den Moment der Spannung;
• was sie verstehen, fühlen und tun sollten;
• die Produktwahrheit, die Wettbewerber nicht auf dieselbe Weise ehrlich behaupten können.

Beginne nicht mit der Implementierung, bis dies spezifisch ist.

Tiefe 1: zwei Brand-Theoreme

Erstelle zwei Ein-Satz-Positionen mit unterschiedlichen Implikationen. Jede muss ergeben:

• ein narratives Metapher;
• eine räumliche Grammatik;
• eine Inhaltspriorität;
• einen Signaturmechanismus;
• eine explizite Anti-Referenz: was diese Richtung nicht ähneln darf.

Suche drei bis fünf aktuelle, relevante Referenzen, wenn externe Recherche verfügbar ist. Extrahiere Mechanismen, keine Stilcollage. Kein Kandidat darf die vollständige visuelle Identität einer Referenz kopieren.

Tiefe 2: zwei Architekturen

Für das führende Theorem verzweige die Seite in zwei verschiedene Reisen. Definiere den Job, das Layout-Familie, das Tempo, das Kontrastereignis, den Beweis und die Exit-Aktion für jeden Abschnitt.

Lehne eine Architektur ab, wenn:

• die meisten Abschnitte „große Überschrift + Absatz + Bild/Karte“ wiederholen;
• der Produktbeweis mit einem generischen SaaS-Screenshot austauschbar ist;
• das Entfernen des Logos die Kategorie oder Marke unkenntlich macht;
• die einzige sichtbare Unterscheidung die Palette oder Typografie ist.

Tiefe 3: visuelle Prototypen

Render beide überlebenden Richtungen vor der vollständigen Implementierung. Bevorzuge:

• zwei Erstansicht-Prototypen;
• einen repräsentativen Mittelseitenabschnitt für jede;
• zuerst Desktop, dann einen Mobile-Zusammenbruch-Check.

Vergleiche Screenshots nebeneinander. Wähle nicht allein aus Prosa.

Wenn der Nutzer verfügbar ist und die Richtungen tatsächlich unterschiedlichen Geschmack kodieren, stelle eine prägnante Verzweigungsfrage. Wenn der Nutzer Autonomie angefordert hat, wähle aus den Beweisen und behalte den Herausforderer.

Tiefe 4: System und Implementierung

Erst jetzt definiere:

• Typografie-Rollen und -Skalierung;
• Palette und Kontrast;
• Asset-Sprache;
• Raster-, Abstands- und Formregeln;
• Bewegungssemantik;
• Komponenten-Primitive.

Verwende ui-ux-pro-max für relevante Design-System-Daten, wenn verfügbar. Verwende design-taste-frontend nach der Richtungsauswahl als Preflight-Linter. Seine Regeln können Klischees ablehnen, aber sie dürfen das Konzept nicht wählen.

Tiefe 5: Mikrodetails

Stimme Rahmen, Schatten, Material, Hover, optische Abstände und Leistung erst ab, nachdem die Richtungs- und Architektur-Gates bestanden sind.

Jede Mikro-Änderung muss die übergeordnete Entscheidung nennen, die sie verstärkt. Entferne sie, wenn sie Hierarchie, Bedeutung, Feedback oder materielle Kohärenz nicht verändert.

Bewerte das Richtige

Führe zwei getrennte Aufstellungen.

Funktionales Gate

• Produktwahrheit;
• responsives Verhalten;
• Barrierefreiheit;
• Leistung;
• Code- und Testqualität.

Dies sind Bestehen/Nichtbestehen-Kriterien. Sie beweisen keinen Geschmack.

Designurteil

• Fünf-Sekunden-Verständnis;
• Logo-aus-Wiedererkennbarkeit;
• visuelle Erinnerung nach einer Verzögerung;
• Kategorie-Vorlagen-Abstand;
• Produktmechanismus-Sichtbarkeit;
• Kontrast und Tempo über die gesamte Seite;
• Nutzerpräferenz.

Verwende paarweise Beweise aus dem Referenz-Workflow. Gib keine absolute Bewertung von 95/100 oder 98/100 aus einem selbst erstellten Bewertungsschema. Wenn der Nutzer sagt, das Ergebnis sei generisch, ist der Einzigartigkeitsanspruch unabhängig von Lighthouse gescheitert.

Beende mit Beweisen

Gib zurück:

1. den erkundeten Baum und wo zurückverfolgt wurde;
2. die gewinnende Richtung und den überlebenden Herausforderer;
3. Vorher-/A/B-Screenshots oder gleichwertige visuelle Beweise;
4. die drei größten sichtbaren Änderungen, geordnet nach Tiefe;
5. Ergebnisse des funktionalen Gates;
6. ungelöste Geschmacks- oder Produktentscheidungen.

Beschreibe nicht das Mikrodetail-Volumen als Hauptergebnis. Das Ergebnis ist ein erkennbares Design-Argument, das ohne das Logo überlebt.