12 rules for
the AI era.

Pick a vibe before you prompt

AI tools default to generic if you don't anchor. 'Modern SaaS' is meaningless. 'Linear-clone with one pop of acid green' isn't.

Reference real sites, not adjectives

'Like Stripe's pricing page' beats 'clean and modern' every time. AI has seen Stripe.

❌ Make it sleek
✅ Stripe.com pricing layout, but with our brand purple

One bold move per page

The AI default is 'safe and forgettable'. Force one decision: a giant headline, a weird color, asymmetric grid.

Constrain the palette

Two colors + neutrals beats five every time. Tell the AI: 'use only these 3 hex values'.

Type system before components

Pick heading + body fonts FIRST. Lock sizes (12/14/16/20/32/48). Components inherit clarity from typography.

Use semantic tokens, never raw colors

bg-white in a component is debt. bg-background lets you re-skin in seconds.

Iterate by deletion, not addition

The AI keeps adding sections. Your job is to cut. If a section doesn't earn its scroll, delete it.

Mobile preview every 5 minutes

AI ignores mobile by default. Resize the preview after every change or you'll ship a broken phone experience.

Animate one thing, not everything

Motion is salt. One hero animation = elegant. Five = dizzy.

Read the generated code

If you can't read what the AI made, you can't fix it. 10 minutes of reading saves an hour of re-prompting.

Save your best prompts

Your edge is your prompt library, not your tool. Treat prompts like code: version, name, share.

Ship boring before clever

Boring + working > clever + broken. Ship the boring version Friday, polish Monday.