A collection of skills that improve how AI tools write frontend code. Instead of generating generic, boring interfaces, the AI builds modern, premium designs with proper animations, spacing, and visual quality.
A major update is in progress. If you want early access, sign up for the beta:
I'd love to hear your thoughts! If you have suggestions or find any bugs:
- Open a Pull Request or Issue right here on GitHub
- DM me on x.com/lexnlin
- Email me at hello@learn2vibecode.dev
Works via CLI for all major AI coding agents (Cursor, Antigravity, Claude Code, Codex, Windsurf, Copilot, etc.):
npx skills add https://github.com/Leonxlnx/taste-skill| Skill | Description |
|---|---|
| taste-skill | The main design skill for premium frontend code. Covers layout, typography, colors, spacing, and motion. |
| redesign-skill | For upgrading existing projects by auditing and fixing design problems first. |
| soft-skill | Focuses on an expensive, soft UI look with premium fonts, whitespace, depth, and smooth spring animations. |
| output-skill | Stops the AI from being lazy. Prevents placeholder comments, skipped code blocks, and half-finished outputs. |
| minimalist-skill | For clean, editorial-style interfaces inspired by tools like Notion and Linear. Monochrome, crisp borders. |
| brutalist-skill | BETA Raw mechanical interfaces fusing Swiss typographic print with CRT terminal aesthetics. |
| stitch-skill | Google Stitch-compatible semantic design rules for premium AI UI generation. Includes DESIGN.md for export. |
The taste skill has three settings at the top of the file. Change these numbers (1-10) depending on what you're building:
- DESIGN_VARIANCE — How experimental the layout is. (1-3: Clean/centered | 8-10: Asymmetric/modern)
- MOTION_INTENSITY — How much animation there is. (1-3: Simple hover | 8-10: Magnetic/scroll-triggered)
- VISUAL_DENSITY — How much content fits on one screen. (1-3: Spacious/luxury | 8-10: Dense dashboards)
Created with taste-skill:
If you find taste-skill useful, consider sponsoring the development.
Background research that informed how these skills were built. See the research folder.
How is this different from other AI design skills? Taste Skill includes 7 specialized variants instead of a single file, a 3-dial parameterization system for adjustable output, and anti-repetition rules backed by original research. It is framework-agnostic and works across all major agents.
Does it work with React, Vue, Svelte, etc.? Yes. Taste Skill is framework-agnostic. The rules focus on design decisions, not framework-specific code patterns.
What is a SKILL.md file? A portable instruction file that AI coding agents detect and follow automatically. No configuration is needed, just install it and your agent reads it.
