Why design agents produce slop — and the visual-reference pipeline that fixes it

For: apollo (owns UI build) + operator. From: hermes. Question answered: why do Apollo and other design-tasked agents produce generic, uninspired UI despite having design skills — and what do practitioners do to make an agent actually reason about design + collect real-world visual reference it can replicate and propose from.

One-line verdict: The generic output is not a skill-inventory gap — the fleet already owns the best anti-slop skills (prior art, §5). It is a grounding + verification gap: the agents never see a reference and never look at their own render. The fix is a visual-reference pipeline that is buildable today with tooling already wired in this repo (firecrawl) — proven end-to-end this session (§3). The missing piece is a skill that packages it + a forcing function that makes the agent run it before proposing UI.

1. Why agents produce generic UI even with skills installed (Lane A — T-deep, flagged)

Three stacked causes. The first two are why it happens; the third is why the agent can't self-correct.

  1. Distributional convergence (root cause). An LLM predicts the statistical center of its training data. "Build a landing page" resolves to the median of every Tailwind tutorial scraped 2019–2024 — hence Inter + purple/indigo gradient + centered hero + three cards. (Tailwind's own bg-indigo-500 default propagated through tutorials into the training corpus; Wathan reportedly apologized for it publicly — single-source, secondhand, flagged.)
  2. Buildability bias. Agents optimize "does it run" over "is it considered." Genuinely distinctive directions (glass, 3D, motion) are harder to implement, so the agent rounds the design off to a safe, buildable layout — a second bias on top of the statistical one.
  3. No visual self-verification. The agent cannot see that its own output is wrong. Anthropic's own claude-code issue #70553 (filed 2026-06-24): Claude claims a UI fix landed while it's unchanged on screen; "the system appears to trust its own completion claims without visual verification." [live-verified — GitHub issue]

What a design skill actually does: it only moves the center — bans the worst fonts, forces an aesthetic commitment — but "cannot give Claude taste or a reference, so Claude fills the gaps with familiar archetypes." Rule-lists prevent the worst failure; they don't supply a destination. The reported fix across the design press (Figma, Designer Fund, Malewicz, Composio) converges: reference-grounding, not longer rule-lists. Taste isn't automatable; a specific reference is what pushes output off the generic mean toward a committed direction.

Forcing functions, ranked by reported leverage (one credible aggregator's ranking — treat as expert opinion, not benchmark)

  1. Render-and-LOOK loop (highest). Agent renders its output (Playwright/Puppeteer via MCP), screenshots it, views the pixels, self-critiques, iterates. "It just checked itself." This is the same conclusion the fleet's own 2026-06-16 report reached ("the single highest-leverage thing you can give an agent doing design work").
  2. Separate taste → explore → build. Collapsing direction-setting, visual exploration, and implementation into one prompt maximizes ambiguity → pushes to the generic center. Fix: generate divergent visual directions (image model, or reference collection) before any code; lock a DESIGN.md token spec from the chosen direction. (Google Antigravity reportedly generates UI mockups for review before coding.)
  3. Numeric dials + pre-flight checklist (e.g. the "Taste" skill: variance/motion/density dials, a "Design Read" declaration, banned tells). Weaker — "relies entirely on model compliance with prose rules; no rendering or output verification."
  4. "Grill me" requirements interrogation — earlier-stage; removes ambiguity the model would otherwise resolve toward defaults.

Vision-in-the-loop evidence exists but is partly unverified: arXiv 2604.05839 "Vision-Guided Iterative Refinement for Frontend Code Generation" (Apr 2026) — existence/authors verified, quantified results NOT extracted, flagged; a "16.6-point" vision-tool improvement figure (VCode, arXiv 2511.02778) is snippet-only, unverified. Directionally supports vision-in-loop; do not cite the numbers as fact.

Takeaway for the fleet: our agents have #3-tier skills installed and skip #1 and #2 entirely. They have rule-lists and no reference, no render-and-look. That is precisely the low-leverage half.

2. Where agents get visual reference + how they replicate (Lane B — T-shallow scout, flagged)

Reference sources (declared accessibility is the load-bearing fact)

Source Content Agent-accessible? API
Mobbin 621k app screens / 142k flows, curated+tagged Sanctioned MCP server (May 2026) — the only agent-native path Yes, but Enterprise-tier only
Godly / Recent daily-curated web/branding/motion, 11 categories Public HTML, no login (§3 verified) none
Refero 40k product screens searchable public browse none
SiteInspire / Lapa Ninja / Awwwards / Land-book curated site/landing galleries public HTML, no explicit anti-scrape none
Dribbble designer shots (marketing, not shipped product) ToS forbids scraping — API only OAuth (publish-focused)
Pageflows 100k UX flows as video freemium, video gated none

Net: Mobbin is the only sanctioned agent-native feed but it's paywalled at Enterprise. Everything else is plain public HTML an agent screenshots/crawls without an API contract (Dribbble is the one explicit scrape-ban). This table is scout-tier — deep-read each ToS/robots.txt before authorizing any scraping.

Collection tooling

Tool Full-page live shot Returns viewable image Structured tokens too? Cost
Firecrawl (in-repo) yes (fullPage) yes (screenshot) yes — branding format (colors/fonts/spacing/components) ~5cr/render, +4 json
Urlbox / ScreenshotOne yes yes no (pixels only) $79–99 / 10k
thum.io / ApiFlash yes yes no cheapest ($1/5k)
Playwright (self-host) yes yes no free/OSS

Firecrawl is the strongest single tool for an agent — one call returns both the viewable screenshot and pre-extracted design tokens, collapsing collect + half of ingest into one step. Dedicated screenshot APIs are cheaper for pure pixels but return no structure.

Ingest → replicate techniques

Website "look and feel" (layout/color/nav) is not copyrightable — only literal code + specific graphic assets are; trade-dress claims are rare and fact-specific. Enforceable line is platform ToS. Rule: prefer sanctioned APIs (Mobbin MCP) or plain public galleries with no anti-scrape clause; "replicate a layout as inspiration" is lower-risk than "copy an asset/logo verbatim."

3. Proof: the pipeline works TODAY with in-repo tooling (Lane C — build-verified, run live this session)

firecrawl screenshot of linear.app captured live this session
Live proof — linear.app captured via firecrawl screenshot, then vision-read (Lane C).

I ran the full loop hands-on with firecrawl (already wired in this repo). Every leg real:

Leg Call Result Cost
DISCOVER scrape godly.website [markdown,links] 61 curated reference URLs + thumbnails + 11 category facets, zero login 1 cr
CAPTURE scrape linear.app [screenshot] 1280×800 viewable PNG (saved refs/linear-example-shot.png) 1 cr
EXTRACT scrape linear.app [branding] tokens: bg #08090A, link #5E6AD2, accent #E4F222; Inter+SF Pro; h1 64/h2 48/body 15; 8px base; button-primary radius 9999px + shadow ladder; personality modern/medium (conf 0.925) 1 cr
INGEST Read the PNG model viewed it → derived: near-black canvas, oversized tight-tracked light headline, heavy negative space, monochrome + one warm-white pill CTA, single yellow accent, dense muted product panel 0

Conclusion: collect → capture → extract → ingest is not a research gap; it is a packaging gap. The capability is present in-repo. What's absent is (a) a skill that standardizes these four calls into one workflow, and (b) a forcing function that makes the agent run it before proposing UI and run a render-and-look pass after building.

4. Recommendation — the visual-reference design loop (Hermes specs, Apollo builds)

A single skill + a hard forcing function. Two halves, matching Lane A's two skipped high-leverage moves:

A. Reference-grounding (the INPUT loop — new, this report's core deliverable): 1. Brief → discover: scrape 1–3 public galleries (Godly/Refero/SiteInspire) for the relevant category → shortlist reference URLs. (Optional: Mobbin MCP if the operator funds Enterprise.) 2. For each shortlisted ref: firecrawl screenshot + branding → moodboard of viewable images + a merged token candidate set. 3. Vision-read the moodboard → write a DESIGN.md (committed tokens: palette, type pairing, spacing, motion, one signature move) — the destination the rule-lists can't supply. 4. Build from DESIGN.md (not from the raw prompt).

B. Render-and-look (the OUTPUT loop — fleet already recommended it 2026-06-16, still unwired): 5. After build, screenshot own output (firecrawl or Playwright-MCP) → vision-read → grade against DESIGN.md + the anti-slop fingerprint checklist (prior art §5) → iterate until it passes.

Forcing function (without it the skill gets skipped — the whole Lane A lesson): wire it as a frontend-design HARD-GATE precondition (rule #13 already routes fleet UI through the design bible) — no UI proposal ships without a DESIGN.md sourced from ≥1 real reference, and no "done" without a render-and-look pass. That converts an available capability into an enforced one.

Ownership: Hermes owns this spec + the reference-collection research capability (I can run discover/capture/extract runs on demand). Apollo owns the build of the skill and all UI output (memory: ui_layout_is_apollo_domain). Route to apollo.

Cost note: firecrawl branding+screenshot ≈ a few credits per reference; a moodboard of 5 refs ≈ ~$0.05–0.15. Mobbin MCP is the only paid dependency and is optional (Enterprise-tier) — public galleries + firecrawl cover the loop free-ish without it.

5. Prior art (extended, not re-run — rule #18)

Source-coverage ledger (load-bearing only)

# Claim Tier Source
1 firecrawl branding→tokens + screenshot + gallery scrape all work, no login [built+run live this session] Lane C, §3 — real calls
2 No visual self-verification; agent trusts own completion [live-verified] claude-code issue #70553 (2026-06-24)
3 Distributional convergence = root cause of generic output [opinion, multi-source] superdesign.dev, prg.sh (2026)
4 Render-and-look = highest-leverage forcing function [opinion, one aggregator + fleet 2026-06-16] superdesign.dev; prior art
5 Mobbin = only sanctioned agent-native feed (MCP), Enterprise-tier [verified] mobbin.com/pricing, chatforest MCP review
6 Dribbble ToS forbids scraping [verified] developer.dribbble.com/terms
7 Public galleries (Godly/Refero/SiteInspire/Lapa) scrapeable, no login [Godly verified live §3; others scout] Lane C; Lane B snippets
8 v0/Bolt screenshot→code ~70–72% visual accuracy [snippet] aimultiple.com benchmark
9 Look-and-feel not copyrightable; ToS is the real line [verified, legal sources] jipel.law.nyu.edu, turleylaw.com
10 Tailwind indigo default → corpus → generic buttons; Wathan apology [single-source, secondhand] ⚠ superdesign.dev
11 arXiv 2604.05839 vision-refinement results; VCode 16.6pt [existence-only / snippet] ⚠ arXiv (results unverified)

Flags: rows 10–11 not load-bearing on the verdict (do not cite the numbers as fact). Lane B source table (row 7 non-Godly entries) is scout-tier — deep-read each ToS/robots.txt before authorizing any scraping. The verdict rests on rows 1–6 (proven or verified).

Bottom line: the fleet's design agents fail not for lack of skills but for lack of grounding (never see a reference) and verification (never look at their render). Both high-leverage moves are buildable today with firecrawl already in-repo — proven this session. Package them into an Apollo-built visual-reference loop gated by frontend-design, and "looks AI-made" becomes "looks designed."