{"version":"2.1.169","anchor":"design-sync-skill-sync-react-design-systems-to-claude-design","canonical_anchor":"design-sync-skill-sync-react-design-systems-to-claude-design","heading":"\/design-sync Skill \u2014 Sync React Design Systems to Claude Design","tier":null,"area":null,"scope":null,"heads_up":null,"url":"https:\/\/changelogs.core-directive.com\/v\/2.1.169\/e\/design-sync-skill-sync-react-design-systems-to-claude-design","release_url":"https:\/\/changelogs.core-directive.com\/v\/2.1.169","markdown":"### `\/design-sync` Skill \u2014 Sync React Design Systems to Claude Design\n\n**What**\n\nA 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.\n\n**Usage**\n\n`# 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\"`) \u2014 `pE9` skill definition at line ~733477"}