Decantr

Design intelligence, governance, and verification for AI-generated UI.

Decantr is the contract layer between product intent and AI-generated implementation. It gives coding assistants three things they don't have on their own — structured design inputs, registry-backed UI knowledge, and scoped context files — so they build coherent product surfaces instead of improvising screen by screen. Think of it as OpenAPI for AI-generated UI: the model still writes the code, but Decantr defines the shape, vocabulary, and checks around it.

AI generates the interface. Decantr keeps the outcome aligned.

Pick your path

Greenfield blueprint

1. Scaffold from a blueprint

npx @decantr/cli new my-app --blueprint=agent-marketplace
cd my-app

A blueprint is a published app composition — theme, sections, pages, layouts, voice, and personality. Try agent-marketplace, terminal-dashboard, or portfolio to start, or run decantr search to browse the full catalog.

Adapter availability. react-vite is the runnable starter adapter in this wave. Other contract targets remain valid Decantr targets but currently initialize in contract-only mode — Decantr writes the contract, you own the runtime.

2. What just got generated

my-app/
├── decantr.essence.json     # the durable contract: theme, sections, routes, features
├── DECANTR.md               # methodology primer your AI assistant reads first
├── .decantr/context/
│   ├── scaffold.md          # full app overview: topology, voice, personality
│   └── section-*.md         # per-section spec: shell, patterns, spacing
└── src/styles/
    ├── tokens.css           # CSS variables from the theme
    ├── treatments.css       # shared visual treatment classes
    └── decorators.css       # theme-specific decorator classes

Decantr produces the contract. Your AI assistant produces the implementation against it.

3. Hand it to your AI assistant

Open the project in Claude Code, Cursor, Windsurf, or any AI-aware editor. Your assistant reads DECANTR.md first for the methodology, then loads section context files on demand as it works through each part of the app. The split keeps the assistant focused on the right scope at the right time.

4. Make your first change and verify

# Edit decantr.essence.json — add a section, swap the theme, etc.
decantr refresh   # regenerate context files from the updated essence
decantr check     # verify the code matches the new contract

refresh keeps the generated context files in sync with the essence. check runs the guard rules and tells you exactly where the code drifted from the contract. decantr audit is a broader pass when you want a full report.

Starting from a different point? See the full workflow model.

The model

Decantr separates design governance into two layers:

• DNA — durable visual and system axioms: theme, spacing, motion, accessibility, personality.
• Blueprint — product topology: sections, page routes, shells, layouts, features.

That split matters because not every change should be treated the same way. A theme swap or accessibility regression is different from adding an auxiliary section or reshaping a route map. Decantr lets governance be strict where it should be strict (DNA, error

... View full README on GitHub