So erzielst du professionelle Ergebnisse mit AI Design Kits

Mach es zur Regel, dass jede Komponente Design Tokens aus dem globalen System verwendet, niemals hartcodierte Farben oder Schriftgrößen. Füge das deinen Projektanweisungen hinzu (CLAUDE.md, .cursorrules oder Äquivalent):

## Design system

Every component must use the global design system via semantic tokens.
Use `bg-background`, `text-foreground`, `bg-card`, `text-primary`,
`border-border`, etc. Never hardcode colors like `bg-neutral-950` or
`text-white`. Typography uses the heading and body font variables, not
literal font-family values.

Before submitting a component, verify it contains zero hardcoded color
or font values. Run a review pass if needed.

Wenn jede Komponente aus derselben Token-Schicht schöpft, malt ein Wechsel des Design Kits das gesamte Produkt neu. Ohne diese Regel klappt das erste Kit sauber und jede spätere Änderung bedeutet, hartcodierte Werte in fünfzig Dateien aufzuspüren.

Ein Agent, der ein Dropdown von Grund auf baut, bekommt es halbwegs hin. Ein Agent, der ein Radix UI-Dropdown mit den Tokens deines Kits stylt, bekommt es barrierefrei, tastaturnavigierbar, animiert und visuell konsistent. Die Interaktionsarbeit ist bereits gelöst, der Agent muss nur noch das Aussehen anwenden.

Die Komponenten-Bibliotheken, die am besten mit Design Kits funktionieren:

• [shadcn/ui](https://ui.shadcn.com/) kopiert Komponenten als Quellcode in dein Projekt. Sie verwenden bereits CSS-Variablen, sodass die Tokens eines Design Kits direkt eingesetzt werden können. Identity Forge liefert eine shadcn Registry, die die Tokens eines Kits mit einem Befehl installiert.
• [Radix UI](https://www.radix-ui.com/) liefert die ungestylten Primitive unter shadcn. Verwende es direkt, wenn du volle Kontrolle über Markup und Styling haben willst und dabei das Barrierefreiheits- und Interaktionsverhalten behältst.
• [Base UI](https://base-ui.com/) ist eine weitere ungestylte Primitiv-Bibliothek mit minimaler API. Gut geeignet, wenn die Abstraktionsebene von Radix für deinen Anwendungsfall zu umfangreich wirkt.

Die Aufteilung ist in jedem Fall gleich: die Bibliothek ist für das Verhalten zuständig (Fokusverwaltung, Tastaturnavigation, Screenreader-Ansagen, Scroll-Sperre, Portal-Platzierung) und das Design Kit für das Aussehen (Farben, Typografie, Abstände, Formen, Tiefe). Du kannst das Kit wechseln ohne die Komponenten anzufassen, oder die Komponenten-Bibliothek wechseln ohne das Kit zu berühren.

Bevor du dich auf ein Design Kit festlegst, generiere ein paar Bilder davon, wie das Produkt aussehen könnte. Bildmodelle sind gut in Stimmung, Komposition und Farbbeziehungen. Sie sind schlecht darin, ein System zu produzieren, aus dem man bauen kann. Nutze sie für das Erste, nicht für das Zweite.

1. 1

   Stimmungsbilder generieren

   Verwende ein Bildmodell (gpt-image-1 funktioniert gut über die Codex CLI), um visuelle Richtungen zu erkunden. Generiere drei bis fünf Optionen mit unterschiedlichen Stimmungen.

   Copy

   codex exec "generate an image of a SaaS dashboard with warm, earthy tones and generous whitespace"

2. 2

   Die Richtung wählen

   Wähle das Bild, das einfängt, wie sich das Produkt anfühlen soll. Du wählst eine Stimmung, kein Layout.

3. 3

   Das Kit erstellen

   Lass deinen Agenten ein Design Kit in Identity Forge erstellen, das zur gewählten Richtung passt. Oder nutze die Extraktions-Pipeline, um Tokens aus einer bestehenden Referenz zu extrahieren.

4. 4

   In Identity Forge pflegen

   Ab hier ist das Kit die zentrale Quelle der Wahrheit. Verfeinere es im Studio, versioniere es und exportiere es zu deinem Agenten. Das Bild hat dir die Richtung gegeben; das Kit hält sie konsistent.

Bildmodelle sind gut im Explorationsteil. Sie sind nicht gut darin, etwas zu produzieren, womit ein Agent direkt bauen kann. Ein Bild kann einem Agenten nicht sagen, welchen Border-Radius er für eine Card verwenden soll. Ein Kit kann das.

Die am wenigsten genutzte Technik: Statt die erste Version eines Abschnitts zu akzeptieren, bitte deinen Agenten, drei Variationen mit unterschiedlichen Layouts, Dichten oder Betonungsmustern zu bauen.

Build three variations of the pricing section:
1. A compact horizontal layout with all plans visible at once
2. A card-based layout with the recommended plan highlighted
3. A comparison table with feature rows

Use the active design kit for all three. Keep each in a
separate component file so I can compare them side by side.

Das kostet ein paar zusätzliche Minuten Agenten-Zeit und bewahrt das Projekt davor, wie das Standardergebnis des Modells auszusehen. Der Agent wendet dasselbe Design Kit auf jede Variation an, sodass alle drei zur Marke passen. Du wählst die, die zum Inhalt, zur Zielgruppe und zum Seitenrhythmus passt.

Nichts davon ist für sich genommen schwer. Es summiert sich. Erzwungene Tokens bedeuten, dass das Kit tatsächlich das Aussehen kontrolliert. Gute Komponenten-Primitive bedeuten, dass die Interaktionen einfach funktionieren. Eine echte visuelle Referenz bedeutet, dass die Stimmung beabsichtigt ist, nicht zufällig. Und aus drei Optionen zu wählen bedeutet, dass das Layout zum Inhalt passt statt zum Standard des Modells. Das Ergebnis sieht aus, als hätte jemand Designentscheidungen getroffen, weil jemand es getan hat.