how did design fix the ai design slop problem

# how did /design fix the ai design slop problem > [!question] Lingering Questions > - Does "taste is lower-dimensional than it feels" hold across non-Western design conventions and non-marketing surfaces, or is the whole 10-tells catalog Western-marketing-site specific? > - Is the 10-tells / "90% of signal" figure stable over time, or does slop drift as more tools ship and models retrain on AI-generated output? > - Can "truthful completion" (a mode not claiming invisible work) be enforced deterministically rather than through a minimum-visible-change heuristic? The speaker admits "we still haven't gotten this right." > [!tip] Article Ideas > - The state-coverage metric (idle/hover/focus/empty/error/overflow, AI ~1.5 vs. human ~6+) as a free, judgment-free QA checklist for WordPress block-pattern review. #articleseed > [!link] Cross Reference > - [[3. Resources/Permanent Notes/AI Quality Gaps Are Policy Problems Not Capability Problems]] — this note's own central claim, already promoted from this exact source > - [[3. Resources/Permanent Notes/Choose Representations Where Parameter Distance Tracks Output Distance]] — the OKLCH-over-HSL claim atom, promoted separately as a general representation-design principle > - [[3. Resources/Permanent Notes/The Harness Now Outpaces the Model as the Source of Agent Capability Gains]] — same underlying thesis (harness > raw model) applied to design instead of general agent capability > - [[3. Resources/MOCs/AI & the Future of Knowledge Work MOC]] > [!quote] Vocabulary > - *design slop* — the recognizable, generic look of AI-generated UI (indigo gradients, glassmorphism, three equal feature tiles, Inter font) > - *state coverage* — the count of distinct interaction states (idle, hover, active, focus, loading, empty, error, disabled, overflow) a component ships; used here as an objective, judgment-free proxy for design completeness ## Bib capsule Ahmad Awais ("Emmett," founder of Command Code), "how did /design fix the ai design slop problem," YouTube, 2026. ## Author's thesis AI design slop is a narrow, mostly fixable distribution problem, not a model-capability ceiling. LLMs write CSS fluently but default to the statistical mode of their training data because they choose layout before purpose. A coding-agent skill that forces purpose-before-layout reasoning, reasons about color in a perceptually linear space, counts interaction states as an objective quality gate, and separates diagnosis from treatment removes most of the generic output. ## Key arguments 1. The failure distribution is narrow and enumerable — designers and data scientists labeled AI-generated UIs down to roughly 10 recognizable tells (tech gradient, indigo hue, three-tile grid, unearned glassmorphism, missing depth, etc.). 2. The deeper bug is compositional, not cosmetic: the model chooses layout before it chooses purpose, so a monitoring dashboard and a decision-driving landing page both get the same centered-hero-plus-cards treatment. 3. The fix borrows the shape of an earlier deterministic tool-call-repair system: let the system complain first (diagnose), then fix only what's flagged (treat) — paired, never combined into one pass. ## Claim atoms ### LLMs write fluent CSS but lack design taste > [!quote] ID:rw_h1 > LLMs can write CSS fluently, but have essentially zero design taste. **Context & use**: ~05:30 in the talk, the central diagnosis. Separates capability (CSS syntax) from policy (when to apply which technique) — the whole skill targets the policy gap, not the capability. **Tags**: #xref  ### The average landing page is mediocre by definition > [!quote] ID:rw_h2 > The average landing page is mediocre by definition. It has no design **Context & use**: ~08:00, explains why next-token prediction yields slop. Reframes slop as a property of the training distribution's mode, not a model defect. **Tags**: #xref #aphorisms  ### Models choose layout before purpose > [!quote] ID:rw_h3 > The actual bug is the is that the model chooses layout before it chooses the purpose. **Context & use**: ~22:00, the "compositional not cosmetic" insight. Justifies purpose-before-layout chain of thought — the author calls this "the single constraint [that] eliminated more generic-looking UI than any other aesthetic rule we wrote." **Tags**: #xref  ### State coverage is an objective design-quality proxy > [!quote] ID:rw_h4 > the median of AI-generated component is like 1.5 states **Context & use**: ~37:00, contrasts ~1.5 AI interaction states vs. ~6+ for human-authored components. Gives a model-agnostic, judgment-free metric usable as a CI gate. **Tags**: #xref  ### Choose representations where parameter distance tracks output distance > [!quote] ID:rw_h5 > choose the representation where the distance in parameter space correlates with the distance in the out- output space **Context & use**: ~33:00, the OKLCH-over-HSL generalization. A transferable principle for designing any LLM-facing schema, color space, or API — promoted to its own Permanent note. **Tags**: #xref #aphorisms  ## Permanent candidates - [[3. Resources/Permanent Notes/AI Quality Gaps Are Policy Problems Not Capability Problems]] — already exists, sourced from this exact doc; captures claim atoms 1–3 (capability-vs-policy, mode-of-distribution, purpose-before-layout) as one unified diagnosis. - [[3. Resources/Permanent Notes/Choose Representations Where Parameter Distance Tracks Output Distance]] — new this pass; the OKLCH principle (atom 5) generalizes past design into any LLM-facing parameter space, distinct enough from the policy/capability framing to stand alone. - State-coverage atom (4) is folded into the existing policy-vs-capability note as supporting evidence rather than promoted separately — it's a metric for the same diagnosis, not a distinct claim. ## Processing checklist - [x] Verbatim quotes preserved from the source deep-read - [x] Atomicity markers present on all five atoms - [x] Checked for existing Permanent notes before drafting — found one exact match, created one new note for the distinct OKLCH claim - [x] Connect into the relevant MOC(s) ## Links - [[3. Resources/MOCs/AI & the Future of Knowledge Work MOC]] — harness-level fixes to AI output quality, applied to design work - [[3. Resources/MOCs/Visual Thinking MOC]] — design-quality heuristics (state coverage, purpose-before-layout) as visual/UX reasoning tools - Source doc: [[3. Resources/Readwise/Articles/how did design fix the ai design slop problem]]