Leonxlnx/taste-skill

GitHub Trending (daily) Tools

Summary

Taste Skill is an open-source framework of portable Agent Skills that upgrade AI-built interfaces with stronger layout, typography, motion, and spacing, targeting tools like Codex, Cursor, and Claude Code.

Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop
Original Article
View Cached Full Text

Cached at: 05/25/26, 12:26 PM

Leonxlnx/taste-skill

Source: https://github.com/Leonxlnx/taste-skill

Taste Skill — Anti-slop Agent Skills for premium frontends

Taste Skill

The Anti-Slop Frontend Framework for AI Agents

Taste Skill

Open tasteskill.dev

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.

GitHub stars MIT License Supported agents Changelog on tasteskill.dev

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.

Disclaimer · Install · Skills · Settings · Examples · Sponsor · Research · FAQ · License

Feedback & Contributions

We would love your feedback. Suggestions and bug reports:

Installing

The npx skills add CLI scans the skills/ folder in this repo, so all skills below (code and image-generation) install the same way.

npx skills add https://github.com/Leonxlnx/taste-skill

Install a single skill by its install name (the name: field inside the SKILL frontmatter, not the folder name):

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

You can also copy any SKILL.md into your project or paste it into ChatGPT / Codex conversations.

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.

The Install name column is the exact value you pass to --skill.

Skill (folder)Install nameDescription
taste-skilldesign-taste-frontendDefault all-rounder for premium frontend output without locking one narrow visual style.
gpt-tasteskillgpt-tasteStricter variant for GPT/Codex: higher layout variance, stronger GSAP direction, aggressive anti-slop.
image-to-code-skillimage-to-codeImage-first pipeline: generate site references, analyze them, then implement the frontend to match.
redesign-skillredesign-existing-projectsExisting projects: audit the UI first, then fix layout, spacing, hierarchy, styling.
soft-skillhigh-end-visual-designPolished, calm, expensive UI with softer contrast, whitespace, premium fonts, spring motion.
output-skillfull-output-enforcementWhen the model ships half-finished work: full output, no placeholder comments.
minimalist-skillminimalist-uiEditorial product UI (Notion/Linear vibes), restrained palette, crisp structure.
brutalist-skillindustrial-brutalist-ui⚠️ BETA Hard mechanical language: Swiss type, sharp contrast, experimental layout.
stitch-skillstitch-design-tasteGoogle 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)Install nameDescription
imagegen-frontend-webimagegen-frontend-webWebsite comps: hero, landing, multi-section with strong typography, spacing, anti-slop art direction.
imagegen-frontend-mobileimagegen-frontend-mobileMobile screens and flows: iOS/Android/cross-platform, mockups, readable type, coherent sets.
brandkitbrandkitBrand-kit boards: logo directions, palettes, type, identity applications across categories.

Which one should I use?

  • Start with taste-skill for the safest general default.
  • 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:

Support the project

If Taste Skill helps you, consider sponsoring:

Sponsor on GitHub

Current Sponsors

robinebers JKc66 u2393696078-rgb a-human-created-this AtharvaJaiswal005 ghughes7 mccun934 navanchauhan

Star History Rank

Research

Background writing that shaped these skills lives in research/.

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; install via npx skills add or by copying into a repo or conversation.

Do image-generation skills install with npx skills add?
Yes. They live under skills/ alongside the code skills so the same CLI discovers them.

License

MIT License · Copyright (c) 2026 Leonxlnx

Similar Articles

@xingxingli45573: Another great find called Taste Skill, which has already gained 20.3k stars on GitHub. Simply put, after installing it, the frontend interfaces generated by AI look much better. Layout, fonts, animations, whitespace — all aspects have improved significantly, giving an overall premium feel. It offers several design directions...

X AI KOLs Timeline

Taste Skill is an open-source frontend framework designed to enhance the visual quality of AI-generated interfaces. It offers multiple design directions and adjustable parameters, and has gained 20.3k stars on GitHub.

vercel-labs/skills

GitHub Trending (daily)

Vercel Labs released 'skills', a CLI that installs reusable skill packs to 45+ AI coding agents including Claude Code, Codex and Cursor.

tech-leads-club/agent-skills

GitHub Trending (daily)

Agent Skills is a hardened, open-source library of verified and tested skills for extending AI coding agents like Claude Code and Cursor, addressing security vulnerabilities found in marketplace alternatives.