Синхронизация дизайн-системы с Claude Design

★ 7.5 · design

design-sync is a Claude Code skill that converts a React design system and uploads it to claude.ai/design so the design agent builds UIs from the project's real components instead of generic ones. From the repository's own dist/, the skill produces a full artifact set: a compiled bundle (_ds_bundle.js plus vendor files), CSS and design tokens, TypeScript props types (<Name>.d.ts), prompt references (<Name>.prompt.md), and HTML preview cards for the component picker. Both Storybook-based repos and bare packages are supported — with Storybook, previews are verified against its own render; without one, they are authored from the repo's usage examples. Re-syncs use content hashes stored in .design-sync/config.json to upload only what has changed. The skill is aimed at product teams who want every agent-generated design to be on-brand, built from their actual components, and ready for engineers to ship.