E
Ember
published · v24Warm obsidian, incandescent gradients, motion that breathes.
incandescentnocturnalconfident
explore →
The frontend knowledge layer
Ship every feature like the same team built it.
Coding agents are fast, and every prompt pulls your product a different way. SynthesisUI reads the frontend knowledge already in your repo - components, design decisions, motion, architecture - and turns it into one system your agent follows.
Free for 30 days. Connects in minutes, and your repo is read locally - nothing uploaded.
- reads any repo
- token-only
- Claude Code only, for now
The first one. Someone chose it, and they were right.
Radius 8 to 12, on a Tuesday. Nobody wrote down why.
A second red, warmer than the first. Both ship.
Padding and weight, to match a screen that was already wrong.
drift detected · 4 defensible changes
One button nobody would have shipped on purpose - and no code review would have caught it, because each change was right on the day it was made.
The blueprint
Your repo already knows how your product should be built. We read it - we don’t replace it.
Style guides describe components. A blueprint reads how they are really used, straight from your code.
It turns those decisions into something a coding agent can follow, so every feature feels like the same team built it.
Blueprint · Button
read from 35 files · 71 uses
week 1week 6
Accepts
- variant
- 9 values · all of them in use
- size
- xsm · sm · md · lg · xlg · xxlg · 6 steps
- iconPosition
- left | right · defaults to left
Laws
Button forwards the rest of its props to the element it renders, so anything you pass that it does not name reaches the DOM.
read from the component
Button is used with Text - 7 files put one inside the other, so keep the pair rather than reaching for something else inside it.
counted across the repository
Every decision has one place to live. Every agent starts from the same one.
Components, tokens, usage and layout compile into one source of truth, read before a line is written.
components
<button> · <Icon/> · <span/>
tokens
bg-primary/90 rounded-lg px-3
usage
71 uses · 35 files · 7 with <Text>
layout
hover: · disabled: · aria-busy
Blueprint · Button
12 laws
structureroot · label · icon
tokenscolour · radius · spacing
lawsused with Text · 7 files
stateshover · disabled · loading
+ lawalerts use amber, never red
gap
The agent hits a gap
agent: this system has no red. Filing the gap instead of inventing one.
Filed as a3f21c.
It arrives already written, by whoever hit the gap.
human decision
You answer it
$ npx synthesisui sync
✓ a3f21c authored.
The dashboard never edits your files. Your own sync enacts every decision.
new rule
It becomes law
✕ declined - "this brand has no red; alerts use amber."
Now a law. Agents obey it.
Born from a real case, with the request kept on record.
back into the blueprint
The whole cycle, spelled out: how a decision becomes a law →
Shipping, not promises
Nothing in common except how they were built.
Two different systems, the same way in: one npx init, one prompt, an agent building against a blueprint. Open them, run the audit yourself.
One screen · six blueprints
Consistency doesn’t remove identity.
One accent color, six blueprints. Shape, elevation, density, motion and type change together - personality is not a color, it is what the blueprint decided.
Now showing
Editorial
serif · airy · calm
97
Try this blueprint
Free, and no account needed.
EDITORIAL · serif · airy · calm
Workspace
Ship faster, everywhere.
Three edge regions from a single push. Rollbacks are one click.
47Deploys ↑12%
99.98%Uptime
3Regions
aurora-prodLive2m ago
aurora-stagingBuilding5m ago
docs-siteLive1h ago
Gallery
No system of your own yet? Start with the decisions already made.
Fork one and it is yours, blueprint included - consistent from the first commit.
Your next feature can be your first consistent one.
Two minutes from an empty folder to a blueprint your agent can follow.
Everything lives in one folder, _synthesisui/, plus one hook. Leaving is deleting it.
Built for Claude Code first
Not installing anything today?
npx synthesisui@latest doctorIt runs locally. No account, no card.
Already on shadcn/ui? One line after your tokens import - @import "_synthesisui/ds/<slug>/shadcn.css"; - and every component switches onto the system’s clock and palette. Want the contract locally and nothing else? npx synthesisui adopt describes your tokens without replacing them, and never asks for an account.