← all entries
A-TIER design

Claude Code design uplevel — 3 systems for better UI output

jens.heitmann · 2026-03-03T16:50:54.000Z · in AI Saves, Vol. 2
Open post ↗

100k ft — What is this?

Claude Code design uplevel — 3 systems for better UI output
designA-tier

50k ft — Why care?

@jens.heitmann: three Claude Code 'systems' to unlock design quality in CC projects. Teaser for the techniques; useful as a pointer to Jens's CC design content.
3DUI/UXagentsbrandingdesignopen sourcereference

10k ft — Key takeaways

(no takeaways yet)

5k ft — Tools & techniques

Claude, Claude Code, Stitch MCP

1k ft — Deep-dive / try it

You probably haven’t fully unlocked the design power of your Claude Code. Use these 3 systems to up-level the design of your next project. #claudecode #claude #aitools #vibecoding jens.heitmann   17w Great example, can replace the stitch + nanobana step with this as well. If you create a brand kit and pair it with the instructions given above will be definitely a move.
Transcript excerpt
You probably haven't unlocked the full design power of your cloud code and I'm not just talking about the front-end skill. Here are three systems you need to install into your cloud code right now to really take your web and app design to the next level. First you need to install Google's Stitch MCP and Nanobanana 2 to make really powerful mockups for cloud code to use as reference. Next, you need to get this Pro UX UI design skill from this GitHub library here. And to tie it all together, you need to use an asset library like 21st.dev that holds a ton of beautiful 3D and reactive components for you to use in your apps or websites. Now, using all three together, we'll take your designs looking from something like this into looking something like this, this, or this. When it comes to designing with AI, we as the humans are the ones that set the standard of the quality. Using these three systems will raise the floor of all of your future projects.

More from @jens.heitmann

Collection: AI Saves, Vol. 2