This is the ultra-minimal, no-mercy, 5-rule version — the one you can memorize and enforce instinctively while vibe coding.

✅ Vibe Coding: The 5 Rules

1. Hierarchy First

If it doesn’t make sense in 3 seconds, it’s wrong.
☐ One clear primary focus
☐ Spacing > borders > color

2. Color Has a Job

Color must mean something.
☐ White/Gray for structure
☐ Color only for action, status, or links
☐ If everything pops, nothing matters

3. Readable or Deleted

If it’s hard to read, remove it.
☐ Contrast ≥ 4.5:1
☐ Body text ≥ 16px, line height ≥ 1.5×
☐ Secondary text still readable

4. Actions Are Obvious

Users should never guess.
☐ Primary action visible instantly
☐ Buttons & links have descriptive labels
☐ Hover, focus, disabled states exist
☐ Focus is visible (always)

5. Human-Sized Interaction

Fingers, eyes, keyboards matter.
☐ Touch targets ≥ 44×44px
☐ Keyboard works end-to-end
☐ Errors explain what to do next

🚫 Auto-Fail

❌ No focus styles
❌ Color-only meaning
❌ Tiny tap targets
❌ Clever over clear

🎯 Final Test

Does this feel calm, obvious, and intentional?

If not → remove something.