Call Taste Skill
/design-taste-frontendCommand to select visual style and adjust parameters in Claude Code.
Vibe-designGriffin Wooldridge
Advanced Claude Skills for Designers (Part 3)
Learn how to turn Claude from a basic code generator into a full design-to-production pipeline using Taste, Extract Design System, and the Superpowers framework.
Short summary
Overview of the Taste skill for controlling UI aesthetics through 8 styles and 3 adjustable dials.
A method for automatically extracting design tokens (colors, fonts, spacing) from any public website.
Using the Superpowers framework for deep planning and code reviews before starting generation.
Building a professional design-to-production workflow within Claude Code or Cursor.
What to take
The Taste skill allows you to act as an art director by setting visual density and motion intensity.
Extract Design System saves time on competitor analysis by generating ready-to-use JSON and CSS tokens in 30 seconds.
The Superpowers framework solves architectural 'hallucination' issues by forcing the AI to write specs and plans first.
Using skills makes AI generation less formulaic and more human-centered.
Commands and settings
Extract Design System
/extract-design-system [URL]Extracts style tokens from the specified public website.
Prompts
Landing Page with Density Adjustment
design a SAS landing page for a CRM dashboard. set visual density to 8.Used with the Taste skill to create compact interfaces.
Complex Dashboard Development (Superpowers)
Build me a dashboard for tracking design system token usage across products.Initiates the interview and planning process within the Superpowers framework.
Files and links
Pitfalls
Extract Design System does not create a pixel-perfect clone; it is only a starting point for a project.
The Superpowers methodology is slower than standard generation due to approval stages.
Tools only work with publicly accessible URLs.