I spent the last few weeks building 18 homepage templates for Next.js. Seventeen industries — law, dental, barbering, architecture, jewellery, veterinary, cafés, boutique stays, pilates studios, residential contractors — not 18 recolors of the same hero.
I used AI heavily for all of it. Here is what it was genuinely good at, and the three places it kept failing.
What it's good at: scaffolding. Section skeletons, Tailwind classes, responsive breakpoints, alt text, the boring 60%. A layout that used to take an afternoon takes forty minutes.
What it can't do — one: decide what the page is arguing.
Every homepage makes a claim. A law firm's page argues "we are careful." A salon's argues "you will feel good walking out." AI will happily generate a hero for both and make them look identical. I had to write the claim down first, in one sentence, or the output was decoration.
Two: spacing is a judgment, not a value.
AI produces py-16 everywhere because it's safe. A page where every section has the same rhythm reads as a template — which is exactly what buyers are trying to escape. Half my time went into rhythm: a tight block after a large one, a quiet section before the CTA.
Three: it breaks things it wasn't asked to touch.
Ask for one section, get eight files changed. In one case a "cleanup" removed a CSS variable and silently killed a decorative element. It built fine. Type-checked fine. I only caught it by screenshotting before and after on a phone.
So my workflow is boringly manual: read the diff, change one file, screenshot at 390px, repeat. Agents write fast; the review is the work.
Every template has to clear the same gates before I ship it: zero console errors, no horizontal overflow at 390px, text contrast at least 7:1, no external image domains. Boring checks, and they're the reason the templates are usable rather than just pretty.
If you're using agents for frontend, the constraint isn't generation speed anymore. It's how fast you can verify.
I wrote up one specific failure from that build — an agent "cleanup" that deleted eight CSS variables and made a signboard disappear while every check stayed green: https://dev.to/amazong110/an-ai-cleanup-deleted-8-lines-of-css-the-build-passed-the-signboard-vanished-19ii
The live pages (and the source) are here: https://slice-templates-pool.vercel.app/
Top comments (1)
The spacing point is the one I'd frame. Have you tried naming spacing by role in a small design system, like "tight after a big block", so the agent picks the rhythm instead of defaulting to py-16?