Design-First UI Prompting Playbook (Draft)

AI doesn’t make great design. It makes average design fast. Your edge is still taste + craft.

Here’s the workflow that actually ships.

---

1) Screenshots beat prompts

One screenshot contains fonts, spacing, colors, icons, layout. Gemini 3 reads it instantly.

Rule: Stop writing 1000-word descriptions. Start collecting references.

---

2) The hero section is half the job

Hero = your cover image for social. Everything else is secondary.

Workflow

• Use Superhero to collect hero references
• Lock hero first
• Build the rest section-by-section

---

3) Templates are leverage

Template business prints money. Sell on Webflow / Framer / UI8 for ~$50–$100. Stack enough and it compounds.

Rule: Build assets, not one-offs.

---

4) Taste is the moat

AI raises the baseline. Your visual judgment becomes the differentiator, not your Figma speed.

Rule: Curate hard. Ship fewer, better.

---

5) Avoid AI slop

Common slop:

• purple gradients
• Lucide icons everywhere
• generic layout rhythm

Fix

• Switch to Iconify Solar for variety (outline, broken, duotone)

---

6) Use Simple Icons (logos) via Iconify

Stop hunting SVGs. Use Simple Icons via Iconify for brand logos.

Rule: One API reference in your prompt. No more manual logo scavenger hunts.

---

7) Work section-by-section (not full-page)

Build in your preferred AI builder, prototyping tool, or code editor:

• hero → features → footer

Benefit: faster iterations + better creative control.

---

8) Remix everything

Great sources:

• Mobbin (sites → sections)
• Bento Grids (cards)

Workflow: screenshot → remix → change colors/text/animation → make it yours.

---

9) Use negative prompts like guardrails

Add constraints:

• “Don’t change anything else.”
• “Keep the hero.”

Benefit: prevents AI from breaking what already works.

---

10) Fix images manually (AI breaks them)

When images are wrong:

• generate replacements in Midjourney or Nano Banana Pro
• swap them in

Rule: Don’t wait for the model to get it perfect. Patch the weak link.

---

11) Typography still matters

Google Fonts are free + AI-friendly. Inter is overused—try:

• Newsreader
• Playfair Display

Rule: pick one type “move” that signals taste.

---

12) Add craft signals

Small details that instantly level up:

• 01/02/03 numbering
• container-sized grid lines
• subtle beam/noodle animations
• hero backgrounds via Unicorn Studio

---

13) Steal better headlines

Hooks = conversions. Use:

• H1 Gallery
• http://cta.gallery

---

14) Present properly (social is distribution)

• Record with Screen Studio
• Screenshot on polished backgrounds

Rule: presentation is part of the product.

---

15) Speed trick: pick the right model

• GPT‑5.1 for small text/color tweaks
• Gemini 3 for complex UI generation

---

Bottom line

Superhero for heroes. Mobbin for sections. Bento Grids for cards. Iconify for icons.

Screenshot → Gemini 3 → Remix → Polish Your taste curates. AI executes.