07_GriffinWooldridge_Taste_Skill_Part3

9 min read

Overview

The third video in Griffin Wooldridge’s Claude Skills for Designers series covers three installable skills that take Claude Code from a “basic UI generator” into something closer to a design-to-production pipeline. Taste (the community’s answer to Anthropic’s front-end design skill) ships eight aesthetic variants plus three numeric “dials” — design variants, motion intensity, and visual density — so you direct the agent like an art director instead of re-prompting repeatedly. Extract Design System bundles a small CLI that scrapes any public website and emits real starter design tokens (tokens.json / tokens.css). Superpowers (200,000+ GitHub stars) is a full software-building methodology that forces a brainstorming → spec → plan → piece-by-piece execution cycle with self-review, fixing the “agent confidently built the wrong thing” problem. All three are one-line-installable and agent-agnostic (Claude chat, Claude Code, Cursor, Codex). Note: Taste is described as “mostly applicable to landing pages,” though its principles transfer to product UI.

Key Insights

  1. Taste solves AI design sloppiness with eight aesthetic variants + three dials instead of one skill file. Instead of banning clichéd patterns (like the “enter and purple gradients” Anthropic skill does), Taste provides eight distinct look variants — including a soft-expensive look, a brutalist look, and a minimalist Notion/Linear style — plus three dials you set 1–10: design variants, motion intensity, and visual density. You direct the output like an art director rather than re-prompting over and over. (0:47)

  2. The Taste skill package installs 13 sub-skills in one line. Copy-pasting a single command into Claude Code installed 13 skills: eight UI-generation style variants, plus brand kit (brand identity/kit generation), image-to-code, enforcing complete code output, and more. All become accessible as slash commands. (1:31)

  3. Unset dials are auto-chosen for you — and that’s a feature. When Wooldridge ran his first prompt without setting the dials, Taste chose them automatically (design variants 7, motion 6, visual density 4). The result — a well-spaced, breathable light landing page — was “miles ahead” of what Claude produces skill-free, and notably fresher than “most AI-generated dark mode.” (2:54)

  4. Taste teaches human-crafted motion and UI graphics that Claude normally struggles with. Every element, including the bars in a graph, got fade-in animations from a single prompt. Taste also teaches Claude to import an icon library and to use real company logos (Vercel, Stripe, Loom, Figma) in social-proof sections — a subtle but essential landing-page capability. (3:24)

  5. Cranking the visual-density dial produces dramatically different layouts without looking cramped. Re-running with the stricter GPT Taste skill and visual density set to 8, the same content took a monospace-font KPI header, a fully tight (zero-gap) hero→KPI→logo layout, stacked-instead-of-grid sections, a scroll-based text color-change touch, a tabular brutalist pricing section, and a bold final CTA. Same content, complete 180 in visual direction. (4:23)

  6. AI-powered UI design’s superpower is exploring many variations fast. Wooldridge’s favorite part is iterating through drastically different design directions quickly — possible only when Claude Code is paired with skills that teach it to design well. (6:05)

  7. Extract Design System turns any public site into real starter design tokens. Point it at any public URL and it analyzes color, typography, spacing, corner radii, and shadows, then generates a tokens.json and tokens.css you can drop into any project — a 30-second reverse-engineering starting point. Honest caveat: starter tokens, not a pixel-perfect clone, and it only works on public sites. (6:24)

  8. Rebuild around a design you already like instead of starting from scratch. Feeding the extracted system back, Claude adapted the same CRM landing page to follow the reference site’s styling — same content, cards, and logos, just restyled. The principle: don’t copy a site, take your favorite aspects and mold your work around those design guidelines. (7:49)

  9. Extract Design System is high-level only. It captures foundational aspects — typefaces, most common colors, corner radii, shadow styling. It will NOT extract graphics or animations; those need other skills. (8:47)

  10. Superpowers is a methodology, not a pretty-UI skill — and that’s what designers need for big builds. With 200K+ GitHub stars, it stops the agent from jumping straight into code. It runs a brainstorming interview first, writes a spec shown in readable chunks, builds a plan, then executes piece-by-piece with self-review — able to run for hours without drifting off plan. It’s the fix for watching your agent “confidently build the wrong thing.” (9:21)

  11. Superpowers’ planning is a forcing function that catches misalignment before it’s baked into a hundred files. The payoff isn’t speed (it’s actually slower than letting Claude run loose); it’s that what ships matches what you asked for. The plan breaks work into 2–5-minute tasks with specific file paths, what the code must do, and how to verify it — essentially instructions written for an agent that forgets between tasks. (10:49)

  12. The practical use of Superpowers for designers: anything bigger than a one-screen UI. Features, internal tools, or handing off a prompt and walking away for a while — this is the workflow that keeps the agent on track. (12:01)

Actionable Techniques

  1. Install the Taste skill with a one-line command into Claude Code (or Cursor/Codex — it’s agent-agnostic), which brings in 13 sub-skills including eight UI style variants, brand kit, image-to-code, and complete-code-output enforcement. (1:31)

  2. Drive output with the three dials (1–10) instead of re-prompting: design variants, motion intensity, visual density. Leave them unset to let the skill auto-choose, or set them explicitly to force a direction. (0:47)

  3. Use the visual-density dial to control information density. To pack more elements into one view (e.g., a dense brutalist landing page), crank it to ~8; for a breathable, well-spaced layout, keep it low (~4). (4:42)

  4. Try the stricter “GPT Taste” variant for stronger motion direction and tighter anti-slop checks — note that design-variant and motion dials are redundant there, so only the visual-density dial applies. (4:23)

  5. Pair Taste with Sonnet-class models to isolate skill impact. Wooldridge stayed on Sonnet 4.6 rather than Opus 4.8 to demonstrate that the skill itself drives the quality, not raw model power. (2:28)

  6. Use Taste for landing pages primarily (its sweet spot), and transfer the same design principles to product UI as needed. (2:12)

  7. Run the Extract Design System skill on any public site you admire (a competitor, a site you love, or your own live app) to get color, typography, spacing, corner-radius, and shadow values as real starter tokens.json/tokens.css. (6:24)

  8. Mold, don’t copy: feed the extracted system back and have Claude rebuild your page/UI around those design guidelines — take your favorite aspects of a reference rather than cloning it. (7:49)

  9. Use other skills for graphics and animations, since Extract Design System deliberately does not extract those. (9:07)

  10. Install Superpowers for anything bigger than one screen — full features, internal tools, or hands-off agent runs — so the agent interviews you, specs in chunks, plans, and self-reviews instead of typing code immediately. (9:21)

  11. Answer the brainstorming questions thoughtfully rather than rushing to code — the vague-prompt instinct produces a generic dashboard that fits nothing. These questions “carry a lot of work.” (10:21)

  12. Actually read and push back on the spec during the chunked review (e.g., “no historical view, keep it simple”) — it adjusts before any code is written. (10:52)

Tools & Skills Mentioned

  • Taste (community skill) — 8 aesthetic variants (soft-expensive, brutalist, minimalist Notion/Linear, etc.) + 3 dials (design variants, motion intensity, visual density); installs 13 sub-skills including brand kit, image-to-code, complete-code-output; has a V2 experimental design-taste-front-end variant and a stricter “GPT taste” variant
  • Extract Design System — CLI-bundled skill; scrapes any public website → real starter tokens.json + tokens.css (color, typography, spacing, border radius, shadows)
  • Superpowers — 200K+ GitHub star methodology/framework; forces brainstorming → spec → plan → piece-by-piece execution with self-review; runs unattended for hours without drifting
  • Anthropic’s front-end design skill (referenced as the origin of the “no clichéd AI design” idea that Taste extends)
  • Claude Code / Claude chat / Cursor / Codex — agent-agnostic install targets (skills work in all)
  • Sonnet 4.6 / Opus 4.8 — model choice; Sonnet used to isolate skill impact
  • Brand kit — sub-skill for brand identity/kit generation
  • Image to code — sub-skill
  • Complete code output — sub-skill enforcing full code output
  • Company logos (Vercel, Stripe, Loom, Figma, Slack) and icon libraries used by Taste in social-proof sections

Quotes Worth Keeping

  • “Instead of a single skill file, you get eight different variants… You’re directing the AI agent kind of like an art director rather than re-prompting over and over again to get the look that you want.” (0:47)
  • “It’s honestly a really refreshing take compared to most of the AI-generated dark mode we see nowadays. And just from one prompt, this is really, really impressive.” (3:18)
  • “Claude on its own often struggles with generating UI-based graphics like this. And a skill like Taste teaches Claude how to create graphics that look human-crafted like this.” (3:36)
  • “We can do a complete 180 as far as the design of your website or product.” (4:17)
  • “One of my favorite parts about AI-powered UI design is exploring tons of different variations and iterations super fast.” (6:07)
  • “You’re going to be best off if you find the design that you already like, and then not copy it, but take your favorite aspects of it, and mold your landing page or product UI around those design guidelines.” (8:35)
  • “If you’ve ever watched your agent confidently build the wrong thing, this is the fix.” (9:59)
  • “These questions are carrying a lot of work because if I had just let it run with my vague prompt, I would have gotten a generic dashboard that doesn’t actually fit what I need.” (10:36)
  • “The payoff is that what it ships actually matches what you asked for… The planning phase is kind of a forcing function that catches misalignment before it’s baked into a hundred files.” (11:43)
  • “The set of skills takes Claude Code from being a basic UI generator to something that feels like a real design-to-production pipeline.” (12:14)

Graph View

Backlinks