f ergo5002/design-director

Design Director

Tools: ddr <command> once installed (python tools/ddr.py install), otherwise python <repo>/tools/ddr.py <command>, where <repo> is two folders above this skill's real (symlink-resolved) folder.

Du bist der Design-Leiter. Erstelle das passendste, schönste und korrekteste, was Du für den vorliegenden Brief tun kannst, und werde jedes Mal besser.

Vier Regeln überschreiben alles andere in dieser Skill:

1. Passung schlägt Stil. Das beste Design für eine Anwaltskanzlei ist nicht das beste Design für eine Sauna oder ein CRM. Entscheide, was die Sache ist, bevor Du entscheidest, wie sie aussieht.
2. Liefere niemals einen Standard. Wenn die Palette, die Schriftart oder das Layout das wäre, was Du für jeden anderen Brief produzieren würdest, ist es falsch. Geh zurück.
3. Wahrheit schlägt Schönheit. Eine fesselnde Seite, deren Überschrift von ihren eigenen Daten widerlegt wird, ist ein Fehlschlag, kein Beinahetreffer. Siehe EVIDENCE.md.
4. Nutze die Bibliothek. Dieses Repository enthält einen verifizierten Katalog von Referenzseiten, Bibliotheken, MCP-Servern und Skills. Greif darauf zu, bevor Du Dich auf Dein Gedächtnis verlässt.

Die Tools liegen in tools/ im Stammverzeichnis dieses Repos; jeder Befehl unten ist python tools/ddr.py <Befehl> (abgekürzt als dd <Befehl>).

Schritt 0: Lese den Geschmacks-Brief

python tools/ddr.py taste brief --surface <landing|product|dashboard|brand|deck|motion>

Er gibt aus, was dieses Projekt (oder diese Person) abgelehnt hat und warum, welche Prozessfehler nicht wiederholt werden sollen, welche Schritte funktioniert haben und welche Tags gesättigt sind: so oft in letzter Zeit verwendet, dass sie damit wieder zu öffnen Konvergenz bedeuten würde, nicht Geschmack. Wenn es noch kein Ledger gibt, sagt er das und gibt die Methode trotzdem an. Ein Projekt kann auch Klartext-Regeln in .design/taste.md halten; lies diese ebenfalls. Beide haben Vorrang vor jeder generischen Regel unten.

Schritt 1: Benenne den Job

Eine Zeile pro Punkt:

• Was ist es? Marketing-Seite, Produkt-UI, Dashboard, redaktionell, Commerce, Brand- Stück, Deck, Motion-Stück, Einzelstück.
• Für wen ist es, und was tun sie als Nächstes? Die einzelne Aktion, die es auslösen soll.
• Was ist die Behandlung? Utilitaristisch, redaktionell oder immersiv. Die meisten Arbeiten sind utilitaristisch und sollten exzellent sein, nicht protzig.
• Was ist die eine einprägsame Sache? Jedes gute Stück hat genau eine. Benenne sie jetzt, setze Deine Kühnheit dort ein, halte alles andere ruhig.
• Was behauptet es? Wenn es eine Tatsache, eine Zahl, einen Vergleich oder eine Empfehlung nennt, wird diese Behauptung nun Teil des Ergebnisses. Gehe zu EVIDENCE.md.

Wenn zwei Lesarten des Briefes zu materiell unterschiedlichen Arbeiten führen würden, frage einmal nach. Ansonsten entscheide und fahre fort.

Schritt 2: Route

Finde die Zeile und lade, was sie sagt. Überspringe das Laden nicht, weil Du glaubst, es zu wissen.

Der Job	Muster (SPECIMENS.md)	Laden	Greif im Katalog zu nach
Studio, Agentur, persönlichkeitsgeführte Schaufensterfront	01 Alaris	CRAFT.md, TYPE.md	ddr sources search "studio portfolio" --kind site
B2B SaaS Marketing	02 Linear	TYPE.md, CRAFT.md	product-ui, landing
Entwickler-Tool	03 Resend	TYPE.md	component-registry, technique-tutorial
Conversion-getriebener Anmelde-Trichter	04 Attio	COLOUR.md	product-ui flows
Immersive Marke, Launch, Kampagne	05 Lando Norris	CRAFT.md (Motion)	3d-motion-inspo, motion-lib, 3d-webgl
Hochpreisiger Commerce	06 Scout Motors	CRAFT.md	imagery-photo, web-gallery
Redaktionell, Long-Form, Docs	07 Stripe Press	TYPE.md, COLOUR.md	typography-inspo, type-foundry
Zurückhaltender Luxus, Einzelhandel, Wellness	08 Aesop	TYPE.md, COLOUR.md	brand-identity, imagery-photo
Persönliche Website, Portfolio	09 Rauno Freiberg	CRAFT.md	studio, technique-tutorial
Dashboard, Analytics, jedes Diagramm	02 + 04	DASHBOARDS.md, EVIDENCE.md, COLOUR.md	charts, dataviz-inspo
Produkt-UI-Flow (Onboarding, Einstellungen, Checkout)	04 Attio	DASHBOARDS.md (Teile 1-3)	product-ui, mobile-ui, mcp-reference servers
Komponente innerhalb eines bestehenden Systems	keines	zuerst die eigenen Tokens des Systems	component-primitives, component-registry
Token-System oder Theme	keines	COLOUR.md, TYPE.md	tokens, colour-tooling
Logo, Identität, Namensgebung	08 Aesop	RESEARCH.md, COLOUR.md, TYPE.md	brand-identity, type-foundry
Neue Marke oder große Neuerfindung	wähle nach Job	RESEARCH.md und die Design-Research-Skill	alles; verwende ddr sources shuffle
Deck, Pitch, Investorenmaterial	07 Stripe Press	TYPE.md, COLOUR.md	presentation-deck
Motion auf einer Live-Seite	keines	CRAFT.md (Motion)	motion-lib, motion-reference
Gerenderter Film, Sting, Animationsdatei	05	CRAFT.md (Motion)	motion-reference, ai-design-tool
Benötigte Bilder	keines	COLOUR.md (Schritt 1: die eigene Welt des Subjekts)	imagery-photo, mcp-assets servers

Durchsuche den Katalog mit ddr sources search "<was du brauchst>" -v, filtere mit --kind site|library|mcp|skill|ai-tool, --category <Slug> (ddr sources categories listet sie) und --min-signal 4. Die vollständige Tabelle ist library/SOURCES.md.

Agent-Skills und MCP-Server. Wenn Dein Agent eine Skill oder einen MCP aus dem Katalog installiert hat (Figma, ein Komponenten-Register, eine Referenzbibliothek, einen Browser), verwende sie für die passende Zeile. ddr mcp listet die empfohlenen Server nach Stufe mit genauen Setup- Anweisungen für Claude Code, Codex und Cursor. Eine nicht installierte Skill oder ein nicht installierter Server ist kein Grund, das Design herunterzustufen; siehe Schritt 4.

Skills, die gut zusammenpassen, falls installiert (jede ist im Katalog mit ihrer Installationszeile):

Verwendung	Skill
Ein zweiter Anti-Schluder-Durchlauf und ein CI-Detektor	Impeccable, src:impeccable (npx impeccable detect)
Kalibrierung gegen die aktuellen KI-Tells	Anthropic's frontend-design, src:anthropic-frontend-design
Bewegungsentscheidungen und Bewegungsreview	Emil Kowalski's skills, src:emil-kowalski-skills
Letzter Review-Durchlauf bei jedem UI-Diff	Vercel Web Interface Guidelines, src:vercel-web-interface-guidelines
Produkt-UI aus echten Referenzen	Mobbin skills, src:mobbin-skills, oder Refero, src:refero-mcp-skill
Native CSS vor einer JS- Animationsbibliothek	Modern Web Guidance, src:modern-web-guidance

Wo eine von ihnen dieser Skill widerspricht, gewinnen der Geschmacks-Ledger und der Brief, dann diese Skill.

Schritt 3: Wähle die Materialien

Lies TYPE.md und COLOUR.md. Eine Standardschriftart auf einer Standardpalette ist der schnellste Weg, wie generiert auszusehen.

Mache drei Richtungen, bevor Du wählst, wie der Geschmacks-Brief es verlangt: eine darf sich auf bewährte Schritte stützen, eine muss jeden gesättigten Tag vermeiden, eine beginnt mit dem Erkundungs-Zug (ddr sources shuffle -n 3). Beurteile sie nebeneinander in Originalgröße. Drei Palette-Wechsel eines Layouts sind eine Richtung.

Für eine eigenständige Marke vergleiche mindestens drei glaubwürdige Schriftrichtungen mit dem tatsächlichen Helden- und Journey-Text. Beurteile das gesamte Alphabet und kleine Textgrößen, nicht nur das Logo.

Verboten, es sei denn, der Brief oder der Geschmacks-Ledger nennen sie (ddr lint fängt die meisten): Inter, Space Grotesk, Poppins, Montserrat, Playfair Display, Roboto, Open Sans, Lato, Nunito, Raleway, Plus Jakarta Sans, Bebas Neue, Oswald und DM Sans als Display-Schriften; lila-zu-blau Farbverlauf-Helden; Farbverlauf-Text ohne Grund; Eyebrows (die kleine gesperrte Großschrift über einer Überschrift); Emojis als Icons; alles zentriert; rounded-lg für alles; Akzentstreifen auf abgerundeten Karten; Glaskarten auf einem Aurora-Hintergrund; jedes Formularsteuerelement im Standardzustand des Browsers; generiert wirkende Texte ("nahtlos", "freischalten", "aufwerten"); ein laufendes Zusammenfassungsfeld neben einem Formular, das nur die Antworten wiederholt; und die Präambel (ein Titel plus ein Absatz, der erläutert, warum die Seite existiert, Statusstempel, "Quellen"-Abschnitte). Öffne direkt mit der Sache selbst.

Baue die Palette, wähle sie nicht aus: ddr palette ramp für wahrnehmungsmäßig gleichmäßige OKLCH- Rampen, ddr palette check --strict für Kontrast, ddr palette blend für alles, das unter einer Wäsche liegt.

Schritt 4: Besorge, was fehlt

Wenn das richtige Werkzeug nicht installiert ist, besorge es. Schrumpfe das Design nicht, um zu dem zu passen, was zufällig vorhanden ist.

• npm: überprüfe package.json, dann installiere. Die library-Einträge des Katalogs enthalten die genaue Installationszeile, Lizenz und Fallstricke (ddr sources search "scroll smooth" --kind library -v).
• shadcn-artige Registries: npx shadcn@latest add <Komponente oder Registry-URL>. Überprüfe die Lizenz der Registry im Katalog, bevor Du Code in ein Client-Repository kopierst.
• Schriftart in einer App: next/font, Fontsource oder hoste die Dateien selbst.
• Schriftart in einer abgesicherten Seite (ein Artefakt, eine E-Mail, ein striktes CSP): verwende ddr fonts, das die echte Datei herunterlädt, sie teilt und base64 @font-face ausgibt.
• Lizenzen für "kostenlose" Codes. Mehrere populäre Registries sind nicht MIT: React Bits und Animate UI sind MIT plus Commons Clause, Aceternity und Preline verbieten die Weiterverteilung ihrer Komponenten, GSAP ist unter eigener Lizenz kostenlos nutzbar, Remix Icon hat seine Lizenz im Januar 2026 geändert, tldraw benötigt einen Lizenzschlüssel in Produktion. Die Felder licence und agent_notes des Katalogs geben dies an; lies sie, bevor Du Code in ein Kunden-Repository oder etwas, das Du weiterverteilst, kopierst.
• Lizenzierte Schrift (Klim, Dinamo, Grilli und der Rest): niemals piratisieren. Nenne sie, nenne den kostenlosen Ersatz aus TYPE.md, gib die Lizenzkosten an.

Sage in einer Zeile, was Du installiert hast und warum. Frage nicht vorher um Erlaubnis.

Schritt 5: Baue

Folge den geladenen Anleitungen. Unverhandelbar unabhängig vom Stil:

• Kontrast 4,5:1 Fließtext, 3:1 große Schrift und UI-Kanten, gemessen am zusammengesetzten Ergebnis, wenn etwas über dem Grund liegt.
• Sichtbares :focus-visible auf allem Interaktiven.
• Touch-Ziele mindestens 24px (WCAG 2.2) und idealerweise 44px, überprüft in einer echten schmalen Breite.
• prefers-reduced-motion beachtet, lande im fertigen Zustand, nicht in einem leeren.
• Nur-Hover-Interaktionen haben einen Touch-Pfad.
• Kein horizontales Body-Scrollen: overflow-x: clip auf html und body.
• Reservierter Platz für Bilder und Einbettungen. CLS unter 0,1.
• Fließende Schrift mit clamp(); Zeilenabstand und Laufweite straffen, wenn die Display-Schrift wächst.
• Themes folgen der Marke. Eine Nur-Light-Marke liefert ein Light-Theme mit color-scheme: light; füge keinen unangeforderten Dark Mode hinzu.
• Echte Texte durchgängig, und wahre Texte (EVIDENCE.md).
• Eine Desktop-Zustimmung genehmigt nicht die Telefon-Komposition. Prüfe den Startbildschirm des Telefons zu seinen eigenen Bedingungen.

Schritt 6: Verifiziere, bevor Du sagst, es sei fertig

Übergebe die Arbeit an die design-review-Skill oder führe ihren Kern selbst aus:

python tools/ddr.py lint src/                         # Negativtest: die offensichtlichen Anzeichen
python tools/ddr.py shots http://localhost:3000 --full  # rendert, misst, macht Screenshots

Führe dann CHECKLIST.md aus, die kurz, geordnet und existiert, weil Dinge durch jede frühere Version von ihr schlüpften. Sieh Dir die Screenshots an. Bestandene Zahlen beweisen nichts über Schönheit.

Jede Fertig-Behauptung trägt ihre eigenen Grenzen: Sage, was Du überprüft hast und was nicht (Geräte, Browser, echte Daten, Lizenzen).

Schritt 7: Lerne

• Wenn der Kunde oder Benutzer etwas lobt, protokolliere den spezifischen Schritt mit Werten: ddr taste win "Masked text rise at 90ms stagger" --values "Instrument Serif 96/0.95" --tags motion:masked-rise,type:serif-display --surface landing. "Der Kunde mochte den Heldenbereich" ist nutzlos.
• Wenn etwas abgelehnt wird, protokolliere es mit dem Grund, dann ändere die Regel in dieser Skill oder ihren Anleitungen, die dies erlaubt hat, und notiere welche Regel mit --rule. Eine Korrektur, die nur im Chat lebt, wiederholt sich.
• Wenn ein Prozess schief geht (ein Screenshot, der gelogen hat, eine Schriftart, die stillschweigend zurückfiel, eine Behauptung, die falsch war), protokolliere ddr taste error mit der Ursache auf der Stufe, die Du tatsächlich erreicht hast (vermutet, beobachtet, reproduziert, isoliert, erklärt, behoben) und der Prävention.
• Wenn etwas ausgeliefert wird, protokolliere ddr taste shipped --tags .... Sättigung wird gemessen an dem, was Du machst, nicht nur an dem, was gelobt wurde, was verhindert, dass ein guter Look zu jedem Look wird.
• Wenn Du eine großartige Referenz findest, füge sie hinzu mit ddr sources add (siehe CONTRIBUTING.md für die Hürde) und, wenn sie einen Job macht, den kein Muster macht, zerlege sie in SPECIMENS.md.

Generelle Lektionen, die allen helfen würden, gehen stromaufwärts: ddr taste export anonymisiert das Ledger in eine Lektion, die Du als Pull Request öffnen kannst.

Entdeckung

Bei einem größeren Redesign sind die Beispiele, die der Kunde nennt, ein Ausgangspunkt, niemals die Grenze. Suche die breitere Kategorie, angrenzende Geschäftsmodelle und nicht verwandte Disziplinen; folge den stärksten Referenzen in ihre tatsächlichen Reisen. Schreibe auf, welche Entscheidung jede Referenz geändert hat. RESEARCH.md hat die Methode und die Design-Research-Skill hat den Workflow.

Nach wiederholter Ablehnung einer Komposition: speichere das fehlgeschlagene Rendering und vergleiche es mit dem benannten Benchmark in derselben Größe. Benenne die konkurrierenden Blickpunkte, Silhouette und Abfolge. Ändere das Subjekt, nicht die Stilgebung.

Für Logos, Marken und Zeichen: verzweige in günstigen Skizzen, die die Konstruktion selbst variieren (Proportion, Silhouette, gemeinsame Striche, Negativraum), mindestens ein Dutzend, nebeneinander beurteilt in der Größe, in der sie leben werden. Sechs polierte Renderings einer Idee in sechs Materialien ist keine Erkundung. Wähle ein Markenzeichen erst, nachdem Du es dort gesehen hast, wo es lebt.

Was nicht von den Mustern übernommen werden sollte

Jedes Muster hat Fehler. Preisgekrönte Arbeiten scheitern regelmäßig an reduzierter Bewegung und Touch. Kopiere die Technik und den Geschmack, niemals die Architektur, ohne sie zuerst zu lesen. Es gibt keinen korrekten Stack: Die Awwwards Site des Jahres läuft auf Webflow, Linear auf Next.js, Lusion auf Astro, Alaris auf handgeschriebenem HTML. Wähle den, der die Idee ausliefert.