How Did /Design Fix the Ai Design Slop Problem  🔗 **Source:** [How Did /Design Fix the Ai Design Slop Problem](https://www.youtube.com/watch?v=a1C2GHJCBBE) > [!note]+ Document Notes > tags: [ai-design, design-systems, claude-design, frontend, design-tooling, llm-harness] > author: Ahmad Awais > source: Ahmad Awais (YouTube) > reference: https://www.youtube.com/watch?v=a1C2GHJCBBE > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # 🏷️ Title: how did /design fix the ai design slop problem > <!-- deep-read:sections start --> ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Command Code](https://commandcode.dev) — the coding agent harness the speaker founds - [OKLCH color function (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) - [Google Web Almanac](https://almanac.httparchive.org/) — referenced as a source dataset ## 📝 Summary - A founder (Emmett/Ahmad Awais of Command Code) explains how a `/design` skill bundled into a coding agent fixes "AI design slop" — the recognizable indigo-gradient, glassmorphism, three-feature-tile look that LLMs default to. - It matters because LLMs write fluent CSS but have "essentially zero design taste," and the failure set is small and fixable — roughly 10 tells account for ~90% of the slop signal. - Key stakeholders: developers who ship AI-generated UIs without design training, design-system and DevRel teams, and LLM-harness builders. - Risks and tradeoffs: the approach is heuristic (structured English, not deterministic like tool-call repair), still loops on cheap open models, and the "truthful completion" constraint (no claiming invisible work) remains unsolved. - Bottom line: design slop is a contract/harness problem, not a model-capability problem. A chain-of-thought that forces purpose-before-layout plus diagnose-then-treat separation removes most generic output. ## 📖 Main Content - The core claim: LLMs can write CSS fluently but lack taste. They predict the most likely next token, and the most likely landing page is the average landing page — which is "mediocre by definition." - The failure distribution is narrow. Designers and data scientists labeled AI-generated UIs and found ~10 tells: tech gradient, generic tech hue (indigo, not purple), three equal-weight feature tiles, accent rail, unearned blur/glassmorphism, monument-of-stat oversized numbers, icon topper, center stack, default Inter font, and missing depth. - The deeper bug is compositional, not cosmetic: the model chooses layout before it chooses purpose. A dashboard ("monitor surface") and a landing page ("decide surface") need different spatial composition, but the LLM reaches for the same centered-hero-plus-cards layout for both. - The fix borrows from tool-call repair the speaker built earlier (50,000+ deterministic tool-repair variations that boosted DeepSeek performance). Same shape: let the system complain first, then fix only what's flagged. - `/design` ships ~16 modes, 24 reference documents, and ~4,500–5,000 lines of "encoded design taste" reviewed by named designers (Evil Rabbit from Vercel cited). It splits diagnostics (checkup, smell, review) from treatments (redesign, re-layout, recolor, typeset, motion, interaction, responsive), making each diagnostic-treatment a mandatory pair. - Seven principles: (1) purpose-before-layout chain of thought across seven surface patterns; (2) OKLCH over HSL because OKLCH is perceptually uniform, letting the model reason about color mathematically; (3) emotion-before-hue palette generation; (4) state coverage as the most honest metric (human components average 6+ interaction states, AI ~1.5); (5) a reward-model lookup table that recommends next modes to beat infinite loops; (6) truthful completion (every mode has a minimum visible change bar); (7) the whole thing is a reward model implemented as structured English, a "curriculum" not instructions. - Contested/uncertain: claims like "LLMs can solve all the CSS problems Tailwind fixed" and "taste is lower-dimensional than it feels" are the speaker's opinions, not measured. The "passes designer review" claim rests on an informal show-to-designers test, not a controlled study. ### 🗒️ Notes #### ⏱️ [00:00:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=0) The slop problem and the speaker - Opens on the shared meme: indigo (not purple) gradients and the "sidebar with border-radius thingy" that signals LLM-generated design. Cites a Mario tweet. - Speaker introduces himself as Emmett, founder of Command Code, a coding agent harness optimized for top open and closed models, starting at "dollar one." #### ⏱️ [00:01:30](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=90) From tool-call repair to design repair - Built a viral repair tool ("Harness"): deterministic tool-call repairs, now 50,000+ variations that fix open-model tool calls "without costing you anything." - Insight transferred: maybe design slop is also a small, fixable distribution — "maybe it's just 14 different things that all of the LLMs do wrong." #### ⏱️ [00:03:30](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=210) What /design is - 16 modes, 24 reference documents, ~5,000 lines of encoded design taste. Reads the codebase, identifies what's broken, edits real files. Not Figma, not a markdown mockup tool — a skill for developers, who "are mostly the people who do not know how to design well." #### ⏱️ [00:05:30](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=330) CSS fluency vs. zero taste - "LLMs can write CSS fluently, but have essentially zero design taste." Hot take: LLMs may write better CSS from scratch than via Tailwind. - Got top designers (Evil Rabbit, Vercel head of design) to help encode a "universal design taste." #### ⏱️ [00:07:30](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=450) The mode of the training distribution - When asked for a landing page, the model reaches for the mode: centered hero, gradient text, glassmorphism card, three identical tiles, indigo accent, Inter font, bounce animation. "The average landing page is mediocre by definition." - Not a capability problem — the model knows OKLCH, prefers-reduced-motion, golden ratios, 65ch content width. It just doesn't know when to use them. #### ⏱️ [00:11:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=660) The 10 tells - Tech gradient, generic tech hue (indigo/violet, not purple), feature-tile grid (icon + heading + sentence × 3, equal weight), accent rail, unearned blur, monument of stat, icon topper, center stack, default Inter. Depth system is "absolutely missing in sloppy design." #### ⏱️ [00:16:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=960) Live /design smell demo - Runs `/design smell` on words.aves.dev (an AI-generated word counter) using Qwen 3.7 max. Produces both markdown and HTML reports, scores ~8/10, lists tech gradient and generic tech hue, recommends next steps (re-layout, improve voice). #### ⏱️ [00:22:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=1320) Compositional, not cosmetic - Most tells are symptoms; the cause is choosing layout before purpose. Seven surface patterns: monitor, operate/compare/configure, learn, decide, explore, search/filter, settings. - Chain of thought for design: force the model to reason about purpose before generating layout. "This single constraint eliminated more generic-looking UI than any other aesthetic rule we wrote." #### ⏱️ [00:26:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=1560) Validate-then-repair, separated diagnosis from treatment - First version audited and fixed simultaneously and failed — same way pre-process tool calling failed: the model's prior outweighs your prompt, so it repeats the bad output. - Fix: separate diagnostics from treatments, make each a mandatory pair. Audit localizes the problem; treatment only spends repair budget where the audit disagrees. "Let the design system complain first then we fix only what is complained about." #### ⏱️ [00:31:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=1860) OKLCH over HSL - LLMs default to HSL because it dominates training data. HSL lightness is perceptually non-linear (yellow and blue at 50% L look different to the human eye). OKLCH is perceptually uniform, so "the model can reason about color mathematically." - General lesson: choose a representation where distance in parameter space correlates with distance in output space. Emotion-before-hue: pick calm/urgency/trust/momentum, then derive the palette in OKLCH with constraints. "The agent can't default to indigo now." #### ⏱️ [00:36:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=2160) State coverage as the honest metric - Human components ship ~7–9 states (idle, hover, active, focus, loading, empty, error, disabled, overflow); AI ships 1–2. Median AI component ~1.5 states, human ~6+. "Roughly an order of magnitude" gap, trivially detectable, "zero subjective judgment." #### ⏱️ [00:38:30](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=2310) Beating the infinite loop - Biggest failure mode: detect → fix → new problem → fix → loop. Other design skills encode great taste but don't think about how the LLM reasons, so they loop and "burn hundreds of millions of tokens." - Solved with a reward model / lookup table: after each mode, the system recommends 2–3 next modes (build → audit → refine → style → ship). "The agent just knows what to do next." #### ⏱️ [00:41:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=2460) Truthful completion - The most insidious behavior: claiming invisible work ("I added hover states" when no hover CSS exists). Every mode has a minimum-visible-change bar — typeset must change body/headings/scale/labels; motion must touch 8+ transition moments, not one easing value. "We still haven't gotten this right." #### ⏱️ [00:43:00](https://www.youtube.com/watch?v=a1C2GHJCBBE&t=2580) Taste engineering and the deal-card example - "What we built is basically a reward model for design, implemented as structured English instead of a neural network." 4,500 lines of taste, a curriculum not instructions. "The model already has the capability... what it lacks is the policy." - Closing demo: a text-blob deal list turned into a folding "ticket" card (Kimi K2.5 or DeepSeek), responsive without being told. Teases `/design d-slop` for automatic slop detection, shipping end of week. ## 📚 References - [Command Code](https://commandcode.dev) — the harness and `/design` skill described - [OKLCH in CSS Colors (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) — perceptually uniform color space - [HTTP Archive Web Almanac](https://almanac.httparchive.org/) — Inter-font / framework dataset the speaker contributed to - [Tailwind CSS](https://tailwindcss.com/) — referenced as a source of common templates - [Vercel](https://vercel.com/) — Evil Rabbit's design work cited as a taste reference ## 🗣️ Paraphrase - AI-generated interfaces share a recognizable look — indigo gradients, glass cards, three equal feature tiles, Inter font — because models predict the statistical average of the web, and the average landing page is bad. The model isn't incapable; it just doesn't know when to apply the good techniques it already knows. - The `/design` skill fixes this by treating design as a narrow, fixable failure set, the way the speaker earlier fixed open-model tool calls. It forces purpose-before-layout reasoning, swaps HSL for OKLCH so color becomes mathematically reasonable, counts interaction states as an objective quality proxy, and separates diagnosis from treatment so the agent stops looping and stops claiming work it didn't do. ## 📰 Newsletter - This one's for the developers shipping pretty-but-samey UIs: a coding-agent founder breaks down "AI design slop" into about ten recognizable tells (yes, that gradient is indigo, not purple) and shows a `/design` skill that audits and repairs them. The clever bit isn't taste — it's harness engineering: make the agent decide what a screen is *for* before it picks a layout, count interaction states as a no-judgment quality score, and pair every diagnosis with a treatment so it quits looping. For WordPress folks building blocks and patterns, the state-coverage idea (idle/hover/focus/empty/error/overflow) is a free QA checklist. Watch the [video](https://www.youtube.com/watch?v=a1C2GHJCBBE). ## ✅ Action Items #### DevRel - Developer advocacy: build a talk/demo on "purpose-before-layout" as a chain-of-thought pattern for design, with a live before/after on a real codebase. - Education: write a workshop on the 10 slop tells and the 7 surface patterns; have developers self-audit their own AI-generated UIs. - Developer experience: ship a quickstart that wires a design-smell audit into a project's pre-commit or CI, output as a scored report. - Developer marketing: turn "it's indigo, not purple" into a memorable campaign hook tied to a measurable de-slop before/after. - Community management: run an office-hours where designers and developers co-label AI UIs to grow the failure dataset. - Internal/external/cross-project: feed state-coverage metrics back to component-library owners as a shared quality SLA. #### OSPO - Policy & Governance: decide whether encoded "design taste" reference docs are an open contribution artifact and set a review/attribution policy for designer contributors. - License Compliance: clarify licensing on the 24 reference documents and any third-party design heuristics before redistribution. - Security Management: not applicable to this source — no security surface discussed. - Software Inventory: track the design skill's reference docs and mode definitions as inventoried, versioned artifacts. - Developer Support: offer consultation hours on integrating a design-audit step into existing agent harnesses. - Community Engagement: invite upstream designers to maintain specific tells (the speaker explicitly seeks motion-design help). - Strategic Alignment: tie de-slop metrics (state coverage, slop score) to product quality KPIs. #### Community - Maintainers: add an interaction-state checklist to component review hygiene. - Contributors: create a "first issue" to add one new design tell with a detector and a fix. - Sponsors: fund the motion-design reference docs the speaker says are weakest. - Ecosystem: coordinate a shared, open dataset of labeled AI-generated UIs across projects. #### WordPress - Core: not applicable — no Core-specific content. - Core Performance: prefers-reduced-motion and OKLCH adoption tie loosely to perf/accessibility budgets; track as optional. - Core AI: relevant — a purpose-before-layout chain-of-thought is a candidate guardrail for any AI block/pattern generation; build an evaluation set of slop tells. - Mobile: not applicable. - Playground: build a Playground lab that runs a design-smell audit on a generated block theme. - Community: not applicable beyond general education. - Training: add a Learn lesson on interaction states and accessible color (OKLCH, contrast). - Marketing: not applicable. - Support: not applicable. - Design: directly relevant — adopt the 7 surface patterns and state-coverage metric into UX audits and a design-tokens review backlog. - Documentation: write examples-first docs showing idle/hover/focus/empty/error states for block patterns. - Accessibility: tie state coverage and OKLCH contrast reasoning to WCAG 2.2 reviews; audit AI-generated patterns for focus and contrast. - Themes: add a theme-review lint for missing interaction states and indigo-default palettes. - Plugins: not applicable. - (Remaining teams: not applicable to this source.) #### The WPCC - Programs: not applicable to this source. - Projects: a documentation sprint to codify accessible state coverage for blocks would apply. - Funding experiments: not applicable. ### FAIR - Technical independence: not applicable to this source. - Policies and covenants: not applicable to this source. - Productized governance artifacts: the "reference docs as versioned taste artifacts" idea loosely maps to scorecards, but otherwise not applicable. ## 🧪 Hypotheses - If you force an LLM to classify a UI's purpose (one of seven surface patterns) before generating layout, generic-looking output drops more than from any single aesthetic rule. - If you generate palettes in OKLCH instead of HSL, AI color choices pass human perceptual-contrast checks at a higher rate. - Interaction-state count is a model-agnostic proxy for design quality: AI components cluster near ~1.5 states, human ones near ~6+. - Separating diagnosis from treatment (and pairing them) reduces token spend and convergence failures versus a single audit-and-fix pass. - A reward-model lookup table that recommends next modes reduces the infinite-loop failure rate, more so on stronger models than cheap open ones. - Encoding design "policy" (when to apply known techniques) as structured English closes most of the gap without changing the model. ### 📊 Methodology - Run a controlled A/B: same prompt, with and without the purpose-classification step; have blinded designers rate "looks AI-generated" on a scale. - Build a contrast-pass test harness: generate N palettes in HSL vs. OKLCH, score against WCAG contrast and a perceptual-uniformity metric. - Instrument state coverage: parse generated components, count distinct interaction states, compare AI vs. human-authored corpora. - Token-accounting experiment: measure tokens-to-converge for combined audit-fix vs. separated diagnose-treat on identical tasks. - Loop-rate measurement: track mode re-entry frequency with and without the next-mode lookup table across model tiers. ### ❓ Questions - Does "taste is lower-dimensional than it feels" hold across non-Western design conventions and non-marketing surfaces? - How does the heuristic skill degrade as models improve — does the policy gap shrink on its own? - Can the truthful-completion bar be enforced deterministically rather than by minimum-visible-change heuristics? - Is the 10-tells / 90%-of-signal figure stable across time, or do new slop patterns emerge as tools spread? - Does OKLCH reasoning help models that were trained almost entirely on HSL examples, or does it need fine-tuning? ### 🔮 Future Research - A maintained open dataset of labeled AI-generated UIs and their tells, versioned over time. - Cross-model benchmarks of design quality using objective proxies (state coverage, contrast pass rate, palette diversity). - Study of whether design "policy" generalizes to other compositional domains (long-form writing, slide decks, data viz). - Methods to make completion claims verifiable (diffing rendered states, not just source) inside agent harnesses. ### 💡 Implications - Practice: design-system teams gain objective, automatable quality gates (state coverage, OKLCH contrast) that don't need a designer in the loop for every PR. - Policy: organizations adopting AI UI generation should require purpose-classification and state-coverage checks before shipping. - Security: minimal — but "truthful completion" failures are an integrity risk for any agent that claims work it didn't do. - Education: developers can learn a finite catalog of design violations rather than "taste" as an infinite skill. - Funding models: encoded reference docs are a fundable, maintainable open artifact; motion design is the named gap. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch-Kincaid grade ~9–10 (conversational spoken transcript, frequent filler and run-ons lower formal complexity but raise sentence-length noise). #### 👀 Visual learners - Present: live screen demos, the speaker's hand-drawn tells, the smell-report HTML, the deal-card before/after. - Improve: a clean diagram of the seven surface patterns, a labeled before/after of the 10 tells, an HSL-vs-OKLCH lightness chart. #### 🔊 Aural learners - Present: full spoken narration (it's a video walkthrough). - Improve: a 3-minute audio summary of the seven principles, with speaker notes. #### 🗣️ Verbal learners - Present: analogies (chain of thought for design, color-as-math), explicit term definitions (surface patterns, state coverage). - Improve: a glossary of tells and modes; plain-language callouts separating opinion from measured claim. #### 🧩 Kinesthetic learners - Present: a runnable demo (`/design smell` on a real site) viewers can reproduce. - Improve: a step-by-step lab — install, run smell, run re-layout, diff the result. #### 🧠 Logical learners - Present: the diagnose-then-treat structure, the state-count metric, the lookup-table flow. - Improve: a decision tree for surface classification and a causal diagram of loop → fix → loop. #### 🧑‍🤝‍🧑 Social learners - Present: appeals to named designers and a public, shareable skill. - Improve: a community labeling exercise and a peer-review rubric for de-slop results. #### 🧘‍♀️ Solitary learners - Present: docs and blog post pointers for self-paced study. - Improve: a self-check quiz on identifying tells in a sample UI. #### 🌿 Naturalistic learners - Present: the "emotion before hue" framing ties palette to context. - Improve: lifecycle thinking on token cost and energy of looping agents. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: the topic touches accessible techniques (prefers-reduced-motion, contrast); the video itself relies on visual demos. - Improve: provide descriptive alt text and a text transcript of every on-screen report. #### Keyboard navigation - Present: not addressed for the video; relevant to the UIs being generated. - Improve: have `/design` audit focus visibility and tab order as a named state. #### Contrast and readability - Present: the OKLCH discussion directly improves perceptual contrast reasoning. - Improve: enforce a 4.5:1 minimum as an automatic gate in the recolor mode. #### Text resizing and reflow - Present: the deal-card demo is responsive. - Improve: test generated UIs at 200% zoom; respect prefers-reduced-motion in motion mode. #### Media and captions - Present: it's a YouTube video (auto-captions likely). - Improve: human-corrected captions and a downloadable transcript; no autoplay. #### Forms and interactions - Present: state coverage explicitly includes empty/error/disabled states for forms. - Improve: require inline validation and accessible error states as part of the completeness check. #### Standards reference - Map gaps to WCAG 2.2 AA: 1.4.3 (contrast), 1.4.11 (non-text contrast), 2.4.7 (focus visible), 2.3.3 (animation from interactions), 1.4.10 (reflow). ### 🌍 DEIB Assessment #### Cultural breadth - Present: examples are Western, marketing-site centric (landing pages, dev tools). - Improve: test "good taste" against non-Western layout and typographic conventions; note that "universal design taste" is a strong claim. #### Inclusive language - Present: generally neutral; jargon is mostly defined. - Improve: define "slop," "tells," and "harness" up front for newcomers; avoid assuming all viewers know OKLCH. #### Neurodiversity support - Present: chunked into numbered principles with consistent structure. - Improve: predictable headings and icon+text labels in the companion docs. #### Representation - Present: cites named designers (Evil Rabbit, team members Obed and others). - Improve: broaden the cited taste-setters beyond a small circle to avoid encoding one aesthetic as universal. #### Psychological safety - Present: respectful framing toward other design skills ("they have amazing taste"), even while critiquing their looping. - Improve: avoid implying developers "do not know how to design" as a fixed trait; frame as a learnable gap. ### ✅ Logical Validity #### Strong reasoning - Analogical (tool-call repair → design repair): strong because both are narrow, enumerable failure sets fixed by complain-first-then-repair. Clarify with side-by-side failure-rate data. - Causal (mode of distribution → average output): well-grounded in next-token prediction; "average landing page is mediocre by definition" is a sound inference from the premise. - Inductive (10 tells → 90% of signal): plausible from the labeling exercise, but the sample and labelers aren't quantified — present the dataset to strengthen it. - Deductive (perceptual non-uniformity of HSL → model can't reason about color → OKLCH fixes it): the yellow/blue 50%-lightness example is a clean demonstration. #### Fallacies - Hasty generalization: "LLMs can solve all the CSS problems that frameworks like Tailwind actually fixed" — sweeping, stated as a "hot take" without evidence. Fix: scope to specific problems with examples. - Appeal to authority: "designers couldn't tell if it was AI or human" leans on an informal, unblinded test. Fix: run a blinded study with sample sizes. - Anecdotal evidence: the deal-card before/after is a single cherry-picked success. Fix: report aggregate pass rates. - Self-promotion bias: the whole frame favors Command Code; competing skills are characterized as "loopy" without shared benchmarks. Fix: publish reproducible comparisons. #### Tone of voice - Enthusiastic, informal, founder-promotional, with frequent self-correction and asides ("it's indigo, not purple"). Confident and teacherly, occasionally hedged ("my gut feeling is," "we still haven't gotten this right"). ### 🛡️ DARVO Analysis - Deny: no denial of wrongdoing — the speaker openly admits limits ("it's not where we want it to be," "we still haven't gotten this right"). - Attack: mild competitive framing (other design skills are "super loopy"), but not an attack on accusers; there are no accusers. - Reverse victim/offender: not present. This is a product explainer, not a defense against accusation, so DARVO patterns don't apply. - Emotional cues/rhetoric: persuasion is through enthusiasm and authority, not victimhood. No related manipulative fallacies beyond ordinary marketing optimism. ## 🎯 Conclusion - Bottom line: AI design slop is a narrow, mostly fixable problem of policy and harness, not model capability. Forcing purpose-before-layout reasoning, reasoning about color in OKLCH, counting interaction states, and separating diagnosis from paired treatment removes most generic output and the looping that plagues taste-only skills. - Next steps for readers: try a design-smell audit on your own AI-generated UI; adopt interaction-state coverage as an objective quality gate; switch palette generation to OKLCH with a 4.5:1 contrast floor; and treat completion claims skeptically — verify the rendered states, not just the source. ## 🔄 Refactor Appendix — how did /design fix the ai design slop problem > Density: 2–5 Literature atoms (H3), 0–3 Permanent candidates (H4). > Defaults: 3 Literature, 1 Permanent. Resonance filter: if you can't > articulate in one line why a claim matters, drop it. ### 📚 Literature Atoms (H3) #### [H1] 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) from policy (when to apply it); the whole skill targets the policy gap. **Tags**: #xref **Highlight**: [view highlight](readwise://) <!-- atomicity: 1 idea ✓ --> #### [H2] 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 **Highlight**: [view highlight](readwise://) <!-- atomicity: 1 idea ✓ --> #### [H3] 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 highest-leverage single fix. **Tags**: #xref **Highlight**: [view highlight](readwise://) <!-- atomicity: 1 idea ✓ --> #### [H4] 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 states vs. ~6+ human states. - Gives a model-agnostic, judgment-free metric usable as a CI gate. **Tags**: #xref **Highlight**: [view highlight](readwise://) <!-- atomicity: 1 idea ✓ --> #### [H5] 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. **Tags**: #xref #aphorisms **Highlight**: [view highlight](readwise://) <!-- atomicity: 1 idea ✓ --> ### 🧠 Permanent Candidates (H4) #### [P1] AI output quality is a harness-policy gap, not a model-capability gap **Claim** (one sentence, Courtney's voice): You close most AI quality gaps by teaching the model when to apply skills it already has, not by waiting for a better model. **Evidence pointer**: [[#H1]] **Scope & conditions**: Holds for compositional tasks with a small, enumerable failure set (design, tool calls); breaks when the failure space is genuinely open-ended or the model truly lacks the capability. **Links**: - [[Chain-of-thought reduces generation entropy]] — because extends - [[Design systems as objective quality gates]] — because applies-in frontend - [[Tool-call repair as deterministic harness layer]] — because evidence-for <!-- atomicity: 1 idea ✓ --> ### ✏️ Fleeting Queue - [F1] Test whether interaction-state coverage works as a CI lint for WordPress block patterns — https://www.youtube.com/watch?v=a1C2GHJCBBE #fleeting #inbox - [F2] Watch for `/design d-slop` release and the companion blog post / docs page #fleeting #inbox ### → Things 3 (max 2 actions) - [ ] Draft a DevRel talk on purpose-before-layout chain-of-thought with a live de-slop demo — content #things - [ ] Add an interaction-state checklist (idle/hover/focus/empty/error/overflow) to block-pattern review — design-systems #things <!-- deep-read:sections end --> 📄 **Full text:** [[Full Document Contents/Articles/How Did Design Fix the Ai Design Slop Problem.md|How Did /Design Fix the Ai Design Slop Problem by Ahmad Awais]] ## Highlights - And it landed up in something like this. This slash design scale, right? LLMs can write CSS fluently, but have essentially zero design taste. And the failure mode where they fail on having a good design taste and do something random and sloppy is not actually very random. ([View Highlight](https://read.readwise.io/read/01kw1zd1p1p7k39rd4gn7ec24z)) - Note: Central diagnosis: capability (fluent CSS) vs policy (taste) — and the failure isn't random. - Tags: atom/literature/h1, ai-design - So, LLM is doing exactly what we trained them to do. They are predicting the most likely next token given building a landing page. And the most likely landing page is the average landing page. The average landing page is mediocre by definition. ([View Highlight](https://read.readwise.io/read/01kw1zd3rsvsmnxjx0tydy8ztc)) - Note: Why slop happens: it's the training distribution's mode, not a model defect — the average is mediocre by definition. - Tags: claude-design, atom/literature/h2 - So, the deeper problem is compositional, not cosmetic. The more interesting thing I found was that most of the tells are symptoms. They are not causes. The actual bug is the is that the model chooses layout before it chooses the purpose. ([View Highlight](https://read.readwise.io/read/01kw1zd66r83zt02txwdhxwv15)) - Note: The compositional insight: the bug is choosing layout before purpose — justifies purpose-before-layout reasoning. - Tags: atom/literature/h3, design-systems - It makes them optimize your you know entire design in a much more smooth and coherent way because they can now control the color mathematically and be sure that even to human eye it will look really really good, right? Whereas HSL doesn't really work. I think this generalizes, right? When you are designing an interface for an LLM to work through, whether it's color space or schema or an API, choose the representation where the distance in parameter space correlates with the distance in the out- output space. ([View Highlight](https://read.readwise.io/read/01kw1zdc3vn5hfak7etgj4a55v)) - Note: The transferable principle (OKLCH over HSL): for any LLM-facing schema/color space, pick a representation where parameter-space distance tracks output-space distance. - Tags: atom/literature/h5, design-tooling - If we can just count, does this button have focus state? Does this form ha- handles an empty state? Does this handle Does this list handle overflow? Uh the median of AI-generated component is like 1.5 states, right? ([View Highlight](https://read.readwise.io/read/01kw1zd8wsfkds2d26pc7w9a19)) - Note: State coverage as a judgment-free quality proxy: ~1.5 states for AI components vs 6+ for human-built. - Tags: frontend, atom/literature/h4