The frontend knowledge layer · React & Next

Give your AI agent the frontend knowledge your project runs on.

Skills, agent configuration and a living memory, installed in your project. They learn from the code you already wrote and from every line you add - and govern what your agents write next.

Without it, your agent invents a blue your project already had a name for - and it compiles, reviews clean and ships.

Get started Check your frontend

Free for your first personal project. No runtime, no SDK, nothing of ours running inside your app.

Runs locally
Claude Code, today

what your agent just wrotecheckout-summary.css

.checkout-summary {
  background: #2563eb;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}
<Button variant="compact" />// not an option your system declares

named by your system

0 of 5

It invented none of these. It asked what this system calls each value, and the system answered.

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.

npx synthesisui@latest inspect

Read-only
Runs locally

real output, trimmed to fit · 163ms · nothing written

$ npx synthesisui@latest inspect
 
── What this project composes ──────────────────
 
  Button    2× in 1 files  variant(primary|ghost) size(lg)
  Button    1× in 1 files  variant(secondary) size(sm)
 
  5 of 5 components came out with a blueprint - 100%
  2 parts named across 5 components - read off their own markup
  5 arrived with a SHAPE - the parts nested as they nest in
  your code
  3 places where one of your components is built out of
  another - each becomes a rule about the two of them
 
── What your project says ──────────────────────
 
  6px radius, 5× in 3 files
  12px spacing, 4× in 2 files
  #2563eb color, 3× in 2 files
 
  17 stylesheet declarations - no reader in this version
  understands this shape
      app/globals.css:4  .promo-banner { background: #2563eb }

So what changes?

Your agent doesn't have to remember your frontend. It can ask.

These are real answers, returned against a real project. Every one carries its source, so the agent knows it came from the contract read out of your code - not from model memory.

a component it was about to reinvent

your agent asks

describe_component { "name": "button" }

the system answers

button - Compact, low-radius action.
Primary carries the lone indigo; the rest
stay in graphite films.

How to dress it: `ds-button`, plus one
data attribute per axis.
  data-intent="ghost|primary|secondary"
  states the recipe already carries: hover -
  they are CSS, so do not write them again
  in JS.

Source: contract

and writes

<button class="ds-button"
        data-intent="primary">

a value it was about to invent

your agent asks

find_token { "value": "#ec6fd0" }

the system answers

#ec6fd0 is --ds-color-blush-500 in this
project. Use var(--ds-color-blush-500).

Source: contract

and writes

background: var(--ds-color-blush-500);

A rules file holds what you remembered to write down, and it ages quietly. SynthesisUI keeps the stable instruction simple - ask before you invent - and the frontend knowledge that changes lives in a contract read from your code and served current.

The instruction stays stable. The answer stays current.

But it might not ask

The agent can forget the instruction. The check still runs.

It runs because your editor fires it after every write - not because the agent remembered.

step 1 of 3

<section style={{ background: "#6366f1" }}>
  <Button intent="compact">Pay now</Button>
</section>

You decide how much authority it has. The refusal above only happens in consume mode - the same write in the default mode returns the same report and refuses nothing.

consumerefuses an option the system does not declare
createreports, and gets out of the way
offnothing is blocked

And when it has no answer

When your system hasn't decided, neither does the agent.

No token in this system holds #6366f1, and nothing is close. Do NOT invent one. Say which value you need and what you would call it, and let a person decide.

what the system answered · Source: none · no token for #6366f1

so it files, instead of inventing

1f5cr2waiting on a person

token #6366f1 as color-semantic-focus

for: the focus ring on the checkout form

app/checkout/summary.tsx

Author it in the studio, or close it: synthesisui request --done 1f5cr2

The agent was told, word for word: do not add the token yourself - the request shows up in synthesisui doctor for a person to decide.

and it knows whose gap it is

We don't turn our missing knowledge into your missing decision.

When the request is for something your system's own contract already promises and our reader failed to deliver, the gap is ours. It routes to us, closes itself when an update lands, and nobody asks you to decide anything.

The worst version of a governance tool is the one that blames you for the limits of its own parser.

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.

synthesisui.com/ds/cinnabar/play

Open a real system

Open any of them and it runs in your browser - toggle variants, watch components react, copy the JSX. No account.

And when it is not just you

One frontend language for the whole team.

One agent drifting is annoying. Ten of them turn drift into architecture - because every person is driving a different session over the same code, and each pair invents its own reading of how this frontend works.

The contract belongs to the project, not to anybody's session. Every developer, every Claude Code session, the same decisions.

what each person can do in this project

person	Writes to the main line	Changes Autopilot
youadmin	yes	yes
a teammatemember	yes	yes
a new hiremember	no	no

Writes to the main line: her work reaches the team without approval - otherwise it waits in her branch.

Changes Autopilot: she turns her own Autopilot on and off - otherwise she can only see what it is.

Take the Autopilot permission away and it turns off on the spot. Give it back and it stays off - she turns it on when she wants to.

What it costs, and where to start

Start where you already are.

Personal

Free

forever

One project
The full reading, the check and the requests
Nothing of ours in your code

Individual

$15

per month · one person

Unlimited projects
Everything in Personal, without choosing which project gets it
One seat - no permissions to manage, because there is nobody to manage

Team

$49

per month · 5 seats · $12 each after that

Unlimited projects
Shared contract, per-project permissions, the owner queue
Autopilot per person, branches and approval

three ways in

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.

Bring your project in

You are starting one

Pick a starting point or an empty one, and the knowledge grows as you build on it.

Build the system first

You want proof first

No account, nothing written, nothing sent. It reads and tells you what it saw.

npx synthesisui@latest inspect

One invented decision is harmless. A thousand of them become a second frontend.

Everything lives in one folder, _synthesisui/, plus one hook. Leaving is deleting it.