Read the diff
Put your rebuild next to the generated original and work out what each of you did differently, and which of you was right.
Open both files side by side. Not to see which is shorter, to see what each of you decided.
Look at the markup first. Count divs in each. Count semantic elements in each. Check both heading outlines. Look at how each handles the form: labels, or placeholders pretending to be labels? Look at the images: alt text that says something, or filenames?
Then the CSS. Count the declarations. Count the media queries. Look at how each handles spacing, a scale, or arbitrary numbers each time? Look at the colours: tokens, or the same hex written eleven times? Look for !important, and for selectors more specific than they need to be.
Then be fair to the model, because the exercise is worthless if it is a victory lap. It probably wrote it in ten seconds. It probably got the overall structure broadly right. There are probably two or three things it did that are better than yours, and finding them is more useful than finding the twenty that are not. Generated code is a good first draft produced impossibly fast, and that is a really valuable thing.
The differences will cluster, and the clusters are the real finding. Models tend to produce divs where elements exist, placeholder-as-label forms, 100vh heroes, images without dimensions, hover-only interactions, breakpoint-driven responsiveness, and repeated values instead of tokens. Not because it is bad at CSS, it is fluent at CSS, but because it produces the most common version of a thing, and the most common version of most things on the web has all of these.
Now write the thing this whole phase was for. Not "AI code is bad", that is lazy and it is also wrong. Something more specific and more useful: a list of the checks you will now run on every piece of generated markup and CSS you accept, in the order you will run them. Six to ten items, each of which you can do in under a minute. That list is the deliverable of Phase 01 and it is what you will use for the rest of your career, with a model open beside you and your own judgement in front of it.
You should now be able to
- Compare two implementations of the same page on substance
- Articulate a defensible opinion about generated code
- Say what you will now do differently with a model
Loading…