How to Kill AI Slop in Generated UIs
For Design-focused product teams fighting AI slop · Based on Anthropic Planner-Generator-Evaluator Long-Agent Framework
// TL;DR
Product teams can stop AI-generated front-ends from producing generic 'AI slop' — purple gradients, generic layouts — by grading subjective design quality with an adversarial Evaluator. Subjective taste is gradable if you write a strong enough opinion and calibrate the Evaluator with few-shot reference examples labelled 'good design' and 'AI slop.' Build a rubric weighted toward Design and Originality, have the Evaluator take Playwright screenshots and score against it, and discard-and-restart when originality scores stay low. Use this whenever your generated UIs look competent but lifeless and you need output to converge toward your team's actual taste.
Why do AI-generated UIs always look like AI slop?
Because the model has no independent taste to hill-climb against, and it can't judge its own aesthetic honestly — sycophancy bias makes it call a generic purple-gradient layout 'clean and modern.' Left to self-review, a coding agent will ship visually undifferentiated output every time. The output looks competent but lifeless: generic layouts, default component styling, no point of view.
The Planner-Generator-Evaluator framework fixes this by treating subjective quality as gradable. The key principle: taste is gradable if you have a strong enough opinion and write it down. Vague criteria produce vague critiques; granular, opinionated criteria produce actionable fixes.
How do you actually grade design taste with an agent?
Start by writing a rubric with 2-4 dimensions — for design work, use Design, Originality, Craft, and Functionality. Weight it heavily toward Design and Originality, because the model already handles Functionality well; you get the most leverage grading the dimensions where it's weakest.
Then calibrate the Evaluator with few-shot reference examples: screenshots labelled 'good design' and screenshots labelled 'AI slop.' This anchors the Evaluator's taste toward yours rather than the model's default. Without calibration, the Evaluator's grading language stays imprecise and the Generator just makes arbitrary changes.
In the loop, the Generator produces an HTML/CSS page. The Evaluator launches Playwright MCP, takes screenshots of the live rendered page, and scores across the rubric. It's grading what the user actually sees — not the code, not the Generator's description of what it intended.
What happens when originality scores stay low?
This is where the framework beats single-shot generation. If Originality scores consistently low across multiple rounds, the harness doesn't keep iterating on the same failing aesthetic — it pivots. It discards the current design direction entirely and restarts with a different generative seed. This discard-and-restart over long horizons is what lets output actually break out of the slop pattern rather than polishing a bad direction. In practice, output converges toward the rubric's defined taste after 5-15 rounds.
How do you keep the Evaluator genuinely harsh?
Out of the box, LLMs make lenient critics — they'll note a design weakness and wave it through rather than blocking. Making the Evaluator genuinely harsh takes deliberate prompt tuning. After each run, read the transcripts and find every point where the Evaluator approved something your team would have rejected. Update its system prompt and add more reference examples to close that gap.
Treat this calibration as ongoing work, not a one-time setup. Your team's taste is the ground truth, and the Evaluator only encodes it as well as you've written it down. As models improve their default aesthetics, reassess whether your scaffolding is still load-bearing — but design taste tends to stay a spiky behaviour worth grading for longer than most.
Next step: Assemble a folder of 5-10 screenshots split into 'good design' and 'AI slop,' draft a four-dimension rubric weighted toward Design and Originality, and wire your Evaluator to score Playwright screenshots against it. Run 5-15 rounds and watch where its judgment diverges from yours.
// FREQUENTLY ASKED QUESTIONS
Can an AI really grade something as subjective as design?
Yes — subjective quality is gradable if you have a strong enough opinion and write it down. Calibrate the Evaluator with few-shot reference examples of good design and AI slop, and use a rubric with granular criteria. Vague criteria produce vague critiques, but specific, opinionated ones produce actionable fixes the Generator can hill-climb against.
How many rounds until the design stops looking generic?
In practice, output converges toward your rubric's defined taste after roughly 5-15 rounds — provided the Evaluator is calibrated with reference examples and the harness discards-and-restarts when originality stays low rather than polishing a failing direction. Without discard-and-restart, you can iterate indefinitely on the same slop.
Should I weight the rubric toward functionality or design?
Weight toward the dimensions where the model is weakest — usually Design and Originality — not Functionality, which most models already handle well. You get the most leverage grading against gaps. A rubric weighted toward functionality wastes evaluation effort on strengths and lets the actual weakness, generic aesthetics, slip through.