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.

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; Frontend and Design Skills checks interface principles.

---

Timeline

• 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. Source: User request, 2026-07-01
• 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. Source: User request, 2026-06-18
• 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