Part of the Overseas Website Building series.

Hand-Tuning Page Layout and Style After AI Generation

AI can now generate a working page from a prompt — but the first version it produces usually looks like a first version. This article covers the step right after AI generation: hand-tuning the layout and styling until the page looks right. The example is a Phone Number Generator site.

One rule governs everything below: don’t obsess over technical details. The goal is a page that looks good, not textbook-perfect code. The approach here comes from someone who is not a professional frontend developer — the CSS may not be canonical, and that’s fine. If it looks right, ship it.

1. The logo: text, not an image

For a fast launch, skip designing an image logo. A text logo with a black background, white text, and rounded corners is enough — it reads as a brand mark at a glance.

One detail matters: use an h1 on the homepage, but a div on inner pages, because inner pages reserve their h1 for the main heading. A logo shouldn’t steal it.

<!-- homepage -->
<h1 class="logo"><a href="./">Phone Number Generator</a></h1>
<!-- inner pages -->
<div class="logo"><a href="./">Phone Number Generator</a></div>

.logo { float:left; font-size:22px; font-weight:bold; font-style:normal;
  height:34px; line-height:34px; background-color:black;
  padding:0 8px; border-radius:6px; margin:0; }
.logo a { color:white; }

font-style:normal removes the h1’s default styling so the logo looks identical on both page types.

2. The navigation menu: pill links with a current-page state

Three changes turn a plain link list into a proper nav:

• Add a Home link. Users expect a way back to the start; don’t make them use the browser back button.
• Give every link a background and rounded corners. The pill shape (border-radius:5px, background-color:#e0e0e0) makes each link read as a clickable button.
• Mark the current page. A curr class on the active link — colored #2c89a0 and bold — tells users where they are.

The menu is a div.country-list holding one link per country inner page (china/india/us/indonesia/brazil/pakistan/nigeria/bangladesh/russia/japan, e.g. china-phone-number-generator.html). Practical tip: when taking screenshots, keep only three countries visible and hide the rest — the layout is easier to judge with less clutter.

.country-list { float:left; width:100%; margin-top:10px; }
.country-list a { display:block; float:left; height:34px; line-height:34px;
  margin-right:10px; margin-top:10px; padding:0 10px;
  background-color:#e0e0e0; border-radius:5px;
  transition:background-color 0.3s; color:#333; }
.country-list a:hover { background-color:#d0d0d0; }
.country-list a .curr { color:#2c89a0; font-weight:bold; }

3. The header: white, full width, left-aligned

The header gets three adjustments: the background goes white, the header spans the full page width, and the logo plus nav switch from centered to left-aligned. The body background becomes a light gray (#f4f4f8) so the white header reads as a distinct band, and the nav is constrained to max-width:1000px and centered so content doesn’t sprawl on wide screens.

body { background-color:#f4f4f8; color:#333; line-height:1.5; padding:0; }
header { width:100%; margin-bottom:20px; padding:20px 0;
  text-align:center; background-color:#fff; overflow:hidden; }
header nav { width:100%; max-width:1000px; margin:0 auto; }

4. Buttons: white with a colored outline

The core styling decision: buttons should not be full-color blocks. A white background with a colored border looks cleaner at a glance and lets the page breathe. The HTML stays untouched — only the CSS changes (example button: <button>China Phone Number Generator</button>).

button { color:#247a8c; border:solid 1px #2c89a0; background-color:#fff;
  padding:10px 20px; border-radius:5px; cursor:pointer;
  transition:background-color 0.3s; }
button:hover { background-color:#247a8c; color:white; }

On hover the button fills with #247a8c and the text turns white — enough feedback to feel interactive, restrained enough to stay clean.

5. The footer: a standard copyright line

Every site needs a footer, and it doesn’t need to be creative. A standard copyright line closes the page:

<footer>Copyright 2023 &copy; <a href="./" style="color:#333;">Phone Number Generator</a>. All rights reserved.</footer>

Ship it, then continue

The workflow: after GPT-4 generates the first version, take before/after screenshots, list what needs tuning, and work through the five tweaks — text logo (h1 on the homepage, div on inner pages), pill-style nav with a Home link and a curr current-page state, a white full-width left-aligned header, white outlined buttons with a filled hover state, and a standard copyright footer.

Then ship. What comes after: build the inner pages, do on-site optimization and internal linking, add multi-language support, register a domain, set DNS, deploy and launch — then backlinks, submitting to search engine webmaster tools and waiting for indexing, watching ranking data and adjusting, and promotion. The polish never has to be perfect; it has to be live.

(Figures and case details in this article are as reported in the source material and have not been independently verified.)

Series: Overseas Website Building