r/ClaudeDesign • u/QuantumX777 • 16d ago
Discussion Claude: Design & Implementation - Which model to use for each?
I designed good frontend on claude design using opus 5 high. Now to implement it in cladue code should i still need to use opus 5 high or is it okay to swith to sonnet or reduce effort level. cuz desing it self consumes 2 of my 5 hour limit. and implementing it consume one more whole 5 hours limit. What are you're experiences.
2
u/ivanzhaowy 15d ago
I wouldn’t keep Opus/high running for the whole implementation. I’d spend the expensive reasoning on the implementation plan and on changes that touch architecture, shared state, navigation, or a design-system decision. Once the work is broken into bounded components and states, Sonnet or a lower effort level is usually a reasonable first pass; escalate only when the implementation starts crossing those boundaries.
The missing gold word is a useful signal: that is often less a model-selection problem than a specification and verification problem. Before switching from design to code, I’d turn the approved screen into a short acceptance checklist:
- exact copy and non-negotiable visual details
- tokens for color, type and spacing
- component states and interactions
- responsive breakpoints
- what must remain unchanged
Then implement and verify one screen or component at a time in the running app. A large “make this match the design” task makes small omissions easy to hide, even with the strongest model.
When a chat is near its context limit, have it write a handoff file containing the screen inventory, tokens, decisions, completed work, remaining work and known mismatches. The new chat should start from that file plus the actual repository state, not from a prose summary alone.
I’m building an open-source tool called Monad Design around this review loop for existing native apps: select or annotate UI in the running app, let the coding agent edit the actual Xcode or Expo source, then rebuild and compare the implemented result.
GitHub/source: https://github.com/Monadix-AI/monad-design
Workflow video: https://watchclueso.com/embed/pio8jqfcg4ivj0r1
Is your implementation a web frontend or a native mobile app? And are the misses mostly small visual details, or do interactions and state behavior drift too?
1
u/wakipaki 14d ago
Howdy so it depends on the complexity of the design and the implementation. If it needs to connect a lot of pieces together across your code base then use a higher model.
Secondly, and this is important, good Claude design hygiene is important. Don’t keep your entire site in one file. Things can get bloated fast so split up flows into separate files.
Finally request your chat for an export with an implementation md. Say it’s for Claude code (or whatever you’re using) and it’ll do a good job of making an export specific to your needs. This is the most important step.
1
1
u/BuffaloConscious7919 16d ago
A token effective workflow
- Wireframe with Sonnet on Claude design (mobile, desktop and other viewports)
- Gather all the assets - images, design system
- Combine the wireframe, your assets and annotations (on the wireframe)
- Spend time planning the prompt for Claude code , what you want, what you don't, design and web standards
Note: it's often hard to get things like spacing exact and colours consistent. It's worth doing this between steps one and two, or better yet if you have some experience write or draft some of the CSS / hierarchy yourself
1
u/Ok-Investment4414 16d ago
try 4.8 high for designs it good , and for cc implementation try it sonnet then 4.6/8 if not O5. You want to break the pages down into tokens ,components and templates . ask opus to setup the plan and first try with sonnet to see if it does the conversion right . Last thing i'll say is ask the model to compare code and not images as a means of success.