Taste Skill — Teaching AI Agents Design Taste for Frontend Code

AI coding agents write functional frontend code fast, but the output looks generic — the same 3-column icon grid, the same gradient buttons, the same Material Design “clean” that every AI generates. Taste Skill is a collection of SKILL.md files that inject opinionated design rules into any AI coding agent, replacing “AI slop” with premium, intentional design. One npx command, no configuration, works with Claude Code, Cursor, Codex, Gemini CLI, and more.

The Problem It Solves

WITHOUT taste-skill              WITH taste-skill
┌─────────────────────┐         ┌─────────────────────┐
│ 🎯  📊  🔧          │         │                     │
│ Feature Feature Feat │         │  One bold statement  │
│                     │         │  with breathing room │
│ [Gradient Button]   │         │                     │
│                     │         │  Subtle motion ──→   │
│ Generic. Forgettable│         │  Premium. Memorable  │
└─────────────────────┘         └─────────────────────┘
     "AI Slop"                      "Has Taste"

Every AI model defaults to safe, generic UI. Taste Skill overrides that with rules for layout, typography, color, spacing, and motion — the same things a senior frontend engineer would catch in code review.

The 7 Sub-Skills

The Three Dials (taste-skill core)

Installation

# One command, any project
npx skills add Leonxlnx/taste-skill

# That's it. SKILL.md appears in your project.
# Claude Code, Cursor, Codex all auto-detect it.

The Google Stitch Connection

Google Stitch is Google’s free AI UI design tool — describe an app in natural language, get high-fidelity screens. It exports a DESIGN.md file capturing your entire design system.

Google Stitch (design)  →  exports DESIGN.md  →  stitch-skill reads it
     ↓                                                ↓
 Visual prototype                          Claude Code generates
                                          matching code automatically

The workflow: design in Stitch → export DESIGN.md → drop in project root → reference in CLAUDE.md → every AI-generated component follows your exact design tokens. No more re-describing specs.

How LearnAI Team Could Use This

For Teaching

• CS course project UIs — Students using Claude Code for assignments get professional-looking output instead of generic Bootstrap. The output-skill also prevents lazy code submissions.
• Demo applications — When building teaching demos or interactive slides, taste-skill ensures the output looks polished enough for classroom presentation.

For Research

• Prototype tools — Research tools (visualization dashboards, analysis interfaces) often look rough. Drop taste-skill in and the AI generates presentable UI from the start.
• Paper figures — Web-based interactive figures for papers benefit from the minimalist-skill (clean, Notion-like aesthetic).

For the LAI Project

• Wiki frontend — If the LearnAI wiki ever gets a custom frontend, taste-skill + stitch-skill would ensure consistent design language.
• Student-facing tools — Any AI-powered learning tools built for students get professional UI without hiring a designer.

Real-World Use Cases

1. Startup MVPs — Solo founders using Claude Code to build full-stack apps. Taste-skill is the difference between “looks like a hackathon project” and “looks like a funded startup.”
2. Design system enforcement — Teams with existing design systems export to DESIGN.md, then every AI-generated component automatically matches.
3. Portfolio sites — Developers using AI to build personal sites get unique, premium results instead of cookie-cutter templates.
4. Internal tools — Enterprise teams building admin dashboards get clean, usable UI without designer involvement.

Related Tools