> Markdown version of [/videos/100019-design-systems-for-the-machines-how-to-make-ai-understand-your-ui](https://www.wearedevelopers.com/videos/100019-design-systems-for-the-machines-how-to-make-ai-understand-your-ui). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Design Systems for the Machines - How to Make AI Understand Your UI

AI agents can parse your DOM, but they consistently fail to deduce intent. Discover how to build machine-readable design systems using flawless HTML and ARIA signals.

- **Speakers:** [Jennifer Wjertzoch](https://www.wearedevelopers.com/@jennifer-wjertzoch)
- **Event:** World Congress 2026 Europe
- **Published:** July 9, 2026
- **Duration:** 24:30
- **URL:** https://www.wearedevelopers.com/videos/100019-design-systems-for-the-machines-how-to-make-ai-understand-your-ui

## Summary

Historically, design systems aimed to make interfaces visually predictable for humans. However, as AI increasingly navigates web applications, web interfaces face a completely new audience. While an AI agent can rigidly "see" pixels or parse the DOM, it frequently struggles to deduce meaning, behavior, and intent. The core challenge for modern frontend development is reducing this ambiguity so UIs are predictable for both humans and machines, recognizing that "seeing something and understanding it is something totally different."

To resolve this, developers can close the embedded signal gap across three distinct layers. Semantic HTML establishes elemental meaning, ensuring a UI element is explicitly recognized as an actionable entity rather than a generic visual wrapper—a dynamic often described as "Moravec's paradox in UI." ARIA signals clarify behavior and state, utilizing attributes like `aria-busy` or `aria-label` to broadcast runtime activity. Finally, structural metadata—such as custom `data-intent` tags or thorough component manifests—explicitly defines the contextual "why" of an action, preventing an AI agent from guessing which call-to-action legitimately drives a workflow forward.

Machine-readable components unlock massive scalable benefits, including continuous AI-assisted accessibility reviews, safer intent-aware UI refactoring, coherent design-to-code generation without visual drift, and self-documenting codebases. Engineering teams can adapt to this paradigm by implementing a practical blueprint: running automated accessibility audits using tools like axe-core, enforcing semantic baselines via Architectural Decision Records (ADRs) and ESLint, strictly blocking fragile pull requests in CI/CD pipelines, and explicitly testing AI agents as a newly defined user archetype. Ultimately, software developers must construct flawless DOM signals, treating interface craft like carving perfect marble where every underlying cut matters: "Let's make sure the stone has no cracks."

**Keywords:** design systems, machine-readable UI, semantic HTML, ARIA signals, structural metadata, component manifests, AI agent workflows, accessibility audits, axe-core testing, intent-driven UI, UI refactoring, design-to-code pipelines, CI/CD integration, ESLint configuration, architectural decision records

## Chapters

1. **The shift from human-oriented to machine-readable interfaces** (00:02) — Design systems must evolve beyond visual consistency to provide predictable signals for automated machine interactions.
1. **How AI agents interpret web applications and visual elements** (03:41) — Agents rely on explicit underlying data structures rather than visual inferences to interact with digital applications.
1. **Three core challenges AI agents face in UI navigation** (05:06) — Artificial intelligence struggles to operate interfaces that lack standardized meaning, state behavior, and workflow intent.
1. **Solving UI ambiguity with HTML semantics and ARIA metadata** (07:51) — Embedded structural metadata provides the essential context required for machines to understand interactions without visual rendering.
1. **Demonstrating AI reliability with semantic versus generic UI components** (11:29) — Live code comparisons reveal how accessible element properties drastically reduce critical execution errors during automated tasks.
1. **Four practical outcomes of building machine-readable design components** (16:51) — Clear structural standards unlock automated accessibility reviews, safer refactoring processes, and accurate design-to-code generation.
1. **A practical blueprint for implementing agent-ready developer workflows** (20:38) — Teams can immediately improve systemic predictability by implementing structural audits, strict coding conventions, and CI/CD blocking mechanisms.

## Related Moments

- [The shift from predictable UX to adaptive AI experiences](https://www.wearedevelopers.com/videos/2122-designing-the-intelligence-layer-the-future-of-products-beyond-interfaces) (from "Designing the intelligence layer: The future of products beyond interfaces")
- [AI agents replacing traditional web interfaces](https://www.wearedevelopers.com/videos/1289-wad-live-22-01-2025-exploring-ai-web-development-and-accessibility-in-tech-with-stefan-judis) (from "WAD Live 22/01/2025: Exploring AI, Web Development, and Accessibility in Tech with Stefan Judis")
- [Building an AI-friendly HTML design system and reference](https://www.wearedevelopers.com/videos/100119-it-s-not-vibe-coding-if-you-know-what-you-re-doing) (from "It's Not Vibe Coding If You Know What You're Doing")
- [Audience Q&A on tooling choices and AI application prototyping](https://www.wearedevelopers.com/videos/100195-xcode-development-redefained) (from "Xcode development redefAIned")
- [Designing complex software architecture in the era of AI](https://www.wearedevelopers.com/videos/1365-wearedevelopers-live-the-weekly-developer-show-with-chris-heilmann-and-daniel-cranney) (from " WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney")
- [Improving AI comprehension through semantic HTML DOM trees](https://www.wearedevelopers.com/videos/100199-making-documentation-ai-ready-preparing-your-docs-for-the-llm-era) (from "Making Documentation AI-Ready: Preparing Your Docs for the LLM Era")

## Related Articles

- [The Web We Broke (And Why AI Agents Are Paying the Price) - AgentCon Berlin](https://www.wearedevelopers.com/magazine/735-the-web-we-broke-and-why-ai-agents-are-paying-the-price-agentcon-berlin)
- [Exploring AI: Opportunities and Risks for Developers](https://www.wearedevelopers.com/magazine/522-exploring-ai-opportunities-and-risks-for-developers)
- [Never delegate the understanding](https://www.wearedevelopers.com/magazine/749-never-delegate-the-understanding)
- [WWC24 Talk - Scott Hanselman - AI: Superhero or Supervillain?](https://www.wearedevelopers.com/magazine/469-wwc24-talk-scott-hanselman-ai-superhero-or-supervillain)

## Related Jobs

- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [AI Full Stack Engineer](https://www.wearedevelopers.com/jobs/ext/1354435-ai-full-stack-engineer) at **Almedia**
- [AI Software Engineer (Germany)](https://www.wearedevelopers.com/jobs/48317-ai-software-engineer-germany) at **Sunhat**
- [Senior Engineer, Infrastructure Platform](https://www.wearedevelopers.com/jobs/ext/328836-senior-engineer-infrastructure-platform) at **Intercom, Inc.**
- [Staff Software Engineer, Copilot Experiences](https://www.wearedevelopers.com/jobs/ext/164361-staff-software-engineer-copilot-experiences) at **GitHub**