Lesson 4 of 6~2 min read

Lesson 3 — Previewing and Iterating

Copy the HTML output. Open a new file called index.html on your desktop, paste it in, and open it in your browser. This is your first look.

Lesson 3 — Previewing and Iterating

Copy the HTML output. Open a new file called `index.html` on your desktop, paste it in, and open it in your browser. This is your first look.

The feedback loop is where the magic happens:

Don't accept the first draft as final. This is where beginners quit and pros lean in. Use these follow-up prompts to iterate fast:

*"The hero section feels generic. Make the headline more specific and emotionally compelling for [TARGET CUSTOMER]. Give me 5 options."*

*"The color contrast on the pricing cards is too low. Fix accessibility and make the recommended tier stand out more."*

*"Add a sticky announcement bar at the very top: '🔥 Limited time: 20% off — ends Friday'. Make it dismissible with a close button."*

*"The mobile layout is breaking on the features section. Fix the grid so it stacks to a single column below 768px."*

Each iteration takes 10–20 seconds. In 3–5 rounds you'll have something that looks like it took a professional designer a week.

**Pro tip — the screenshot trick:** Take a screenshot of a landing page you admire. Upload it to Claude and say: *"Redesign my existing page to match the visual style, layout hierarchy, and color energy of this reference — but keep my content."* This is one of the most powerful prompts in existence.

← PREVIOUSLesson 2 — Generating the Page NEXT →Lesson 4 — Deploying Live in 2 Minutes