Decantr — Design Intelligence for AI-Generated UI

Every AI-generated app has an expiration date

AI coding assistants have no memory of design intent. Every prompt is a fresh start. By prompt 10, your app looks like it was built by 10 different people.

Without Decantr

Prompt 1

Prompt 5

Prompt 10

With Decantr

Prompt 1

Prompt 5

Prompt 10

Zero drift

One command. You'll never go back.

Scaffold a complete design system, then paste one prompt. The AI reads the context files and builds a visually stunning, production-quality app.

1

Initialize

$ npx @decantr/cli init --blueprint=agent-marketplace --yes

2

Paste the prompt

Build this application using the Decantr design system. Read DECANTR.md for the design spec, CSS approach, and guard rules. Read .decantr/context/scaffold.md for the app overview, topology, routes, and voice guidance. Read each .decantr/context/section-*.md file before building that section's pages. Import src/styles/global.css, src/styles/tokens.css, and src/styles/treatments.css. Start with the shell layouts, then build each section's pages.

3

What the AI receives

DECANTR.md

Guard rules · CSS atoms · Layout rules · Motion philosophy · Interactivity

→

scaffold.md

Topology · Routes · Voice & copy · Shared components · Dev mode

→

section-*.md

Shell layout · Decorators · Tokens · Composition · Motion · Responsive

→

Production UI

Visually stunning, consistent, production-ready code

How Decantr works

Three tiers of context, each more specific than the last. The AI gets everything it needs to build every page correctly.

DECANTR.md

Design rules
Guard system
CSS approach
Layout rules
Motion philosophy
Interactivity philosophy
Development workflow

scaffold.md

App topology
Route map
Voice & copy guidance
Shared components
Zone transitions
Development mode

section-*.md

Shell implementation specs
Quick start guide
Spacing guide
Decorator tables
Token palette
Visual briefs
Composition algebra
Motion specs
Responsive strategies

Rich, actionable context -- not vague instructions

Every section context is self-contained. The AI gets everything it needs for each page in one file.

## Quick Start # From section-agent-orchestrator.md: Shell: SidebarMainLayout (sidebar 260px, main fluid) Sidebar: fixed, dark bg, 60px header zone, nav groups with icons Tokens: import tokens.css -- surfaces, borders, text, accents Treatments: import treatments.css -- cards, code blocks, data rows ## Pattern: Agent Timeline Visual brief: Vertical feed of agent execution events. Each node shows timestamp, agent name, action type, and status badge. Connected by a thin vertical line (border-left on the timeline track). Composition: timeline-track > timeline-node[] > { icon, meta, detail } Spacing: gap-4 between nodes, p-4 inside cards Motion: nodes fade-in staggered 50ms on mount Responsive: single-column, full-width at all breakpoints

15 tools for your AI assistant

Install once. Every prompt gets smarter.

decantr_create_essence

Generate a design spec from a description

decantr_suggest_patterns

Get pattern recommendations for any page

decantr_resolve_pattern

Full pattern details with layout specs

decantr_resolve_archetype

App templates with page maps

decantr_resolve_blueprint

Composed templates with topology, zones, and transitions

decantr_resolve_recipe

Visual decoration rules and spatial hints

decantr_check_drift

Detect design spec violations

decantr_validate

Validate Essence against the schema

decantr_read_essence

Read the current design spec

decantr_search_registry

Search patterns, archetypes, themes

decantr_accept_drift

Accept detected drift as intentional

decantr_update_essence

Apply structured updates to the design spec

decantr_get_section_context

Get scoped context for a specific app section

decantr_component_api

Query component specs and usage patterns

decantr_critique

Evaluate generated code for visual quality scoring

CLI Commands

Manage your project from the terminal

init --blueprint=X

Scaffold a new project from a blueprint

refresh

Regenerate context files from the essence

add page

Add a new page to a section

remove page

Remove a page from a section

theme switch

Switch to a different theme

check

Detect and fix drift issues

status

Show project health and drift status

Get started

Pick a blueprint, scaffold, build. Three steps to a production-quality app.

Step 1: Pick a blueprint

agent-marketplace

carbon-neon theme

AI agent orchestration platform

registry-platform

luminarum theme

Design intelligence registry

terminal-dashboard

terminal theme

Developer monitoring dashboard

carbon-ai-portal

carbon theme

AI chatbot with transparency

Step 2: Scaffold

$ npx @decantr/cli init --blueprint=agent-marketplace --yes

Step 3: Build

Paste the generated prompt into Claude Code, Cursor, or any AI coding assistant. The AI reads your context files and builds a production-quality app.

116 patterns. 20 themes. 19 blueprints.

A growing library of community-contributed design intelligence. Browse what's available — or publish your own patterns, themes, and blueprints for others to use.

116

Patterns

20

Themes

19

Blueprints

60

Archetypes

Browse the Registry →

Open source. MIT licensed.

Six packages, one mission: make AI-generated UI not suck.

@decantr/cli

Project scaffolding, mutation commands, brownfield analysis, and registry sync

v1.7.5

@decantr/mcp-server

MCP server exposing 15 design intelligence tools to AI assistants

v1.0.0-beta.12

@decantr/essence-spec

Schema, validator, guard rules, and TypeScript types for the Essence format

v1.0.0-beta.11

@decantr/registry

Content resolver for patterns, archetypes, themes, and recipes

v1.0.0-beta.12

@decantr/core

Design Pipeline IR engine -- the brain behind intent-to-composition

v1.0.0-beta.9

@decantr/css

Framework-agnostic CSS atoms runtime for layout utilities

v1.0.2

decantr.ai