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…
From 4 newsletters · 1 min read · one thing to try
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
- Identify the core UI components and tokens used in your application.
- Create a manifest file that lists these components with their intended usage and constraints.
- Inject this manifest into the context window of your coding agent.
- Ask the agent to generate a new UI section using only the components defined in the manifest.
- Review the output for adherence to your design system rules.