How it works
AI-assisted design systems, grounded in real precedent.
Sistema gives your AI agent structured prompts and reference material from production design systems — so instead of generating conventions from training data, it reasons from evidence. The result is a design system that reflects real decisions, not guesses.
Starting a new design system?
The Bootstrap Campaign runs an 11-step sequence — from positioning through scaffolding components — with each step building on the last.
Auditing an existing system?
The Audit & Refactor Campaign surfaces token drift, accessibility failures, and undocumented decisions — then produces a prioritized task list.
Extending an existing system?
Run individual plays for specific tasks — add a component, generate dark mode, audit token coverage, or run a retrospective.
Three things to understand
Plays
A play is a structured prompt for a specific design system task. Each one tells the agent what to do, which KB documents to fetch as references, and what output to produce. You copy the prompt into your AI agent, fill in your project context, and run it.
Knowledge Base
The KB contains structured documentation from production design systems, standards, and design theory. Plays fetch specific KB pages at runtime — so the agent is reasoning from Material Design, Carbon, WCAG, and OKLCH perception science rather than its training weights. You can also reference KB pages directly in your own prompts.
DESIGN.md
A plain-text file at the root of your project that captures your design system decisions — brand color, token architecture, type choices, spacing approach. Every play reads it at the start of a session and updates it as decisions are made. It's how the agent stays consistent across sessions without being re-briefed every time. The format follows the Google Stitch DESIGN.md convention.
Read the spec →How a play works
Each play page has a prompt you copy directly into your AI of choice. The prompt is structured in steps — it tells the agent to read your DESIGN.md, fetch relevant KB content, and produce a specific output. You fill in your project details where indicated, then run it.
- 1
Open a play
Find the play for your current task — either from a campaign step or by browsing the playbook.
- 2
Copy the prompt
The play page generates a complete prompt with your project's Sistema URL pre-filled for KB fetches.
- 3
Paste into Claude or your coding agent
Plays work in Claude.ai, Claude Code, Cursor, or any AI assistant with web access. A coding agent is recommended for plays that write files.
- 4
Review and commit
The play produces a specific output — a file, a token set, a component — that you review and commit.
What plays cover
Plays span the full design system lifecycle — from initial positioning through ongoing maintenance.
System definition
Establish context · Positioning brief · Visual language · Generate DESIGN.md
Token generation
Color scheme · Type scale · Shape tokens · Spacing tokens · Color roles · Dark mode · Style Dictionary
Components
Scaffold core components · Specify a component · Implement a component · Add a component
Docs & examples
Generate page examples · Documentation site · Voice and tone
Maintenance
Session start · Audit token coverage · Accessibility audit · Component audit · Retrospective · Plan next iteration
Migration
Migrate Tailwind config
Ready to start?
New projects start with the Bootstrap Campaign. Existing systems can run the Audit & Refactor Campaign or jump straight to an individual play.