Tutorials / Tips & tricks / Iterating on your prototype
📝 Written ● Intermediate

Iterating on your prototype

Three techniques to refine, tweak, and improve your work without starting over from scratch.

Why iteration beats starting over

The fastest way to polish work is to build on what you have, not restart. Each iteration focuses on one improvement, costs less, and preserves what's already working.

Technique 1: Using "Continue" for AI refinements

1

Make one small change at a time

After your first build completes, click "Continue" to request tweaks. Examples:

  • "Make the heading bigger"
  • "Change the accent color to blue"
  • "Add more spacing between sections"
  • "Move the footer logo to the left"
  • "Add a dark mode toggle"

Each "Continue" prompt builds on the previous output. The AI preserves what's already good and modifies only what you asked for.

Cost efficiency: "Continue" usually costs 20-30% less than a fresh prompt because the AI is only changing a small part, not regenerating from scratch.
2

Stack multiple refinements

You can chain Continue requests:

  1. Generate initial version
  2. Continue: "Make the colors more vibrant"
  3. Continue: "Add customer testimonials below the features"
  4. Continue: "Make the CTA button larger and red"
  5. Export when satisfied

Each step adds polish without restarting. This is much faster than asking for everything at once.

Technique 2: Manual HTML editing

1

Edit the code directly

For quick fixes, edit the HTML or CSS yourself:

  1. Click the "Code" tab in the playground
  2. Find the section you want to change (use Ctrl+F to search)
  3. Edit directly (change text, adjust CSS, reorder elements)
  4. Watch the preview update in real-time

This is ideal for:

  • Changing text or copy
  • Tweaking CSS values (colors, spacing, sizes)
  • Reordering or hiding elements
  • Adding your own branding or specific details
2

Combine AI + manual editing

The best workflow often mixes both:

  1. Generate the structure with AI (usually faster for layout)
  2. Manually edit copy, colors, and company-specific details
  3. Use Continue if you need structural changes

This way you get AI speed for the hard part (layout design) and manual precision for the details (your branding).

Technique 3: Splitting and comparing

1

Run variants to compare

For big decisions, generate two versions:

  1. Generate Version A: "Light theme with rounded corners"
  2. Download and save Version A
  3. Come back to the playground (or clear and start fresh)
  4. Generate Version B: "Dark theme with sharp corners"
  5. Open both in browser tabs and compare side-by-side
  6. Pick the one you prefer and iterate further

When to iterate vs. restart

Use "Continue" (iterate) when:

Start fresh (new prompt) when:

Decision rule: If you can describe the change in one sentence, use Continue. If you need a paragraph, start fresh.

Tips for faster iteration

Common iteration patterns

Pattern 1: Refinement loop

  1. Generate initial version
  2. Continue: adjust colors
  3. Continue: adjust spacing
  4. Continue: add missing content
  5. Manual edit: your specific text
  6. Export

Pattern 2: Mix AI + manual

  1. Generate structure
  2. Manually edit all copy/branding
  3. Continue: final design polish if needed
  4. Export

Pattern 3: Explore variants

  1. Generate Version A
  2. Save Version A
  3. New prompt: Version B (different style)
  4. Compare both in browser
  5. Pick winner and iterate further