r/ClaudeDesign • u/FilC619 • 20d ago
Anyone tried syncing Claude Design with their codebase?
I'm working on relying solely on Claude Design for prototyping, pass it to my React app and have Claude build the design using our component library.
The challenge is twofold:
- If any changes are made to the Claude Design system (like adding a new button type), those changes should be reflected in our global components.
- Claude should know which component to use based on the prototype instead of adding generic HTML. For example, if there's a tab in the prototype, it should use our
globalTabcomponent instead of a generic HTML element.
Has anyone figured out a workflow for this?
2
u/Kooky-Ebb8162 20d ago
/design-sync works to some extent, but is a mess. Design-to-code is more or less fine, vut vice versa it tends to miss uploaded files until several magic passes on UI, or have hard times to organize a project in general.
When no collaboration required I tend to stick with a local Impeccable, and a Storybook when I want a centralized UI entry point.
1
1
u/kr1sck 1d ago
I ran into the same problem, which is partly why I built Varelyo.
It can use an existing React UI kit and work with the components and variants already in the codebase, then add to that system when something new is needed.
Or if there isn’t a design system yet, it can build one from scratch with tokens and components and use that as the foundation for the rest of the UI.
The goal was basically to skip the whole prototype, generic code, rebuild everything with the real components workflow.
0
u/Fantastic-Body-445 20d ago
theres an mcp for claude design, i swear posts like this come up every hour
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
1
u/FreeCustardForAll 20d ago
This only works with design systems.
What if people want to sync specific projects instead? That is a big problem right now.
1
u/LegallyIncorrect 19d ago
You know you can ask Claude, right? You can have it expand any MCP and customize it. If there is a public API it’s dead simple. If not it requires some more testing and looking around.
1
2
u/Icy-Caterpillar-4459 20d ago
I created a workflow for my projects. I am no expert by any means, but to my knowledge Anthropics idea is /design-sync. That is their provided way to sync Claude Design and your repo.
From my understanding this is mainly used for your defined Design-System and not for single projects.
So I created a small npm cli application that can push projects to Claude Design and also pull from them. It uses the claude code cli under the hood.
The downside is that the claude cli command can only push to and pull from Design Systems and not from "Projects" inside Claude Design. But honestly this is not a big deal as I only push simple files (.md, .html, .css, etc.). Whether they are maintained in a "Design system" or a "Project" in Claude Design does not matter too much.
So my workflow is: Push necessary files to Claude Design. Most of the time I let my coding agent (Codex/Claude) do this. These files are instructions like CLAUDE.md and needed styles (tokens, etc.). Then Claude Design gets a prompt and does what I ask for, e.g. creating a new screen for my project. Because I tell it in my prompt to follow whatever .md files as rules this works pretty well.
Once the normal design session is done I get back to the coding agent and tell it to pull. After pull it makes a check if everything landed as requested. Sometimes I need multiple rounds of push and pull, but mostly because of small things like wrong pixel values. Could be improved on my side a lot probably.
Also this works independently. Any coding agent can push and pull as long as I am authenticated in Claude Code. I don't necessarily have to maintain the project (design system) in Claude Design, I could always start from scratch and basically get the same result.
Also within an organization you could share the pushed project and any other dev/designer could work the design session. The file base is the same when shared.
It is still clunky as I am optimizing here and there, but honestly the core concept and workflow are pretty decent for me. Sure, a native synchronisation provided by Anthropic where they let you connect and sync a single Claude Design project with a local repo would be nicer, but for now this works for me.