How do you keep AI coding agents from shipping generic frontend slop?
这条记录涉及编程工具或代码能力更新，适合开发者评估工作流变化和可复用价值。
I’ve been running into a specific AI coding-agent problem: backend tasks often fail in obvious ways, but frontend tasks can “succeed” while still looking generic, inconsistent, or only half-verified.
The agent says “done,” the app compiles, but the result is still basically:
- default typography
- random spacing and shadows
- pretty-but-incoherent gradients
- components that don’t share a design language
- no screenshots proving the thing actually looks good in a browser
I’m experimenting with this in Superloopy, a small MIT Codex plugin/CLI for evidence-gated coding-agent workflows.
Recent work added a dedicated `superloopy-frontend` skill. The idea is to make frontend work better by forcing the agent to treat visual quality as evidence, not taste:
- require a `DESIGN.md` / token contract before UI work
- ban common “AI slop” defaults before implementation
- use a design-reference library with 92 brand/style teardowns to pick a real visual direction instead of defaulting to the same SaaS look
- run design-system compliance checks for undeclared colors/spacing
- capture real-browser screenshots at desktop/tablet/mobile widths
- use visual diff / hotspot output when there is a reference target
- only call the work done when the visual QA artifact exists under `.superloopy/evidence/`
The same evidence idea is also behind the research and clone skills:
- `superloopy-research` pushes agents toward cited research, expansion waves, claim ledgers, and verification artifacts instead of one-pass summaries
- `superloopy-clone` is for authorized website rebuilds and records screenshots, DOM/topology, computed styles, assets, component specs, build output, and visual QA before claiming parity
Repo, for context:
https://github.com/beefiker/superloopy
Question for people using OpenAI/Codex-style agents for frontend work:
What would make you trust that an AI-built UI is actually good — a screenshot matrix, design-token compliance, visual diff, Lighthouse numbers, human checklist, or something else?