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.
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
- DM Blueemi on x.com/blueemi99
- Email me at support@tasteskill.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-skillOr just copy the SKILL.md file you need directly into your project or paste it into ChatGPT / Codex.
Each skill has a different job. You do not need to use all of them at once.
Frontend implementation skills live in skills/.
Image-generation-only skills live in imagegen-skills/.
| Skill | Description |
|---|---|
| taste-skill | The default all-rounder. Use this when you want premium frontend output without forcing one narrow visual style. |
| gpt-taste | The stricter, more opinionated variant for GPT/Codex models. Best for high-variance layouts, stronger GSAP direction, and more aggressive anti-slop rules. |
| image-to-code-skill | The image-first frontend implementation skill. It generates premium website images first, deeply analyzes them, then implements the frontend to match closely. Lives in skills/image-to-code-skill/. |
| redesign-skill | Use this when a project already exists and needs to be improved. It focuses on auditing the current UI first, then fixing weak layout, spacing, hierarchy, and styling decisions. |
| soft-skill | Use this for polished, calm, expensive-looking interfaces with softer contrast, more whitespace, premium fonts, and smooth spring motion. |
| output-skill | Use this when the model keeps being lazy. It pushes for complete output, no placeholder comments, and no skipped implementation steps. |
| minimalist-skill | Use this for cleaner editorial product UI inspired by tools like Notion or Linear. It keeps the palette restrained and the structure crisp. |
| brutalist-skill | BETA Use this for harder, more mechanical visual language: Swiss typography, sharp contrast, raw structure, and more experimental composition. |
| stitch-skill | Use this when you want Google Stitch-compatible semantic design rules, including the extra DESIGN.md export format. |
These skills generate design reference images only. They do not write code. Use them with ChatGPT, Codex, or any agent that supports image generation.
| Skill | Description |
|---|---|
| imagegen-frontend-web | Generates premium website design reference images. Awwwards-level art direction, strong typography, generous spacing, and anti-slop visual discipline. Lives in imagegen-skills/frontend-web/. |
| imagegen-frontend-mobile | Generates premium mobile app screen concepts and flows. iOS, Android, and cross-platform. Clean hierarchy, phone mockup framing, controlled palettes, and strong multi-screen consistency. Lives in imagegen-skills/frontend-mobile/. |
| brandkit | Generates premium brand-kit overview images with logo concepts, color systems, typography, mockups, and visual identity boards. Works for any category: tech, luxury, wellness, developer tools, and more. Lives in imagegen-skills/brandkit/. |
- Start with taste-skill if you want the safest general recommendation.
- Use gpt-taste if you're using GPT/Codex models, you want a stronger visual opinion, more layout variance, and stricter motion/layout enforcement.
- Use image-to-code-skill if visual quality is the main challenge and you want the image-first workflow: generate the design, inspect it deeply, then code it faithfully.
- Use redesign-skill if the project already exists and you want to improve what is there instead of starting from scratch.
- Use soft-skill, minimalist-skill, or brutalist-skill when you already know the visual direction you want.
- Add output-skill when your agent tends to leave work unfinished.
- Use stitch-skill when you specifically need Stitch-oriented output.
For image-to-code-skill, it often helps to state the workflow explicitly in the prompt. A line like follow rules strictly and generate images, then analyze, then code can reinforce the intended execution order in agents that support both image generation and implementation.
The image generation skills (imagegen-frontend-web, imagegen-frontend-mobile) work great with ChatGPT and Codex. Just paste or attach the skill file in your conversation and ask it to generate screens or website sections. The generated images can then be handed to your coding agent to turn them into code right away.
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 multiple specialized variants for different use cases, 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.