Iterate and refine
The first version is rarely the final version. The real skill of vibe coding is learning how to have a productive back-and-forth with Claude to get exactly what you want.
How to ask for changes
Go back to the Claude Code chat and describe what you'd like to change. Be specific about what you see and what you want instead.
Good examples:
- "The font is too small on mobile. Can you increase the body text to 18px and make sure it's readable on a phone screen?"
- "The color palette feels too corporate. Can you change it to earthy tones — think olive green, warm beige, and dark brown?"
- "Can you add a 'Contact Me' section at the bottom with a simple form for name, email, and a message?"
- "The hero section feels empty. Can you add a tagline under my name and a call-to-action button?"
Less helpful:
- "Make it better" — too vague
- "I don't like it" — Claude needs specifics
The screenshot trick
This is worth repeating because it's so useful:
- Take a screenshot of your webpage as it looks in the browser
- Paste the screenshot directly into the Claude Code chat (⌘V on Mac, Ctrl+V on Windows)
- Describe what you want to change: "Here's what it looks like — the navigation bar is overlapping the hero text on mobile. Can you fix that?"
Claude will look at the screenshot, understand the problem visually, and fix it. This works even for layout issues that are hard to describe in words.
How many rounds should you do?
There's no right answer, but for this tutorial:
- 2–3 rounds of refinement is a solid goal
- Focus on: layout, colors, content, and any obvious issues
- Don't try to make it perfect — you can always come back after you've deployed
Save your progress
Claude Code automatically saves changes to your files as you iterate. But it's good practice to periodically check that your index.html file in Finder looks updated (you can check the "Date Modified" timestamp).
When you're happy enough with your page to move forward, mark this step complete. Next, we're putting it on the internet.