Was macht Design-Richtung?
Ein Design ist unverwechselbar, wenn jemand, der das Fachgebiet kennt, es diesem einen Produkt zuschreiben würde. Bedienbarkeit kommt von vertrauter Struktur; Unverwechselbarkeit kommt von dem, was nur dieses Produkt hat: seine Marke, seine Welt, seine grafischen Mittel und eine charakteristische Geste. Diese kommen von der Person, deshalb fragt dieses Skill, bevor es zeichnet.
Ein Generator, der sich selbst überlassen bleibt, konvergiert zu denselben wenigen Looks (defaults.md). Jede Entscheidung unten stammt entweder aus dem Interview oder wird gegen diese Liste geprüft; nichts wird gewählt, weil es das Erste ist, was einem in den Sinn kommt.
Erledigt, wenn eine Richtung niedergeschrieben, von der Person ausgewählt ist und jeder spätere Build sie liest.
1. Sammeln, was existiert
Fordern Sie an und lesen Sie, was die Marke bereits definiert: Logodateien, Farben, Schriftarten, Markenrichtlinien, Fotografien, Illustrationen, frühere Präsentationen oder Seiten, eine Design-System-Datei im Repository und die Projektdatei des Skills product-ui (.claude/product-ui.md), falls vorhanden. Ein bestehendes System ist der Ausgangspunkt; die Richtung erweitert es und widerspricht ihm nie. Halten Sie fest, welche Assets vorhanden sind und welche fehlen.
2. Interview
Führen Sie interview.md aus: ein paar Fragen pro Runde, jede Runde baut auf den vorherigen Antworten auf. Fragen Sie, hören Sie zu, folgen Sie der überraschenden Antwort eine Ebene tiefer. Die Runde ist abgeschlossen, wenn Sie die Welt, Persönlichkeit und Anti-Referenzen des Produkts in einem Absatz zusammenfassen können und die Person damit einverstanden ist.
3. Modus
Bestimmen Sie den Modus aus dem Interview:
- Operate (eine Anwendung, in der Menschen arbeiten): Struktur, Navigation und Bedienelemente bleiben die vertrauten der Kategorie. Die Richtung trägt bei: Schriftart, Palette, Dichte, grafische Mittel in den ruhigen Bereichen (Kopfzeilen, Leerzustände, Onboarding, Ladezustände) und eine charakteristische Geste.
- Persuade (eine Landingpage, eine Kampagne, eine Präsentation): Die Richtung kann die gesamte Seite formen – Komposition, Bildmaterial, Bewegung, Layout.
Ein Produkt mit beidem erhält eine Richtung und wendet sie pro Modus an.
4. Richtungen vorschlagen
Schreiben Sie zwei oder drei Richtungen, die sich auf den ersten Blick unterscheiden, jede aus dem Material des Interviews. Jede benennt:
- Token: Palette (4–6 benannte Farben mit Rollen), Schriftartenpaarung und -skala, Radius, Rahmen, Höhe, Dichte. Bauen Sie sie mit tokens.md aus den Marken-Assets von Schritt 1 – ein Referenzprodukt leiht seine Eigenschaften (Geschwindigkeit, Dichte), niemals seine Farben oder Schriftart;
- grafische Mittel: eine Formensprache und Geometrie, die der Welt des Produkts entnommen sind, und ein Rezept für generierte Hintergründe, Muster und Füllbilder, die aus diesen Formen aufgebaut werden;
- Bildmaterial: was Fotografie oder Illustration zeigt, und wie sie beschnitten und behandelt wird;
- Struktur: Raster, Rhythmus, wie ein Bildschirm oder eine Seite zusammengesetzt ist;
- Stimme: drei Wörter dafür, wie die Schnittstelle spricht, und je einen Beispielsatz für einen Button, einen Leerzustand und einen Fehler;
- charakteristische Geste: eine konkrete, benennbare Idee, an die sich ein Betrachter erinnert („Status dargestellt als …“);
- ein Muster: ein echter Bildschirm oder Abschnitt, der darin gerendert ist, mit echten Inhalten.
Zeigen Sie die Muster nebeneinander, in derselben Größe, mit demselben Inhalt. Die Person wählt eines aus oder kombiniert Teile und sagt, warum.
Jede Zahl und Bezeichnung auf einem Muster benötigt eine Definition, mit der die Person einverstanden ist („aktive Benutzer“: angemeldet? in einer Sitzung heute?). Sammeln Sie diejenigen, die sie in Frage stellt, als offene Definitionen; es sind Produktfragen, und sie gehen in das Protokoll von Schritt 6 ein.
Wenn die Person sagt, es sehe immer noch generisch aus, aber nicht benennen kann, warum, teilen Sie die Oberfläche in unabhängige Umschalter auf – Schriftart, Palette, Form (Radius, Rahmen, Chips), Dichte, Symbolstil – auf demselben Bildschirm, und lassen Sie sie jeden umschalten, bis das Gefühl verschwindet. Der Umschalter, der es entfernt, benennt die Ursache.
5. Unterscheidbarkeit prüfen
Halten Sie das gewählte Muster gegen defaults.md und gegen die Anti-Referenzen der Person. Bei jeder Übereinstimmung ändern Sie die Entscheidung, die sie hervorgebracht hat, oder protokollieren, warum dieses Produkt sie behält. Dann der Attributionstest, gewichtet nach dem Unterscheidbarkeitsniveau der Oberfläche aus dem Interview: Würde jemand, der das Fachgebiet kennt, dieses Produkt nennen, wenn das Logo verdeckt ist? Auf einem hohen Niveau schickt „es könnte von jedem sein“ Sie mit dem schwächsten Element zurück zu Schritt 4. Auf einem niedrigen Niveau besteht ein sauberes, vertrautes Ergebnis, und das Protokoll hält dies fest.
Unterscheidbarkeit kostet nie Bedienbarkeit: Eine charakteristische Geste, die ein Bedienelement versteckt, den Kontrast verringert oder ein vertrautes Muster der Kategorie bricht, wird in einen ruhigen Bereich verschoben oder fallengelassen.
6. Aufzeichnung
Schreiben Sie die Richtung in den Abschnitt „Richtung“ der Projektdatei (.claude/product-ui.md oder wo CLAUDE.md angibt, dass das Projekt seine Designentscheidungen aufbewahrt; erstellen Sie sie aus der product-ui-Vorlage, wenn sie fehlt): Datum, Modus, Token, Geräte, Bildrezept, Struktur, Stimme, charakteristische Geste, die Anti-Referenzen, die offenen Definitionen und die Interview-Antworten, die sie rechtfertigen. Fügen Sie die Token selbst in die Token-Datei des Codes ein. Spätere Builds und Überprüfungen lesen zuerst die Projektdatei.