Aesthetic Direction
Shared calibration layer for both tracks; make UI look human-designed, not AI-default.
AI slop signals
AI slop is plausible defaults compounding without a shared reason, not one forbidden motif. Any item below can be the right call when it serves the product, audience, hierarchy, or state, and one of them is usually a choice. Three or more on one surface with no such reason is the threshold: that reads as assembled rather than designed, and is what a refinement pass exists to remove.
Two bullets are absolute regardless of count, because they misinform rather than merely underwhelm: invented proof, and product framing that shows something the product does not do, including settings or modes the brief never stated.
- A fashionable font chosen for category signalling rather than the product's tone, including decorative monospace on developer tools.
- Purple, cyan, or sunset gradients, glow, blur, glass, grids, and noise used as atmosphere without a content or brand role.
- Repeated card grids, pill clusters, oversized numerals, numbered rails, giant wordmarks, and symmetric sections that flatten the real priority.
- Fake browser chrome, fabricated dashboards, empty split panels, generic device frames, and invented logo strips, testimonials, or statistics standing in for authentic product proof. Real, checkable proof is not this bullet.
- Decoration stacked on controls and content that still use unowned default shape, weight, hierarchy, and states.
- An eyebrow label above more than two section headings on one page. Keep the one that says what its heading cannot.
01,02,03on cards or steps that have no real order.- A north-east arrow (↗) on a link or button that stays on the site; the glyph means "leaves".
- Headings stacked from two-to-four-word fragments ("Same file. Different flights. Both edits kept.") or stock lines any brand could print ("Stay in sync. Keep it simple."). Write one sentence about this product.
- The brief's few facts restated as hero, feature cards, stats, and FAQ to fill the template. Say each fact once and cut the sections that have nothing new.
- Settings, modes, roles, integrations, app navigation, or competitor claims the brief never stated. This is product framing that shows something the product does not do, so it is absolute.
- Not a signal but a bug:
href="#", a "Start free trial" that scrolls to an anchor, or an anchor with no matchingid. Link the real route, or leave the CTA out and say the route is missing.
Philosophy
- Delete aggressively; clarity over decoration.
- Don't compete for attention you haven't earned.
- Structure should be felt, not seen.
- Prune extra icons, controls, and separators before styling what remains.
- Restraint plus hierarchy beats noise.
- Treat visual design as functional UX, not veneer: hierarchy, rhythm, contrast, alignment, and motion decide whether the task feels clear, fast, and reliable.
- A design system is an ingredient, not proof of quality. Compose its parts into a coherent experience and adjust the relationships when the default component stack feels generic or cluttered.
- Type, colour, radius, and interface language must agree on one personality for the product and audience. Four individually attractive choices can still make a collage.
- Reuse the project's token scales. A size, gap, radius, weight, colour, or elevation that cannot be traced to a scale is drift unless the exception has a concrete optical or functional reason.
- Upgrade the elements already required before adding another one. Own the button, field, link, and content hierarchy before reaching for a badge, icon tile, panel, or decorative layer.
- Every visible choice should have a reason: spacing, size, color, radius, shadow, alignment, and empty space. If a random point on the screen cannot be explained, simplify it or align it to a rule.
Study references
- Study the annotated "Reference calibration" list in SKILL.md (Linear, Raycast, Things 3, OpenAI, ElevenLabs, Mintlify, Family, Zed) for what each is calibration for.
Upgrade choices
- Icon sets: use the project's existing library. When none exists, pick one of Phosphor, Heroicons, or Tabler and use it exclusively; mixing sets is a slop tell.
- Typography: start with the project's existing type system. Use Typewolf, Fonts In Use, or commercial foundries when exploring a new direction.
- Animation study: animations.dev, devouringdetails.com.
Polish details
- Match box-shadows to references.
- If a two-stop gradient should read as one surface, keep its hues close, roughly within 30 degrees. First prove the gradient has a job.
- Dark-mode aware SVG favicon.
- Intentional hover/active and loading/error/empty states.
Reject these failures
- Generic SaaS card grid as the first impression.
- Beautiful image with weak brand presence.
- Strong headline with no clear action.
- Busy imagery behind text.
- Sections that repeat the same mood statement.
- Carousel with no narrative purpose.
- App UI made of stacked cards instead of layout.