The Vibe Coder's Design Checklist: 12 Things to Check Before You Ship
Your app works, but does it look finished? Run through this design checklist before you ship, and knock out most of it at once with a skill.
You built the thing. It works. But something about it still feels a little unfinished, and you can't quite say what. Usually it's a handful of small design details, each easy to miss on its own, that add up to an app looking amateur.
Here's a design checklist to run before you ship. Twelve things. Most take minutes to check and make a real difference.
1. Consistent spacing
Is your spacing on a consistent scale? Pick an 8px grid and make every gap and padding a multiple of it. Random spacing is the number one tell that an app wasn't designed. More on spacing →
2. Clear type hierarchy
Can you tell at a glance what's most important on each screen? Your headline, subhead, body, and captions should be clearly different sizes. If everything's the same, nothing stands out.
3. A real color palette
Are you using a defined palette, or did you let the defaults ride? One base, a set of tinted neutrals, and a single accent beats a grab-bag of colors every time. How to choose a palette →
4. Two fonts, max
Count your typefaces. If it's more than two or three, trim. Too many fonts makes a page feel chaotic. Font pairing guide →
5. Enough contrast
Can you read every bit of text easily, including in bright light? Check your text against its background. Low-contrast type looks sleek in a mockup and fails real users. Accessibility basics →
6. Works on mobile
Pull it up on your phone. Are the tap targets big enough? Is the text readable? Does everything stack cleanly? Most of your traffic is mobile, so this isn't optional. Mobile-first design →
7. Consistent components
Do your buttons all look like the same family? Your cards, your inputs? Mismatched components are a dead giveaway that screens were built in isolation.
8. Hover and focus states
Do your interactive elements react when you hover or tab to them? Missing states make an app feel dead. Visible focus states also keep it usable for keyboard navigation.
9. Empty states
What does a screen look like with no data yet? A blank table or an empty list with nothing in it feels broken. A simple message or prompt makes it feel intentional.
10. Loading states
What shows while something's loading? A frozen screen reads as broken. A spinner or a skeleton tells people it's working.
11. Dark mode done right
If you have dark mode, is it real dark mode? Warm-dark base, layered surfaces, toned-down accents, not just inverted colors. Dark mode guide →
12. One consistent style
Step back and look at the whole app. Does it feel like one product, or a few different ones stitched together? Consistency across every screen is what reads as finished.
Knock out most of this at once
Here's the thing about this list. Almost every item comes back to one root cause: no design system for your AI tool to follow. Spacing, type, color, components, dark mode, consistency, they all drift when the AI has nothing to build against.
A skill fixes most of the list in one move. Every Skills UI skill ships with a full design system: palette, typography, spacing, component rules, the works, built in and consistent. Drop it into your AI tool and items 1 through 12 mostly take care of themselves.
Run the checklist before you ship. Or grab a skill and start most of the way there.
Browse the skill library →