Getting Better Front-End Code Out of an LLM

Most complaints about AI writing bad code are really complaints about bad prompts. Give a model a vague wish and you get vague slop back. Give it a proper brief and it can produce something you would happily merge. Here is how I get the good version.

Prompt like it is a spec, not a wish

This is the difference that matters most. Compare these two.

Vague:

make a contact form

You will get a generic form with a client-side email library you did not ask for, no validation worth the name, and no thought for accessibility. Now the same request as a brief:

Add a contact form at /contact. Use a Next.js server action, validate with
Zod, and send with Resend. Match the button styles already in components.
Every field needs a label and aria-describedby for its error. No client-side
email library, and no new dependencies beyond what is installed.

Same task, completely different result. The model is not a mind reader. It fills gaps with the average of everything it has seen, and the average is rarely what you want.

Give it your constraints up front

Tell it the stack, the patterns you already use, and the lines it must not cross. "Server Components by default." "No inline styles." "Every interactive element must be keyboard accessible." Constraints do not limit the model, they aim it.

Ask for small diffs

A giant request produces a giant mess that is miserable to review. I scope the work small, look at the change, then ask for the next step. Small diffs are easy to read, easy to reject, and easy to correct. Big ones hide their mistakes.

Review like it is a junior's pull request

Read every line. The model is confident even when it is wrong, and it is very good at code that looks right. Watch for invented APIs, missing edge cases, and the accessibility gaps it will not think about unless you made it. If you would not merge it from a person, do not merge it from a model.

A file that pays for itself

Rather than repeat my rules in every prompt, I keep them in a file the tool reads automatically. In Claude Code that is a CLAUDE.md in the repo.

# Conventions
- Next.js App Router, Server Components by default
- Tailwind v4, colour tokens in globals.css, never inline hex
- Every interactive element must be keyboard accessible
- British spelling in all copy
- Run `npm run build` and `npm run lint` before calling a task done

Now every change starts from my defaults instead of the internet's average. That one file has saved me more repeated typing than anything else.

The tool is only as good as the context you hand it. Vague in, vague out. Spend the two minutes on a proper brief and it stops feeling like a gamble.