Use DESIGN.md so AI-built front ends look less generic
Interfaces from Cursor or Claude Code often have messy colors and mismatched components. Put a DESIGN.md in the project root, tell it to follow the file, and compare one page before and after.
Start step 1 ↓The problem
You can already get AI to write pages, but the result often screams default: purple buttons, random corner radii, three font sizes. You don't want to learn design systems; you just want one project's screens to look like the same product.
AI tools used
Tap a tool to see what it is and which other cases use it
What to prepare
- A DESIGN.md
How to do it
- 1
Pick one page as your control
Choose an existing settings page or landing section. Screenshot it or note what currently looks like a default AI draft.
- 2
Put DESIGN.md in the project root
Just one file, named DESIGN.md, and keep it short: color tokens, type scale, spacing and don'ts (for example, "no purple gradient hero").
- 3
Tell it to rebuild from the file, not improvise visuals
Name the file path in the prompt and forbid a new color scheme. When it's done, look at this page only; don't let it refactor routing on the side.
Prompt - 4
Compare before and after side by side; do one round of fixes
Check that type sizes are consistent, there's only one primary button style and backgrounds don't use saturated gradients. If it still looks generic, add to DESIGN.md's don'ts and rerun the same prompt.