Design Systems & Claude

Yeah yeah, another site created by AI, what’s so special about that?

For me it’s not the fact that Claude built this, it’s how it built it. We built a type of moodboard where I pasted links and screenshots into a single folder directory, and then debated the design aesthetic against text heavy vs symbol lead. I find that the most productive outputs come from discussions and structured prompting that builds context as you go through the session.

Once we aligned on a direction, then we needed a color palette. Again, another debate, this time with Claude generating color slices in a throwaway artifact. It felt like each choice was putting a dot on a map and setting a direction.

Getting closer, now it’s time to build out the design system. I need typography, layouts, standards. I don’t want the final website but I do want the direction it’ll go in. Another set of layouts, choices, picking.

I’ll pause here to say how absolutely wild this feels to me as someone who has spent years and years working in Adobe products. In Photoshop you’d spin up layer comps, lay out designs and annotations, iterate, cull, and repeat. There was this tangible aspect to it.

With tools like Lovable or Replit, there always felt like a degree of separation between the prompt -> build that you do. While Replit has recently introduced Design mode, it still relies on laying out HTML on a page and making decisions on something that has basically already biased your output towards a specific pattern. You lose the tangible aspect of the build as a tradeoff to a tangible outcome, but is that a worthy cut of flesh to give?

This experience made me think not. It felt like once again I was in those layer comps, but with a magic staff that would present me with moods to derive the next steps from. Each one diffusing down to a more granular detail of a final design. Again, mindblowing to me.

But that’s still just the start! The next part is something I want to experiment so much more with, generating images of potential designs with your design system- Not HTML, not layouts in code, but instead just diffused pixels… And think of the freedom that gives the model. Generate three images around a concept that we’ve just essentially chiseled out from digital prompt-matter to get the visual direction of the site and use that to build out the layout. Ugh. I can gush over this for days… Probably the next musing with experiments attached…