The Design System Guide

The Design System Guide

The Self-Healing Design System

Agentic Design Systems, part 3

Romina Kavcic's avatar
Romina Kavcic
Apr 04, 2026
∙ Paid

👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / YouTube / My Linkedin


Why your design system is the most important asset in the AI era

Why your design system is the most important asset in the AI era

Romina Kavcic
·
Mar 29
Read full story

In Part 1 and 2, I made the case that design systems are the semantic layer that makes AI-assisted design possible. The understanding, not the code, is the asset.

Now let’s talk about the machinery AND the judgment calls. The architecture, the self-healing loop, what AI genuinely cannot do, and three phases you can start this week.


The architecture

This is the architecture I’ve built over the past year.

At the center: Claude Code as the orchestration layer. Connected via MCP to Figma (through my Tidy plugin), to GitHub, to Storybook, to PostHog (analytics) , to Granola (meeting notes), to Sentry for error monitoring, to the documentation layer, and to the Observatory dashboard.

👋 A note on tooling:

Claude Code is not the only option here. Because everything connects through MCP, the orchestration layer is swappable. I’ve tested Cursor, Codex, and other AI coding tools in this setup. I also run the same exercises across new models whenever they come out (Gemini, GPT 5.2 through 5.4, Llama, Mistral) to benchmark how they handle token naming, component composition, and system-level reasoning. Claude Code consistently delivered the best results for design system work, particularly in reasoning about component relationships and token semantics. But the architecture doesn’t lock you in. If a better tool shows up tomorrow, you swap the center, and everything else stays the same. That’s the point of building on a protocol, not a product.

The loop is:

  1. Watch. Detect drift in tokens, components, and docs.

  2. Analyze. Score severity, prioritize fixes.

  3. Execute. Generate PRs, update docs, sync tokens.

  4. Observe. Verify results and loop back.

But here’s the thing. This architecture only works because the foundation is solid. Without clean token naming, without component descriptions, without intent documentation, the agent has nothing meaningful to work with.

User's avatar

Continue reading this post for free, courtesy of Romina Kavcic.

Or purchase a paid subscription.
© 2026 Romina · Privacy ∙ Terms ∙ Collection notice
Start your SubstackGet the app
Substack is the home for great culture