The design system machines can read

A design system specified as contracts machines can read. Designers draw in Figma, PMs and executives prototype inside the standard, and agents write production code. Then the review in the pull request checks every change against the source.

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 began at Venturus in 2023.
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 platform, in five layers

This is the tooling behind the operating model in the design org case. The team could only change how it works because the standard became something machines read. There are five layers, each with someone who consumes it. The base is the contract, and the rest is what the contract makes possible to build.

The operating model has its own case: rebuilding a design org around AI →

Five stacked layers of the design system platform read bottom up: semantics as machine-readable component contracts, Figma tooling for designers, guard-railed generation for PMs and C-levels, delivery through a server-driven UI CMS for AI agents, and quality checks in the engineering pull request pipeline. — DIAGRAM · THE PLATFORM IN FIVE LAYERS

Semantics: Agents and people; The design system written as contracts, with anatomy, tokens, usage rules, and valid and invalid examples. A contract leaves no room for someone who does not know, human or machine.
Figma tooling: Designers; Four plugins in production, one of them a UX review that checks accessibility and heuristics. Conformity is audited inside Figma, before anything reaches code.
Guard-railed generation: PMs and executives; Prototyping in any generation tool, with three-layer anti-drift verification against the real design system code. Breaking the pattern is a designer's call.
Delivery: Agents; A server-driven UI CMS with its own MCP, built with the Tech Lead. What it assembles is the design system by construction, not a copy of it.
Quality: Engineering; A design system review mode in the pull request pipeline. It requires code evidence for every finding, and checks each one against the real diff.

A contract, from the inside

This is how an agent reads a component. Not a description, but a contract with a lineage, saying what it may hold, what it must never own, and when not to use it. Below, the real spec, shortened.

# InputTextField.spec.md

## Goal
Canonical base of the text input family. Centralizes label, helper,
slots, field states and controlled forwarding to Primitives.Input.

## Architectural lineage
- category: family base
- related family: InputTextArea, InputSelect, InputPassword, InputValue
- any new text field must prove why it cannot derive from this family

## Composition contract
- accepted slots: leftSlot and rightSlot, validated against ALLOWED_SLOTS
- must never own: external selection logic, OTP contract, navigation or modal

## States
default, focused, error, success, disabled. Loading via isLoading.

## Acceptance criteria
- input.* tokens remain the base of visual state
- the slot contract remains valid

## Knowledge metadata (read by the CMS and by agents)
| whenNotToUse        | OTP -> InputOTP; multiline -> InputTextArea; dropdown -> InputSelect |
| typicalParents      | Primitives.Container, Primitives.KeyboardForm, BottomSheet |
| codeConnectVerified | 2026-06-10 |

EXCERPT · ONE COMPONENT CONTRACT

Three decisions

Contract: Spec, not documentation; If an agent can read it two ways, the spec failed, and I rewrite the spec, not the prompt. Writing for machines first made the material better for humans too.
Fidelity: Proven against code; Never against an image. The three verification layers check numbers against the source, token by token, component by component.
Autonomy: By zone; The agent composes freely inside the pattern. Breaking the pattern is a designer's call, and the system makes that break explicit and traceable, not impossible.

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 page, 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. Measurement comes back as evidence for the next design.

From the semantic contract, the single source, five consumers are fed: design in Figma with the four plugins, guard-railed prototype generation open to non-designers, delivery through the server-driven CMS without an app release, quality through test scenarios generated from the designed screen, and measurement through on-standard events joined with the analytics tool to build journey and funnel views. The last three are tools inside the same MCP of our own. Measurement closes the loop: it comes back as evidence for the next design. — DIAGRAM · WHAT COMES OUT OF THE STANDARD, AND WHAT COMES BACK

More than 50 people across the company are registered in the tool, and about 15 use it every day. Designers, the engineers of the channels team, product managers, and the CEO and CTO when they want to see an idea on screen. In August 2026 an engineer told me he had built 17 screens in one hour, visually and interaction-ready. Before, that was close to a week.

Quality, in production

The bar no longer depends on someone remembering to look. Every pull request gets a design system adherence review with code evidence. Every night, a recurring validation reads the pages already in production and files what drifted, by category and severity. And repairs run as jobs, with status, duration and who asked for them, whether a person or the nightly validation itself.

A pull request review titled adherence to the design system, status adequate. Two evidence bullets name the files changed, blurred, and the components they use, each with a risk line and a corrective action, and a closing line: no adoption deviations found in the changed files. — SCREENS · THE QUALITY LAYER, WITH INTERNAL NAMES BLURRED

A list of four findings from the nightly validation of one page in production, whose name is blurred, with the versions it runs on. Each finding names a component or token issue, carries a category such as accessibility, component use, token use or hierarchy, a severity, the cycle time, and a dismiss button. — SCREENS · THE QUALITY LAYER, WITH INTERNAL NAMES BLURRED

Where it came from

My first production AI work was in 2019, building chatbots at an AI studio. The first piece of this thesis came in 2023, when generative AI was barely reaching interface work. It was a plugin that generates development requirements from design, registered by the company in 2024 with me as co-author. Then Claude Code arrived, and I built a UI reviewer that ran quality control before development.

Results
Results	Before	Today
New screen, concept to ready	3-5 days	under 1 day
17 screens, by one engineer	close to a week	1 hour, as reported to me
Production change	release cycle	1-2 days, no app release
Who can prototype on-pattern	designers only	50+ registered, about 15 daily: designers, engineers, PMs, C-levels
Design system conformity	manual review, when it happened	audited in Figma, in the PR, and nightly in production