The Design is the Code

How Cellular Automata Logic will reshape Agentic Design Systems, and Why the Future of Web Development May Already Be Written in Simple Rules

There's a profound transformation happening at the intersection of design systems, artificial intelligence, and computational theory. It's a shift so fundamental that it challenges our understanding of what "design" even means in the age of autonomous agents.

For decades, we've treated design and code as separate disciplines-design as the realm of human creativity and aesthetic judgment, code as the mechanical translation of those ideas into executable form. But as AI agents increasingly assemble user interfaces autonomously, consume design systems as machine-readable infrastructure, and generate code from semantic tokens, we're approaching a convergence point that echoes a much older idea from computational theory.

That idea? The design is the code.

This isn't merely a catchy phrase. It's a recognition that we may be heading toward a world where design systems operate like cellular automata-simple rules giving rise to complex, emergent behaviors. Where the distinction between "designing" something and "programming" it dissolves entirely. Where autonomous agents don't just use design systems but are design systems in action.

This blog post explores the deep connections between cellular automata, emergent behavior, and the future of agentic design systems. We'll trace the theoretical foundations from von Neumann's self-replicating machines to today's AI agent swarms.

We'll examine how Drupal and modern CMS platforms are integrating AI through modules like the Schema.org Blueprints and Drupal AI. And we'll consider what it all means for designers, developers, and the future of digital product creation.

Cellular Automata and the Logic of Emergence

The Beauty of Simple Rules

In 1970, mathematician John Conway introduced the Game of Life-a "zero-player game" that would become one of the most studied systems in computational theory. The rules are breathtakingly simple:

1. Any live cell with fewer than two live neighbors dies (underpopulation)
2. Any live cell with two or three live neighbors survives
3. Any live cell with more than three live neighbors dies (overpopulation)
4. Any dead cell with exactly three live neighbors becomes alive (reproduction)

From these four rules-expressed in a handful of binary conditions-emerges an astonishing universe of complexity. Gliders traverse infinite grids. Oscillators pulse in perpetual rhythms. Guns fire streams of patterns across cellular space. And most remarkably, the Game of Life has been proven to be Turing-complete: anything that can be computed algorithmically can, in principle, be computed within Conway's simple grid.

Figure 1: Gosper's Glider Gun in Conway's Game of Life. This pattern produces a continuous stream of gliders-demonstrating how simple rules can generate infinite, self-perpetuating complexity.

This is the first lesson of cellular automata: complexity is not a prerequisite for complex behavior. Simple rules, applied consistently across a substrate, can give rise to patterns and behaviors that no one explicitly programmed.

Langton's Loops and Self-Replication

In 1984, Christopher Langton took this principle further with his self-replicating loops-a cellular automaton that demonstrated genuine artificial life principles. Unlike Conway's Game of Life, which shows emergent complexity, Langton's Loops show emergent reproduction.

Each loop consists of a cyclic boundary enclosing a "genome" encoded in cell states. This genome flows continuously around the loop and out along a construction arm, which builds a daughter loop over 151 time steps. When complete, the daughter separates from its parent, and both continue replicating.

Figure 2: Langton's Loop in its starting configuration. The genetic information circulates through the loop and directs the construction of daughter loops via the extending arm.

"If a self-reproducing machine is possible within a cellular automaton, then life itself might be achievable by machines."

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

The implications are profound. Langton's Loops demonstrate that self-replication doesn't require the complexity of biological cells or the universal construction capabilities of von Neumann's original design. It requires only:

• A set of simple, local rules
• A mechanism for encoding instructions
• A process by which those instructions are executed

The rules are the organism. The design is the code.

In 1999, Hiroki Sayama introduced evoloops, variants that incorporate structural dissolvability and phenotypic interactions, enabling spontaneous mutations and evolutionary dynamics. These loops evolve through direct physical collisions during replication, leading to genotype variations, increased morphological diversity, and complexity growth across generations. Unlike Langton's fixed replication, evoloops demonstrate inheritable mutations without external intervention.

Rule 110 and Universal Computation

Stephen Wolfram's exploration of elementary cellular automata culminated in a startling discovery: Rule 110, one of only 256 possible rules for the simplest type of one-dimensional cellular automaton, is capable of universal computation.

Rule 110 can be specified completely by giving the outcome for each of eight possible combinations of a cell and its two neighbors. Yet this trivially simple rule-eight binary decisions-can simulate a universal Turing machine.

Figure 3: Rule 110 cellular automaton. Despite its simple definition, Rule 110 exhibits Class 4 behavior-complex patterns that are neither completely stable nor completely chaotic-and has been proven Turing complete.

"One doesn't need anything like a whole computer CPU to do universal computation. One just needs this little rule."

- Stephen Wolfram, "A New Kind of Science"

In 2004, Matthew Cook published a proof that Rule 110 with a particular repeating background pattern is Turing complete. The proof demonstrates that Rule 110 can emulate cyclic tag systems, which in turn can emulate any Turing machine. Among the 88 possible unique elementary cellular automata, Rule 110 is the only one for which Turing completeness has been directly proven.

The Principle of Computational Equivalence that Wolfram proposed suggests something even more radical: systems above a minimal threshold of complexity are essentially equivalent in their computational capabilities. A human brain, a weather system, and Rule 110 are, in some deep sense, computationally equivalent.

The 0E0P Metacell: True Self-Replication

In October 2018, Adam P. Goucher completed the construction of the 0E0P metacell-a pattern in Conway's Game of Life capable of true self-replication. Unlike previous metacells that required pre-existing copies nearby, the 0E0P metacell can construct copies of itself from scratch, including its own instruction tape.

This achievement represents a milestone in artificial life: a system that can propagate itself through a computational substrate using only local rules. On November 23, 2013, Dave Greene built the first replicator in the Game of Life that creates a complete copy of itself, including the instruction tape-demonstrating that even Conway's simple two-state automaton can support unbounded self-reproduction.

Design Systems as Computational Substrates

From Atomic Design to Agentic Design

Brad Frost's Atomic Design methodology, introduced in 2013, revolutionized how we think about design systems. By breaking interfaces into atoms (basic elements like buttons and inputs), molecules (simple combinations), organisms (complex UI sections), templates (page layouts), and pages (final implementations), Atomic Design provided a hierarchical structure for managing complexity.

But here's what's remarkable in retrospect: Atomic Design already embodied cellular automata principles without explicitly recognizing them.

"When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don't have to."

- Josh Clark, "The Most Exciting Design Systems Are Boring"

In February 2023, Brad Frost wrote about "Design Systems in the Time of AI":

"AI is a natural design system consumer... The fact of the matter is that a lot of design system component work really is mechanical and predictable. We already use tools like PlopJS to splat out a component boilerplate that matches the shape of the rest of the library. I'd welcome AI's assistance in generating a lot of common fare boilerplate things for me."

- Brad Frost

The mechanical and predictable nature of design systems is precisely what makes them suitable for cellular automata-style operation. When the rules are clear, local, and consistently applied, agents can operate autonomously-just as cells in Conway's Game of Life don't need a central controller to produce gliders and oscillators.

The Machine-Readable Imperative

The Storybook MCP (Model Context Protocol) initiative represents a critical evolution in this direction. Announced in late 2025, Storybook MCP provides AI coding agents with machine-readable component metadata from existing Storybook setups.

The key insight is that agents don't need raw code or visual documentation. They need:

• Component manifests: Structured metadata about every component-its props, variants, design token bindings, and usage examples
• Semantic naming: Intent-rich tokens like action.primary.confirm that convey meaning to agents, not just values
• Validation loops: The ability to run tests, see failures, and self-correct

"Storybook MCP helps agents follow your patterns and pass your tests. It equips agents with two things they've never had before: machine-readable component metadata and an iterative loop to self-heal mistakes."

- Storybook Team

The Storybook MCP includes an autonomous correction loop. It lets agents run your component tests (interaction and accessibility), see what fails, and fix their own bugs. A developer only has to step in after the tests pass. No more prompt babysitting.

This is precisely the architecture of a cellular automaton applied to design: local rules (component specifications), neighbor interactions (composition patterns), and iterative updates (validation and self-correction).

My Component Manifest as Genome

The comparison to Langton's Loops becomes even more apt when we consider how component manifests function. In Langton's system, the "genome" encoded in circulating cells contains the instructions for building a new loop. In a machine-readable design system, the component manifest contains the instructions for assembling interfaces.

A component manifest might specify:

{
  "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" }
  ]
}

This manifest is simultaneously a design specification and executable code-or rather, the instructions from which executable code can be generated. The agent consuming this manifest doesn't need to understand aesthetics or user experience in the human sense. It needs to follow the rules, combine the elements according to their constraints, and produce valid outputs.

I Agree with Brad Frost on having a yaml format.

Drupal Components are using the yaml format. Something like

$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

The design is the code.

• Variants
• Tokens
• Props

• Constraints (we could add to components)

• Slots rules (what can be placed in other slots, or what is allowed to be placed in my slot)

• Rules

• Examples 

• Animations  ( Allowed to or guided to use )

Then watch and experiment with the behavior.

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

Design Tokens as Environmental Variables

Design tokens represent another crucial piece of the puzzle. In cellular automata, cells respond to their immediate environment-the states of neighboring cells. In design systems, components respond to design tokens-the contextual values that determine their appearance and behavior.

Modern token architectures use multiple layers:

• Core tokens: Raw values like color.blue.500: #3B82F6
• Semantic tokens: Intent-driven references like color.action.primary: color.blue.500
• Component tokens: Scoped applications like button.background.primary: color.action.primary

When an agent generates a Button component, it doesn't need to know that "primary" means blue. It only needs to reference button.background.primary and trust that the token system will resolve to the correct value. The environment (token layer) contains the information; the component (cell) just needs to respond to it.

Tools like Tokens Studio have evolved to treat design tokens as computational graphs with resolvers-nodes that make semantic decisions about which base tokens to use based on context. This transforms design tokens from static values into dynamic, rule-based systems.

The Drupal Ecosystem and AI Integration

The integration of AI into Content Management Systems represents a perfect laboratory for exploring "the design is the code" principles. CMSs like Drupal already embody the core concepts: structured content types, field definitions, relationships, and rules for composition.

I never thought we may say something like this. For me this was a state of art.

 The Ultimate Computer set we could have. Some developers which could come from the future Star Trek, speaking to the computer to program for them.

Agent Experience (AX) and the New User

Designing for Machines

In early 2025, Mathias Biilmann, CEO of Netlify, introduced the concept of "Agent Experience" (AX) a new discipline focused on how AI agents interact with products and platforms.

The shift is fundamental. For decades, UX (User Experience) optimized for human cognition, perception, and behavior. DX (Developer Experience) optimized for human developers building software. AX recognizes that agents are becoming primary users of digital systems-and they have entirely different needs:

• They don't care about visual aesthetics-only structured, parseable data
• They don't navigate interfaces-they call APIs and consume manifests
• They don't read documentation like humans-they need machine-readable context
• They don't make subjective judgments-they follow rules and constraints

"AI Agents are not people: they do not care about the size of a button, the legibility of typography, the beautiful color palette on your website, or the flashy animations in your app. So, what do AI Agents 'care' about? This is a question that has no concrete answer today but will become more and more important in the coming years."

- AX Research

The answer: clear rules, predictable behaviors, well-structured data, and feedback loops that allow them to verify and correct their actions.

The Dual Interface Challenge

Designing for AX means building two interfaces simultaneously:

1. Human-to-Agent Interface: Where humans oversee, approve, edit, and guide agent behavior-the "mission control" layer. Think dashboards and approval queues, not forms and buttons.
2. Agent-to-System Interface: Where agents interact with APIs, databases, and tools-the "operational" layer. Must be robust, well-documented, and optimized for machine efficiency.

This mirrors the architecture of cellular automata, where two distinct perspectives coexist:

• The local perspective: Each cell (agent) follows simple rules based on its immediate neighbors
• The global perspective: Complex patterns emerge that are visible only at scale

"Agent experience design (AX) should result in great usability for and of agents. Thus, great AX leads to great user experience (UX). If the AI agent encounters a broken process, protocol, or even inconsistent wording across systems, it's unable to perform that task. That's a bad experience for the agent that, in turn, leads to a bad customer or employee experience."

- Kat Holmes, Chief Experience Officer, Salesforce

From UX to AX: The Evolution of Digital Design

Stigmergy and Indirect Communication

One of the most powerful concepts from swarm intelligence is stigmergy-indirect coordination through environmental traces. Ants don't communicate directly about food locations; they leave pheromone trails that other ants follow. The environment becomes a communication medium.

In agentic design systems, stigmergy takes the form of:

• Shared component libraries: Agents "see" which components exist and how they've been used
• Design tokens: Semantic values that encode design decisions as environmental facts
• Pattern documentation: Usage examples that serve as pheromone trails for future agents
• Test suites: Validation rules that constrain the space of valid outputs
• Git history: A record of past decisions that agents can reference

When an agent generates a UI using a component, it leaves traces-in the codebase, in the documentation, in the patterns it establishes. Future agents encountering similar tasks will be influenced by these traces, creating a form of collective intelligence that no single agent possesses.

Agentic Design Patterns

Andrew Ng and others have identified four key patterns for agentic AI systems:

1. Reflection: The AI evaluates its own output and iteratively improves it
2. Tool Use: The AI interacts with external tools, APIs, and systems
3. Planning: The AI breaks complex tasks into subtasks and executes them sequentially
4. Multi-Agent: Multiple specialized agents collaborate on complex tasks

These patterns map directly to cellular automata concepts:

The Design is the Code-A Deeper Reading

What "The Design is the Code" Really Means

When we say "the design is the code," we're making several claims simultaneously:

1. Semantic Equivalence

Design decisions, when properly encoded, become executable. A design token isn't just a value-it's an instruction. A component specification isn't just documentation-it's a program. When agents consume these artifacts, they're executing the design as much as implementing it.

2. Generative Capacity

Just as Rule 110 can compute anything computable, a sufficiently complete design system can generate any valid interface. The system contains the potential for all its valid expressions. What emerges depends only on the initial conditions (requirements) and the rules (constraints).

3. Emergent Complexity

The most sophisticated interfaces aren't designed top-down; they emerge from the consistent application of simple rules. A well-designed button, used consistently, produces a coherent visual language without anyone planning that coherence explicitly.

4. Computational Irreducibility

Some design outcomes can't be predicted without actually running the system. You can't know what an agent-assembled interface will look like without letting the agent assemble it. This is Wolfram's principle of computational irreducibility applied to design.

5. Self-Modification

Like evoloops that mutate during replication, agent-ready design systems can evolve through use. Components generated by agents become part of the library that future agents consume. The system learns, adapts, and grows.

The Cellular Automata Metaphor Extended

Beyond Metaphor: Actual Convergence

But this isn't just metaphor. The convergence is real and happening now:

• Storybook MCP turns component libraries into machine-readable instructions that agents execute
• Model Context Protocol standardizes how agents access tools and context-creating a universal substrate for agentic operations
• Multi-agent architectures divide labor among specialized agents (architect, coder, reviewer) that interact according to protocols-like cells with differentiated functions
• Self-healing loops allow agents to run tests, detect errors, and iterate-the same feedback mechanisms that cellular automata use to evolve stable configurations
• Schema.org Blueprints make content structures machine-readable and semantically meaningful
• Drupal AI provide the infrastructure for AI agents to create, modify, and manage content autonomously

We're not approaching "the design is the code" as a philosophical position. We're building it as technical infrastructure.

Implications and the Road Ahead

For Designers

The role of the designer is transforming from "rectangle creator" to "rule definer." As Brad Frost observed:

"Designers and developers who think of their jobs as rectangle creators have a lot to be worried about. But designers and developers who think of their jobs as solving problems-and incidentally have to create/wield some rectangles in order to solve those problems-have less to fear."

- Brad Frost

In the agentic future, designers will:

• Define semantic tokens and their relationships
• Establish composition constraints and patterns
• Create validation rules that agents must satisfy
• Curate and evolve the rules that govern emergence
• Design the feedback mechanisms that enable self-correction
• Shape the "fitness functions" that determine what outputs are acceptable

This is design at a higher level of abstraction-designing the rules that produce designs, rather than the designs themselves. Like defining the rules of a cellular automaton rather than drawing each cell individually.

For Developers

Developers become architects of agent systems. As Anthropic describes:

"The software development space has shown remarkable potential for LLM features, with capabilities evolving from code completion to autonomous problem-solving."

Developers will need to:

• Create machine-readable interfaces between agents and systems
• Design feedback loops and validation mechanisms
• Build the scaffolding within which emergent behavior occurs
• Maintain human oversight as the final arbiter
• Define the protocols by which agents communicate
• Implement the "glue code" that connects different agent systems

For Web Development and CMS Platforms

The integration of AI into platforms like Drupal points toward a future where:

• Content models become agent-consumable through standards like Schema.org
• Editorial workflows become agent-assisted with AI-powered drafting, moderation, and optimization
• Search evolves from keyword matching to semantic understanding through embeddings and vector databases
• Personalization becomes autonomous with agents learning user preferences and adapting content in real-time
• Development accelerates as agents generate components, tests, and documentation

The Drupal ecosystem's embrace of AI-through modules like Drupal AI, Drupal Canvas, Schema.org Blueprints, and the AI providers integration-demonstrates that this future is already being built.

For Organizations

The competitive advantage will belong to organizations whose design systems are most "agent-ready." Agent-ready systems feature:

• Complete coverage of component states and variants
• Semantic naming that conveys intent
• Machine-readable documentation and context
• Validation and testing infrastructure
• Clear constraints that bound the space of valid outputs
• APIs designed for agent consumption (AX-first)
• Schema.org-first content architectures

For the Future of Digital Products

The end state is something like a digital ecology-countless agents operating according to local rules, producing emergent interfaces that no single designer or developer planned, yet that somehow cohere because the underlying rules are sound.

This isn't as far-fetched as it sounds. It's precisely how biological systems work, how cities grow, how markets function. The question isn't whether we'll arrive at this state-it's how we'll navigate the transition.

Conclusion: The Code is Alive

John von Neumann, the polymath who invented cellular automata, was driven by a fundamental question: What is the minimum complexity required for self-reproduction? His answer-the von Neumann universal constructor-demonstrated that self-replication doesn't require biological machinery. It requires only rules that encode their own application.

Seventy years later, we're discovering the same principle applies to design systems. The minimum requirement for autonomous UI generation isn't artificial general intelligence or human-level creativity. It's a complete, consistent, machine-readable set of rules that agents can execute.

When Langton's Loops replicate across a cellular grid, we don't say the loops are "designing" new loops. The replication is simply what the rules produce. Yet the result-ever-expanding colonies of self-similar patterns-is undeniably generative, creative in some functional sense.

When AI agents assemble interfaces from design system components, following semantic tokens and composition constraints, they're doing something similar. The "creativity" lies not in the agents but in the rules they execute-rules that humans designed, but that now operate autonomously.

We stand at the threshold of a new era in digital creation. The agents are here. The protocols are forming. The design systems are becoming substrates for artificial life.

The design is the code.
And the code is coming alive.

Key Articles and Projects

• Design Systems in the Time of AI - Brad Frost
• Storybook MCP Sneak Peek - Storybook
• Introducing AX: Why Agent Experience Matters - Mathias Biilmann
• Building Effective Agents - Anthropic

Drupal AI Resources

• Drupal AI

• Schema.org Blueprints Module

   

Cellular Automata Resources

• Conway's Game of Life Lexicon - About 1500 figures
• A Working Turing Machine in Game of Life
• Langton's Loops - Wikipedia
• Rule Sets for Cellular Automata
• A New Kind of Science Online - Stephen Wolfram
• Cellular Automata - Nature of Code

Explored ideas at the intersection of computational theory, design systems, artificial intelligence, and web development.

 The views expressed are speculative explorations of emerging trends, not predictions of certain futures.

I see that we are creating AI Agents that work in a loop and interact with other AI Agents in additional loops.

The design is the code when the system operates in a loop like a lifetime loop within a selected canvas and set of rules.