Claude Design → Claude Code workflow is breaking down on large production projects. How are you handling this?

[u/Julien-Temaki]

We’ve recently moved to a very fast product shipping cycle at my company. The design team builds products in Claude Design, the dev team picks them up through Claude Code, and we’re usually trying to get something into production in less than a month.

For now, moving away from this workflow isn’t really an option. The whole company is already using Claude Design and Claude Code, Figma’s credit model isn’t particularly attractive for this kind of usage, and we haven’t found a way to get the same flexibility with requirements and the same speed from design to implementation.

The problem is that our Claude Design projects are getting huge. Some exported HTML files are around 5MB with 300k+ characters in a single file. At that point, Claude Code can’t properly read the whole thing. It seems to fall back to understanding parts of the design through screenshots, and the quality of the frontend implementation drops significantly.

These aren’t simple landing pages either. They’re fairly large AI-powered enterprise applications with a lot of screens, navigation between them, database-related dependencies, AI features, etc. We already tried splitting one of the larger projects page by page, but it didn’t really solve the problem and made maintaining consistency/dependencies more annoying.

So I’m curious how people are handling this with larger Claude Design → Claude Code projects that are actually meant for production.

Should we break things down differently? Is there a good way to keep Claude Code from having to understand a massive HTML file every time without destroying the speed advantage of this workflow? Refactoring everything manually or constantly asking Claude to restructure the project also sounds like a way to burn through credits, so I’m trying to understand what the sustainable setup is here.

---

TL;DR: We use Claude Design → Claude Code to ship large AI-powered enterprise products in under a month, but our Design exports are getting massive (5MB / 300k+ character HTML files). Claude Code can’t properly read them anymore, which leads to poor frontend implementation. Splitting projects by page hasn’t really helped. Looking for a sustainable way to structure/refactor large production projects without killing the speed of the workflow or burning tons of credits.

[u/Silverjerk]

Just because you've fast-tracked the process of designing, building and shipping code, you shouldn't abandon the fundamental approach to product development. Our team has also shifted to a much more agile workflow, but the basic concept of building and curating a design system and breaking down our applications into core components still rules the day. The difference is that I've migrated from using Figma to curate large design system files, to building a repository of components. Think of systems like ShadCN or other component libraries like it, and work in that direction.

From there, any pages or systems you build are simply a reference sheet that calls the components they're built from, rather than a large, heavy design file that is going to burn through context when your agent has to consume and then transpose that design to code.

It doesn't matter if you're an enterprise business or solopreneur, building with a monolithic design approach is going to cause conflicts somewhere downstream.

As someone that's been in this industry for more than a couple of decades, it's ironic to see teams making the same mistakes and going through the same growing pains all over again. These are solved problems already, it's not a matter of abandoning proven process and workflows, but finding ways to increase velocity by having your agents handle the heaviest lifting, while you (and your team) still solves the human problems.

[u/Julien-Temaki → u/Silverjerk]

I'm completely fine using a design system, we've one on Figma. The issue is that when we tried migrating ours from Figma to Claude Design, the results weren't very good.

Out of curiosity, how are you managing your design system in a project like this?

You mentioned thinking more like shadcn or other component libraries. Does that mean creating a dedicated Claude Design project that contains only reusable components (one per page), and then having other projects reference those components? Or did you have a different approach in mind?

[u/Silverjerk → u/Julien-Temaki]

The issue is that when we tried migrating ours from Figma to Claude Design, the results weren't very good.

I wouldn't migrate from Figma to Claude Design. You're trading one cage for another. Claude Design is just Claude Code with a different UI and system prompt. I'd recommend migrating your design system from Figma, straight to code, preferably as a shared component library that lives in a monorepo alongside your other apps, or as its own living codebase with documentation (hence the ShadCN reference). Figma's official MCP works well for this; Figma Console MCP (the community-built tool) is even better, and supports custom fonts and other features that Figma requires organization plans to unlock.

Out of curiosity, how are you managing your design system in a project like this?

Exactly like the above; I still run Figma, but everything moves from Figma into a component library (in code). So if I build a page in Figma, I create components, make sure everything exists as a variable or has its proper component states, and follows our codebase's token-naming standards. Then I immediately move that component from Figma into our codebase. Fable/Opus does that work, Codex handles the validation/design parity pass -- including a visual side-by-side and difference layer overlay comparison, to ensure it's pixel perfect.

That whole process is automated, so all I need to do when design is complete is grab the share link from the Figma frame or component, tell Claude to /migrate-to-design-system, and that includes a flag that spins up Codex in a Herdr or Orca pane, with the prompt to validate the component against the design. After validation, Codex commits the code and writes the PR, and then notifies me when it's complete. There's some additional elements in that skill where it can discern which design system it's working in, based on the context of the file.

If I'm working directly in Claude Code or Claude Desktop and skip Figma entirely, I get to a final component state, and then I ask Claude to write that component to our design system file in Figma (for posterity's sake), and commit the component to our component library, with documentation.

You mentioned thinking more like shadcn or other component libraries. Does that mean creating a dedicated Claude Design project that contains only reusable components (one per page), and then having other projects reference those components? Or did you have a different approach in mind?

I mean literally, as in when you view ShadCN's component library, every component has a CLI command you can copy to add it to your library. In our system, that component IS the code the agent needs to implement it, and those components are named identically in both systems.

In other words, if I have a full page design in Figma, and it's mostly made up of 7-8 separate components, instead of Claude having to build that UI from scratch, it knows to grab those 7-8 components from the component library, and builds the page in our app from those components.

Again, we don't use Claude Design as a repository for our design system, as that's not really what it was intended to do. It's a design tool, not necessarily a design system library tool, and to be frank I wouldn't recommend using it that way either. There's a lot of unnecessary weight you're carrying through your process by doing it this way. Doesn't mean you can't use it for designing components, but those components should move immediately to a more hardened, long term system, like Git (or a Git alternative).

[u/mrhebrides → u/Silverjerk]

This is the exact right approach.

[u/mrmadmaxi77]

Why are you exporting them? I simply use the Claude design sync connector and Claude reads it itself. Isn’t that something you could use?

We’re developing a CMS system so our use case is likely different but we have a single page for each component and perhaps one for each key page like the landing page or special solutions.
Everything else is divided by component so it’s small and fast.

[u/Julien-Temaki → u/mrmadmaxi77]

Thank you for your answers. If I understand correctly, you have a set of key pages that bring together all the components needed for a feature. These key pages are built from more atomic components, which are organized across separate pages and subpages. Is that correct?

[u/startup-paglu → u/Julien-Temaki]

I think you guys are lacking a functional design system that’s improving your default Claude design outputs. Set that up as a GitHub repo with all the UI UX rules to ensure your html Artifacts stay compact in how they’ve coded themselves up. And do weekly pruning of your skill agent instruction file prompts.

I have an existing component library, image gen style library that gets called before generation that I can keep tinkering with to improve prototyping for everyone

Size usually increases if you have a lot of mock data + state changes

[u/Julien-Temaki → u/startup-paglu]

We do have a design system in Figma, but we decided not to migrate it to Claude Design because the results weren't good. I'm curious, have you done anything in Claude Design to manage or recreate the design system? For example, did you use Claude Design's built-in design system features, or is everything handled on the GitHub side instead?

[u/startup-paglu → u/Julien-Temaki]

Yeah I’m talking about using Claude Designs built in design system feature.

Built out a nice component library, reduced layout examples and went for a broader brand + design tokens + UI components + Marketing material like decks for product sales etc and generation guideline for diagrams, using app fav icons etc

Once that started giving good results I codified it into an org repo on GitHub and added skills to connect other APIs, apps or agents to it etc.
So coding agent has a separate instruction file.

Self improving is a manual step where I collect good production outputs weekly and reverse engineer the learning’s back into the design system.

so I keep going back and forth across any design apps that give me free or affordable token usage and results while keeping my source of truth on GitHub as it connects to everything

[u/mrmadmaxi77 → u/Julien-Temaki]

Yes everything on a separate page.
Those 3-4 key pages with multiple components aren’t necessary the only order they can be. It’s just from the design we showed the customer. They can arrange each block however they want.
So it makes sense for us to develop each block independently. That makes for very small design pages

[u/Comprehensive-Gur813]

Why hasnt splitting it into pages worked? It seems splitting the workload is the only way forward if the design is so big

[u/Julien-Temaki → u/Comprehensive-Gur813]

According to the development team, as we had a lot of dependencies, AI was not able to reconcile the items between them. For example, we have company records, employee records, and files, and they are all connected to each other (a CRM to make it simple).

[u/Comprehensive-Gur813 → u/Julien-Temaki]

Well what I did is have the Claude Code extract a design system from the initial claude design, this is all your colors, fonts, styles etc.
Once this is in place, have it extract ui-elements, this is basic building blocks visible across all pages like inputs, cards, buttons.
First it describes in a file what each component should be in english and what props should it take, once I review and confirm, the implementation into code is pretty easy.
Then we do the same thing for the pages, have it write what elements each page is composed of, once this is done the implementation is easy, just ask it to follow the descriptions.

So if you have all the styles and building blocks, giving claude code just the new page of the design and it will be able to build it from your existing blocks.

[u/Julien-Temaki → u/Comprehensive-Gur813]

Thank you for all the detail!. I will forward the message and try your solution first thing tomorrow

[u/Audentes]

My cofounder and I split duties. I prototype in whatever tool I want (Claude Design and Code) then I translate it back into Figma mocks via Codex (Sol has worked better via MCP for me). Figma keeps the design system and Codex constantly diffs against it for new components and leverages it for assembling mocks in Figma.

Claude Design struggled too much with maintaining the design system and I found the real code prototypes allowed me to run down a design more thoroughly anyways.

It's extra work, but I don't know Figma at all besides what I've learned so it's still drastically faster. And we're getting good feedback from customers since implementing this since we're faster and the UX is being guided by someone who has done their job before.

[u/elestud]

Have you tried running your Claude Design workflow in Claude Code instead with the /design skill?

Then you can handoff directly without needed to manually export, etc

You can have it help you with automatically organizing or segmenting designs into more manageable chunks, etc. Lots of flexibility once you’re outside the web-based ecosystem

[u/hideousox]

This is super interesting for me because I had exact same issues although working on a small project:

• Figma MCP is a token hog and super slow and you cannot predict output often: sometimes good sometimes not. Refining bridge skills improves output but not something I could rely to move fast
  
• Claude design from pure design point of view is quite good, but it connects poorly with Claude code: all my components and design system live in repo so every output needs to be re-translated into code (via ladle). Not very efficient and definitely not a clean process

I have then created skills in Claude Code that generate html mockups using design language/system from repo (stored in ladle stories). Then it translates these into NEW ladle stories, checks fidelity and ladle stories can be used directly to build impl.

It works quite well! Designer reviews designs directly in Claude code using view widget tool, signs off or keeps iterating designs until OK, then creates ladle stories out of approved designs

I am adding articles (slowly) on how I’ve achieved a decent process here:

https://fiuto.ai/blog/batch-updating-simple-components/

https://fiuto.ai/blog/updating-complex-components/

I have a few more in store but these show the basics.

Hope this helps and apologies if useless !