How to make Claude Design use a real design system instead of generating lookalike components
Syncing a design system with Claude Design through /design-sync: bundles, exports, types and render checks.
If you have tried using Claude Design for prototyping or UI generation, you have probably noticed a problem: AI likes to generate interfaces from its own default or approximate elements instead of the actual components in your repository.
Nitay Neeman has published a detailed explanation of how to solve this. The article explains how synchronization works through the /design-sync command in Claude Code, creating a so-called mirror of the design system.
The main points:
- The mirror is a compiled bundle, not just source files. To let Claude render the actual components, the bundle packages the components themselves, TypeScript types, styles, fonts and a standalone React instance.
- Invisible exports: every component must be explicitly re-exported from the root file (for example,
src/index.ts). Forget to re-export something, and Claude simply will not see that element. - Types are critical: synchronization discovers components through
.d.tsfiles. If the build does not generate type declarations orpackage.jsondoes not point to them, the types disappear, along with the props and their variants. - Checking visual accuracy: synchronization launches a headless browser and captures a screenshot of every Storybook preview/story. Claude then compares the render side by side with the reference to make sure the styles have not broken.
If you maintain an internal UI kit or use shadcn/ui and want Claude Code to produce ready-made layouts using real props and styles, the article is an excellent step-by-step guide with an example repository.
For a visual walkthrough of connecting Claude Design and Claude Code using an MCP server and the /design-sync command, I recommend watching this video. The author demonstrates the live process of importing components and generating a form from them.