Das Design ist der Code

The Design is the Code

 

Wie die Logik zellulärer Automaten agentische Designsysteme prägen wird – und warum die Zukunft der Webentwicklung vielleicht schon in einfachen Regeln geschrieben steht

An der Schnittstelle von Designsystemen, künstlicher Intelligenz und Berechnungstheorie vollzieht sich ein tiefgreifender Wandel. Er ist so grundlegend, dass er infrage stellt, was „Design“ im Zeitalter autonomer Agenten überhaupt bedeutet.

 

 

 

Jahrzehntelang haben wir Design und Code als getrennte Disziplinen behandelt: Design als Reich menschlicher Kreativität und ästhetischer Urteilskraft, Code als mechanische Übersetzung dieser Ideen in ausführbare Form. Doch je häufiger KI-Agenten Benutzeroberflächen eigenständig zusammensetzen, Designsysteme als maschinenlesbare Infrastruktur nutzen und aus semantischen Tokens Code erzeugen, desto näher rücken wir einem Punkt der Konvergenz, der an eine sehr viel ältere Idee aus der Berechnungstheorie erinnert.

 

Welche Idee? Das Design ist der Code.

 

Das ist nicht bloß ein eingängiger Satz. Es ist die Einsicht, dass wir womöglich auf eine Welt zusteuern, in der Designsysteme wie zelluläre Automaten funktionieren: einfache Regeln, aus denen komplexes, emergentes Verhalten entsteht. Eine Welt, in der die Grenze zwischen dem „Gestalten“ und dem „Programmieren“ von etwas völlig verschwimmt. In der autonome Agenten Designsysteme nicht nur nutzen, sondern Designsysteme in Aktion sind.

Der Moment der Konvergenz

Am 11. Dezember 2025 war Brad Frost (Schöpfer von Atomic Design) zusammen mit Dominic Nguyen (Mitgründer von Chromatic) in einer Live-Session zu „Agentic Design Systems in 2026“ zu Gast. Ihre Botschaft war klar: KI-Agenten setzen bereits heute UIs aus denselben Komponenten zusammen, die auch menschliche Teams verwenden. Designsysteme müssen sich zu maschinenlesbarer Infrastruktur weiterentwickeln – sonst drohen sie zu Relikten einer vergangenen Epoche zu werden.

 

 

Das Storybook-Team formulierte es so: „KI beginnt, Designsysteme genau so zu verwenden, wie sie dokumentiert sind. Lücken bei Beispielen, Zuständen & Einschränkungen führen direkt zu unvorhersehbarer UI-Ausgabe.“

Dieser Blogbeitrag geht den tiefen Verbindungen zwischen zellulären Automaten, emergentem Verhalten und der Zukunft agentischer Designsysteme nach. Wir verfolgen die theoretischen Grundlagen von von Neumanns selbstreplizierenden Maschinen bis zu den KI-Agentenschwärmen von heute.

 

Wir schauen uns an, wie Drupal und moderne CMS-Plattformen KI über Module wie Schema.org Blueprints und Drupal AI integrieren. Und wir fragen, was das alles für Designer, Entwickler und die Zukunft der Entwicklung digitaler Produkte bedeutet.


Zelluläre Automaten und die Logik der Emergenz

Die Schönheit einfacher Regeln

1970 stellte der Mathematiker John Conway das Game of Life vor – ein „Null-Spieler-Spiel“, das zu einem der am meisten untersuchten Systeme der Berechnungstheorie werden sollte. Die Regeln sind atemberaubend einfach:

  1. Jede lebende Zelle mit weniger als zwei lebenden Nachbarn stirbt (Unterbevölkerung)
  2. Jede lebende Zelle mit zwei oder drei lebenden Nachbarn überlebt
  3. Jede lebende Zelle mit mehr als drei lebenden Nachbarn stirbt (Überbevölkerung)
  4. Jede tote Zelle mit genau drei lebenden Nachbarn wird lebendig (Fortpflanzung)

Aus diesen vier Regeln – ausgedrückt in einer Handvoll binärer Bedingungen – entsteht ein erstaunliches Universum an Komplexität. Gleiter durchqueren unendliche Gitter. Oszillatoren pulsieren in ewigem Rhythmus. Kanonen feuern Musterströme durch den zellulären Raum. Und am bemerkenswertesten: Vom Game of Life ist bewiesen, dass es Turing-vollständig ist: Alles, was sich algorithmisch berechnen lässt, kann im Prinzip auch innerhalb von Conways schlichtem Gitter berechnet werden.

 

 

Abbildung 1: Gospers Gleiterkanone in Conways Spiel des Lebens. Dieses Muster erzeugt einen unablässigen Strom von Gleitern und zeigt, wie aus einfachen Regeln unendliche, sich selbst erhaltende Komplexität entstehen kann.

 

 

Das ist die erste Lektion der zellulären Automaten: Komplexität ist keine Voraussetzung für komplexes Verhalten. Einfache Regeln, konsequent auf ein Substrat angewendet, können Muster und Verhaltensweisen hervorbringen, die niemand ausdrücklich programmiert hat.

Pflichtvideo: Einführung in zelluläre Automaten

Eine Einführung in zelluläre Automaten, darunter Conways Spiel des Lebens und die sich selbst replizierenden Langton-Schleifen

Das Video zeigt mehrere Animationen, darunter die schließliche Selbstzerstörung, zu der es käme, wenn man Langton-Schleifen auf einem großen Torus (bei dem gegenüberliegende Ränder des Gitters miteinander verbunden sind) sich vermehren ließe.

 

 

 

 

Weitere Ressourcen zum Video:


Langton-Schleifen und Selbstreplikation

1984 trieb Christopher Langton dieses Prinzip mit seinen sich selbst replizierenden Schleifen weiter voran – einem zellulären Automaten, der echte Prinzipien künstlichen Lebens zeigte. Während Conways Spiel des Lebens emergente Komplexität zeigt, zeigen Langton-Schleifen emergente Fortpflanzung.

Jede Schleife besteht aus einer zyklischen Begrenzung, die ein in Zellzuständen kodiertes „Genom“ umschließt. Dieses Genom fließt unablässig um die Schleife herum und hinaus in einen Konstruktionsarm, der über 151 Zeitschritte hinweg eine Tochterschleife aufbaut. Ist sie fertig, löst sich die Tochter von der Mutter, und beide replizieren sich weiter.

 

Grid art of a red path with blue, yellow, and cyan tiles, on a dark background.

Abbildung 2: Langton-Schleife in ihrer Ausgangskonfiguration. Die Erbinformation zirkuliert durch die Schleife und steuert über den ausfahrenden Arm den Bau von Tochterschleifen.

 

„Wenn eine sich selbst reproduzierende Maschine innerhalb eines zellulären Automaten möglich ist, dann könnte Leben selbst durch Maschinen erreichbar sein.“

- Christopher Langton, „Studying Artificial Life with Cellular Automata“ (1986)

Die Folgen sind tiefgreifend. Langton-Schleifen zeigen, dass Selbstreplikation weder die Komplexität biologischer Zellen noch die universellen Konstruktionsfähigkeiten von von Neumanns ursprünglichem Entwurf voraussetzt. Sie braucht nur:

  • Ein Satz einfacher, lokaler Regeln
  • Einen Mechanismus zur Kodierung von Anweisungen
  • Einen Vorgang, durch den diese Anweisungen ausgeführt werden

Die Regeln sind der Organismus. Der Entwurf ist der Code.

1999 führte Hiroki Sayama Evoloops ein, Varianten, die strukturelle Auflösbarkeit und phänotypische Wechselwirkungen einbeziehen und so spontane Mutationen und evolutionäre Dynamik ermöglichen. Diese Schleifen entwickeln sich durch direkte physische Kollisionen während der Replikation weiter, was zu Genotyp-Variationen, größerer morphologischer Vielfalt und wachsender Komplexität über die Generationen hinweg führt. Anders als Langtons feste Replikation zeigen Evoloops vererbbare Mutationen ohne äußeres Eingreifen.

 

 

Regel 110 und universelle Berechnung

Stephen Wolframs Erforschung elementarer zellulärer Automaten gipfelte in einer verblüffenden Entdeckung: Regel 110, eine von nur 256 möglichen Regeln für den einfachsten Typ eines eindimensionalen zellulären Automaten, ist zu universeller Berechnung fähig.

Regel 110 lässt sich vollständig festlegen, indem man für jede der acht möglichen Kombinationen aus einer Zelle und ihren beiden Nachbarn das Ergebnis angibt. Und doch kann diese banal einfache Regel – acht binäre Entscheidungen – eine universelle Turingmaschine simulieren.

 

Rull 110 cellular automaton - Triangle pattern with black and white abstract geometric design.

Abbildung 3: Zellulärer Automat Regel 110. Trotz ihrer einfachen Definition zeigt Regel 110 ein Verhalten der Klasse 4 – komplexe Muster, die weder völlig stabil noch völlig chaotisch sind – und wurde als Turing-vollständig bewiesen.

 

„Man braucht nichts, was auch nur annähernd einer ganzen Computer-CPU ähnelt, um universell zu rechnen. Man braucht nur diese kleine Regel.“

- Stephen Wolfram, „A New Kind of Science“

Im Jahr 2004 veröffentlichte Matthew Cook einen Beweis, dass Regel 110 mit einem bestimmten, sich wiederholenden Hintergrundmuster Turing-vollständig ist. Der Beweis zeigt, dass Regel 110 zyklische Tag-Systeme nachbilden kann, die ihrerseits jede beliebige Turingmaschine emulieren können. Unter den 88 möglichen eindeutigen elementaren zellulären Automaten ist Regel 110 der einzige, bei dem die Turing-Vollständigkeit direkt bewiesen wurde.

Das Prinzip der rechnerischen Äquivalenz, das Wolfram vorgeschlagen hat, legt etwas noch Radikaleres nahe: Systeme oberhalb einer minimalen Komplexitätsschwelle sind in ihren Rechenfähigkeiten im Wesentlichen gleichwertig. Ein menschliches Gehirn, ein Wettersystem und Regel 110 sind in einem tiefen Sinne rechnerisch äquivalent.

Wolframs vier Klassen zellulärer Automaten

  • Klasse 1: Die Entwicklung führt zu einem homogenen Zustand
  • Klasse 2: Die Entwicklung führt zu getrennten periodischen Strukturen
  • Klasse 3: Die Entwicklung führt zu chaotischen, zufälligen Mustern
  • Klasse 4: Die Entwicklung führt zu komplexen Mustern mit lokalisierten Strukturen – fähig zur universellen Berechnung

Regel 110 zeigt ein Verhalten der Klasse 4, das Wolfram als Existenz am „Rand des Chaos“ beschreibt – eine kritische Grenze, an der einfache Regeln die maximale Rechenleistung hervorbringen.

Die 0E0P-Metazelle: echte Selbstreplikation

Im Oktober 2018 vollendete Adam P. Goucher den Bau der 0E0P-Metazelle – eines Musters in Conways Spiel des Lebens, das zu echter Selbstreplikation fähig ist. Anders als frühere Metazellen, die bereits vorhandene Kopien in der Nähe benötigten, kann die 0E0P-Metazelle Kopien ihrer selbst von Grund auf erzeugen, einschließlich ihres eigenen Anweisungsbands.

Diese Leistung ist ein Meilenstein des künstlichen Lebens: ein System, das sich allein mit lokalen Regeln durch ein Rechensubstrat fortpflanzen kann. Am 23. November 2013 baute Dave Greene den ersten Replikator im Spiel des Lebens, der eine vollständige Kopie seiner selbst einschließlich des Anweisungsbands erzeugt – und zeigte damit, dass selbst Conways einfacher Automat mit nur zwei Zuständen unbegrenzte Selbstreproduktion tragen kann.

 

Mehr entdecken: Videos zu zellulären Automaten

 

Suche nach weiteren faszinierenden Inhalten zu zellulären Automaten:

▶️ YouTube-Suche: „cellular automata the design is the code“


Designsysteme als Rechensubstrate

Vom Atomic Design zum Agentic Design

Brad Frosts Atomic-Design-Methodik, 2013 eingeführt, hat revolutioniert, wie wir über Designsysteme denken. Indem Oberflächen in Atome (Grundelemente wie Buttons und Eingabefelder), Moleküle (einfache Kombinationen), Organismen (komplexe UI-Bereiche), Templates (Seitenlayouts) und Seiten (finale Umsetzungen) zerlegt werden, bot Atomic Design eine hierarchische Struktur, um Komplexität zu beherrschen.

Doch das Bemerkenswerte ist im Rückblick: Atomic Design verkörperte bereits die Prinzipien zellulärer Automaten, ohne sie ausdrücklich zu erkennen.

Prinzip zellulärer AutomatenEntsprechung im Atomic Design
Lokale RegelnJede Komponentenebene hat Regeln dafür, wie sie sich mit anderen kombinieren lässt
EmergenzKomplexe Seiten entstehen aus der Kombination einfacherer Elemente
ReproduzierbarkeitDieselben Atome, nach denselben Regeln kombiniert, führen zu konsistenten Ergebnissen
SkalierbarkeitDas System skaliert ohne zentrale Steuerung: Jede Komponente „kennt“ ihr eigenes Verhalten
SelbstorganisationDesign-Tokens übertragen Änderungen automatisch auf das gesamte System

„Wenn das Designsystem langweilig ist, setzt es Designer und Entwickler frei, Neues zu schaffen und neue Probleme zu lösen. Das Designsystem trägt die Last des Langweiligen, damit Designer und Entwickler es nicht tun müssen.“

– Josh Clark, „The Most Exciting Design Systems Are Boring“

Im Februar 2023 schrieb Brad Frost über „Design Systems in the Time of AI“:

„KI ist ein natürlicher Konsument von Designsystemen … Tatsache ist, dass ein Großteil der Komponentenarbeit in Designsystemen tatsächlich mechanisch und vorhersehbar ist. Wir nutzen bereits Tools wie PlopJS, um Komponenten-Boilerplate zu erzeugen, das zur Form der restlichen Bibliothek passt. Ich würde es begrüßen, wenn KI mir bei der Erstellung vieler gängiger Boilerplate-Dinge helfen würde.“

– Brad Frost

Gerade die mechanische und vorhersehbare Natur von Designsystemen macht sie für einen Betrieb im Stil zellulärer Automaten geeignet. Sind die Regeln klar, lokal und konsequent angewendet, können Agenten eigenständig arbeiten – so wie die Zellen in Conways Spiel des Lebens keine zentrale Steuerung brauchen, um Gleiter und Oszillatoren hervorzubringen.

Der maschinenlesbare Imperativ

Die Storybook MCP-Initiative (Model Context Protocol) ist eine entscheidende Weiterentwicklung in diese Richtung. Storybook MCP wurde Ende 2025 angekündigt und versorgt KI-Coding-Agenten mit maschinenlesbaren Komponenten-Metadaten aus bestehenden Storybook-Setups.

Die zentrale Erkenntnis: Agenten brauchen weder rohen Code noch visuelle Dokumentation. Sie brauchen:

  • Komponenten-Manifeste: Strukturierte Metadaten zu jeder Komponente – ihre Props, Varianten, Design-Token-Bindungen und Anwendungsbeispiele
  • Semantische Benennung: Aussagekräftige Tokens wie action.primary.confirm, die Agenten Bedeutung vermitteln, nicht nur Werte
  • Validierungsschleifen: Die Fähigkeit, Tests auszuführen, Fehler zu erkennen und sich selbst zu korrigieren

„Storybook MCP hilft Agenten, Ihren Mustern zu folgen und Ihre Tests zu bestehen. Es stattet Agenten mit zwei Dingen aus, die sie bisher nie hatten: maschinenlesbaren Komponenten-Metadaten und einer iterativen Schleife, um Fehler selbst zu beheben.“

- Storybook-Team

Storybook MCP enthält eine autonome Korrekturschleife. Agenten können damit Ihre Komponententests (Interaktion und Barrierefreiheit) ausführen, sehen, was fehlschlägt, und ihre eigenen Fehler beheben. Erst nachdem die Tests bestanden sind, muss ein Entwickler eingreifen. Schluss mit dem Prompt-Babysitting.

Genau das ist die Architektur eines zellulären Automaten, angewendet auf Design: lokale Regeln (Komponentenspezifikationen), Interaktionen mit Nachbarn (Kompositionsmuster) und iterative Aktualisierungen (Validierung und Selbstkorrektur).

 

Mein Komponenten-Manifest als Genom

Der Vergleich mit Langtons Schleifen wird noch treffender, wenn wir betrachten, wie Komponenten-Manifeste funktionieren. In Langtons System enthält das in zirkulierenden Zellen kodierte „Genom“ die Anweisungen zum Bau einer neuen Schleife. In einem maschinenlesbaren Designsystem enthält das Komponenten-Manifest die Anweisungen zum Zusammenbau von Oberflächen.

Ein Komponenten-Manifest könnte Folgendes festlegen:

{
  "name": "Button",
  "variants": ["primary", "secondary", "destructive"],
  "sizes": ["sm", "md", "lg"],
  "props": {
    "label": "string",
    "disabled": "boolean",
    "onClick": "function"
  },
  "tokens": {
    "background": "color.action.primary",
    "borderRadius": "radius.md",
    "padding": "space.3"
  },
  "constraints": [
    "Must have accessible contrast ratio",
    "Label required for non-icon buttons",
    "Minimum touch target 44x44px"
  ],
  "examples": [
    { "variant": "primary", "label": "Submit", "size": "md" },
    { "variant": "destructive", "label": "Delete", "size": "sm" }
  ]
}

Dieses Manifest ist zugleich Designspezifikation und ausführbarer Code – genauer gesagt: die Anweisungen, aus denen sich ausführbarer Code erzeugen lässt. Der Agent, der dieses Manifest verarbeitet, muss weder Ästhetik noch User Experience im menschlichen Sinn verstehen. Er muss die Regeln befolgen, die Elemente gemäß ihren Constraints kombinieren und gültige Ergebnisse liefern.

 

Ich stimme Brad Frost zu, dass ein YAML-Format sinnvoll ist.

 

Drupal-Komponenten verwenden bereits das YAML-Format. Etwa so:

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
name: Button
status: experimental
description: Use Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
props:
  type: object
  properties:
    html_tag:
      type: string
      title: The HTML tag to use for the button (button | a). Defaults to `button`.
      default: button
      enum:
        - button
        - a
    url:
      type: string
      title: URL Link
      description: URL link for the button when the HTML tag is an anchor link.
      $ref: "ui-patterns://url"
    color:
      type: string
      title: Color
      description: Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
      default: ''
      enum:
        - ''
        - primary
        - secondary
        - success
        - danger
        - warning
        - info
        - dark
        - light
        - link
    outline:
      type: boolean
      title: Outline
      description: In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
      default: false
    size:
      type: string
      title: Size
      description: Bootstrap button size
      default: ''
      enum:
        - ''
        - btn-sm
        - btn-lg
    disabled:
      type: boolean
      title: Disabled
      description: Disabled button
      default: false
    button_utility_classes:
      type: array
      title: Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.
    attributes:
      type: object
      title: Attributes
      description: HTML attributes for the containing element.
      $ref: 'ui-patterns://attributes'
slots:
  content:
    type: string
    title: Content
    description: The content for the button
    minLength: 1
    examples:
      - Press
      - Submit now
      - Save
      - Login
      - Read more

 

Das Design ist der Code.

  • Varianten
  • Tokens
  • Props
  • Constraints (könnten wir zu Komponenten hinzufügen)

  • Slot-Regeln (was in andere Slots gesetzt werden darf oder was in meinen Slot gesetzt werden darf)

  • Regeln

  • Beispiele 

  • Animationen  ( erlaubt oder empfohlen )

Danach das Verhalten beobachten und damit experimentieren.

wie in https://storybook.demo.varbase.vardot.com/?path=/story/atoms-button--primary 

 

Design-Tokens als Umgebungsvariablen

Design-Tokens sind ein weiteres entscheidendes Puzzleteil. In zellulären Automaten reagieren Zellen auf ihre unmittelbare Umgebung – die Zustände benachbarter Zellen. In Designsystemen reagieren Komponenten auf Design-Tokens – die kontextabhängigen Werte, die ihr Aussehen und Verhalten bestimmen.

Moderne Token-Architekturen arbeiten mit mehreren Ebenen:

  • Core-Tokens: Rohwerte wie color.blue.500: #3B82F6
  • Semantische Tokens: Absichtsbezogene Verweise wie color.action.primary: color.blue.500
  • Komponenten-Tokens: Eingegrenzte Anwendungen wie button.background.primary: color.action.primary

Wenn ein Agent eine Button-Komponente erzeugt, muss er nicht wissen, dass „primary“ für Blau steht. Er muss nur button.background.primary referenzieren und darauf vertrauen, dass das Token-System den richtigen Wert auflöst. Die Umgebung (die Token-Ebene) enthält die Information; die Komponente (die Zelle) muss nur darauf reagieren.

Werkzeuge wie Tokens Studio haben sich so weiterentwickelt, dass sie Design-Tokens als Berechnungsgraphen mit Resolvern behandeln – Knoten, die je nach Kontext semantische Entscheidungen darüber treffen, welche Basis-Tokens verwendet werden. So werden Design-Tokens von statischen Werten zu dynamischen, regelbasierten Systemen.


Das Drupal-Ökosystem und die Integration von KI

Die Integration von KI in Content-Management-Systeme ist ein ideales Labor, um die Prinzipien von „Das Design ist der Code“ zu erkunden. CMS wie Drupal verkörpern die Kernkonzepte bereits: strukturierte Inhaltstypen, Felddefinitionen, Beziehungen und Regeln für die Komposition.

Ich hätte nie gedacht, dass wir so etwas einmal sagen könnten. Für mich war das bisher das Nonplusultra.

 Der ultimative Computer, den wir haben könnten. Entwickler, die direkt aus dem Star Trek der Zukunft stammen könnten und dem Computer sagen, was er für sie programmieren soll.

 

 

Agent Experience (AX) und der neue Nutzer

Design für Maschinen

Anfang 2025 führte Mathias Biilmann, CEO von Netlify, das Konzept der „Agent Experience“ (AX) ein, einer neuen Disziplin, die sich damit befasst, wie KI-Agenten mit Produkten und Plattformen interagieren.

Der Wandel ist grundlegend. Jahrzehntelang war UX (User Experience) auf menschliche Wahrnehmung, Denkweise und menschliches Verhalten ausgerichtet. DX (Developer Experience) war auf menschliche Entwickler ausgerichtet, die Software bauen. AX erkennt an, dass Agenten zu den primären Nutzern digitaler Systeme werden – und dass sie ganz andere Bedürfnisse haben:

  • Visuelle Ästhetik ist ihnen egal– nur strukturierte, maschinenlesbare Daten zählen
  • Sie navigieren nicht durch Oberflächen– sie rufen APIs auf und verarbeiten Manifeste
  • Sie lesen Dokumentation nicht wie Menschen– sie brauchen maschinenlesbaren Kontext
  • Sie fällen keine subjektiven Urteile– sie folgen Regeln und Constraints

„KI-Agenten sind keine Menschen: Die Größe eines Buttons, die Lesbarkeit der Typografie, die schöne Farbpalette Ihrer Website oder die auffälligen Animationen in Ihrer App sind ihnen egal. Worauf also „achten“ KI-Agenten? Darauf gibt es heute noch keine konkrete Antwort, doch die Frage wird in den kommenden Jahren immer wichtiger.“

– AX-Forschung

Die Antwort: klare Regeln, vorhersehbares Verhalten, gut strukturierte Daten und Feedback-Schleifen, mit denen sie ihre Handlungen überprüfen und korrigieren können.

Die Herausforderung der doppelten Schnittstelle

Design für AX bedeutet, zwei Schnittstellen gleichzeitig zu bauen:

  1. Mensch-zu-Agent-Schnittstelle: Hier beaufsichtigen, genehmigen, bearbeiten und steuern Menschen das Verhalten der Agenten – die „Missionskontrolle“. Denken Sie an Dashboards und Freigabe-Warteschlangen, nicht an Formulare und Buttons.
  2. Agent-zu-System-Schnittstelle: Hier arbeiten Agenten mit APIs, Datenbanken und Werkzeugen – die „operative“ Ebene. Sie muss robust, gut dokumentiert und auf maschinelle Effizienz optimiert sein.

Das spiegelt die Architektur zellulärer Automaten wider, in denen zwei unterschiedliche Perspektiven nebeneinander bestehen:

  • Die lokale Perspektive: Jede Zelle (jeder Agent) folgt einfachen Regeln, die sich an den unmittelbaren Nachbarn orientieren
  • Die globale Perspektive: Es entstehen komplexe Muster, die erst im großen Maßstab sichtbar werden

„Agent Experience Design (AX) sollte zu einer hervorragenden Benutzbarkeit für und von Agenten führen. Gute AX führt somit zu guter User Experience (UX). Stößt der KI-Agent auf einen defekten Prozess, ein fehlerhaftes Protokoll oder auch nur auf uneinheitliche Begriffe in verschiedenen Systemen, kann er die Aufgabe nicht erledigen. Das ist eine schlechte Erfahrung für den Agenten, die wiederum zu einer schlechten Erfahrung für Kunden oder Mitarbeitende führt.“

– Kat Holmes, Chief Experience Officer, Salesforce

Von UX zu AX: Die Evolution des digitalen Designs

UX (menschliche Nutzer)DX (Entwickler)AX (KI-Agenten)
Visuelle OberflächenAPIs und SDKsMaschinenlesbare Manifeste
Emotionale BindungDokumentationStrukturierter Kontext
NavigationsabläufeCodebeispieleWerkzeugdefinitionen
BarrierefreiheitTypsicherheitConstraint-Spezifikationen
FehlermeldungenStack TracesFeedback-Schleifen zur Selbstkorrektur


Stigmergie und indirekte Kommunikation

Eines der mächtigsten Konzepte der Schwarmintelligenz ist die Stigmergie – indirekte Koordination über Spuren in der Umgebung. Ameisen verständigen sich nicht direkt über Futterquellen; sie hinterlassen Pheromonspuren, denen andere Ameisen folgen. Die Umgebung wird zum Kommunikationsmedium.

In agentischen Designsystemen nimmt Stigmergie folgende Formen an:

  • Gemeinsame Komponentenbibliotheken: Agenten „sehen“, welche Komponenten es gibt und wie sie verwendet wurden
  • Design-Tokens: Semantische Werte, die Designentscheidungen als Fakten der Umgebung kodieren
  • Pattern-Dokumentation: Anwendungsbeispiele, die künftigen Agenten als Pheromonspuren dienen
  • Test-Suites: Validierungsregeln, die den Raum gültiger Ausgaben eingrenzen
  • Git-Historie: Ein Protokoll vergangener Entscheidungen, auf das Agenten zurückgreifen können

Wenn ein Agent mit einer Komponente eine Oberfläche erzeugt, hinterlässt er Spuren – in der Codebasis, in der Dokumentation, in den Mustern, die er etabliert. Künftige Agenten, die auf ähnliche Aufgaben stoßen, werden von diesen Spuren beeinflusst. So entsteht eine Form kollektiver Intelligenz, die kein einzelner Agent besitzt.

Agentische Designmuster

Andrew Ng und andere haben vier zentrale Muster für agentische KI-Systeme herausgearbeitet:

  1. Reflexion: Die KI bewertet ihre eigene Ausgabe und verbessert sie schrittweise
  2. Werkzeugnutzung: Die KI interagiert mit externen Werkzeugen, APIs und Systemen
  3. Planung: Die KI zerlegt komplexe Aufgaben in Teilaufgaben und führt sie nacheinander aus
  4. Multi-Agent: Mehrere spezialisierte Agenten arbeiten bei komplexen Aufgaben zusammen

Diese Muster entsprechen direkt den Konzepten zellulärer Automaten:

Agentisches MusterEntsprechung bei zellulären Automaten
ReflexionZellen aktualisieren sich anhand der Bewertung des aktuellen Zustands
WerkzeugnutzungZellen interagieren mit Umgebungsvariablen
PlanungEvolution über mehrere Generationen hin zu stabilen Konfigurationen
Multi-AgentVerschiedene Zelltypen mit spezialisierten Regeln (multizelluläre Automaten)

Das Design ist der Code – eine tiefere Lesart

Was „Das Design ist der Code“ wirklich bedeutet

Wenn wir sagen „das Design ist der Code“, stellen wir mehrere Behauptungen zugleich auf:

1. Semantische Äquivalenz

Designentscheidungen werden ausführbar, sobald sie richtig kodiert sind. Ein Design-Token ist nicht bloß ein Wert, sondern eine Anweisung. Eine Komponentenspezifikation ist nicht bloß Dokumentation, sondern ein Programm. Wenn Agenten diese Artefakte verarbeiten, führen sie das Design ebenso aus, wie sie es umsetzen.

2. Generative Kraft

So wie Regel 110 alles Berechenbare berechnen kann, kann ein hinreichend vollständiges Designsystem jede gültige Oberfläche hervorbringen. Das System enthält das Potenzial für alle seine gültigen Ausprägungen. Was daraus entsteht, hängt allein von den Anfangsbedingungen (den Anforderungen) und den Regeln (den Einschränkungen) ab.

3. Emergente Komplexität

Die raffiniertesten Oberflächen werden nicht von oben nach unten entworfen, sie entstehen aus der konsequenten Anwendung einfacher Regeln. Ein gut gestalteter Button, konsequent eingesetzt, erzeugt eine stimmige visuelle Sprache, ohne dass jemand diese Stimmigkeit ausdrücklich geplant hätte.

4. Berechnungsirreduzibilität

Manche Designergebnisse lassen sich nicht vorhersagen, ohne das System tatsächlich laufen zu lassen. Wie eine von Agenten zusammengesetzte Oberfläche aussieht, weiß man erst, wenn man den Agenten sie zusammensetzen lässt. Das ist Wolframs Prinzip der Berechnungsirreduzibilität, angewandt auf das Design.

5. Selbstveränderung

Wie Evoloops, die sich bei der Replikation verändern, können sich agententaugliche Designsysteme im Gebrauch weiterentwickeln. Von Agenten erzeugte Komponenten werden Teil der Bibliothek, die künftige Agenten nutzen. Das System lernt, passt sich an und wächst.

Die Metapher der zellulären Automaten weitergedacht

Zelluläre AutomatenAgentische Designsysteme
ZellgitterFläche aus UI-Elementen
ZellzuständeKomponenteninstanzen und ihre Props
NachbarschaftLayout-Kontext und angrenzende Komponenten
Update-RegelnKompositionsregeln und Design-Tokens
GenerationenRender-Zyklen und Zustandsaktualisierungen
Emergente MusterVollständige Oberflächen und User Flows
SelbstreplikationKomponentenbibliotheken, die neue Komponenten ermöglichen
Universelle BerechnungDesignsysteme, die jede gültige UI ausdrücken können
Gleiter (wandernde Muster)Wiederverwendbare Muster, die sich über Produkte hinweg verbreiten
Stillleben (stabile Muster)Etablierte Komponenten, die sich nicht verändern
OszillatorenAnimierte Komponenten, Ladezustände, Übergänge

Jenseits der Metapher: eine tatsächliche Konvergenz

Aber das ist nicht bloß eine Metapher. Die Konvergenz ist real und geschieht jetzt:

  • Storybook MCP verwandelt Komponentenbibliotheken in maschinenlesbare Anweisungen, die Agenten ausführen
  • Model Context Protocol standardisiert, wie Agenten auf Werkzeuge und Kontext zugreifen, und schafft so ein universelles Substrat für agentische Abläufe
  • Multi-Agenten-Architekturen teilen die Arbeit unter spezialisierten Agenten auf (Architekt, Programmierer, Reviewer), die nach Protokollen miteinander interagieren, wie Zellen mit differenzierten Funktionen
  • Selbstheilende Schleifenermöglichen es Agenten, Tests auszuführen, Fehler zu erkennen und zu iterieren – dieselben Rückkopplungsmechanismen, mit denen zelluläre Automaten stabile Konfigurationen hervorbringen
  • Schema.org Blueprints machen Inhaltsstrukturen maschinenlesbar und semantisch aussagekräftig
  • Drupal AI liefert die Infrastruktur, damit KI-Agenten Inhalte eigenständig erstellen, ändern und verwalten können

Wir verstehen „Das Design ist der Code“ nicht als philosophische Position. Wir bauen es als technische Infrastruktur.


Folgen und der Weg nach vorn

Für Designerinnen und Designer

Die Rolle der Designer wandelt sich vom „Rechteck-Ersteller“ zum „Regeldefinierer“. Brad Frost hat es so beschrieben:

„Designer und Entwickler, die ihren Job darin sehen, Rechtecke zu erzeugen, haben allen Grund zur Sorge. Wer seinen Job aber darin sieht, Probleme zu lösen – und dafür nebenbei ein paar Rechtecke erstellen oder handhaben muss –, hat weniger zu befürchten.“

- Brad Frost

In der agentischen Zukunft werden Designer:

  • semantische Tokens und ihre Beziehungen definieren
  • Kompositionsregeln und Muster festlegen
  • Validierungsregeln erstellen, die Agenten erfüllen müssen
  • die Regeln pflegen und weiterentwickeln, die das Emergente steuern
  • die Rückkopplungsmechanismen gestalten, die Selbstkorrektur ermöglichen
  • die „Fitnessfunktionen“ formen, die bestimmen, welche Ergebnisse akzeptabel sind

 

Man in blue shirt examines colorful flowchart.

 

 

Das ist Design auf einer höheren Abstraktionsebene: Man gestaltet die Regeln, die Designs hervorbringen, statt die Designs selbst. Es ist, als würde man die Regeln eines zellulären Automaten festlegen, anstatt jede Zelle einzeln zu zeichnen.

 

Für Entwicklerinnen und Entwickler

Entwickler werden zu Architekten von Agentensystemen. So beschreibt es Anthropic:

„Die Softwareentwicklung hat ein bemerkenswertes Potenzial für LLM-Funktionen gezeigt – von der Code-Vervollständigung bis hin zum autonomen Lösen von Problemen.“

Entwickler müssen künftig:

  • maschinenlesbare Schnittstellen zwischen Agenten und Systemen schaffen
  • Rückkopplungsschleifen und Validierungsmechanismen entwerfen
  • das Gerüst bauen, in dem emergentes Verhalten entstehen kann
  • die menschliche Aufsicht als letzte Instanz sicherstellen
  • die Protokolle definieren, über die Agenten kommunizieren
  • den „Glue Code“ implementieren, der unterschiedliche Agentensysteme verbindet
Man with laptop amidst web development icons and chatbot graphic.

 

Für Webentwicklung und CMS-Plattformen

Die Integration von KI in Plattformen wie Drupal weist auf eine Zukunft hin, in der:

  • Inhaltsmodelle für Agenten nutzbar werden durch Standards wie Schema.org
  • redaktionelle Workflows agentengestützt ablaufen mit KI-gestütztem Entwerfen, Moderieren und Optimieren
  • sich die Suche weiterentwickelt vom Abgleich von Schlüsselwörtern hin zu semantischem Verständnis durch Embeddings und Vektordatenbanken
  • Personalisierung autonom wird und Agenten die Vorlieben der Nutzer lernen und Inhalte in Echtzeit anpassen
  • sich die Entwicklung beschleunigt weil Agenten Komponenten, Tests und Dokumentation erzeugen

Dass das Drupal-Ökosystem KI umarmt – mit Modulen wie Drupal AI, Drupal Canvas, Schema.org Blueprints und der Anbindung von KI-Providern –, zeigt: Diese Zukunft wird bereits gebaut.

 

 

 

Für Organisationen

Den Wettbewerbsvorteil werden Organisationen haben, deren Designsysteme am „agentenbereitesten“ sind. Agentenbereite Systeme zeichnen sich aus durch:

  • vollständige Abdeckung von Komponentenzuständen und Varianten
  • semantische Benennung, die die Absicht vermittelt
  • maschinenlesbare Dokumentation und Kontext
  • Validierungs- und Testinfrastruktur
  • klare Randbedingungen, die den Raum gültiger Ergebnisse eingrenzen
  • APIs, die für die Nutzung durch Agenten entworfen sind (AX-first)
  • Schema.org-first-Inhaltsarchitekturen

 

 

 

Für die Zukunft digitaler Produkte

Am Ende steht so etwas wie eine digitale Ökologie: unzählige Agenten, die nach lokalen Regeln handeln und emergente Oberflächen hervorbringen, die kein einzelner Designer und kein einzelner Entwickler je geplant hat und die dennoch irgendwie zusammenpassen, weil die zugrunde liegenden Regeln tragfähig sind.

Das ist gar nicht so abwegig, wie es klingt. Genau so funktionieren biologische Systeme, so wachsen Städte, so arbeiten Märkte. Die Frage ist nicht, ob wir diesen Zustand erreichen, sondern wie wir den Übergang meistern.

 

Fazit: Der Code lebt

John von Neumann, der Universalgelehrte, der die zellulären Automaten erfand, wurde von einer grundlegenden Frage angetrieben: Welche Mindestkomplexität ist nötig, damit sich etwas selbst reproduzieren kann? Seine Antwort, der universelle Konstruktor von Neumanns, zeigte, dass Selbstreplikation keine biologische Maschinerie voraussetzt. Es genügen Regeln, die ihre eigene Anwendung in sich tragen.

Siebzig Jahre später entdecken wir dasselbe Prinzip bei Designsystemen. Für die autonome Erzeugung von Benutzeroberflächen braucht es weder eine allgemeine künstliche Intelligenz noch menschliche Kreativität. Es braucht ein vollständiges, konsistentes, maschinenlesbares Regelwerk, das Agenten ausführen können.

Wenn sich Langtons Loops über ein zelluläres Gitter vermehren, sagen wir nicht, die Loops „entwürfen“ neue Loops. Die Replikation ist schlicht das, was die Regeln hervorbringen. Und doch ist das Ergebnis, nämlich immer größere Kolonien selbstähnlicher Muster, unbestreitbar generativ und in einem funktionalen Sinn kreativ.

Wenn KI-Agenten Oberflächen aus den Komponenten eines Designsystems zusammensetzen und dabei semantischen Tokens und Kompositionsregeln folgen, tun sie etwas Ähnliches. Die „Kreativität“ steckt nicht in den Agenten, sondern in den Regeln, die sie ausführen. Menschen haben diese Regeln entworfen, doch nun wirken sie eigenständig.

Die tiefste Bedeutung

Das ist die tiefste Bedeutung von „Das Design ist der Code“: Nicht nur, dass Designvorgaben ausführbar werden, sondern dass Designsysteme lebensähnlich werden. Sie wachsen. Sie replizieren ihre Muster. Sie entwickeln sich durch Gebrauch weiter. Sie zeigen Verhaltensweisen, die niemand ausdrücklich programmiert hat.

Wir stehen an der Schwelle zu einer neuen Ära der digitalen Gestaltung. Die Agenten sind da. Die Protokolle nehmen Gestalt an. Die Designsysteme werden zum Nährboden für künstliches Leben.

Das Design ist der Code.
Und der Code erwacht zum Leben.

 

Wichtige Artikel und Projekte

Drupal-AI-Ressourcen

Ressourcen zu zellulären Automaten


Ich habe Ideen an der Schnittstelle von Berechenbarkeitstheorie, Designsystemen, künstlicher Intelligenz und Webentwicklung erkundet.

 Die geäußerten Ansichten sind spekulative Erkundungen aufkommender Trends, keine Vorhersagen sicherer Zukünfte.

 

Ich sehe, dass wir KI-Agenten bauen, die in einer Schleife arbeiten und in weiteren Schleifen mit anderen KI-Agenten interagieren.

Das Design ist der Code, wenn das System in einer Schleife arbeitet, wie eine Lebensschleife innerhalb einer gewählten Leinwand und eines festgelegten Regelwerks.

The Design is the Code