Your AI agents build screens that already look like your product.
Install once, then just code. Your agent checks your frontend before inventing a colour, a component or a layout - guides included.
Without it, your agent invents a blue your project already had a name for - and it compiles, reviews clean and ships.
Free for up to 3 projects. No runtime, no SDK, nothing of ours running inside your app.
- Claude Code, today
›
It invented none of these. It asked what this system calls each value, and built with its pieces.
19 simple prompts. A landing page and a dashboard.
Eight screens Claude Opus 5.5 wrote with SynthesisUI installed - every colour from the system, every write checked on its own. Click through it, with the prompts and the numbers next to each screen.
- 100% Token coverage
- 100% Colours from the system
- 95-99% Contrast
- 100% Proportion & Type
That was a bike shop. Yours is next.
We love
experience.
Any dashboard, any landing page, any section, with your personality. Your agent builds it, and every page speaks the same language as the rest of your product.
Eight screens. Every measured design value follows Moss. Bring the same check to your own frontend.
What changes
The same agent. A different week.
Nothing about how you work changes. What changes is what your agent knows before it writes.
Instructions tell your agent what to do. SynthesisUI tells it what your frontend actually uses.
CLAUDE.md
Rules and context you write and maintain for your agent.
SynthesisUI
Frontend knowledge read from your code, refreshed on every commit, and checked against what the agent writes.
Keep Claude Code. Give it a frontend it understands.
$ npx synthesisui connect · once
beforeYour agent writes a blue your project already had a name for.
afterIt asks first, and writes the name your system gives it.
beforeEvery new page picks its own spacing, its own rhythm, its own order.
afterEvery page is built with your Structure.
beforeYou read every diff for colours and paddings, by eye.
afterThe check runs every turn. What reaches you is a decision.
beforeThe rules file you wrote in March doesn't know the button you added last week.
afterEvery commit updates what your agent knows.
One install, nothing to remember. The reading, the check and the updates happen as you commit.
Start free →three ways in
Start where you already are.
You already have a frontend
Let it read what you wrote, then keep building with the check running and the prompts that improve the system.
Next: sign in, then your agent or one command brings your code in.
Bring your project inYou are starting one
Pick a starting point or an empty one, and the knowledge grows as you build on it.
Next: shape a system, or start from one in the gallery. No account until you keep it.
You want proof first
No account, nothing written, nothing sent. It reads and tells you what it saw.
Next: it prints what it read, right in your terminal.
npx synthesisui@latest inspectDoes it see mine?
Don't take our word for it. Run it on yours.
One command. Any React or Next repo. It runs on your machine, sends nothing, and reads the vocabulary already encoded in your frontend - naming what it could not read.
- Run one command in your repo, no account.
- See what your agent would know about it.
- Connect when you like what it read.
npx synthesisui@latest inspect- Read-only
- Runs locally
see the full outputhide the full output
$ npx synthesisui@latest inspect ── What came out of your files ───────────────── 25 of 25 components came out with a blueprint, and 94% of your 222 style decisions carry your own vocabulary. ── These resolve to nothing ──────────────────── 9 references to 9 tokens nothing in this repository declares. var(--container-2xl) 1× in 1 file, and nothing close is declared var(--container-lg) 1× in 1 file, and nothing close is declared var(--container-sm) 1× in 1 file, and nothing close is declared Yours to fix in your own words - nothing here asks you to adopt ours. ── The whole reading, in one file ────────────── 16 sections did not print here - every value, every fragment, every part. Nothing was written, and nothing was sent.How it stays simple
It asks. It gets checked. It never guesses.
Three things happen while your agent works - and you set up none of them by hand.
1before it writes
It asks your system
find_token { "value": "#ec6fd0" }
#ec6fd0 is --ds-color-blush-500 in this project.Use var(--ds-color-blush-500).
Source: contract - read from your code, not from model memory
Real answers, from a real project. The instruction stays simple - ask before you invent - and the answer stays current.
2at the end of the turn
It gets checked anyway
<Button intent="compact">Pay now</Button>
Halogen does not declare `intent="compact"` on Button.Button intent: ghost, primary, secondary
It runs because your editor fires it, not because the agent remembered. You decide how much authority it has - the refusal above only happens in consume mode:
- consume refuses
- create reports
- off nothing is blocked
3when there is no answer
It never guesses
no token for #6366f1, and nothing is close. Do NOT invent one.
1f5cr2 · waiting on a persontoken #6366f1 as color-semantic-focusfor: the focus ring on the checkout form
close it in the studio, or: synthesisui request --done 1f5cr2
A person decides, not the agent. And when the gap is ours - our reader failed, not your system - it routes to us and closes itself when an update lands.
The instruction stays stable. The answer stays current.
Where the decision lives
Everything the agent reads has a screen a person can open.
The knowledge is not a file somebody has to trust. It is a system with a version, a history and a screen - foundations, components and the rules that govern both. Your agent reads it; you and your team change it.
Open any of them and it runs in your browser - toggle variants, watch components react, copy the JSX. No account.
And three things run on their own
Structure
how pages are laid out
The space, the rhythm and the reading order your agent builds with.
Memory
what your agent knows
Your agent reads it before every session.
Autopilot
on by default
When everything a sync brings is safe, it publishes on its own.
Free
3 projects
All of it lives in one folder, _synthesisui/, plus one hook - nothing of ours runs inside your app. It becomes your design reference, and how you keep control of what your agent builds.
One invented decision is harmless. A thousand of them become a second frontend.