The design system machines can read
A design system specified as contracts, with tooling, governance and verification built around it. It is not a library: it is a language, and it serves everyone who speaks it, from designers in Figma to the agents that write production code and the tooling that measures what people actually do.
- Role
- author of the agentic design system and its tooling
- Partnership
- the squad's Tech Lead drove the app architecture; the server-driven CMS is ours together
- Period
- 2025 to present, at meutudo. The tooling that preceded it began at Venturus in 2023, and the AI thread in 2019. The platform is meutudo's; the thesis is mine, so it travelled with me.
- What I personally did
- the semantic specification, four Figma plugins, the guard-railed generation process, the design system review mode in the PR pipeline, and the code skills the team uses.
- IP
- registered software at INPI, Brazil's IP office (BR512024003444-7, 2024), as co-author. Title held by the employer at the time.
The long thread
My first production AI work was in 2019: conversational experiences and chatbots at an AI studio, for large clients. The first piece of this thesis came before code AI existed: around 2023 I built a plugin to speed up and improve how development requirements were generated from design, the most fragile bridge in the cycle. The company registered that software in 2024, with me as co-author.
When the first versions of Claude Code arrived, I built a second experiment, largely by hand because the tools were still raw: a UI reviewer that ran quality control before development. It became the conceptual foundation for almost everything that followed.
The platform, in five layers
Semantics. The design system specified as contracts an agent can read: anatomy, tokens, usage rules, valid and invalid examples. Documentation explains to someone who already knows. A contract leaves no room for someone who does not, human or machine.
Figma tooling. Four plugins in production: design system conformity audit, AI-assisted UX review, library sync, and the direct heir of the 2023 plugin, requirements generation from design. Conformity gets audited inside Figma, before anything reaches code.
Guard-railed generation. A prototyping process PMs and executives use in any generation tool, with three-layer anti-drift verification against the real design system code. Not against a screenshot, not against "looks right". It democratizes prototyping without democratizing drift. The autonomy line is explicit: anyone can prototype on-pattern, breaking the pattern is a designer's call, and production code still ships only through the pull request pipeline. It ships as an internal plugin through a curated marketplace with security review, because AI tooling in a regulated fintech needs distribution governance too.
Delivery. With the squad's Tech Lead, a server-driven UI CMS that assembles dynamic pages from design system components, with its own MCP so agents can operate the editor. According to the company's AI lead, it was the first MCP actually built and made available to the organization. My part: making sure what the CMS assembles is, by construction, the design system rather than a copy of it.
Quality. A design system review mode in the pull request pipeline: it detects DS areas in the diff, requires code evidence for every finding, and eliminates false positives by comparing against the real diff. The bar no longer depends on someone remembering to look.
Three decisions
1. A spec is a contract, not documentation. If an agent can read it two ways, the spec failed. I rewrite the spec, not the prompt. Writing for machines first made the material better for humans too: the ambiguity that confuses AI is the same one that confuses a junior designer.
2. Fidelity is proven against code, never against an image. A screenshot that "looks close" is the fastest way to accumulate invisible drift. The three verification layers check numbers against the source, token by token, component by component.
3. Autonomy by zone. The agent composes freely inside the pattern. Breaking the pattern is a designer's call. The system makes breaking it explicit and traceable, not impossible. That is the difference between governance and a padlock.
Where it reaches today
Today the platform exposes tools through an MCP of our own, and they reach past construction. One generates analytics events already in the standard, and reads how an event behaves on a given page, so it can be crossed with the analytics tool to assemble a journey or a funnel view. Another generates test scenarios straight from the designed screen. Design stopped feeding only what gets built and started feeding what gets verified and what gets measured. That is what closes the loop: measurement comes back as evidence for the next design.
| Results | Before | Today |
|---|---|---|
| New screen, concept to ready | 3-5 days | under 1 day |
| Production change | release cycle | 1-2 days, no app release |
| Who can prototype on-pattern | designers only | engineers, PMs and C-levels |
| Design system conformity | manual review, when it happened | audited by tooling, in Figma and in the PR |
Closing
The thesis keeps moving: a design system treated as a product, with contracts, tools, verification and consumers far beyond the design team. Humans design the language, machines speak it at scale, and deciding when to break it is still a designer's job.