Frontend Taste Skills
Bundled collection of 9 frontend design skills. Each enforces a different visual direction and works with Claude Code / any LLM-based coding agent.
How to Use
Invoke by describing the visual direction in your prompt. Claude Code auto-routes based on keywords:
- "premium landing page" / "high-agency frontend" -> default
- "strict layout, GSAP motion, editorial" -> gpt-taste
- "Notion/Linear style, editorial, minimal" -> minimalist
- "Swiss typography, raw, brutalist" -> brutalist
- "calm, expensive, polished" -> soft
- "redesign this existing app" -> redesign
- "give me the full code, no placeholders" -> output
- "generate a DESIGN.md for Google Stitch" -> stitch
- "generate design images first, then implement" -> images-first
You can also explicitly load one variant:
Use the "frontend-taste/brutalist" skill to redesign the header.
The 9 Variants
| Variant |
When to use |
default/ (design-taste-frontend) |
Safest general pick. Premium frontend with controllable DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY dials. |
gpt-taste/ |
Stricter, more opinionated. Python-driven layout randomization, AIDA page structure, wide editorial typography, mandatory GSAP ScrollTriggers. Best for GPT/Codex models. |
minimalist/ (minimalist-ui) |
Clean editorial interfaces. Warm monochrome, flat bento grids, muted pastels. No gradients, no heavy shadows. |
brutalist/ (industrial-brutalist-ui) |
Swiss typographic print + military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color. |
soft/ (high-end-visual-design) |
High-end agency feel. Exact fonts, spacing, shadows, card structures. Blocks common defaults that make AI designs look cheap. |
redesign/ (redesign-existing-projects) |
Audits current UI, identifies generic AI patterns, applies high-end standards without breaking functionality. |
output/ (full-output-enforcement) |
Overrides LLM truncation. Bans placeholder patterns. Handles token-limit splits cleanly. Pair with any visual skill. |
stitch/ (stitch-design-taste) |
Generates agent-friendly DESIGN.md files for Google Stitch. |
images-first/ (image-taste-frontend) |
Image-first workflow: generate reference images, analyze them deeply, then implement. For visually-led projects. |
Configuration Dials (default variant)
The default variant exposes three 1-10 dials at the top of its SKILL.md:
- DESIGN_VARIANCE - 1 (symmetric/centered) to 10 (asymmetric/artsy)
- MOTION_INTENSITY - 1 (static) to 10 (cinematic physics)
- VISUAL_DENSITY - 1 (gallery / airy) to 10 (cockpit / packed data)
Override dynamically via chat ("make it more minimal" -> lowers all three). Don't edit the file.
Combining Variants
output stacks with any other skill. Use it when the agent keeps giving you half-finished code.redesign is exclusive - it assumes an existing project.images-first works best paired with explicit workflow instructions in the prompt ("generate images, analyze, then code").
CLI
Run badi taste to see the full list and example prompts from the terminal.
1---2name: frontend-taste3description: Frontend Taste Skills4---56# Frontend Taste Skills78Bundled collection of 9 frontend design skills. Each enforces a different visual direction and works with Claude Code / any LLM-based coding agent.910## How to Use1112Invoke by describing the visual direction in your prompt. Claude Code auto-routes based on keywords:1314- "premium landing page" / "high-agency frontend" -> **default**15- "strict layout, GSAP motion, editorial" -> **gpt-taste**16- "Notion/Linear style, editorial, minimal" -> **minimalist**17- "Swiss typography, raw, brutalist" -> **brutalist**18- "calm, expensive, polished" -> **soft**19- "redesign this existing app" -> **redesign**20- "give me the full code, no placeholders" -> **output**21- "generate a DESIGN.md for Google Stitch" -> **stitch**22- "generate design images first, then implement" -> **images-first**2324You can also explicitly load one variant:2526```27Use the "frontend-taste/brutalist" skill to redesign the header.28```2930## The 9 Variants3132| Variant | When to use |33| --- | --- |34| `default/` (design-taste-frontend) | Safest general pick. Premium frontend with controllable DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY dials. |35| `gpt-taste/` | Stricter, more opinionated. Python-driven layout randomization, AIDA page structure, wide editorial typography, mandatory GSAP ScrollTriggers. Best for GPT/Codex models. |36| `minimalist/` (minimalist-ui) | Clean editorial interfaces. Warm monochrome, flat bento grids, muted pastels. No gradients, no heavy shadows. |37| `brutalist/` (industrial-brutalist-ui) | Swiss typographic print + military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color. |38| `soft/` (high-end-visual-design) | High-end agency feel. Exact fonts, spacing, shadows, card structures. Blocks common defaults that make AI designs look cheap. |39| `redesign/` (redesign-existing-projects) | Audits current UI, identifies generic AI patterns, applies high-end standards without breaking functionality. |40| `output/` (full-output-enforcement) | Overrides LLM truncation. Bans placeholder patterns. Handles token-limit splits cleanly. Pair with any visual skill. |41| `stitch/` (stitch-design-taste) | Generates agent-friendly `DESIGN.md` files for Google Stitch. |42| `images-first/` (image-taste-frontend) | Image-first workflow: generate reference images, analyze them deeply, then implement. For visually-led projects. |4344## Configuration Dials (default variant)4546The `default` variant exposes three 1-10 dials at the top of its SKILL.md:4748- **DESIGN_VARIANCE** - 1 (symmetric/centered) to 10 (asymmetric/artsy)49- **MOTION_INTENSITY** - 1 (static) to 10 (cinematic physics)50- **VISUAL_DENSITY** - 1 (gallery / airy) to 10 (cockpit / packed data)5152Override dynamically via chat ("make it more minimal" -> lowers all three). Don't edit the file.5354## Combining Variants5556- `output` stacks with any other skill. Use it when the agent keeps giving you half-finished code.57- `redesign` is exclusive - it assumes an existing project.58- `images-first` works best paired with explicit workflow instructions in the prompt ("generate images, analyze, then code").5960## CLI6162Run `badi taste` to see the full list and example prompts from the terminal.
fatihkan