hebel. today · 9 November 202644 / 74

Technology · Frontend Web Development

Design systems become machine-readable infrastructure

Design systems as infrastructure. Koen de Greef argues that design systems must transition from static Figma files to machine-readable knowledge bases to remain effective, as AI agents require explicit definitions of component meanings, usage…

Design systems as infrastructure. Koen de Greef argues that design systems must transition from static Figma files to machine-readable knowledge bases to remain effective, as AI agents require explicit definitions of component meanings, usage rules, and dependencies to maintain brand consistency (Yukio Andoh from Design Sprint Newsletter). Bastian Buch implemented this by integrating pen.dev directly into a code repository, exposing atomic UI components and design tokens so that Claude agents could generate pull requests within a Linear-based workflow (Bastian Buch). This approach treats the design system as a living knowledge infrastructure that allows non-technical founders to validate UI changes without manual coding.

The risk of automation. Nielsen Norman Group researchers warn that relying solely on existing design systems and personas risks narrowing UX to only what is already known, potentially missing critical user needs that require direct observation and usability testing. While AI speeds up UI generation, human judgment remains necessary to define the problem and ensure the output serves a genuine business opportunity rather than producing low-value features at scale. David Hoang notes that using AI tools does not replace the fundamental need for designers to understand hierarchy and interaction, as these skills allow them to critique AI output and provide better direction (David Hoang from Proof of Concept).

Integration of human oversight. The debate centers on whether designers should act as directors of automated systems or maintain hands-on control to preserve product quality. Design engineers on Nurkhon Akhmedov’s team build prototypes directly in the codebase to account for every state, ensuring that the final handoff to backend engineers is a finished component rather than a static file (Nurkhon Akhmedov from Nurkhon’s Newsletter). This dual approach relies on human-defined constraints to guide AI generation while using manual testing to verify that the resulting interface performs correctly in a real browser environment.

Try today · 45 min

Expose your design tokens and atomic components to your AI agent.

Map your existing UI library to a machine-readable format within your repository.

You need

  • Access to your current component library
  • Repository-level documentation of design tokens
  • An AI agent with repository context

Steps

  1. Identify the core UI components and tokens used in your application.
  2. Create a manifest file that lists these components with their intended usage and constraints.
  3. Inject this manifest into the context window of your coding agent.
  4. Ask the agent to generate a new UI section using only the components defined in the manifest.
  5. Review the output for adherence to your design system rules.

One email instead of your newsletter pile.

Forward the newsletters you already get (a Gmail filter does it) and tell Hebel your goals. Every morning it reads them with 20,000 others and sends one short email, with one small thing to do today. Fewer emails, not more. Free during beta.

Start my paper →
LinkedIn X

Sources

  1. Bastian Buch on hebel. →Bastian Buch details a dark software factory workflow where AI agents generate code from a repository-integrated design system within Linear.

  2. Yukio Andoh, Design Sprint Newsletter on hebel. → ✎ Written by a personNielsen Norman Group and Koen de Greef discuss the necessity of machine-readable design systems and the risks of automating UX without human exploration.

  3. Nurkhon Akhmedov, Nurkhon’s Newsletter on hebel. → ✎ Written by a personNurkhon Akhmedov explains how design engineers build prototypes directly in code to eliminate traditional file-based handoffs.

  4. David Hoang, Proof of Concept on hebel. → ✎ Written by a personDavid Hoang emphasizes that AI tools require a solid foundation in design fundamentals to prevent the production of low-quality output.

More in Technology

Hackers exploit default passwords to warm European grocery store fridges

Building AI operating systems that outlast individual chat sessions

Data sovereignty requires either systemic withdrawal or strict internal controls

AI agents bypass human authorization to secure budget increases

Autonomous agents shift from single-team tools to governed enterprise platforms

Los Angeles emerges as the epicenter of hard-tech manufacturing

Frontend Web Development yesterday

Design systems provide leverage for AI-driven interface development

Sign in to Hebel first

Likes, your collection and done Hebel need an account. We email you a six digit code; no password.