Your AI agents build screens that look like your product.From day one.
Install once, then just code. Your agent learns your frontend as it grows, and checks it before inventing a colour, a component or a layout.
GitHub, Google or email → one command in your repo → your first check
No runtime, no SDK. Nothing of ours runs 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% Values from the system
- 100% Colours from the system
- 95-99% Easy to read
- 100% Same rhythm everywhere
That was a bike shop. Yours is next.
Get startedAny page.
Your look.
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 came from the system. Now picture 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 init · once
beforeEvery new page picks its own spacing, its own rhythm, its own order.
afterEvery page is built with your layout.
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.
Get started →how it works
Your agent creates. SynthesisUI remembers - and checks.
1
Create
Your agent draws the first screen - on its own, or with impeccable, a design skill we offer to install.
2
Read
SynthesisUI reads the page and writes down what it already decided: the size of every heading, the details that make it yours. What it can't tell, it asks - all at once.
3
Keep
After every turn, a heading out of place, a detail copied from someone else's site or a text that's hard to read goes back to your agent to fix - before it reaches you.
Does 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.Where the decision lives
Everything the agent reads has a screen a person can open.
Not a file you have to trust: a system with a version, a history and a screen. 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.
One identity, every output. Pages today. Next: decks, posts and video, made from the same system. See where we are going →
Before you sign up
Does it work with my agent?
Claude Code, today - that's where the check runs on its own after every turn. The read-only check in “Run it on yours” runs in any terminal, no account.
Does my code leave my machine?
The reading runs on your machine and sends nothing. When you connect, what goes up is what it read - the components, values and rules, plus the lines it couldn't understand. Never your repository.
Do I have to change how I work?
No. One install, then you code as you do today. The check runs on its own after every turn.
And if I want to leave?
Delete the _synthesisui/ folder and the entries we marked as ours in your agent's settings. Nothing of ours runs inside your app.
One invented decision is harmless. A thousand of them become a second frontend.
Give your agent the memory of your design today - and every page after it looks like yours.
GitHub, Google or email → one command in your repo → your first check
The memory of your design lives in one folder, _synthesisui/, versioned with your code. Nothing of ours runs inside your app.