Running /design-sync in Claude Code: What Your Codebase Feeds Into Claude Design (and Where the Round-Trip Gets Rough)

Run /design-sync in Claude Code and Claude Design builds your next prototype from your actual components instead of defaults. The code→design direction works cleanly; the design→code return trip still demands active attention.

What the command reads from your codebase

/design-sync accepts a GitHub repo, a local directory, design files, or raw uploads. From your code it extracts:

• Component APIs and structure
• Color system, spacing scale, typography, CSS approach (custom properties, utility classes, etc.)
• Framework patterns: hooks, state, file organization

What it misses: conventions that live outside the code itself — custom data-testid patterns, undocumented a11y attributes, animation contracts. Before running /design-sync over a real codebase, write a short DESIGN-SYSTEM.md documenting those and include it in the upload. The day's earlier post on understanding Claude Design's output format covers what comes back.

Running it

/design-sync   # in any Claude Code session

The sync is incremental — one component at a time — and presents a plan you approve before anything is written. First sync over a large library means multiple approval rounds.

The code→design direction: mostly solid

Practitioners report that once the design system is loaded, Claude Design generates prototypes that look like your system — your color tokens, your component variants — rather than Tailwind defaults. Deeply nested slot structures sometimes get flattened, but the extraction is reliable for standard component APIs.

The project round-trip: still rough

The design→code leg produces a handoff bundle Claude Code picks up directly, but practitioners flag it as still awkward: the moments that demanded human judgment were the permission approvals, catching when Claude read the wrong component version, and reviewing the output before accepting it. One detailed walkthrough describes it as "I wish it were a little easier" — the direction works, but it needs more active shepherding than the code→design leg.

Requires: Claude Pro, Max, or Team.

Sources: Set up your design system — Anthropic Help · Claude Design overhaul — VentureBeat · I Fed My Entire Design System to AI — Paul Kuo