Design

design: groundbreaking UX/UI, zero AI slop

Purpose: Produce interfaces that are designed, not generated: each with a point of view a generic model would not produce, held together by restraint. Use when: Any task that touches a UI/UX surface: a new screen, a component, a visual identity, an interaction pattern, frontend polish, or a redesign. Don't use when: The task is pure backend with no interface, or pure writing with no visual surface. In those cases the other specialists apply.

---

Why this matters

AI slop is the statistical median of every interface the model has seen. It is not bad design; it is the absence of design. It has no point of view, no specific choice, no specific rejection. It is what you get when a model averages a thousand Dribbble shots and a thousand SaaS landing pages: a purple-to-blue gradient hero, emoji section markers, everything centered, rounded-xl cards on everything, Inter for every word, a fade-in-up on scroll. Each of these is fine in isolation; together, unrejected, they are the generated look, and the generated look is the opposite of design.

Great design is the opposite move: one specific choice, plus the discipline to reject every other tempting default. A designer who makes one daring choice and holds restraint everywhere else produces work with a point of view. A model that makes zero daring choices and accepts every default produces slop. The difference is not talent; it is commitment and subtraction, the same principle that drives mythos and systems.

The core principle

Exactly one daring choice, held, wrapped in restraint. Generic is zero daring choices. Chaotic is many uncoordinated ones. Designed is exactly one, supported by discipline everywhere else.

The daring choice is the element a generic generator would not produce: an unexpected accent color, a signature type pairing, an unconventional layout grid, a bespoke interaction, a real point of view about hierarchy. You make it once, you hold it, and you spend your remaining budget on restraint: removing, not adding, until nothing else competes with the one choice.

---

The eight mechanisms

1. Reference-grounding requirement (the strongest anti-slop move)

Before producing any design, name 2-3 real, specific products, periods, or designers you are synthesizing, and state what you take from each. This is "steal like an artist" encoded as a mandatory step.

• Why it works: Anchoring to real taste in the training data beats inventing an aesthetic from the median. The model has seen Linear, Stripe, Things 3, Vercel, the Bauhaus, Swiss design; it can synthesize from them. What it cannot do well is invent a coherent aesthetic from nothing, which is what happens when you skip this step and it defaults to the median.
• Format: "Synthesizing: [product A] for [what I take], [product B] for [what I take], [product C] for [what I take]."
• Example: "Synthesizing: Linear for typographic confidence and dense information layout, early Stripe for spatial restraint and whitespace as luxury, Things 3 for tactile motion that conveys state change."

If you cannot name real references, you are about to produce slop. Stop and find them. Load references/lineage.md for a curated set of reference designs and what makes each distinctive.

2. The One Daring Choice test (falsifiable taste)

Every screen must contain exactly one element a generic generator would not produce. Self-audit before finishing:

Count of daring choices	Verdict
Zero	Slop. The screen is the median. Add one specific, committed choice.
One	Designed. Hold it; spend the rest of your budget on restraint.
Many	Noise. The choices fight each other. Pick the strongest, cut the rest.

The test is falsifiable: you can count the daring choices. "Does it have a point of view?" is a vibe. "Is there exactly one element a generator would not produce?" is a check. The check changes behavior; the vibe does not.

The daring choice can be any of: an unexpected accent color (not the default blue/purple), a signature type pairing (a display face with character), an unconventional layout grid (asymmetric, editorial, not the centered hero), a bespoke interaction (motion that conveys causality, not decoration), a real point of view about hierarchy (what is largest, what is loudest, what is quiet).

3. The Restraint Ledger (a fixed budget of bold moves)

You may spend a fixed number of bold moves per screen. Spend them deliberately; the count is enforced.

Screen complexity	Bold-move budget
Single component or card	1
Standard page (form, list, detail)	2
Full marketing or landing page	3

A "bold move" is any element that draws the eye: an accent color application, a large display type treatment, a signature interaction, an unconventional layout break, a strong contrast moment. The budget forces you to choose which moments matter and to make everything else quiet. Restraint IS the design; the budget makes restraint a decision, not a default.

When you hit the budget, every additional tempting move is a cut. "Could I add a gradient here?" -> you are at budget; the answer is no. "Could I animate this?" -> at budget; no, unless it replaces an existing bold move. The ledger turns "should I?" into "can I afford to?", which is how a real designer thinks.

4. Typography-first, with named faces

Ninety percent of "designed vs slop" is type. A real type system, not the untouched library default, is the single highest-leverage move in UI craft. Commit to:

• A display face with character. Not "a clean sans-serif"; a named face with a point of view. A contrasty serif (e.g. Tiempos, Fraunces, Newsreader), a distinctive grotesk (e.g. Söhne, Inter Tight at extreme weights, Geist), or a characterful display face for headings only.
• A legible body face. A workhorse that disappears at small sizes. This can be the same family as the display face at a different weight, or a complementary neutral.
• A deliberate scale. 4-5 sizes, not 12. Define them as custom properties. Each size has a job: display, heading, subheading, body, caption. No orphan sizes.
• Considered leading, tracking, and measure. Body line-height 1.4-1.6 for prose, tighter for headings. Negative tracking on large display type, neutral on body. Measure (line length) 45-75 characters for prose.

Ban "Inter for everything" and untouched component-library defaults. Name the actual typefaces in your plan. Load references/typography.md for real pairings, scale tables, and the reasoning behind each.

5. One screen to spread craft, then propagate

Do not generate a whole app's UI at median quality. Design one screen to a level of craft that would survive in a print magazine spread, then let the system's tokens (color, spacing, type, motion) propagate from it to every other screen.

• Why: Excellence is contagious within a system; so is genericness. If the seed screen is crafted, the system inherits its discipline. If the seed screen is slop, every derivative screen is slop.
• Which screen: the one the user sees first and most. For a dashboard, the main view. For a marketing site, the hero. For an app, the primary workflow screen.
• What "spread craft" means: define the color palette, type scale, spacing scale, radius scale, and motion tokens on that screen, as custom properties, and every other screen uses them. The craft is in the system, not redecorated per screen.

6. Motion as meaning, audited per instance

Animation only when it conveys state change, causality, or spatial continuity. Every animation must be justifiable in one phrase. Decorative motion on everything is a slop tell.

Motion is meaning when...	Motion is slop when...
It shows where an element came from (spatial continuity)	It fades in on scroll because it can
It shows cause and effect (tap -> thing appears from the tap point)	It slides up because "it looks nice"
It conveys a state change (loading -> done, collapsed -> expanded)	Everything has a stagger delay for no reason
It guides the eye to what changed	It animates on first paint of static content

Audit each animation: if you cannot state what it conveys in one phrase, cut it. Load references/motion.md for an intent-based motion catalog and what to cut.

7. Real content, real data, real copy

Lorem ipsum, "Feature 1 / Feature 2 / Feature 3", and stock placeholder copy are slop tells. The words on the screen are part of the design. Use:

• Real, specific content. If designing a pricing page, write real plan names with real prices and real feature lists that make sense. If designing a dashboard, use realistic data that tells a story.
• Evocative, concrete copy. "Ship code faster" is generic. "From commit to production in 90 seconds" is designed. The copy is where mythos and design meet: concrete, specific, dense.
• No placeholder images of diverse people pointing at laptops. Use real screenshots, real product imagery, or deliberately abstract visuals that match the point of view.

8. Hard anti-tells checklist (self-audited before finishing)

Before declaring a design done, check every item. Any present is a slop tell to cut or replace.

Anti-tell	Why it is slop	Fix
Purple-to-blue gradient hero	The single most generated look in existence	A solid color, a textured surface, or a real image with a point of view
Emoji as section markers	Decoration substituting for hierarchy	A real icon system or typographic hierarchy
Everything centered	Default alignment, no point of view about space	Asymmetric, editorial, or grid-based layout
rounded-xl on everything	One radius, no system	A radius scale (sharp for data, soft for surfaces, pill for actions)
Drop shadows as depth	Lazy depth, flattens at small sizes	Real elevation via layering, borders, or color contrast
Aurora/blur blobs as decoration	Generated texture, no meaning	A deliberate surface treatment or nothing
Glassmorphism over nothing	Frost over a blank background is a tell	Solid surfaces with real hierarchy
Untouched component library defaults	The library's point of view, not yours	Customize the tokens; make the system yours
Gradient text	Trendy, hard to read, generated	A real type treatment: weight, size, color
Inter for everything	The default sans; no character	A named display face for headings, a complementary body face
Fade-in-up on everything	Motion without meaning	Motion only where it conveys state or causality
"Trusted by" grayscale logo strip	Generated social proof	One real testimonial with a name and a number

Decision table: slop or designed?

Signal	Verdict
Zero elements a generator would not produce	Slop. Add one daring choice.
Every default accepted, nothing customized	Slop. Customize the tokens.
Inter (or one default sans) at every size	Slop. A real type system with a named display face.
Decoration without a justifying phrase	Slop. Cut or replace with meaning.
Lorem ipsum or "Feature 1 / Feature 2"	Slop. Real, specific content.
One daring choice, held, everything else quiet	Designed.
A named type system with a real scale	Designed.
Motion that conveys state, causality, or continuity	Designed.
Real, specific, evocative copy	Designed.
A radius scale, a spacing scale, a color system, not one-of-each	Designed.

Worked example

Task: design a pricing page for a developer tool.

Slop (what a generator produces by default): purple-to-blue gradient hero, "Simple, transparent pricing" centered, three rounded-xl cards with "Starter / Pro / Enterprise", Feature 1 through Feature 5 lists, Inter at every size, "Trusted by" grayscale logo strip below, fade-in-up on the cards, emoji checkmarks on features.

Designed (what this skill produces):

• References: Linear for typographic confidence and dense layout, Stripe for spatial restraint, Vercel for monospace-as-identity.
• One daring choice: pricing is a single-column comparison, not three cards. The "Pro" plan is the loudest row, not by gradient but by typographic weight and a single accent color (a specific warm orange, not blue).
• Type: display face is a contrasty grotesk (e.g. Inter Tight at 900 weight for the headline, tracking tightened); body is Inter at 400/500; prices in a monospace face (the developer-tool identity move). Four sizes total.
• Restraint ledger (budget 3 for a landing page): spent on (1) the accent color on the recommended plan, (2) the monospace prices as identity, (3) a single horizontal rule between plans instead of card boundaries. Everything else is quiet: white space, real borders, no gradients, no shadows, no rounded-xl.
• Motion: none on initial paint. The plan toggle (monthly/annual) animates the price number change, because that conveys the state change. That is the only animation.
• Copy: "From commit to production in 90 seconds" as the headline, not "Ship code faster." Plan features are specific: "10k requests/month", "GitHub OAuth", "audit log export", not "Advanced analytics" and "Priority support."
• Anti-tells audit: no gradient hero, no emoji, no centered-everything, no rounded-xl, no shadows, no blobs, no glassmorphism, no gradient text, no logo strip. All clear.

The designed version has a point of view: it is a developer tool that respects your attention, it leads with a specific claim, and it spends its bold moves on identity (monospace prices, accent color, the single-rule comparison) rather than decoration.

Common failure modes

Failure	Fix
No named references before designing	Stop; find 2-3 real products to synthesize from.
Zero daring choices	Add one specific, committed element.
Many competing daring choices	Pick the strongest; cut the rest to restraint.
Inter at every size, untouched defaults	A named display face, a real scale, customized tokens.
Animation on everything	Audit each; keep only meaning-conveying motion.
Lorem ipsum or generic feature lists	Real, specific, evocative content.
Every anti-tell present and unchallenged	Run the checklist; cut or replace each.
Decorating to fill space	Restraint is the design; let space be space.

Red flags: stop and redesign

• You are about to use a purple-to-blue gradient. Stop; choose a real color.
• You cannot name your 2-3 references. Stop; find them before continuing.
• Your screen has zero elements a generator would not produce. Stop; add the daring choice.
• Your screen has five bold moves and they fight each other. Stop; pick one, quiet the rest.
• You are animating something and cannot say what it conveys. Stop; cut it.
• You are about to write "Feature 1" or lorem ipsum. Stop; write real content.

Definition of done for this skill

• 2-3 real references named, with what each contributes.
• Exactly one daring choice, identified and held.
• Restraint ledger spent within budget; nothing competing with the one choice.
• A named type system with a real scale (not Inter-for-everything).
• One screen designed to spread-craft level; system tokens defined on it.
• Every animation justifiable in one phrase, or cut.
• Real, specific, evocative content; no lorem, no "Feature 1".
• Anti-tells checklist run; every item cut or replaced.
• The design has a point of view a generator would not produce.

See also

• craft, the orchestrator that routes to this skill.
• mythos, whose density rules apply to all UI copy produced here.
• The build plugin's references/frontend.md, for platform features and framework mechanics (this skill handles taste and point of view; that one handles mechanism).