The Vibe Coder's Guide to UI Design

Building with AI is fast. Embarrassingly fast. You can go from an idea to a working app in a weekend.

Getting it to look good — the vibe coding design side of things — takes a bit more intention.

Most vibe coders hit the same wall with UI design at some point. The app works but looks generic. Every screen feels like it came from the same template. There's no visual identity — nothing that makes it feel like yours.

This is a starting point for fixing that.

When designers talk about a design system, they usually mean a massive Figma file with hundreds of components and a team of people maintaining it.

That's not what you need.

For a vibe-coded app, a design system is basically a set of decisions the AI follows consistently: these colors, these fonts, this spacing scale, these component styles. The goal is for every screen to feel like it belongs to the same product — even if you built each one with a different prompt on a different day. That's the difference between an app that looks designed and one that just looks built.

AI coding tools are built to write code. Design direction doesn't come included. Without it, they fall back on the most average UI they can produce — Tailwind defaults, rounded cards, Inter everywhere.

Think grey cards on an off-white background. A color scheme that doesn't really commit to anything. Components that look like they were assembled from a checklist. Fine, technically. Instantly forgettable in practice.

The solution is just giving them something to aim for.

Two files handle most of the work.

A SKILL.md has your design guidelines and instructions for how the AI should apply them. It goes into your project instructions, and every component the AI builds follows those specs.

A DESIGN.md has the same guidelines and lives in your repo. The AI references it every time it creates a new page, which keeps everything visually consistent as your project grows.