Taste & Premium Design — A Designer's Guide to Escaping AI Slop

17 min read

Taste & Premium Design

Executive Summary

This guide is for a designer whose AI-assisted output looks bloated and generic rather than premium — and whose product and website therefore underperform on conversion and price perception. Across five practitioner videos, one thesis repeats: AI does not produce premium design by default, but it can be directed to. The gap between “AI slop” and a $10,000-quality build is not a model problem; it is a taste, direction, and iteration problem that you, the human, own.

What you gain from this guide:

  • A precise vocabulary for the patterns that make AI output scream “generated” — purple gradients, soft shadows, overused fonts, rainbow palettes, scroll-reveal-on-everything — so you can ban them systematically rather than vaguely “make it better” [MT 3:42, AL 1:35, MT-10k 20:30].
  • A concrete toolkit of installable skills (front-end design, UI/UX Pro Max, Taste with its dials, Impeccable, shadcn, 21st.dev) that force the model to commit to a real aesthetic direction before it writes a line of code [MT, AL, GW-taste, MT-10k, CPW].
  • A polish and iteration loop — intent-led batch fixes, one restrained cursor interaction per section, push-back-until-subtle — that turns a generic first draft into something that feels expensive, not just looks it [MT-10k 16:48, 17:55, 19:12].
  • The discipline of restraint as the premium signal: muted color, restrained copy, dedicated mobile passes, and architectural pushback [MT-10k 10:03, 20:06, AL 2:46].

The non-bloated, expensive-looking product our SaaS needs is an achievable output of this loop — not a talent you either have or don’t.

Why AI Output Looks Generic (The Slop Problem)

Every video opens with the same diagnosis: the model’s defaults are the problem, not its capability. AI-generated sites all drift toward the same safe, generic choices because the model learned from a dataset saturated with the same patterns, so on any design decision it reaches for the most common one — “no matter what the project actually is” [AL 0:55, 1:07]. The result is instantly recognizable and instantly cheap-looking.

The slop signature is consistent across all five sources:

  • Purple gradients, white backgrounds, soft shadows, improper vertical card alignment, and emojis — “nothing about this screams creative, it just screams AI-generated” [MT 3:42].
  • Overused font families (Inter is called out by name: “so overused on AI generated sites it instantly screams ‘AI made this’” [MT-10k 20:36]) and clichéd color schemes [MT 3:09, AL 1:35].
  • The single scroll-reveal animation — “basically the only move it knows… the same animation on half the AI-built sites out there” — and it is janky because the model moves elements by changing size/position, forcing the browser to rebuild the page every frame [AL 8:11, 8:18].
  • Rainbow color palettes and over-adjectived copy that over-explains — the opposite of the restraint that signals quality [MT-10k 10:03, 20:11].
  • Bloated, cluttered layouts where information is not grouped or prioritized — the dashboard-specific version of slop, where the problem is “how much fits before it clutters” [AL 5:00].

The deeper cause: models optimize to be “correct,” not to have a point of view [AL 1:49]. Without a skill or a strong brief forcing a commitment, the model produces the safest average of its training data. Skills work because they encode judgment about what “good design” looks and feels like — “once Claude knows how a real web designer thinks and works, the output stops feeling like AI and starts feeling produced by an actual expert web designer” [MT 22:50]. Skipping the skill-install step is “exactly what produces generic, boring AI websites” [CPW 4:46].

Cultivating Taste (design direction & inspiration)

Taste is not a fixed trait you either have or lack — it is a direction you force and a reference you bring. Several videos reframe taste as a set of concrete, learnable moves:

1. Force a direction before code is written. The Anthropic front-end design skill’s core job is to make the model “pick a direction and stay consistent with it” instead of defaulting to the safe common look [AL 1:28]. Taste-preset skills let you pick a single aesthetic — minimalist, industrial brutalist, premium/luxury fashion — and commit to it; stack them and you get mush [AL 9:33]. The Taste skill goes further with eight named variants (soft-expensive, brutalist, minimalist Notion/Linear) so you direct the agent “like an art director rather than re-prompting over and over” [GW-taste 0:47].

2. Show, don’t describe — until you can describe. If you don’t yet speak design language, gather 3–5 screenshots of sites you like from Dribbble, Awwwards, or Pinterest and feed them to Claude [MT-10k 06:26, CPW 7:50]. Pasting a reference screenshot “gives Claude a good starting place instead of building blindly” [CPW 7:30]. The act of curating references also refines your own taste before you commit [MT-10k 06:26].

3. Reverse-engineer a design you admire. The Extract Design System skill scrapes any public site and emits real starter tokens.json/tokens.css — color, typography, spacing, corner radii, shadows — in about 30 seconds [GW-taste 6:24]. The principle is “mold, don’t copy”: take your favorite aspects of a reference and rebuild your page around those guidelines rather than cloning [GW-taste 7:49].

4. Explore variations fast — that is AI’s design superpower. Wooldridge’s “favorite part about AI-powered UI design is exploring tons of different variations and iterations super fast” [GW-taste 6:07]. The visual-density dial alone can take the same content from a breathable light layout to a tight, monospace, zero-gap brutalist pricing section — “a complete 180 as far as the design” [GW-taste 4:17, 4:23]. Use this speed to find the direction, then commit.

5. Restraint is the premium signal. A muted set of hex values signals quality; “six dishes, one fire” signals quality; adjectives and rainbow palettes signal cheap [MT-10k 10:03, 20:11]. Taste shows up as what you remove, not what you add.

Design Skills That Force Premium Direction

Skills are saved markdown instruction sets the model reads before doing any work — “the equivalent of giving Claude a job description before assigning a task” [MT 0:32]. You don’t need twenty; the core set below covers ~90% of a real design project [MT 16:12].

Front-end design (Anthropic) — The foundation skill, referenced or used in all five videos. It explicitly forbids “generic AI-generated aesthetics like overused font families, clichéd color schemes” [MT 3:02, AL 1:35]. It forces the model to commit to a real design direction and stay consistent, rather than drifting to defaults [AL 1:18]. Customize its .md file to lock your preferences (e.g., “I only ever want sans-serif — Geist, Google Sans, DM Sans”) or delete keywords you never want (e.g., remove “glassmorphism”) [MT 5:35, 13:56]. Best for landing pages and portfolios where design is the product; does NOT work well for functional UI [AL 2:46].

UI/UX Pro Max — The most-used community skill across the set [MT 11:16, AL 6:01, MT-10k 04:25, CPW 6:12]. It runs an actual engine before writing code: five parallel searches across an open-source GitHub database, pulling styles from 161 industry categories, then picks a color palette, font pairing, and layout suited to the industry [AL 6:01]. Ships 57 UI styles, 95 color palettes, 56 font pairings [MT-10k 04:25]. “It doesn’t just tell Claude what to do, it tells Claude to think about what to do, which ultimately gets you a much more intentional-looking result” [MT 11:22]. Install globally via the exact phrasing “Install this plugin using NPM” [MT-10k 04:25, CPW 6:43]. Be specific with content so it can “enhance that direction” rather than invent everything [MT 11:38].

Taste skill (community, 13 sub-skills) — Griffin’s answer to the Anthropic skill. Eight aesthetic variants plus three numeric dials (1–10): design variants, motion intensity, visual density [GW-taste 0:47]. Leave dials unset and it auto-chooses (e.g., variants 7, motion 6, density 4) producing a “well-spaced, breathable light landing page… miles ahead” of skill-free Claude and “fresher than most AI-generated dark mode” [GW-taste 2:54]. Crank visual density to 8 for a tight brutalist layout; keep it low for breathable [GW-taste 4:42]. It also teaches Claude to import icon libraries and use real company logos (Vercel, Stripe, Loom, Figma) in social-proof sections — “a subtle but essential landing-page capability” [GW-taste 3:24]. Mostly applicable to landing pages, though principles transfer [GW-taste 2:12]. A stricter “GPT Taste” variant exists for stronger anti-slop checks [GW-taste 4:23].

Impeccable — One main slash command plus 22 subcommands: animate (add animations), colorize (intelligent color), quieter (reduce AI-loudness), audit (five-dimension technical/accessibility check ranked by severity), document (generate a design.md capturing your full design system for any agent to read) [MT 6:10, 6:44, 6:56, 7:05]. The quieter command audits for gradient text, heavy font weights, emojis, ranks severity, and explains its fix plan before executing [MT 8:17]. Its “slop tab” teaches you which patterns scream AI so you can avoid them in manual work too [MT 9:30].

shadcn + MCP — For functional/product UI (dashboards, tools people actually use), where the problem shifts from “make it look good” to “make components behave properly” [AL 2:46]. Pull pre-built, professional-grade components from the registry instead of generating from scratch — “you’re starting from parts that were already built to ship” [AL 3:52]. The skill (rulebook, loads only when needed) + MCP (live registry connection) together give clean output the first time [AL 4:01, 4:37]. Add a separate “dashboard” skill for information arrangement — grouping data and controlling on-screen density so it “feels like a real analytics tool instead of being cluttered” [AL 5:18].

21st.dev — A free library of pre-made components, animations, and scroll effects built by real developers. Two uses: browse for inspiration, or copy a prompt that tells Claude exactly how to recreate a specific element in your project [MT-10k 13:08].

GSAP skill — From the GSAP team itself; teaches correct motion patterns (basic movement to scroll-driven storytelling) and steers toward browser-friendly performance so animations stay smooth instead of janky [AL 8:29]. Wire it into your marketing skill so animations always route through GSAP [AL 9:21].

Extract Design System — CLI-bundled skill that scrapes any public URL into real starter design tokens (tokens.json/tokens.css) [GW-taste 6:24]. High-level only — captures typefaces, colors, corner radii, shadows; will NOT extract graphics or animations [GW-taste 8:47].

Higgs Field / See Dance — Pipes image and video generation into the agent so you can ask for a hero image or background clip from the terminal instead of the model grabbing mismatched stock images or gray placeholder boxes [AL 10:47, 11:05, CPW 2:07].

Superpowers (200K+ GitHub stars) — Not a pretty-UI skill but a methodology that forces brainstorming → spec → plan → piece-by-piece execution with self-review. It is the fix for “watching your agent confidently build the wrong thing” [GW-taste 9:21, 9:59]. The planning phase “is a forcing function that catches misalignment before it’s baked into a hundred files” [GW-taste 11:43]. Use it for anything bigger than a one-screen UI [GW-taste 12:01].

The Polish & Iteration Loop

A premium build is not a single prompt — it is a loop. The $10k-build video is structured entirely around this loop, and the others reinforce its individual moves.

1. Grade against a checklist before polishing. Paste a premium-website checklist into Claude and ask “Where does this site land against each of these criteria? Be honest.” It returns strong/mixed/missing per item, so you know exactly what is left [MT-10k 15:56]. The $10k checklist’s eight attributes group into three buckets — taste, substance, and felt quality: point of view, typography, color, hierarchy, imagery, motion, mobile, and “the invisible stuff that makes a site feel fast and finished” [MT-10k 01:04].

2. Ask for a batch of fixes led by intent, not specifics. Don’t ask Claude to fix weak items one at a time. Lead with how you want it to feel: “We need more handcrafted micro interactions. The lower sections feel a bit generic. We don’t need to make them busier, just more expensive.” Claude translates that intent into a cohesive batch — film grain, animated hairlines, glowing ember effects, word-by-word headline reveals — and ships it all at once. Fewer tokens, less back-and-forth, more cohesive result [MT-10k 16:48, 16:58]. “Claude is better at translating intent into specifics than most people are at writing specifications” [MT-10k 17:18].

3. Do the polish pass most people skip. Once the batch lands, scroll the site section-by-section and find what still feels flat. Drive one specific motion or cursor interaction per section — all restrained and subtle. “Claude won’t catch them because Claude can’t feel your site the way you can. This pass, you have to drive yourself” [MT-10k 17:55]. Examples: embers that move like fire reacting to the cursor (parallax), a soft candlelight halo following the cursor as you read [MT-10k 17:55].

4. Push back until subtle. The halo’s first attempt was too obvious, so the creator said “Make it more subtle, more refined” — Claude added trailing/lag motion. The pattern: review every section, add one cursor interaction per section, and tell Claude to make it more subtle “until the section feels alive without being noisy and obnoxious” [MT-10k 19:12]. “That layer is the difference between a site that looks expensive and one that feels expensive as visitors navigate the pages” [MT-10k 19:28].

5. Keep pushing when something breaks. When the first hero attempt failed (video not scrolling), the creator explained what went wrong and what was expected; Claude found and fixed two bugs, then actually opened the page in the browser, inspected it live, and found the real problem. “The lesson here is to keep pushing when something breaks. Just explain what went wrong and what you were expecting” [MT-10k 14:51, 15:17].

6. Use visual annotation tools for surgical edits. Use the draw/select annotation tools to click a section and type a change directly — e.g., replacing three cropped images with one full-width crew photo [CPW 18:35]. This avoids the imprecision of describing layout fixes in prose.

7. Respect Claude’s architectural pushback. When Claude pushed back on adding React to a simple static site, the creator trusted it — “Claude protects the architecture you set up. It doesn’t break things just because you asked” [MT-10k 14:08, 14:39]. This matters for our SaaS: don’t force complexity (a bloated SPA) where a single-file static build is the right call, and vice versa.

8. Iterate on the hero until it feels right. Additional passes for text readability against bright backgrounds, content reveals on scroll — “you can keep iterating until your hero feels right” [MT-10k 15:34]. The hero carries disproportionate weight in perceived quality.

9. Demand a dedicated mobile pass. Responsive ≠ designed for phones. Ask Claude what should be hidden on small screens, what should be tighter, what should resize — nav collapses, wordmark tightens, buttons get smaller variants [MT-10k 20:52]. “Mobile isn’t a smaller web. It’s its own thing with its own rules” [AL 11:31].

10. Swap out the overused fonts. If you see Inter in the output, ask Claude to swap it — for the $10k build it moved to Geist [MT-10k 20:30]. Small change, real difference in perceived originality.

Actionable Checklist for Our Designer

  1. Install the two core skills globally before any build: Anthropic’s front-end design (customized to ban our known slop patterns) and UI/UX Pro Max via “Install this plugin using NPM” [MT 3:02, MT-10k 04:25, CPW 5:39, 6:43]. Restart Claude after install [CPW 7:13].
  2. Customize the front-end design .md: lock our preferred fonts (Geist over Inter), delete “glassmorphism” and any keywords we never want, and add our brand restraint rules [MT 5:35, 13:56].
  3. For each project, end the brief with “Ask me clarifying questions” and answer thoroughly — “the most important moment in the entire build. The answers you give here become the entire site” [MT-10k 08:50, CPW 10:11].
  4. Gather 3–5 reference screenshots from Dribbble/Awwwards before prompting so you give Claude a direction instead of letting it default [MT-10k 06:26, CPW 7:50].
  5. For landing/marketing pages, pick ONE taste-preset or Taste variant and commit — soft-expensive, minimalist, or brutalist — never stack them [AL 9:33, GW-taste 0:47].
  6. Set the Taste dials explicitly when you want a specific density — low (~4) for breathable premium, high (~8) for dense — rather than accepting the auto-choice [GW-taste 4:42].
  7. For dashboards/product UI, switch to shadcn + the dashboard skill — pull pre-built components, reason through data grouping and density first [AL 2:46, 5:18, 6:01].
  8. Route all animations through the GSAP skill to escape the single scroll-reveal that marks AI output [AL 8:29, 9:21].
  9. Generate hero/visual assets with Higgs Field or an aggregator rather than letting Claude drop gray placeholder boxes or mismatched stock [AL 10:47, MT-10k 11:46].
  10. Grade the first draft against the 8-point premium checklist (point of view, typography, color, hierarchy, imagery, motion, mobile, invisible stuff) — ask Claude to score honestly [MT-10k 01:04, 15:56].
  11. Ask for a batch of fixes led by intent, not specifics — “the lower sections feel generic, make them more expensive, not busier” [MT-10k 16:48].
  12. Do the human-driven polish pass: scroll section-by-section, add one restrained cursor interaction per flat section [MT-10k 17:55].
  13. Push back on every interaction until subtle — “make it more refined” — until it feels alive without being noisy [MT-10k 19:12].
  14. Run Impeccable’s quieter command to audit and rank AI-loudness (gradient text, heavy weights, emojis) and let it explain its fix plan before executing [MT 8:17].
  15. Swap Inter for Geist (or another less-exposed font) the moment you see it in output [MT-10k 20:30].
  16. Demand a dedicated mobile pass — what hides, what tightens, what resizes [MT-10k 20:52].
  17. For anything bigger than one screen, run Superpowers — brainstorm → spec → plan → piece-by-piece with self-review, so what ships matches what you asked for [GW-taste 9:21, 12:01].
  18. Extract Design System from a premium competitor or reference site and rebuild our page around those tokens — mold, don’t copy [GW-taste 6:24, 7:49].
  19. Use draw/select annotation tools for surgical visual edits instead of describing layout fixes in prose [CPW 18:35].
  20. Respect Claude’s architectural pushback — don’t force a bloated framework where a single-file static build is right, and vice versa [MT-10k 14:08].

Contradictions / Caveats

  • The front-end design skill is for marketing/landing UI, not functional UI. AI Labs is explicit that it “does NOT work well with functional UI” — for dashboards and tools people actually use, switch to shadcn + the dashboard skill [AL 2:46]. Using the wrong skill for the wrong surface is a common failure mode.
  • Taste is “mostly applicable to landing pages.” Wooldridge caveats it directly, though he notes principles transfer to product UI [GW-taste 2:12]. Don’t expect the eight variants to carry a complex SaaS dashboard.
  • Extract Design System is high-level only. It captures typefaces, colors, corner radii, shadows — but NOT graphics or animations; those need other skills [GW-taste 8:47]. It also only works on public sites and produces starter tokens, not a pixel-perfect clone [GW-taste 6:24].
  • Superpowers is slower, not faster. “The payoff isn’t speed (it’s actually slower than letting Claude run loose); it’s that what ships matches what you asked for” [GW-taste 11:43]. Use it for big builds, not one-screen tweaks, or it is overhead for no gain.
  • Skills ship with defaults you are not locked into — but you must edit them. “Just because a skill comes with a bunch of preset instructions, doesn’t mean you’re locked into them” [MT 6:03]. If you install and never customize, you get the skill author’s taste, not ours.
  • The polish pass cannot be delegated to the AI. “Claude won’t catch them because Claude can’t feel your site the way you can. This pass, you have to drive yourself” [MT-10k 17:55]. If our designer stops after the first draft or the batch fix and ships, the output will never feel premium — the felt-quality layer is irreducibly human.
  • One prompt can produce an impressive first draft — and that is the trap. Both Metics and CreateaProWebsite note a genuinely impressive single-pass result [MT-10k 15:55, CPW 15:53]. The trap is treating that as done; the premium gap is entirely in the iteration that follows.
  • Taste-preset skills should be used one at a time, not stacked [AL 9:33]. Stacking produces aesthetic mush — the opposite of a committed direction.
  • Skills encode judgment but do not replace specificity. “You don’t just need to know which skills are going to be helpful… You also need to understand how to use them by communicating to Claude exactly what you want” [MT 12:43]. A great skill with a vague brief still yields generic output.

Graph View

Backlinks