Iterating & Building With AI Code

The first result is a rough draft. Professional results come from controlled iteration. You change one thing at a time, you keep what works, and you can always go back. This lesson covers how to iterate efficiently with AI and how to work with the code it makes. It also covers how to avoid the trap of endless regenerating, which burns hours and destroys good work.

Iterate in passes

• Pass 1, layout and structure: is the content in the right order? Fix this with the AI before you touch the style.
• Pass 2, the visual system: apply tokens, and fix spacing, the type scale, color and corners, all consistently.
• Pass 3, content: swap placeholders for real words and images, and adjust the layouts to fit.
• Pass 4, interaction and motion: hover and focus states, menus, how forms behave and subtle animation.
• Pass 5, polish and checking: alignment, edge cases, empty, loading and error states, and mobile.

Make small, targeted edits

Make it better invites the model to change everything. Be precise. Name the part, say exactly what is wrong, and say what must not change. Compare:

BAD:  "The pricing section looks off, fix it."

GOOD: "In the pricing section only: make the three cards equal height, move the 'Most popular'
badge to sit centered above the middle card, increase the price figure to var(--step-4), and add
16px more space between the feature list and the button. Do not change colors, copy or any other section."

GOOD: "The hero headline wraps to four lines on a 375px screen. Reduce its size on small screens using
a fluid clamp() between var(--step-3) and var(--step-5) and shorten the max width so it wraps to two lines."

Save a checkpoint every time

• Use version control (git) from the first minute. Commit after every good state, with a clear message.
• Before a big AI change, commit. If the result is worse, go back in seconds instead of trying to undo it with prompts.
• Use a branch for experiments. Merge only what you have reviewed.
• In builders with no version history, copy the project or export it before big regenerations.

Read the code it gives you

You do not need to write everything by hand. But you must understand what you ship. Skim every file that is made. Look for hard-coded colors that skip your tokens. Look for repeated parts and huge inline styles. Look for missing alt text, buttons that are really divs, and forms with no labels. And look for any secrets or API keys. Ask the AI to explain parts you do not know, and to turn repeated markup into components. Code you cannot read is code you cannot look after, debug or defend to a client.

Common AI-code problems to catch

• Hard-coded values instead of tokens, which causes inconsistency.
• Div soup: no meaningful elements, no landmarks, and one div for everything.
• Missing states: hover, focus, disabled, loading, error and empty.
• Details that do not adapt: fixed widths, overflow on small screens and tiny tap targets.
• Heavy dependencies pulled in for trivial features.
• Invented content, such as fake testimonials, statistics and as seen in logos.

Build a small component library

As the site grows, ask the AI to pull repeated patterns into reusable components. Examples are Button, Card, Section, Container and FormField, each driven by tokens. Then new pages are built from the same pieces. Consistency improves by itself. And your next client project starts from a library and not from zero. This is how solo builders get fast without getting sloppy.