You ask an agent to build a screen. Thirty seconds later, you're looking at something that's close. The layout reads right. The buttons sit in roughly the right place. Then you open the code, and the drift is already there: a hardcoded hex where a token should be, an invented prop name, a component that looks like yours but isn't quite.
That "mostly right" output is the whole problem. It ships fast, it looks fine in a screenshot, and it quietly creates rework, fragmentation, and design debt. AI isn't just a productivity unlock. It's a multiplier of whatever system quality you already have. If your system is loose, AI makes the mess faster.
So before you reach for a new tool, the more useful question is the one we opened our recent session with: where is your system today?
Your output is up, and so is your drift
This isn't a future-state conversation. It's already happening inside product teams, shipping faster than the systems behind them can keep up.
You can now generate screens, code, and flows in a fraction of the time it used to take. That's the good news. The catch is that speed and drift rise together. When going around the system feels easier than going through it, people go around it. One product drifts. Then three products drift. The compounding stays quiet until it lands on your roadmap as cleanup.
Product quality and clarity become the real bottleneck. Not output.
Where is your system today?
We use a five-level model to place a system honestly. Be honest about where you actually land, not where you'd like to.
Level 1: Ad Hoc
We have a Figma file.
You have a Figma file, and that's about it. Designers copy-paste components, engineers rebuild them from scratch, and nobody shares a common vocabulary for color, spacing, or type. Every screen is a one-off, so consistency depends on who happened to build it, and drift is constant. There's no real token layer, which means an AI agent has nothing reliable to reference and fills the gaps with guesses.
What this feels like
- Every new screen starts from zero, so simple work takes longer than it should.
- Two designers solve the same problem three different ways.
- There's no source of truth to point a new engineer or an agent to.
- AI output looks plausible, but it has nothing real to anchor to, so it hallucinates freely.
Level 2: Cataloged
Kind of a library.
You have a Figma library, so it looks like a design system from the outside. Underneath, the components aren't composable, your design tokens are partial, and the code has drifted away from the design. Naming is inconsistent, and conventions still live in people's heads, so the design-to-development handoff keeps leaking. An agent can read the library, but it can't trust it.
What this feels like
- People still copy-paste components because it's faster than using the library correctly.
- Design and code slowly fall out of sync, and nobody's sure which one is right.
- Partial tokens mean half your spacing and color is still hardcoded by hand.
- Agents pull from the library and confidently return the wrong component.
Level 3: Structured
A real system, human-usable.
This is a real design system that people can use well. Figma and code are aligned, your token architecture is in place, and the rituals and docs that keep a system usable are holding, so the library doesn't sprawl. People ship consistently, and the handoff mostly holds. This is where most mature teams sit, and it's also where the interpretive gap with AI shows up, because rules that live in review comments don't survive the handoff to an agent.
What this feels like
- The system works for humans, but AI keeps producing "mostly right" output that needs cleanup.
- Your sharpest rules live in review comments and Slack threads, not anywhere an agent can read.
- Governance leans on a few people paying attention, so it slips when they get busy.
- Teams route around the system the moment raw AI gets them close enough, faster.
Level 4: Validated
Enforceable at build.
Your system is enforceable at build, not just in review. Rules fail CI instead of waiting for a human to catch them, and your documentation is schema-driven, so a machine can parse it. Composition rules, semantic naming, and constraints are explicit enough that agents produce usable output, and drift gets caught early instead of compounding across products. This is the first level where AI stops guessing and starts working inside your guardrails.
What this feels like
- Moving rules into CI takes real engineering time, and it's easy to under-scope the effort.
- Schema-driven documentation is slower to write than prose, at least at the start.
- You have to decide which constraints are worth enforcing and which stay as guidance.
- Keeping validation in step with a changing system is ongoing work, not a one-time setup.
Level 5: Agentic
Agents execute it.
Agents execute the system with full JSON schema coverage across tokens, components, and composition rules. AI produces shippable UI, and human review becomes the exception reserved for high-priority work, not every screen. Feature velocity climbs, often five to ten times, because the system does the enforcing instead of your reviewers. Very few teams live here yet, but it's the target the rest of the model points toward.
What this feels like
- Full schema coverage is a high bar to reach and a real commitment to maintain.
- The hard part is trust: knowing when a human needs to review, and when they don't.
- Governance has to hold without a person in every loop.
- The distance between an impressive demo and production is where most teams stall.
Most teams self-identify at Cataloged or Structured. And most think they're a level higher than they are. That gap is worth sitting with, because it's exactly where AI starts to hurt. Part of why it persists is that design system adoption has always been a culture problem, and AI just turns up the volume on it.
The jump most teams are actually trying to make
If you're at Structured, your next move is Validated. It's also the most valuable jump you can make right now, because it's the point where "documented" finally becomes "usable by AI."
At Structured, your rules live in people's heads and in review comments. A human can read a Figma file and improvise the gaps. An agent can't. It fills the gap with a guess, and a guess at scale is a hallucination in production.
Validated closes that gap. The rules move out of the comments and into the build:
- Constraints fail CI, so a violation stops the pipeline instead of earning a "nice catch" in review.
- Documentation is schema-driven, so it's structured for a machine, not just readable by a person.
- Drift gets caught early, before it copy-pastes itself across three products.
You don't need to reach Level 5 to feel the difference. Getting from Structured to Validated is where most teams see the biggest return on the effort.
Agent-readiness hits every layer, not one
Getting agent-ready isn't one upgrade you bolt on at the end. It touches every layer of your design system, from the smallest primitive up to the context your agent reads first.
Picture the system as a stack. At the base are your primitives: tokens, icons, and the raw material. Above that sits the logic that connects Figma, Storybook, repos, and themes. Then the design application layer, where patterns and rules get applied. Then documentation. Then context, the layer your agent reads before it does anything at all.
New tooling shows up at every one of those layers:
- design.md files that hold the context for your tokens and keep it consistent across tools.
- An agents.md file that handles routing and helps the agent choose the right thing.
- Linters that turn your design files into structured, checkable elements and catch mistakes before handoff.
- An MCP that connects your design to your real component APIs, so the agent stops guessing prop names and hex values. (Tim wrote up how that works in our piece on using MCPs to automate design handoffs.)
None of these replace good design system fundamentals. They sit on top of the best practices you already know and make them legible to a machine. Same craft, now readable by both humans and agents.
What good looks like in the agentic era
This is achievable, and it's grounded. Not someday. This year, for teams willing to invest in the operating layer.
When the system is agent-ready, a few things change at once. Designers work with more confidence and less ambiguity. Developers get guidance where they already work. AI output needs less correction and cleanup. Teams scale without fragmenting. Leadership can finally see adoption and system health over time. And the system becomes a multiplier instead of a maintenance burden.
A design system only humans can read is a cost. One that humans and agents can both read pays you back every time an agent ships.
Where to go from here
Everyone starts from a different level, so the next right step depends on where you honestly landed on that model.
If you want the full thinking, watch the full session. We run show a component audit, score a real button group from 9/18 up to 16/18, and show the before-and-after of an agent building with and without a design system MCP.
If you want the broader picture first, take a look at how we work with design and development teams together.
If you'd rather get a real read on your own system, that's what our Agentic Design System Roadmap is for. We audit your Figma and coded systems, score your agent-readiness across six dimensions, and hand back a prioritized roadmap in fourteen days. Not a 50-page PDF that sits in a drive. A tight plan your designers, engineers, and leadership can act on right away.
Either way, start by being honest about your level. That's the whole first move.
