Designsysteme für KI-Coding-Agents verstehen

Ein AI-Agent ohne Designsystem erfindet pro Prompt ein neues – und es ist dasselbe, das alle anderen ebenfalls erhalten. Was man ihm stattdessen geben sollte, was diese Datei enthalten muss, um tatsächlich zu funktionieren, und wie man sie in den gängigen Tools installiert.

2026-07-27

Um eigene Designsysteme zu den integrierten Systemen von Bolt hinzuzufügen, ist ein kostenpflichtiger Team-Plan erforderlich. Hier wird erläutert, aus welchen Quellen dieses Feature kompiliert, und wie das Setup funktioniert, das auf jedem Plan über das echte In-Browser-Terminal von Bolt läuft.

2026-07-27

Der Standardrat lautet: Schreiben Sie eine design.mdc-Regel und fertig. Das funktioniert für etwa drei Wochen. Hier erfahren Sie, warum ein Designsystem nicht in eine einzige Rules-Datei passt, wie man sie danach aufteilt, wann welche Regel gelten muss und was in den jeweiligen Teil gehört.

2026-07-27

Ein MCP-Server ermöglicht es einem Agenten, Ihr Designsystem abzufragen, anstatt zu raten. Das löst Probleme mit falschen Prop-Namen und veralteten Imports. Er löst jedoch nicht das Problem eines Agenten, der keine Vorstellung davon hat, wie Ihr Produkt aussehen soll – das sind unterschiedliche Probleme mit unterschiedlichen Lösungsansätzen.

2026-07-27

Die meisten Zusammenfassungen listen zwanzig Tools auf, die unterschiedliche Aufgaben erfüllen, als würden sie miteinander konkurrieren. Hier sind sie nach dem Problem gruppiert, das sie lösen, mit einer entscheidenden Erkenntnis: Keines von ihnen erstellt ein Designsystem, und alle setzen voraus, dass bereits eines vorhanden ist.

2026-07-27

Die meisten Lovable-Prompt-Listen bestehen aus Einzeilern. Design überlebt keine Einzeiler. Hier ist die Anatomie eines Design-Prompts, der über mehrere Sessions hinweg stabil bleibt, inklusive kopierfertiger Beispiele.

2026-08-03

Ein Skill ist ein Ordner mit einer SKILL.md, die Claude Code nur dann lädt, wenn Ihre Aufgabe mit der Beschreibung übereinstimmt. Dieser eine Satz erklärt, warum die meisten installierten Skills nie aktiv werden. Hier finden Sie den Mechanismus, das Dateiformat und einen ausgearbeiteten Design-Skill.

2026-08-04

Codex erkennt SKILL.md-Ordner an fünf verschiedenen Standorten, lädt diese über eine Übereinstimmung der Beschreibung oder ein explizites $ und teilt das Format mit Claude Code und Cursor. Hier finden Sie den Aufbau, die Reihenfolge der Erkennung und einen Design-Skill, den Sie adaptieren können.

2026-08-04

Copilot liest Instruktionsdateien, die niemand mit Design-Entscheidungen füllt, weshalb die UI-Ausgabe standardmäßig generisch ist. Hier ist das Setup: copilot-instructions.md, scoped .instructions.md-Dateien, echte Tokens und eine DESIGN.md, auf die diese verweisen.

2026-08-04

Gemini CLI fügt jede GEMINI.md in seiner Hierarchie in jeden Prompt zusammen, was die Einbindung eines Designsystems ungewöhnlich einfach macht: eine Importzeile genügt, und der Contract wird bei jeder Anfrage geladen. Hier sind das Setup und die importierte Datei.

2026-08-04

Zwei Befehle genügen, um das frontend-design Plugin von Anthropic zu installieren, und es lässt einen einzelnen Screen gut aussehen. Es kann jedoch nicht bewirken, dass der zwanzigste Screen mit dem ersten übereinstimmt, da es über Geschmack verfügt, aber nicht über feste Werte. Hier folgen die Installation, die Lücke und die Lösung, um diese zu schließen.

2026-08-04

Ein Design Kit ist nur der Ausgangspunkt. Damit es wirklich funktioniert, musst du Tokens in jeder Komponente erzwingen, auf bewährten Primitiven aufbauen, die visuelle Richtung per Bildgenerierung finden und Variationen generieren statt den ersten Versuch zu akzeptieren.

2026-08-10

Eine DESIGN.md beschreibt eine visuelle Identität in einer Form, die ein Coding-Agent lesen kann. Wir haben 299 öffentliche Dateien analysiert: Hier ist das Format, Abschnitt für Abschnitt, sowie die vier Punkte, die fast alle davon auslassen.

2026-07-27

Für Menschen geschriebene Designsystem-Dokumentationen scheitern, wenn ein Modell sie liest – und zwar auf eine spezifische, messbare Weise. Was wir in 299 echten Dateien gefunden haben und welche sieben Änderungen Richtlinien ausführbar statt nur beschreibend machen.

2026-07-27

Vier Dateien, vier Aufgaben, eine Prioritätsreihenfolge. Was gehört wohin, welche Tools lesen welche Datei und warum die Design-Datei diejenige ist, die niemand schreibt.

2026-08-04

Sechs Änderungen auf Token-Ebene, jeweils mit Vorher-Nachher-Vergleich. Prompt-Anpassungen verändern einen einzelnen Screen; diese hier verändern jeden Screen, den der Agent von nun an erstellt.

2026-07-27

Drift ist messbar, kein bloßes Gefühl. Wie man ihn über eine Session hinweg zählt, warum er etwa ab dem fünften Screen einsetzt und welche eine Änderung seine Akkumulation stoppt.

2026-07-27

Die meisten Anleitungen konzentrieren sich auf die Tools. Was Designer, die tatsächlich liefern, von denen unterscheidet, die ständig von vorn beginnen, ist das Setup vor dem ersten Prompt und die Fähigkeit, einen Diff zu prüfen, ohne Code lesen zu können.

2026-07-27

Die meisten Checklisten zur Konsistenz fragen, ob sich die Benutzeroberfläche stimmig anfühlt – eine Frage, die niemand beantworten kann. Diese hier ist eine Liste von Prüfungen mit Befehlen und Pass-Bedingungen, sortiert nach der Menge an Drift, die pro investierter Minute aufgedeckt wird.

2026-07-27

Vier Standardwerte erzeugen diese Gleichförmigkeit: eine neutrale Palette, eine Sans-Serif-Schrift, ein Border-Radius und ein Card-Grid. Hier erfahren Sie, woher diese stammen und was man ändern muss.

2026-08-03

Was eine shadcn Registry ist, wie registry.json und registry-item.json zusammenpassen und der Fall, den die Dokumentation kaum abdeckt: die Bereitstellung eines kompletten Themes (Tokens, Fonts, Radii, Light- und Dark-Mode) als ein einziges installierbares Element.

2026-07-27

Fundierte Antworten auf die Fragen, die Paletten-Galerien auslassen: Ob reines Schwarz verwendet werden sollte, wie Elevation ohne Schatten dargestellt wird, warum Akzentfarben angepasst werden müssen und welche Rollen eine Dark-Palette über fünf Farbmuster hinaus benötigt.

2026-07-27

Eine Dashboard-Palette hat drei Aufgaben, die eine Marketing-Palette niemals hat: unterscheidbare Datenserien, Statusfarben, die nicht mit der Marke kollidieren, und Grautöne, die in einer dichten Tabelle bestehen. Hier erfahren Sie, wie man eine Palette erstellt, die all dies erfüllt.

2026-07-27

Warum SaaS-Produkte zu demselben blau-violetten Akzent konvergieren, was eine Palette in einem Produkt-UI tatsächlich überstehen muss und wie man eine markante wählt, die auch um 16 Uhr noch in einer Einstellungstabelle funktioniert.

2026-07-27

Jeder Branchen-Guide für Schriftarten gibt dieselbe Antwort, nur mit anderen Bezeichnungen: eine geometrische Sans für Tech, eine Serifenschrift für Recht, eine Script-Schrift für Beauty. Hier sind Kombinationen, die pro Sektor tatsächlich funktionieren, sowie der Grund, warum das Denken in Kategorien immer wieder zu identischen Marken führt.

2026-07-27

IBMs Carbon ist das größte quelloffene Enterprise-Designsystem, und im Jahr 2026 tut es etwas, das in keinem der Berichte erwähnt wird: Es stellt sich KI-Agenten über das Model Context Protocol zur Verfügung. Ein praktischer Leitfaden dazu, was Carbon ist, wie es geschichtet ist und was der MCP-Server verändert.

2026-07-27

Die meisten Zusammenfassungen zu Designsystemen sind lediglich Linklisten. Dieser Artikel analysiert neun reale Systeme, sortiert nach den Entscheidungen, die sie erfolgreich getroffen haben (Layering, Enforcement, plattformübergreifende Contracts, Auslieferung), sowie die Änderungen, die drei von ihnen in den letzten 18 Monaten vorgenommen haben und über die bisher niemand geschrieben hat.

2026-07-27

Polaris React ist als deprecated markiert; Shopify-Apps nutzen nun Polaris Web Components. Diese werden über einen CDN-Script-Tag geladen und sind keine npm-Abhängigkeit mehr. Was hat sich tatsächlich geändert, warum ist das passiert und was bedeutet dies für alle, die ein Designsystem pflegen?

2026-07-27

Salesforce bezeichnet SLDS 2 als „das Fundament für das agentische Designsystem“: Ein ein Jahrzehnt altes Enterprise-Designsystem wurde rund um CSS Custom Properties neu architektiert, damit generierte Oberflächen markenkonform bleiben. Was hat sich tatsächlich geändert und was bedeutet das für diejenigen, die Salesforce nicht nutzen?

2026-07-27

Linear's Interface wird ständig imitiert und schlecht reproduziert. Eine genaue Analyse dessen, was tatsächlich beobachtbar ist (die Gewichtungsbandbreite, die Hairline-Borders, die einzelne Akzentfarbe) und warum der Teil, den alle kopieren, nicht der Teil ist, der die eigentliche Arbeit leistet.

2026-07-27

Stripe bietet ein Designsystem an, das benutzerdefiniertes CSS vollständig untersagt, und ein weiteres, das fast ausschließlich darauf ausgelegt ist, Overrides zu ermöglichen. Beide sind öffentlich, beide sind dokumentiert, und die Trennlinie zwischen ihnen ist die nützlichste Erkenntnis, die Stripe über Designsysteme veröffentlicht hat.

2026-07-27

Das Design Language System von Airbnb ist das am häufigsten zitierte und zugleich am meisten missverstandene plattformübergreifende Designsystem. Die grundlegende Entscheidung bestand darin, Atome und Moleküle kategorisch abzulehnen – und genau die Begründung hinter dieser Wahl macht es heute so wertvoll.

2026-07-27

Spotifys Encore musste 45 Plattformen und über 2.000 Gerätetypen abdecken. Das eigene Team gibt zu, dass das Pendel zu weit in Richtung Flexibilität ausgeschlagen war und korrigiert werden musste. Diese Korrektur und die daraus resultierende geschichtete Struktur sind der wertvolle Teil der Erkenntnis.

2026-07-27

Apple's HIG, Material oder eigene House Rules als agentenlesbare Anleitungen aufbereiten: Was bei der Übersetzung vom menschlichen Design-Dokument zur Agenten-Instruktion überlebt, was nicht und warum Plattform-Guidelines allein immer noch generische UIs erzeugen.

2026-07-27

Fast jede SaaS-Font-Liste empfiehlt dieselben Schriften. Hier erfahren Sie, warum das so ist, welche Anforderungen eine Schriftart in einem dichten Produkt-UI erfüllen muss (tabellarische Ziffern, echte Gewichtsabstufung, Lesbarkeit bei kleinen Größen) und wann eine zweite Schriftfamilie sinnvoll ist.

2026-07-27

Atomic Design löste ein Problem aus dem Jahr 2013: Menschen benötigten ein gemeinsames Vokabular für Interface-Elemente. Ein Agent verfügt bereits über dieses Vokabular, dem jedoch das Urteilsvermögen fehlt. Welche Teile der Methodik überdauern dies und welche waren lediglich ein temporäres Gerüst?

2026-07-27

Primitive, semantisch, Komponente. Die Drei-Ebenen-Konvention ist nahezu universell, dennoch enden die meisten Teams mit Tokens, die niemand verwendet. Warum das passiert, wie jede Ebene benannt wird und welcher Test einen falschen Namen aufdeckt, bevor er veröffentlicht wird.

2026-07-27

Design-to-Code-Tools reproduzieren das Aussehen eines Frames. Sie können jedoch nicht reproduzieren, was dieser bedeutet, da ein Figma-Frame diese Information nicht enthält. Was tatsächlich übertragen wird, was nicht, und welche Entscheidung bei der Benennung die größte Lücke schließt.

2026-07-27

Governance-Modelle basieren auf der Annahme, dass eine Person eine Änderung beantragt und eine Person diese prüft. Wenn ein Agent zwischen zwei Reviews vierzig Screens schreibt, sind nicht mehr die Contribution-Prozesse der Flaschenhals, sondern die Durchsetzung (Enforcement) wird zur Hauptaufgabe.

2026-07-27

Eine Komponenten-Library ist Code, den man installieren kann. Ein Designsystem ist die Gesamtheit der Entscheidungen, die diesen Code so aussehen lassen, wie er aussieht. Die Verwechslung dieser beiden Konzepte führt dazu, dass Teams shadcn installieren, ein generisches Produkt ausliefern und nicht verstehen, was schiefgelaufen ist.

2026-07-27

Welche Schriften tatsächlich zu Avenir passen, live gerendert statt als Screenshot. Sowie die Google Fonts, die einspringen, wenn die Lizenz nicht übertragbar ist, und vollständige Systeme, die auf diesen Kombinationen basieren.

2026-08-03

Die Sans-Serifs und Monospaced-Schriften, die mit Caslon harmonieren, live dargestellt in kostenlosen Caslon-Revivals, die produktiv eingesetzt werden können. Im Zweifelsfall: Caslon nutzen; bei der Kombination: zuerst dies lesen.

2026-08-03

Die Serifen- und Mono-Schriften, die zu Proxima Nova passen, live gerendert mit den kostenlosen Alternativen. Die Standard-Schriftart des Internets verdient einen Partner, der kein Standard ist.

2026-08-03

Was passt zur abgerundeten Geometrie von Gilroy? Live-Beispiele mit kostenlosen Google-Fonts-Alternativen. Und welche der kostenlosen Schriftschnitte tatsächlich für ein Produkt taugen.

2026-08-03

Acht öffentliche Brand Guidelines, die tatsächlich einen Mehrwert bieten; was ein funktionales Dokument von einem hübschen PDF unterscheidet und warum die nächste Generation von Guidelines maschinenlesbar sein muss, statt nur von Designern gelesen zu werden.

2026-08-04

Eine DESIGN.md ist das schriftliche Design-Briefing, dem Ihr AI Coding-Agent folgt, damit dieser aufhört, generische UIs zu bauen. Hier erfahren Sie, was hineingehört und wie Sie eine vollständige, exportierbare DESIGN.md aus einem echten Designsystem generieren.

2026-08-04

Beide stellen einem Coding-Agent eine DESIGN.md zur Verfügung. getdesign.md veröffentlicht Analysen bestehender Marken; Identity Forge generiert ein originäres System mit den semantischen Tokens, auf die sich das Briefing bezieht. Dieser strukturelle Unterschied entscheidet, welches Tool für das jeweilige Projekt geeignet ist.

2026-07-27