Improving My App's Vibes with DESIGN.md

VIBES

Interface design is hard. Even though I really like painting and the visual side of things, like a lot of developers, my bandwidth just does not stretch far enough to learn all of it properly.

Before this, with Claude's help and a long list of requirements, I managed to ship my app HablemosManga. It worked, but the design felt cold and generic. Robotic.

HablemosManga before the redesign with DESIGN.md

That is not exactly news. Since I started using LLM tools for development, execution speed has gone way up, but the user experience and the interface have not.

Maybe that is on me, but I always end up dumping a huge pile of prompts into the model and trying to design a system for the project in my own improvised way.

While scrolling around online I found DESIGN.md, and it turns out a lot of repos are already implementing their design systems this way. Simple, repeatable, and with good results. I saw it came out of Google Stitch, and since I already have Gemini Pro, I went off to burn some tokens:

Google Stitch generating a design system for my project

I tried giving it context about my project, but Gemini's design taste still feels oversaturated to me. It did not really convince me. But still, look at that, it gives you a DESIGN.md.

The DESIGN.md Stitch generates, simple and structured

Anyway, later I found getdesign.md/shopify/design-md, and that is the template I am using now. Shopify is an e-commerce business, which makes it close enough to the shape of my app. After that I asked Claude to apply the new design system to the project, and these were the results...

HablemosManga after the redesign with DESIGN.md

Then, while I was writing this, Claude Design showed up. It looks promising. Claude 4.7 also came out, which apparently is 4.6 before they cut down its thinking capacity, so this article still holds up.

Claude Design also generates a DESIGN.md, and Claude Code already supports the standard.