# Claude Design's /design-sync Only Reads Packaged React Code > Claude Design's /design-sync pulls real tokens straight from your codebase, but every writeup agrees it needs a packaged React library first. Here's who that leaves out. Source: https://waalee.ai/blog/claude-design-sync-react-package-requirement-gap Published: 2026-11-07 · 5 min read · By The WAALEE Team Topics: Claude Design design-sync, Claude Code design tokens sync, React component library tokens, Claude Design Storybook requirement, AI design system from codebase, extract design tokens without React package Claude Design picked up a second way to build a design system a few weeks back: `/design-sync`, a command you run inside Claude Code that pushes a local component library straight into a Claude Design project. It's the quieter sibling to the web-capture feature everyone noticed first, the one that just reads a live URL. Design-sync reads your actual code instead, tokens and all. Dig into how it works and a pattern shows up fast: almost every writeup covering it agrees on what it needs to get started, and that requirement rules out most of the businesses who'd want it most. ## What /design-sync actually does Run `/design-login` to authorize, then `/design-sync` against a local repo, and Claude Code reads the real tokens and components out of your React codebase and pushes them into a project Claude Design can design against. Per one developer's [writeup](https://blog.serverworks.co.jp/claude-design-sync), the first sync checks every component, which can take a while on a large library, and the feature currently runs on Anthropic's own API rather than Bedrock, Google Cloud, or Microsoft Foundry. Once it finishes, the synced system shows up in Claude Design's own design-systems list, same as one built from a Figma file or an upload, except this one is reading your shipped code directly instead of a file someone exported once and never touched again. ## The packaging bar nobody puts in the headline Here's where the writeups start to disagree, and the disagreement itself is the useful part. [One Claude Code newsletter](https://aicatchup.com/news/claude-design-sync-claude-code-two-way) reports the command compiles the library rather than just uploading files, and that only React is accepted right now, with Vue, Angular, and Svelte left out. A separate guide says the sync works only against a Storybook build or an npm-packaged design system, not an arbitrary folder of components. A third source claims it can also pull from a GitHub repo or raw uploads. Treat the exact boundary as unsettled until Anthropic documents it plainly. What every source agrees on is the shape of the requirement: your design system has to already exist as a buildable, packaged thing, not a pile of styled components scattered across a Next.js app. - React only for now; Vue, Angular, and Svelte reportedly aren't picked up. - Needs a package with a published dist/ or a Storybook build in at least some reports; a plain component folder may not qualify. - One tester found token files living outside the package's own folder weren't read at all. - First sync can run long on a large repo; a small app took about 10 minutes in one test. ## Who that leaves standing outside The teams who'd get the most value from a tool that reads tokens straight out of real, shipped code are usually the ones furthest from having a packaged React library to point it at. A Webflow site, a WordPress theme a decade old, a marketing page built once in Framer and never turned into components, a scrappy Next.js app where every page just writes its own Tailwind classes inline. None of that compiles into a design-system package, because none of it was built as one. Design-sync isn't wrong to require packaging. It's a reasonable bar for a two-way code sync. It just means the command solves the problem for teams that already solved the harder problem themselves, which is most of what makes it feel like a gap rather than a limitation. ## Get the tokens in without building the package first If a React package isn't coming anytime soon, the fix doesn't have to wait on one. Pull the real colors, type scale, spacing, and radii straight off the live site as W3C tokens and hand those to Claude Design as reference material alongside whatever web capture or manual upload you're already doing. You get to the same destination, real values Claude can build against, without shipping and maintaining a Storybook build just to unlock one sync command. Three paths from what you've already shipped to something Claude Design can actually use: - [Claude Design /design-sync](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design): Reads tokens and components straight out of a local React codebase and pushes them into Claude Design. Needs the library packaged, reportedly as a buildable npm package or Storybook, not a loose folder of components. - [Storybook](https://storybook.js.org): The packaging format several reports say design-sync actually recognizes today. Building one just to unlock a sync command is real, ongoing maintenance work most teams haven't taken on. - [WAALEE](https://waalee.ai/): Paste a live URL, no React package or Storybook required, and get the same real W3C tokens back as upload-ready reference material for Claude Design, Claude Code, or any other AI tool. None of this makes /design-sync a bad feature. A command that reads real tokens out of real code instead of guessing from a screenshot is exactly the direction this space should move. It just assumes the packaging work is already done, and for most businesses, that's still the part that hasn't happened yet. Worth knowing before you plan a design-system project around a command that needs a prerequisite you don't have.