Skip to content

Ready to govern your design system?

Fragments brings your React app, coding agent and visual review into one desktop app. Work with your components and tokens, check for drift, and compare before and after.

Mac app · private beta · first invites in OctoberOn your phone? We’ll email your Mac invite.

Fragments changing a real app: all its pages, the shared sidebar picked on its Dashboard, one request to the agent, its receipt with no new drift, every page the change reached, the sidebar swiped before and after, and a colour written by hand put back to its token.

Works with

  • Claude Code
  • Codex
  • MCP agents
  • shadcn/ui
  • Base UI
  • Untitled UI
  • Fragments UI
  • Your own custom React libraries

Your design system isn’t the one on a canvas. It’s the one your users see.

Built from your system. Checked as it builds.

Fragments reads your components and tokens and checks supported code for departures from your system.

Reads your codebase

Fragments maps the components and tokens you already have. Nothing to import, nothing to copy across.

Design in the real thing

Edit live pages built from your own code, so there is no second copy to drift from.

Catches what breaks the rules

A gap off the scale or a colour that isn't a token is named, with a suggested replacement where one is known.

Change it where you see it.

Five steps, one change: select a part of your running app, measure it by its tokens, ask your agent, compare before and after, and keep it in your code.

A demo, played once as one take. Meridian's Team card is selected: a PlanCard, written in PlanCard.tsx. It is measured: its padding is space-5, its radius radius-lg, its background surface-raised. Asked to add a seat picker, the agent adds Meridian's own SeatPicker component; the page is compared before and after, and the change is kept, with no new drift. Point at any part of the page to measure it yourself.

The rules go where your agent goes.

One set of rules, checked in the app as you design, in other agents through MCP, in the instructions your next agent reads, and in CI after you add the check.

Our brand

Approved_tokens.scss
Theme
  • Accent on surface 5.8:1 AA
  • Text on accent 5.4:1 AA
  • Body on ground 8.9:1 AA

Adjust a value to preview it on the page.

A panel of four of our tokens, standing in the brand's light: the accent, the radius, the space unit and the theme. Change one and the page follows at once, the light included, while the panel checks its text pairs for contrast. Nothing is saved: Reset to approved puts the brand back, and so does a reload.

Your design system sets the rules

Keep shadcn/ui or your own React library, or pick a starter checked from its first commit. Its tokens and components become your agent's rules.

The code behind it

Point at a part to inspect its component and tokens, with a file and line where source mapping is available.

Drift, as it lands

A value written by hand where a token says the same, or an element where your component belongs, with a fix where one is available.

Strict in CI

New drift fails the Design drift check. Make it required, and the merge waits for it.

Before and after

Swipe between before and after on pages with pictures at both ends of the change.

Change your mind

Undo recorded file changes, with later edits preserved and anything it cannot restore clearly reported.

Line up

Compare fields found on pictured pages, by look. Keep one, and ask the agent to bring the rest to it.

Rules for the next agent

Fragments keeps its section in AGENTS.md and CLAUDE.md, so any agent starts from your rules.

One check, any agent

Agents outside the app run the same check through the MCP server Fragments ships with.

Go on, try to break it.

Supported code is checked against your rules. Add CI in Strict mode and require its check to block new drift at merge. Break Meridian's card below.

Meridian's Team plan card, a demo, beside three lines of its source: the badge's colour, the gap between its features and its button. Change one and a miniature of the app's check marks it on the card and says what the app says of it, offering Replace where a token says the same. Under Strict, new drift fails CI, and the merge waits for the required check, Design drift.

PlanCard

No drift

A miniature of the app's check

PlanCard.module.css

  • background: ;
    No drift: brand
  • gap: var(--space-2);
    No drift: space-28px

PlanCard.tsx

  • <Button>Contact sales</Button>
    No drift: Button
Drift in CI

Strict · no new drift, CI passes

Ready to merge

See this page the way Fragments sees yours. Press I.

Point at anything on this page to see its file and line, the tokens it reads and what the check says about it.

Press I anywhere on the page. Esc leaves.Tap the key to inspect the page.Inspecting the page needs scripts.

Fair questions.

When can I use Fragments?

The Mac app opens in private beta, with the first invites going out in October. Join the waitlist for an email when your place opens. Published @usefragments packages are available now. Paid plans are coming soon.

My coding agent can already edit visually. Why Fragments?

Pointing at a page and asking for a change is the easy part. What breaks is the system: a colour pasted, a gap guessed, a button redrawn by hand. Fragments checks supported edits against your own components and tokens as the agent works, and again in CI once you add the check. Compare available before and after pictures, with Undo for recorded file changes.

Do I have to use Fragments UI?

No. Fragments reads the components and tokens your app already has, whether you wrote them, copied them in or installed them from a library, and reports supported departures from those.

What do I need to start?

A Mac with Apple silicon on macOS 14 or later (pictures of your pages need 15.4), a React app that runs on it, and Claude Code or Codex to make the changes. Sign in to Fragments once; your coding agent uses its own account. Open your project folder, say yes to running it, and Fragments starts its dev server and finds your pages. No app yet? Start one from a starter.

My code already drifts. Now what?

Everyone's does. Fragments shows you where. Turn on Strict and the drift already there is kept as a baseline, so only new drift fails, and you clear the rest when you choose.

Which agents does it work with?

Claude Code and Codex run inside the app, on your own account. Any other agent that can start a local MCP server gets the same drift check, through the server Fragments ships with.

I design. I don't code. Is it for me?

Yes. Once your app runs on your Mac (an engineer sets that up once), you point at what you want, ask in plain words, and compare the available pictures before and after, with Undo for recorded file changes. Your agent writes the code; Fragments checks supported changes against your design system.

Design it once.

We’ll email when your place opens.