Taste Enforcement - Anti-Slop Frontend Rules

Taste enforcement makes generic AI UI structurally hard to produce. It combines banned patterns, variance dials, token constraints, browser verification, and project-specific visual archetypes.

Design Position

LLMs default to the statistical center: centered hero, pill buttons, blur blobs, 3-card feature grid, Inter, blue/purple gradient, generic icons, and copy that sounds like a SaaS landing page dissolved in room-temperature water. Taste enforcement exists to push the model out of that basin.

Operating Principle

Do not ask the agent to "have taste." Encode taste into:

• token systems (Design Tokens, Sigil Token Architecture)
• component catalogs (Sigil UI)
• project rules (taste-enforcement.mdc, CSS UI Enforcement)
• skills (Frontend and Design Skills)
• browser screenshots and visual doctors
• explicit banned patterns

This is Constraints over Context applied to frontend work. References guide. Constraints enforce.

Variance Dials

Three numbers drive downstream decisions. Defaults are high enough to avoid median UI but should be reduced for operational software.

Suggested overrides:

Hard Failures

Layout

• Centered hero plus decorative blobs.
• Three equal cards as the main feature proof.
• Hero that consumes the full viewport and hides the next section.
• Cards inside cards.
• Page sections styled as floating cards.
• Flexbox percentage puzzles where CSS Grid would name the structure.
• Complex desktop layout without a mobile collapse rule.

Color and Surface

• Dominant purple/purple-blue AI gradient.
• One-note beige, dark slate, espresso, or brown/orange palette.
• Pure #000 or #fff as a design decision rather than a token.
• Gradient text as the main personality.
• Orbs, bokeh blobs, and glow blobs as background decoration.
• Glassmorphism without material logic.
• Random hardcoded shadows.

Typography

• Inter/Roboto/Open Sans as the whole personality for a greenfield visual identity.
• Hero-scale type inside compact cards or panels.
• Serif dashboard UI unless the product is explicitly editorial.
• More than three font families.
• Negative letter spacing.
• Font size scaled with viewport width.

Content

• Lorem ipsum in visible UI.
• "Elevate", "unleash", "frictionless", "next-gen", "transform your workflow" unless quoting source copy.
• Generic names like Jane Doe, Acme, SmartFlow, Nexus.
• Fake perfect numbers like 99.99%.
• Visible text explaining features, keyboard shortcuts, or how to use the app when the UI should make the action obvious.

Assets and Icons

• Generic SVG illustrations for branded/product pages when real or generated bitmap assets are needed.
• Random icon sets mixed together.
• Text labels inside rounded rectangles when a familiar icon would work better.
• Decorative assets that do not reveal the product, place, gameplay, object, or state.

Required States

Every interactive surface needs:

Agent surfaces also need running, waiting-for-approval, retrying, canceled, complete, and provenance states.

Proof Loop

For any serious UI task:

1. Read the local design system and selected taste skill.
2. Inspect existing UI before editing.
3. Patch the smallest useful surface.
4. Run the app.
5. Capture desktop and mobile screenshots.
6. Check text fit, overlap, blank states, asset loading, and interaction feedback.
7. Run the relevant doctor or design review for high-stakes surfaces.

Do not call a UI done from source code alone. Rendered pixels are the artifact.

Source-Driven Generation

When starting from references:

• Break references into parts: layout, type, color, motion, product shot, navigation, CTA.
• Convert the useful parts into tokens and component constraints.
• Generate assets when the subject needs visual specificity.
• For existing apps, use Frontend and Design Skills and targeted fixes; do not rewrite the whole stack to satisfy a screenshot.

Taste elicitation by reaction

When a stakeholder cannot describe a visual direction, produce three deliberately different moodboards plus a logo love/hate exercise. Review them with green for “feels right,” red for “feels wrong,” and amber for “interesting.” Promote the greens into a final board and discard the reds before encoding taste into tokens and banned patterns. Reactions to concrete divergence are more useful than an open-ended request to describe taste. Source: X/@pizzaboy 2079955131987345821, reviewed 2026-08-05

How This Connects

• Sigil: DESIGN.md, tokens, presets, components, CLI doctors.
• Dedalus: production-app restraint; variance lower than marketing pages.
• Taste skills: Frontend and Design Skills routes the archetype and modifiers.
• Doctors: Frontend and Design Skills audits rendered output; Web Design Guidelines checks interface principles.

Slop indicators

A designer's list of what marks UI as generated: tags, italicized words, Instrument Serif with negative kerning, over-detailed UI, dividers, many shades and opacities of one color, bordered containers, detailed diagrams, code breadcrumbs and numbered sections. Treat each as a question to answer, not a ban. Source: X/@ayushsoni_io, 2026-10-28

A sidebar cleanup shown as numbers: the demo counts distinct values in a generated sidebar (spacings, sizes, colors) and cuts each count down. Fewer distinct values is a measurable proxy for less slop. To stop agents adding the text in the first place, see Cut Gratuitous UI Text. Source: X/@MichaelFilipiuk, 2026-10-22, local video frame reviewed

A short talk-to-camera lesson on form spacing: group related fields tightly and separate groups clearly instead of guessing gaps per field. Source: X/@zander_supafast, 2026-10-29, local video frame reviewed

A designer's side-by-side of a generated screen and a refined one, with the point that the difference is hard to see until you have studied great products in detail. Generated work needs refining before it ships. Source: X/@oreo_design, 2026-08-31

Peter Yang's /human-review opens HTML and Markdown in a local visual editor where you edit text, resize images and leave Google-Doc-style comments for the agent, then send all feedback at once; the earlier /no-ai-slop removes 20+ writing patterns. Kevin's human-review skill covers the same review loop. Source: X/@petergyang, 2026-08-05

"AI slop can look tasteful": AI branding converged on serif type, nature photography and soft neutrals to seem humane, until everything looked the same. Once repeated, such patterns become what "thoughtful" is expected to look like. Source: X/@YifeiChen1121, 2026-08-04

Overused: "slop", "craft", "people with taste". Underused: "intentionality", "authenticity", "people with an eye". Source: X/@eve_bouff, 2026-07-21

A designer launching a studio argues the opposite of the designers quitting over AI: when AI standardizes output, differentiation in product, interface and art direction is worth more. Source: X/@Deconinck_co, 2026-07-21

Designs offered as the point where frontier models still fall short and only hand work in Figma gets there. Source: X/@1Aakib, 2026-07-16; Source: X/@1Aakib, 2026-07-17

hallmark, an anti-slop design skill for Claude Code, Cursor and Codex, trended with nearly 12k stars. Source: X/@trending_repos, 2026-07-17

---

Timeline

• 2026-08-05 | Added three-board reaction testing as the elicitation step before taste becomes tokens and constraints. Source: X/@pizzaboy 2079955131987345821

• 2026-07-01 | Design category refresh added this page to the Category router and quality gate family, linked it to Design System Map, and kept it standalone because Taste Enforcement - Anti-Slop Frontend Rules owns a distinct design decision surface in this family. private page

• 2026-06-18 | Rewrote around current product rules: no decorative blobs/orbs, stable dimensions, token constraints, proof loop, agent states, Sigil integration, and surface-specific variance defaults. private page

• 2026-05-04 | Page created from Taste Skill, Kevin's frontend prompt, and the initial taste enforcement rule set. Source: tasteskill.dev; raw/obsidian/What websites I like..md