design-sync

# Sync a design system to claude.ai/design ## What this is for **Claude Design** (claude.ai/design) is Claude's design tool: users prompt a design agent and it builds working UI — screens, flows, prototypes — rendered live in the browser from real React code. Out of the box it designs with generic components. This skill changes that: it converts the user's design-system repo into the format Claude Design consumes and uploads it, so from then on **the design agent builds with the customer's actual components** — every design it produces is on-brand, made of their real parts, and maps 1:1 onto code their engineers can ship. That framing should drive every judgment call in this skill, because each uploaded artifact is an input to that agent (or to the humans steering it): | Uploaded artifact | Consumed by | For | |---|---|---| | `_ds_bundle.js` + `_vendor/` | the design agent's runtime | every design it produces renders these real compiled components from `window.<globalName>.*` | | `styles.css`, `fonts/`, `tokens/`, `_ds_bundle.css` | every rendered design | the look — tokens, fonts, and component styles, all reachable from `styles.css`'s `@import` closure (designs receive only that closure) | | `<Name>.d.ts` (`<Name>Props`) | the design agent | the API contract it codes against | | `<Name>.prompt.md` | the design agent | its usage reference — how to compose the component, with examples | | `<Name>.html` preview card | humans in the component picker | how they find componen...