Customizing and Refining AI Designs

Your first generation gave you a rough draft: the right pieces, roughly arranged. This lesson is about the craft of refinement, the small, deliberate changes that turn "an AI clearly made this" into "this looks intentional and professional." You will learn what to fix, in what order, and the exact prompts to do it, all without writing code.

What You'll Learn

• A priority order for refining a design so you never feel lost
• Specific prompts to fix layout, spacing, color, and typography
• How to make your site look good on phones, not just laptops
• When to edit visually instead of prompting

Refine in the Right Order

Beginners jump around, tweaking a button here, a color there, and never feel finished. Professionals refine top-down, from structure to detail. Follow this order and each stage builds on the last:

Fixing color before layout is like painting a room before you have moved the walls. Get the big structure right first, then work down to the polish.

Layout: Fix the Structure First

Layout is how sections are arranged and how the eye flows down the page. Ask yourself: is the most important thing (your headline and call to action) immediately visible? Is each section doing one clear job? Useful prompts:

• "Move the call-to-action button into the hero section, directly under the subheadline."
• "Turn the Services list into a three-column grid of cards on desktop."
• "Reorder the home page so testimonials come right before the final call to action."
• "Add a simple footer with navigation links, contact info, and a copyright line."

Keep visual hierarchy in mind: the biggest, boldest element should be the most important message. If everything is loud, nothing stands out.

Spacing: The Secret to Looking Expensive

The single fastest upgrade to any AI-generated site is more whitespace. Cramped layouts look amateur; generous spacing looks premium. AI builders often pack things too tightly by default.

• "Increase the vertical padding between all sections so the page feels more spacious."
• "Add more space around the headline and give the hero section more height."
• "Increase the gap between the cards in the Services section."

Make this pass across the whole site. It is remarkable how much more professional a site looks with nothing changed but breathing room.

Color: Consistency Over Cleverness

You defined a primary and accent color in your brand kit. The job now is to apply them consistently and sparingly. A common mistake is a rainbow of colors, restraint reads as design confidence.

• "Use {your primary hex} for all primary buttons and links, and {your accent hex} only for highlights. Make everything else neutral grays and white."
• "Make sure text has enough contrast against its background to be easily readable."

That contrast prompt matters for real people: low-contrast light-gray text is a top accessibility failure and it costs you readers. Ask the AI to keep text readable, and check it yourself.

Typography: Make It Easy to Read

Good type is invisible; bad type is exhausting. You picked a heading and body font pairing during planning, apply it and tune the sizes.

• "Use {heading font} for all headings and {body font} for body text."
• "Make the hero headline larger and bolder so it is the first thing people read."
• "Increase the body text size slightly and the line spacing so paragraphs are comfortable to read."

Aim for body text that is comfortable on a phone held at arm's length. If you have to squint, so will your visitors.

Mobile: Where Most Visitors Actually Are

More than half of web traffic is on phones, yet AI builders design desktop-first. You must explicitly check and fix mobile, or you will ship a site that looks broken to most of your audience. Most builders have a mobile-preview toggle (a phone icon), use it.

• "Show me the mobile layout and fix anything that overflows or overlaps."
• "On mobile, stack the three service cards vertically instead of side by side."
• "Make sure buttons and tap targets are large enough to tap comfortably on a phone."
• "Shrink the hero headline on small screens so it fits without awkward line breaks."

Walk through every page in mobile preview before you consider the design done.

When to Edit Visually Instead of Prompting

Not every change deserves a prompt. For tiny, precise tweaks, chatting can be slower and can burn credits. Know which mode to use:

Tools like Framer and v0's Design Mode let you click an element and change its text, color, or size directly, no credit spent. If your builder offers a visual editor, use it for the fiddly final polish and save your prompts for the structural work.

Know When to Stop

Refinement can become an endless loop. A useful test: would a stranger find this clear, readable, and trustworthy, and can they immediately tell what to do next? If yes, you are done designing. Perfectionism on pixel details rarely changes whether the site achieves its goal. Ship a clean, clear site and improve it with real feedback later.

In the next lesson you will replace the placeholder images and add the real content and interactive pieces, forms, buttons, and links, that make the site actually work.

Key Takeaways

• Refine top-down: layout, then spacing, then color, then type, then details.
• More whitespace is the fastest way to look professional, add generous spacing everywhere.
• Apply your brand colors consistently and sparingly, and keep text high-contrast and readable.
• Always check mobile in the preview and fix stacking, sizing, and tap targets.
• Use visual editing for tiny tweaks and prompts for structural changes, and know when the design is good enough to ship.