What
A new bundled skill that bundles your React component library (from Storybook or a bare package) and uploads it to claude.ai/design so the Design agent can generate accurate mocks using your real components.
Usage
# In Claude Code:
/design-sync
# or say: "sync my design system to Claude Design"Details
- Requires claude.ai authentication (not available via Bedrock, Vertex, or third-party providers)
- Not available when
CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFICis set - Upgrades your claude.ai login scope on first use to include
user:design:readanduser:design:write - Uses a
DesignSynctool that reads and writes your org's design-system projects onclaude.ai/design - Creates a
design-sync.config.jsonin your project to track configuration across re-syncs - Bundles
_ds_bundle.js(component code) and_ds_bundle.css(styles) - Includes comparison screenshots to verify visual fidelity before upload
- A
design-sync.config.jsoncache enables incremental re-syncs that carry forward unchanged components
Evidence
Bundled skill (search for "design-sync" or "Push a React design system to claude.ai/design") — pE9 skill definition at line ~733477
Strings lifted out of the shipped bundle, so the claim above can be checked against them.