AIBit-Discover Open Source Projects AIBit-Discover Open Source Projects

Taste-Skill: Give Your AI Good Taste and Stop Boring, Generic Slop

Taste-Skill is an anti-slop frontend framework for AI agents that upgrades AI-built interfaces with stronger layout, typography, motion, and spacing.

Taste-Skill: Give Your AI Good Taste and Stop Boring, Generic Slop

If you've ever used an AI coding agent to build a frontend, you know the pain. The output is functional but looks like it was designed by a committee of robots in 2015: centered layouts, generic fonts, zero personality, and that unmistakable "AI-generated" feel. Enter Taste-Skill, an open-source project that gives your AI actual taste.

Taste-Skill is a collection of portable agent skills that upgrade AI-built interfaces with stronger layout, typography, motion, and spacing. Instead of boilerplate-looking UIs, you get designs that look like they were crafted by a human designer who cares. The project has already garnered over 26,000 stars on GitHub, and for good reason.

What Problem Does Taste-Skill Solve?

AI coding agents like Claude Code, Cursor, and Codex are incredibly powerful at generating functional code. But they have no innate sense of design. They default to safe, boring patterns because that's what their training data is full of. The result is "slop" — interfaces that work but feel lifeless.

Taste-Skill solves this by providing a set of SKILL.md files that act as instruction manifests for your AI agent. When you install a skill, the agent reads it and adjusts its output to follow specific design rules: higher layout variance, stronger animation direction, aggressive anti-repetition rules, and more.

How It Works

Taste-Skill uses the npx skills add CLI to install skills from the repository. Each skill is a self-contained instruction file that the agent loads automatically. You can install all skills at once or pick individual ones.

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

# Install a single skill by its install name
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

You can also copy a SKILL.md file directly into your project or paste it into a ChatGPT conversation.

The Skills

Taste-Skill comes with multiple specialized skills, each designed for a specific use case. Here are the key ones:

Core Skills

  • design-taste-frontend (v2, experimental): The default skill. Reads the brief, infers the design language, and tunes three dials: VARIANCE, MOTION, and DENSITY. Includes brief inference, design-system mapping, hard em-dash ban, canonical GSAP code skeletons, and a redesign-audit protocol.
  • design-taste-frontend-v1: The original v1, preserved for projects that depend on its exact behavior.
  • gpt-taste: A stricter variant for GPT/Codex with higher layout variance, stronger GSAP direction, and aggressive anti-slop rules.
  • image-to-code: An image-first pipeline that generates site references, analyzes them, then implements the frontend to match.
  • redesign-existing-projects: Audits existing UI first, then fixes layout, spacing, hierarchy, and styling.

Visual Direction Skills

  • high-end-visual-design: Polished, calm, expensive UI with softer contrast, whitespace, premium fonts, and spring motion.
  • minimalist-ui: Editorial product UI (Notion/Linear vibes) with restrained palette and crisp structure.
  • industrial-brutalist-ui: Hard mechanical language with Swiss type, sharp contrast, and experimental layout.
  • stitch-design-taste: Google Stitch-compatible rules with optional DESIGN.md export format.

Utility Skills

  • full-output-enforcement: Forces the model to ship complete work with no placeholder comments.

Image Generation Skills

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

  • imagegen-frontend-web: Website comps with strong typography, spacing, and anti-slop art direction.
  • imagegen-frontend-mobile: Mobile screens and flows with readable type and coherent sets.
  • brandkit: Brand-kit boards with logo directions, palettes, type, and identity applications.

The Three Dials

One of the most powerful features of Taste-Skill is the three adjustable dials at the top of the SKILL.md file. Each is a number from 1 to 10:

  • DESIGN_VARIANCE: Controls layout experimentation. Lower values produce centered, clean layouts. Higher values produce asymmetric, modern layouts.
  • MOTION_INTENSITY: Controls animation depth. Lower values produce simple hover effects. Higher values produce scroll-triggered and magnetic animations.
  • VISUAL_DENSITY: Controls information per viewport. Lower values produce spacious layouts. Higher values produce dense dashboards.

This gives you fine-grained control over the output without needing to write custom prompts.

Real-World Examples

The project includes examples created with Taste-Skill, and they speak for themselves. The designs are clean, modern, and — most importantly — don't look like AI generated them. They have personality, intentional spacing, and thoughtful typography.

Why This Matters

As AI coding agents become more powerful, the bottleneck shifts from "can it generate code?" to "can it generate good code?" Design quality is a major differentiator. Taste-Skill bridges the gap between functional AI output and human-quality design.

It's also framework-agnostic. Whether you're using React, Vue, or Svelte, the rules target design intent, not a specific framework API. This makes it a universal upgrade for any AI-assisted frontend workflow.

Getting Started

  1. Install the skill:
    npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
  2. Start a conversation with your AI agent and describe the interface you want.
  3. The agent will automatically load the skill and adjust its output.
  4. Tweak the three dials to fine-tune the results.

For image-first workflows, use the image generation skills to create reference boards, then pass them to your coding agent with the image-to-code skill.

Conclusion

Taste-Skill is a game-changer for anyone using AI to build frontends. It transforms generic, boring output into polished, intentional designs. With 26,000+ stars and a growing community, it's clear that developers are hungry for better AI-generated UIs. If you're tired of slop, give your AI some taste.

Check out the GitHub repository and the official site at tasteskill.dev.

Source

Leonxlnx/taste-skill: Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop