/design-sync Skill — Sync React Design Systems to Claude Design / Claude Code v2.1.169

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_TRAFFIC is set
Upgrades your claude.ai login scope on first use to include user:design:read and user:design:write
Uses a DesignSync tool that reads and writes your org's design-system projects on claude.ai/design
Creates a design-sync.config.json in 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.json cache 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.