Flagship · Open-source lab
Guardrails forAI-generatedUI
An open-source design-engineering lab for design-system contracts, governed generation, and deterministic reconciliation across Figma, code, and docs.
- Type
- Open-source lab
- Role
- Sole author
- Status
- In active development
- License
- Apache 2.0
- Patent
- Filed, pending
01The shift
Generation is not the bottleneck. Alignment is.
AI can generate UI. It cannot keep it aligned. That sentence is the whole reason this lab exists.
Tools have made generation close to free. The expensive problem is keeping that UI in agreement with the system it belongs to, over time, while both sides keep changing.
02The thesis
Design systems need contracts, not just documentation.
A design system needs a machine-readable contract: a queryable description an agent can consult for the one decision in front of it, instead of being handed thousands of lines it cannot prioritize.
A queryable contract beats a documentation dump.
03The system
One contract, enforced at two moments.
The lab is an ecosystem of six open-source repositories built around a single design-system contract. A governance pipeline enforces it at the moment an agent generates UI; a reconciliation engine keeps every surface — Figma, code, and docs — aligned with it over time.
Concrete surfaces
- npm install -g @aestheticfunction/ds-mcp
- Install the reference MCP server (Node 20+).
- ds-mcp --dspack ./your-system.dspack.json
- Serve a design system to an agent as queryable tools.
- af init --profile balanced
- Generate config and choose a precedence profile.
- af reconcile <file> / af status <file>
- Reconcile a file or check its drift status.
- af design drift --dspack <file>
- Check every surface against a committed dspack contract.
04See it running
The whole pipeline, live in the browser.
dspack-studio is the reference application. An agent proposes an interface, the design system checks it, and invalid patterns are explained and repaired with the rule and its rationale on the record: dspack-gen governs the generation, dspack-emit compiles it to A2UI, AG-UI carries it, and Astryx renders it.
Every recording is a real run with its provenance attached. Rewind it, fork it, x-ray any element, and read the run’s receipt. Nothing there is staged.

05The repositories
All six are open source under Apache 2.0, developed in the open.
The open contract: schemas, typed governance rules, intents, and examples — what a design system knows, including what correct means.
dspack-exportExperimental generator that builds a spec-valid dspack snapshot from component code (React + Tailwind/shadcn, Vue 3 + Vuetify 3).
dspack-genGoverned-generation pipeline: compiles the contract into generation context, lints model output against typed rules, and writes an audit report for every run.
dspack-emitDeterministic emitter that compiles governed surfaces to rendering protocols — A2UI and json-render — behind validation gates.
ds-mcpRead-only MCP server that exposes the design system, generation context, and surface validation to agents. No network, no shell, no writes.
aesthetic-functionThe reconciliation engine: keeps Figma, code, and docs aligned against one model, through a single audited write path.
