Design System für Gründer:Du brauchst keinen Designer

Ein Design System für Gründer sorgt dafür, dass ein KI-gebautes Produkt ohne Designer professionell aussieht: Design Tokens, eine Komponentenbibliothek, die dir gehört, und Regeln, denen die KI folgen kann. Ich habe 1.480 Produktionskomponenten gebaut und keine einzige davon von Grund auf gestaltet.

Dashboards, Formulare, Tabellen, Modals, Diagramme, mehrstufige Assistenten. Jede Komponente sieht aus, als gehöre sie zum selben Produkt. Jede funktioniert im Dark Mode. Und nichts davon kam aus Designtalent. Es kam daher, dass ich jede Designentscheidung genau einmal getroffen habe – und die KI dann 1.480 Mal dazu gebracht habe, sie wiederzuverwenden.

Warum ein Design System für Gründer wichtig ist: KI-gebaute Apps driften in die Inkonsistenz

Das Schwierigste beim Bauen mit KI ist nicht der Code. Es ist die Konsistenz. Die KI kann dir einen wunderschönen Screen bauen. Aber passt er zu den letzten hundert Screens? Gleiche Farben, gleiche Abstände, gleiche Button-Formen?

Ohne System: nein. Bitte die KI an drei verschiedenen Tagen um drei Buttons, und du bekommst drei verschiedene Blautöne, drei verschiedene Innenabstände, drei verschiedene Eckenradien. Jeder sieht für sich genommen gut aus. Zusammen schreien sie „Prototyp“. Das ist Design-Schuld, und sie wächst genau wie technische Schuld: Jeder neue Screen ist eine neue Designentscheidung, und jede neue Entscheidung ist eine neue Chance abzudriften.

Ein Designer würde das mit Geschmack lösen. Ein Design System löst es, indem es die Entscheidung ganz abschafft.

Design Tokens: einmal entscheiden, überall wiederverwenden

Design Tokens sind die Konstanten im Look deines Produkts – eine kurze Liste freigegebener Werte, die jeder Screen verwenden muss. Statt „irgendein Blau“ gibt es die Markenfarbe. Statt beliebiger Abstände eine Abstandsskala. Statt frei gewählter Schriftgrößen eine Typografieskala.

Es geht nicht um Ästhetik – Tokens machen aus Design eine Nachschlage-Aufgabe statt einer Ermessensfrage. Und KI ist hervorragend im Nachschlagen. Sobald deine Tokens existieren, wird aus „Mach es schön“ ein „Nutze die Tokens“, und das ist eine Anweisung, der die KI tatsächlich folgen kann.

shadcn/ui: professionelle Komponenten, die dir gehören

Tokens liefern die Zutaten. Für die Komponenten selbst nutze ich shadcn/ui – aus einem Grund, der speziell mit KI-Entwicklung zu tun hat. Es ist keine klassische Komponentenbibliothek, die du als verschlossene Blackbox installierst. Du bekommst den echten Code von 77 schön gestalteten, vollständig barrierefreien, produktionsreifen Komponenten – Buttons, Formulare, Dialoge, Tabellen, Tabs, Toasts –, den du in dein eigenes Projekt kopierst. Sie gehören dir. Du kannst sie ändern.

Warum das zählt: Ist eine Komponente eine Blackbox, kann die KI nicht hineinsehen und erfindet drumherum eigene Stile. Liegt der Komponentencode in deinem Projekt, liest die KI ihn, lernt das Muster und baut neue Komponenten, die passen – gleiche Struktur, gleiche Tokens, gleiches Verhalten. Die Einrichtung hat bei mir 15 Minuten gedauert. Diese 77 Grundbausteine wurden zur Basis für alle 1.480 Feature-Komponenten, mit Barrierefreiheit und Dark Mode von Anfang an.

12 WochenDeine Konzernkarriere war nie der PlanBewirb dich beim Solopreneur Accelerator.Jetzt bewerben →

Varianten: bring der KI deine Regeln bei

Das letzte Puzzleteil sind Varianten – benannte Versionen jeder Komponente für jede Situation. Ein Button wird nicht ad hoc gestylt; er kommt in einer festen Auswahl: default, secondary, outline, ghost, danger. Klein, mittel, groß. Das war’s.

Der Gewinn: Sprache ersetzt Styling. Wenn ich der KI sage „Erstelle einen Löschen-Button“, weiß sie, dass sie die Danger-Variante nimmt. Niemand wählt einen Rotton. Niemand wählt einen Innenabstand. Die Entscheidung fiel einmal, als die Variante definiert wurde, und jeder Löschen-Button im Produkt ist für immer identisch.

Dasselbe Prinzip „einmal entscheiden“ zieht sich durch die gesamte Codebasis, nicht nur durch die Oberfläche – so hat ein einziges Muster auf 633 Services skaliert, und zwar auf der Datenseite. Und es ergänzt die andere Hälfte des visuellen Feinschliffs: den Umgang mit Lade-, Fehler- und Leerzuständen, die jeder Screen braucht. System plus Zustände macht aus einer KI-gebauten App ein Produkt.

So briefst du die KI zu deinem Design System

Sobald das System steht, folgt jede Komponentenanfrage derselben Form: das zu kopierende Muster nennen, die zu nutzenden Tokens nennen, die zu behandelnden Zustände nennen. Etwa so:

Erstelle eine Erfolgsgeschichten-Karte. Folge dem Muster der bestehenden Kennzahlen-Karte. Nutze die Standard-Karten-Tokens, die Standard-Schriftgrößen für Titel und Text und die Markenfarbe für den Icon-Hintergrund. Berücksichtige Dark Mode und Tastaturbedienung wie in der Referenzkomponente.

Die KI erzeugt gleich beim ersten Versuch eine Komponente, die zu deinem Produkt passt – weil du sie nicht gestalten lässt, sondern sich an Regeln halten lässt. Du bist der Architekt; das System ist deine Bauordnung.

Damit alles sauber bleibt, mache ich jeden Monat ein kurzes Audit: Ich suche nach fest eincodierten Farben, die Tokens sein sollten, nach zufälligen Abständen, die auf die Skala gehören, nach Light-Mode-Stilen ohne ihr Dark-Mode-Pendant und nach wiederholtem Einzelstyling, das zu einer Variante werden sollte. Dreißig Minuten im Monat halten 1.480 Komponenten wie ein einziges System aussehen.

Und es gibt einen Zinseszinseffekt, den dir keiner erzählt: Deine Komponentenbibliothek sind Trainingsdaten für deine KI. Jede gut gebaute Komponente bringt ihr deine Muster bei. Nach 100 Komponenten baut sie wie du. Nach 1.000 ist das Driften komplett verschwunden.

Das BuchThe Solopreneur RevolutionLuis Gonçalves darüber, wie du neben dem Job mit KI ein Solopreneur-Business aufbaust.Zum Buch →

Häufig gestellte Fragen

Brauche ich einen Designer für mein SaaS?

Nicht für ein Produkt, das du allein baust. Ein Design System – Tokens, eigene Komponenten, benannte Varianten – liefert dir ohne Designkenntnisse eine professionelle, konsistente Oberfläche. Ein Designer lohnt sich später, für Marken- und Marketingarbeit, nicht dafür, deine Buttons im selben Blau zu halten.

Was sind Design Tokens, einfach erklärt?

Eine kurze Liste freigegebener Designwerte: deine Farben, deine Abstandsgrößen, deine Schriftgrößen, die Rundung deiner Ecken. Jeder Screen muss aus dieser Liste wählen, statt Werte zu erfinden. So wird aus „Mach es schön“ eine Regel, der die KI mechanisch folgen kann.

Was ist shadcn/ui und warum eignet es sich für KI-Entwicklung?

Eine Sammlung von 77 produktionsreifen Oberflächenkomponenten, deren Code du in dein eigenes Projekt kopierst, statt eine verschlossene Bibliothek zu installieren. Weil der Code sichtbar ist, kann die KI ihn lesen und die Muster nachbilden – neue Komponenten passen dann zu den alten, statt neue Stile zu erfinden.

Wie verhindere ich, dass die KI neue Stile erfindet?

Verweisen statt beschreiben. Jede Anfrage nennt eine bestehende Komponente als Muster und die zu nutzenden Tokens – „folge dem Muster der Kennzahlen-Karte“ schlägt jedes Adjektiv. Danach monatlich auf fest eincodierte Farben und Abstände außerhalb der Skala prüfen und wiederholte Stile in benannte Varianten überführen.