Claude Design Sync: Ship the Real App
The Two-Way Claude Code System for Shipping Production Apps Without Drift
The two-way Claude Design round-trip Anthropic shipped in June and barely documented. Set up /design-sync once, write a design system as code the model actually obeys, cut the token burn that made people quit in fifteen minutes, recover a drifted repo, and deploy a live app that stays in sync. One real app, shipped and kept in sync. 221 pages, project-driven.
The post-June Claude Design round-trip, the one none of the older “Handbook” books can teach because they all predate it. Set up /design-sync once, then close a clean two-way loop, write a design system as code, kill the token bleed, recover a drifted repo, and ship a real backend behind the design. Every gate and template ships as a free companion repo (token gate, contrast checker, conventions validator) that runs on your own tokens with no key and no account. 221 pages, one real app shipped and kept in sync.
What You'll Build
The two-way round-trip Anthropic shipped in June and barely documented.
Every command and surface that changed, mapped so you know what's real.
The 60-second call that decides where your tokens go.
One change all the way around the loop and back. The fix is /design-login, nine characters.
A design system written as code the model obeys instead of approximating.
A component-to-page audit that blocks off-brand output before it ships.
Cut the burn that made people quit in fifteen minutes. The second sync is nearly free.
Pull a diverged repo back into sync without throwing away your team's work.
Real data, auth, and APIs behind the design. A working app, not a mockup.
Deploy a live production app that stays in sync as it grows.
The contrast and accessibility bar agency work has to clear.
The failure modes and the fixes, so a broken sync costs minutes not a day.
The 30-day plan that ships work nobody can call vibe-coded.
Free Articles from this Book
The Diff That Resyncs Claude Design With a Repo That Moved
One diff reconciles a canvas that drifted from a repo your teammates kept changing, so the screen you present is the product that actually ships. Claude design out of sync with repo has no merge button: there are two stores with two jobs, one rule that makes the reconciliation correct, and a way to be told next time instead of finding out.
from: Claude Design Sync: Ship the Real App
How to Wire Claude Design to Your Repo in 2 Commands
Two commands, run once per machine rather than once per project, put Claude Design on every repo you own from then on. The claude design sync setup fails for most people at one step, and it is not the one you would guess: the sign-in command is `/design-login`, not `/login`, and one person lost a day to that difference.
from: Claude Design Sync: Ship the Real App
The Conventions File That Makes Claude Design Use Your Design System
A conventions file built from the CSS you already ship makes every generated component come out in your own design system instead of a generic one. The file Claude Design reads is `.design-sync/conventions.md`, not the `DESIGN.md` everybody writes, and token names one word off your stylesheet are worse than no file at all.
from: Claude Design Sync: Ship the Real App
1 Script That Checks Design Token Contrast in Light and Dark
One script resolves every token pair in every theme and exits non-zero, so a contrast failure stops the build instead of shipping. Every design token contrast check on the first page of results is a human pasting two hex codes into a web form, which cannot see that the identical line of CSS passes in light and fails in dark.
from: Claude Design Sync: Ship the Real App
The 30-Second Supabase Check That Proves Your Client's Data Is Closed
A 30-second check from outside your app proves the client's data is closed before you hand the work over. Supabase rls not enabled by default is true of every table an agent writes in raw SQL, and the exposure is full CRUD: anyone with the project URL can read, edit and delete.
from: Claude Design Sync: Ship the Real App