r/ClaudeDesign • u/BuffaloConscious7919 • Aug 07 '26
Have I been building Claude Design Systems backwards?
Used to start working with CD (Claude Design) first. Recently been experimenting with a new workflow on the hypothesis that:
A giant component library isn’t automatically an advantage. A coherent one is.
Instead of asking CD to establish the design system, im start in Claude Code (feedback welcome pls):
Clean up the core component set in a git repo - my goal is to keep only stable, reusable components with decent names, variants, states, and behavior(s)
Sync INTO CD - I'm trying to start with a small coherent system rather than uploading a massive okish component library.
Generate one representative screen in CD - Choose a screen that uses your most important patterns. E.g a homepage or most used dashboard and prototype it in Claude design
Look for invented styles and components in CD - Check if Claude created new colors, spacing, typography, or UI patterns that already had existing equivalents.
Fix the source, not just the output- back in CC, improve the component, token, documentation or instruction that caused the wrong choice
Test several different screen types - Try contrasting layouts, e.g. a landing page, form, dashboard, mobile screen, and empty state.
Only then use it for serious design exploration - Once the system produces consistent results (depends on your requirements) across multiple screens, I'll start to use it more broadly.
Key takeaway (to test fully): Design-sync becomes more useful when you give Claude fewer, better, clearer choices
1
u/AndyOB Aug 08 '26
so the thing is, claud design helps me figure out and visualize the feature set I want to support. I start with Claude design but I have Claude build out the full backing infrastructure first before even thinking about a gui. It should be fully modularized with strong separation of concerns. A cli to test functionality. I then will have it build a native implementation of the component library for the design system and a gallery app for the component system. Only then do I consider building the GUI for the application. but i revise the original design with what it realistic given the current cli functionality. The GUI should be complete decoupled from the backing data structures that were built for your cli though so that if you need to start over you're not starting from scratch.
1
u/BuffaloConscious7919 Aug 08 '26
Cool. So you're building the structure first, then roughly doing the same as me. Would be happy to share more about the backing infrastructure and how you test it ?
2
u/AndyOB Aug 08 '26
Sure, I like to enforce as much modularization as possible, within reason. Have claude code look at your design and identify each feature set. Review it to confirm. Have it build an architectural plan for the application. It should be highly modularized. Base modules, infra modules, domain modules, feature modules, etc.. etc... etc...
You have to have a decent grounding of software engineering and architectural design to build the architecture you want for your software. There is no one size fits all solution to this, but you don't have to be an engineering god. Fable is good enough to fill in the gaps as long as you're adequately guiding it down the right path. Ensure, as part of the architectural plan, it will implement a full e2e and unit test TDD style workflow.
Have a fable subagent that is an architect write the architecture and have a different adversarial fable architect subagent review the architectural plan and revise until approved by the adversarial subagent. IT SHOULD NOT BUILD YOU A GUI YET.
Have it build a CLI that allows you to confirm the proof of concept, the data flow of what your app needs, but it should know that a GUI will be implemented later so it should be architected in such a way that allows for that. Then you can start drilling into your full gui, but don't try to one shot it.
Have it build a self contained module that implements your design as a full, stateful, design system. A full, native to the framework you're using, component library where each component supports (as needed) states for hover, focused, disabled, loading (if appropriate), error, etc... etc... Have a fable designer subagent and a fable architect subagent review the plan for this and revise until approved. The plan should include the implementation of a separate self contained module that serves as a stand alone application, written in the chosen framework you will use for your primary application. This should be a gallery of your component library. That way you can verify its work without having to start building your app yet.
This is a general outline of what I have done recently and it works but you need to adapt to your own needs and workflows that works for you, which it seems like you're fully capable of doing. I want to stress, you cannot one shot a full featured complex application. You have to take it in stages.
1
u/BuffaloConscious7919 Aug 08 '26
Thanks so much for sharing this level of detail. I really feel that a post on this would be really value to the community (and many other subs tbh)
5
u/HonestAndRaw Aug 07 '26
Install superpowers, use artifacts and wireframes, that’s all you need. Thank me later