taste-skill

An anti-AI-aesthetic skill that prevents agents from producing generic purple-gradient interfaces. Sponsored by Vercel.

Leonxlnx

Designers / Developers

Image designDevelopmentVerified

GitHub Stars45K

Suggested prompts

Redesign this frontend page to feel premium and tasteful, without AI slop, and output runnable code.

Analyze the visual language of this reference image and implement a web page with matching quality.

Redesign the existing code while preserving functionality and improving layout, motion, typography, and hierarchy.

About this skill

Taste Skill

Portable Agent Skills that upgrade AI-built interfaces: stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs. This repo also includes image-generation skills for reference boards (web, mobile, brand kits). Pair them with ChatGPT Images or similar generators, then hand the frames to Codex, Cursor, or Claude Code for implementation.

Disclaimer

Taste Skill has no official token, coin, or crypto project. Any token using my name, image, or project is unaffiliated and not endorsed by me.

Skills

Each skill does one job; you do not need all of them at once. Implementation skills output code. Image-generation skills output reference images only.

Skill (folder)	Description
taste-skill	🆕 v2 (experimental) - substantial rewrite of the default skill. Reads the brief, infers the design language, tunes three dials (VARIANCE / MOTION / DENSITY). Brief inference, design-system map, hard em-dash ban, canonical GSAP code skeletons, redesign-audit protocol, strict pre-flight check. Actively iterating toward v2.0.0 stable.
taste-skill-v1	The original v1 of taste-skill, preserved for projects depending on its exact behavior. Use only if the v2 default breaks something specific in your workflow.
gpt-tasteskill	Stricter variant for GPT/Codex: higher layout variance, stronger GSAP direction, aggressive anti-slop.
image-to-code-skill	Image-first pipeline: generate site references, analyze them, then implement the frontend to match.
redesign-skill	Existing projects: audit the UI first, then fix layout, spacing, hierarchy, styling.
soft-skill	Polished, calm, expensive UI with softer contrast, whitespace, premium fonts, spring motion.
output-skill	When the model ships half-finished work: full output, no placeholder comments.
minimalist-skill	Editorial product UI (Notion/Linear vibes), restrained palette, crisp structure.
brutalist-skill	Hard mechanical language: Swiss type, sharp contrast, experimental layout.
stitch-skill	Google Stitch-compatible rules, including optional `DESIGN.md` export format.

Image generation skills

These produce design images only (no code). Use with ChatGPT Images, Codex image mode, or any agent that generates images.

Skill (folder)	Description
imagegen-frontend-web	Website comps: hero, landing, multi-section with strong typography, spacing, anti-slop art direction.
imagegen-frontend-mobile	Mobile screens and flows: iOS/Android/cross-platform, mockups, readable type, coherent sets.
brandkit	Brand-kit boards: logo directions, palettes, type, identity applications across categories.

Which one should I use?

Start with taste-skill for the safest general default. (Now v2 experimental - see what changed in the CHANGELOG.)
If you depend on the exact behavior of the original taste-skill, choose taste-skill-v1 instead.
Use gpt-taste when you want the stricter GPT/Codex-oriented rules and motion/layout enforcement.
Use image-to-code-skill for image → analyze → code website workflows.
Use redesign-skill to improve an existing codebase instead of greenfield styling.
Add soft-skill, minimalist-skill, or brutalist-skill when the visual direction is already chosen.
Add output-skill if the agent keeps truncating output.
Use imagegen-frontend-web, imagegen-frontend-mobile, or brandkit when the deliverable is images (comps, flows, identity boards), then pass results to your coding agent.

Image-first tip

For image-to-code-skill, state the pipeline in the prompt, e.g.: follow the skill: generate images, then analyze, then code.

ChatGPT Images and Codex

Attach or paste imagegen-frontend-web, imagegen-frontend-mobile, or brandkit and ask for the frames you need, then feed the renders to Codex, Cursor, or Claude Code. Use image-to-code-skill when you want one workflow that both generates references and implements the site in code.

Settings (taste-skill only)

Numbers at the top of the file are 1-10 dials:

DESIGN_VARIANCE: Layout experimentation (lower: centered/clean · higher: asymmetric/modern).
MOTION_INTENSITY: Animation depth (lower: hover · higher: scroll/magnetic).
VISUAL_DENSITY: Information per viewport (lower: spacious · higher: dense dashboards).

Examples

Created with taste-skill:

Common Questions

How is this different from other AI design skills?
Multiple specialized variants, adjustable dials in key skills, anti-repetition rules informed by dedicated research. All are framework agnostic across major coding agents.

Does it work with React, Vue, Svelte?
Yes. Rules target design intent, not a single framework API.

What is SKILL.md?
A portable instruction file agents can load automatically; you can add it to your project by copying into a repo or pasting into conversations.

Do image-generation skills come with this bundle?
Yes. They live under skills/ alongside the code skills, so the same mechanism discovers them.