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 components and trust the sync |
_ds_sync.json |
future syncs | the sync anchor - content hashes that let a re-sync (any machine) skip re-verifying unchanged components AND compute exactly what to upload/delete |
This is why fidelity is the whole game: a component that renders wrong here renders wrong in every design the agent ever builds with it, and a wrong .d.ts or misleading .prompt.md makes the agent misuse the API everywhere. The verification loops in the sub-skills exist because of this - they are not bureaucracy.