AI-generated UIs all look like the same template with different skins. Inter font, slate-900 text, purple gradient hero, three equal cards. Developers call it "Slop." Taste Skill is the antidote — a set of instruction files that teach AI to break out of its default design patterns.
Why Does Everything AI Makes Look "So AI"?
Let me tell you a true story.
A friend of mine — let's call him Xiao Wang — is a startup founder who needed a landing page for his product. He can't code, so he opened ChatGPT and typed: "Generate a tech-y landing page for me."
A few seconds later, AI spat out code. He previewed it — deep purple gradient background, centered headline, three equal-sized feature cards, Inter font, slate-900 text color.
"Not bad," he thought.
Then he asked for a "minimalist personal blog." Preview — deep purple gradient background, centered headline, three equal-sized feature cards… wait, same thing?
He tried being more specific: "I want something like Apple's site." This time it was marginally better — beige background instead of purple — but those three cards were still there, just with gold outlines instead of purple.
Xiao Wang was confused. Isn't AI supposed to be smart? Why does everything it generates look like the same template with a different skin?
This isn't Xiao Wang's fault. And it's not AI being "not smart enough."
It's a deeper issue: AI has a natural "design convergence" problem.
Here's why. AI models train by "looking" at millions of web screenshots. They learn what "a web page should look like" from that data. The problem? The most common web pages on the internet are Bootstrap templates, SaaS landing pages with Inter font and three-column cards. These "average designs" dominate the training data.
So when you ask AI "give me a web page," it's like asking someone who's only ever eaten at McDonald's to "cook a dish" — they'll make what they've seen most in their data.
The developer community has a name for this phenomenon: "Slop" — AI-generated visual junk. The fingerprints are unmistakable: Inter font + slate-900 text + purple/blue gradient + centered hero + three equal cards. You can spot it a mile away.
So the real question becomes: What if someone could tell AI that beyond "McDonald's," there's also French cuisine, Japanese food, Mexican food…?
That's exactly what Taste Skill does.
What Is Taste Skill? — Giving AI a "Design Director"
Taste Skill is an open source project created by developer Leonxlnx, and it's been gaining serious traction on GitHub.
Think of it as a design playbook written for AI to read.
Here's how it works: When you're using AI coding tools like ChatGPT, Cursor, or Claude Code, you load Taste Skill's "skill files" into the context. These files tell the AI — in extremely precise language — "Don't use Inter font," "Don't put content in three equal cards," "Don't use purple gradients" — and also tells it what to do instead.
Essentially, it's like having an experienced design director standing behind the AI, constantly reminding it: that's too templated, that's too boring, try this font, push that spacing a bit more.
The project includes 10 coding skills and 3 image generation skills, each targeting a specific problem. Let me walk through them like I'm introducing you to a group of friends.
Core Skill #1: taste-skill — Putting "Knobs" on Design Taste
This is the brain of the whole project, and the first one you should know about.
Its core innovation is a system I call "Three Knobs." Imagine a high-end audio mixer with three dials for tuning the sound. taste-skill gives AI's design ability three similar knobs:
- DESIGN_VARIANCE (1–10): 1 is perfectly symmetrical and rigid, 10 is artistic asymmetry and visual impact.
- MOTION_INTENSITY (1–10): 1 is a completely static page, 10 is cinematic-level animation.
- VISUAL_DENSITY (1–10): 1 is gallery-level white space, 10 is a data-dashboard information density.
The combination of these three knobs can produce wildly different design styles. For example:
- Want that Apple-level premium feel? Crank variance to 7-8, motion to 5-7, density to 3-4.
- Want Notion/Linear-style minimal editor? Variance 5-6, motion 3-4, density 2-3.
- Want government site credibility? Variance 3-4, motion 2-3, density 4-5.
- Want Awwwards-level experimental creative design? Variance 9-10, motion 8-10, density 3-4.
Why does this matter?
Because without this system, when you say "give me a nice-looking website," AI has to guess. And its guess is almost always the "average." With three knobs, you can precisely tell AI what you want — not with vague adjectives, but with numbers. Taste, for the first time, has been quantified.
Even better, taste-skill has a mechanism I call "reading the room." Before generating code, AI outputs a "design reading" line to confirm it understands your request. It looks something like:
"Reading as: B2B SaaS landing page for technical buyers, Linear-style minimal language, leaning toward Tailwind + Geist font + restrained motion."
Like a reliable designer who confirms requirements before starting — "This is what you mean, right?"
taste-skill also includes a "hard prohibition list" targeting AI's most common bad habits. For example:
- No Em Dash (that long dash AI loves to overuse)
- No Inter font as default (AI's "factory font")
- No Fraunces and Instrument Serif (two serif fonts AI obsessively uses)
- No bright purple and bright blue gradients ("AI purple" is their nickname)
- No pure black shadows
- No "luxury brand = beige + brass + dark brown" stereotype
Notice how the prohibition list is longer and more specific than the recommendation list. That's a key design philosophy: telling AI "what not to do" is more effective than telling it "what to do." Because AI is too good at finding the safest average in its data — you have to push it off that path first.
Core Skill #2: soft-skill — Teaching AI "Apple-Level" Refinement
If taste-skill is the "design director," soft-skill is the "luxury craftsman."
soft-skill's goal is clear: make AI-generated interfaces match the delivery quality of a $150K design agency.
How? The key concept is "Haptic Depth."
What does "haptic depth" mean? Imagine using two apps. The first app has flat color-block buttons with zero feedback when pressed. The second app's buttons have a slight elevation, a subtle glow on hover, a springy bounce on click, and the icon inside the button even sits on its own small circular base.
The second app feels completely different. You'd call it "premium" — even if you couldn't articulate why. That's "haptic depth" — making on-screen elements look and feel like they have physical substance, as if they're made from real materials.
soft-skill achieves this texture through a series of precise techniques:
- "Double border" nesting: Every card is like precision-machined hardware — an outer "tray" with subtle background color, and an inner layer with actual content. The proportions between them follow exact math.
- "Button within a button": The arrow icon inside a CTA button isn't placed directly on the button — it sits inside its own small circular tray, embedded into the button.
-
Custom motion curves: No
linearorease(the "safe but boring" defaults). Instead, spring-physics cubic-bezier curves that make motion feel real-world. - Absolute bans: Inter, Roboto, Arial are completely forbidden; Lucide and Material Icons are banned; ordinary 1px gray borders are prohibited.
A simple analogy: You walk into a high-end Japanese restaurant. The chef brings out sashimi. He hasn't just thrown fish on a plate — every slice has precise gaps, the shredded daikon has its own curve, the wasabi is deliberately placed, even the angle of the soy sauce droplet was designed. You're not eating fish — you're "experiencing a plate of sashimi."
soft-skill teaches AI to do this level of "visual plating." It's not satisfied with "looks OK" — it aims for "makes you want to touch it."
Core Skill #3: minimalist-skill — The Hardest Look: "Nothing Designed"
Ever used Notion? Or Linear?
They look like "nothing was designed" — white background, black text, simple lines, restrained color. But if you sit and really look, every spacing is precise, every font weight is deliberate, every shade of gray harmonizes like it's no accident.
Minimalism is the hardest design to pull off because the fewer elements you have, the higher the precision requirement for each one. Like a melody with only three notes — hit one wrong, and everyone hears it.
minimalist-skill is built for this "Notion/Linear-style minimalism." It fits: documentation tools, editor-style products, knowledge management platforms, personal blogs.
Its core characteristics:
- Warm monochrome: Ivory or bone-white background with charcoal text. Not pure #FFFFFF — a white with subtle warmth.
- Ultra-fine borders: 1px solid #EAEAEA — about as thin as you can go.
- Typography as the only decoration: No flashy colors — hierarchy is built through font weight, size, and spacing contrast.
- Extreme color restraint: Only low-saturation muted pastels for accents — a hint of sage green, a whisper of misty blue.
- Shadows almost don't exist: Not "big shadows" but "flat depth" — subtle color differences to indicate layering instead of piling on drop shadows.
- Border radius strictly 4-8px: No full-radius "pill" shapes.
Its prohibition list is equally telling: no gradients, no neon colors, no heavy shadows, no pill-shaped containers, no emoji.
By now you get it: the essence of minimalism isn't "less" — it's "precisely controlled less." Like a master editor cutting every unnecessary word from an article — every remaining word carries weight.
Core Skill #4: brutalist-skill — When You Don't Want "Pretty"
This is a very special skill.
brutalist-skill generates designs that can be described in one sentence: "Like a declassified military blueprint or a Cold War computer terminal."
It's not "beautiful" by traditional standards. Every corner is square (border-radius: 0), text can be oversized beyond the screen edge, ASCII characters serve as decoration ([ DELIVERY SYSTEMS ], >>>, \\), and typography itself is the entire visual element — no images needed.
Two modes are available:
- Swiss industrial print mode: Light background, newsprint base + carbon ink text + bold red as accent. Think of a Swiss design school publication.
- Tactical telemetry / CRT terminal mode: Dark background, fluorescent green data text + scan lines + grid system. If you've seen the computer interfaces in Alien or Blade Runner — that's the vibe.
Why would anyone want this style? Because it conveys a specific emotion: serious, hardcore, uncompromising. For certain brands, that's exactly the right expression — cybersecurity firms, hardcore tech products, underground music labels, architecture firms.
Brutalism doesn't care about "pretty." It cares about "useful." And that attitude, in itself, is aesthetic.
Core Skill #5: image-to-code-skill — Design First, Build Second
This skill most closely mirrors the traditional "designer produces mockup → developer implements" workflow.
When using this skill, AI's workflow is forced into:
- Generate a design reference image first (one image per page section, not compressed together)
- Deep-analyze the design image (extract typography, spacing, button styles, colors, layout proportions)
- Write code based on the analysis (faithfully implement from the reference)
This enforced order is critical. Because AI's "instinct" is to skip design and jump straight to code — which is exactly why it falls back to default templates. image-to-code-skill forces it to "think before acting."
If the reference image has unclear text? The rule is: regenerate at a larger size. No blurry references allowed.
The layperson's analogy: It's like renovating a house. You don't bring in the construction crew and start swinging hammers — you first get an architect to draw renderings, confirm they match what you want, then hand them to the crew. image-to-code-skill makes AI play both "designer" and "builder" — but the order cannot be reversed.
Core Skill #6: redesign-skill — Giving Your Old Project a Facelift
Not everyone starts from scratch. Often you already have a project — it just looks too "AI" and you want it to look better.
That's what redesign-skill is for. It doesn't rebuild from zero — it systematically upgrades your existing project.
The workflow is clean:
Step 1: Scan. Read existing code, identify the current framework and styling system.
Step 2: Diagnose. Run a comprehensive audit checklist, find every trace of "AI-iness." The checklist includes but isn't limited to:
- Does the font use Inter/Roboto defaults?
- Do headings have enough visual impact?
- Is the only color a pure
#000000background? - Are there "AI purple" gradients?
- Are warm grays and cool grays mixed together? (Classic AI problem — it can't tell warm from cool)
- Is everything centered and symmetrical?
- Are there three equal-sized cards again?
- Do buttons have hover states?
- Are there loading, empty, and error states?
- Does the copy contain "John Doe," "Lorem Ipsum" placeholders?
- Does it include "Elevate," "Unleash," "Game-changer" — AI's favorite clichés?
Step 3: Fix. Keep the existing tech stack. Prioritize improvements in this order:
Swap font > Fix palette > Add interaction states > Adjust layout spacing > Replace templated components > Add loading/empty/error states > Fine-tune typography
This order is pragmatic. Font is the fastest win — change one font and the entire page's character transforms instantly. Adding states comes last — important, but invisible at first glance.
Supplementary Skills at a Glance
Beyond the core skills, a few supplementary ones worth a quick look:
gpt-tasteskill: An enhanced taste-skill v2 with stricter rules, higher layout variance, and more aggressive animation requirements. Best when using ChatGPT or OpenAI Codex for interface generation.
output-skill: Solves a specific headache — AI often gets lazy with long code, outputting // TODO... or // omitted... partials. output-skill forces AI to output complete code with zero placeholders.
taste-skill-v1: Archive of v1 for projects dependent on the old behavior. New projects should use v2.
stitch-skill: A rule set compatible with Google's Stitch design system.
Beyond Code: Image Generation Capabilities
Taste Skill doesn't just guide code generation — it can also guide AI in generating design reference images.
The project includes three image generation skills:
imagegen-frontend-web: Generates web design concept images. Its killer feature is a "combinatorial mutation engine" — randomly combining one option from each category (theme paradigm, background feature, typography style, hero architecture), ensuring each output is different from the last. It also offers 12 different compositional anchors (not everything is "text left, image right") and 6 narrative threads (artifact/collection, journey/pilgrimage, precision tool, living system, stage/spotlight, archive/dossier).
One detail I particularly love: it encourages "second-look moments" — hiding a small detail somewhere in the interface that requires a second glance to discover, creating delight through exploration.
imagegen-frontend-mobile: The mobile version, specifically for generating iOS/Android interface reference images.
brandkit: Generates a complete brand identity system — logo, color scheme, typography system, brand application mockups.
These three skills don't produce code — they produce high-quality visual references. You can hand them directly to designers or developers, or feed them into AI coding tools to "read the image and write code."
What Can Someone With Zero Coding Experience Do With It?
This is the most practical question. The answer: A lot.
Even if you can't write a single line of code, Taste Skill is useful to you. Here's how:
Option 1: Use image generation skills to create a "visual requirements document."
Load imagegen-frontend-web into ChatGPT's image generation feature, describe the type of app you want in natural language. AI will generate a series of high-quality design concept images. Compile them into a "visual requirements document" and hand it to a designer or dev agency. They'll immediately understand what you want — no more vague gesturing: "Like this… but not this… more blue…"
Option 2: Images → AI code.
Feed the generated designs into Claude Code, Cursor, or other AI coding tools (loaded with taste-skill), and let them "read the image and write code." AI can analyze every detail in the design and generate corresponding frontend code.
Option 3: Progressive participation.
Start with brandkit — let AI design a complete brand identity system (logo + colors + fonts). Then use imagegen-frontend-web to generate key page designs. Step by step, turn those designs into actual pages.
All three options share one thing: You don't need to write a single line of code, but you control the final "look." This is the practice of "design democratization" in the AI era — someone with no design or coding background can describe requirements in natural language → get professional design mockups → turn them into runnable code.
Bottom Line: What Does Taste Skill Actually Change?
After all this, let's come back to the original question: Why does everything AI makes look "so AI"?
Because the "average design" AI learned from its training data looks exactly like that — Inter font, purple gradient, three cards. It's not being lazy on purpose — it's just doing the safest thing it learned.
Taste Skill's value is this: It uses a precise set of rules and prohibitions to force AI off its default track and into a more tasteful design space.
Here's what actually changes:
| Dimension | Without Taste Skill | With Taste Skill |
|---|---|---|
| AI default style | Inter + purple gradient + three columns | Dynamically chosen based on requirements |
| Design consistency | Warm and cool grays mixed together | One project, one palette |
| Typography quality | Headings and body text similar size | Extreme weight and size contrast |
| Motion | linear / ease-in-out | Spring physics + staggered entrance |
| Brand identity | Hard to tell what brand it is | Clear visual identity |
| Code quality | Partial output with placeholders | Complete, runnable code |
Looking Ahead: The Programmability of Taste
What excites me most about Taste Skill isn't just that it solves "AI designs ugly things" — it's that it proves something bigger:
Taste can be encoded.
For a long time, we've treated "taste" as something mysterious — you either have it or you don't, you build it slowly through experience. Taste Skill, with its "three knobs," prohibition lists, and design-reading mechanisms, shows us that taste can be decomposed into a set of parameters, rules, and constraints.
This doesn't mean AI taste can fully replace human designers — not yet, anyway. But it does mean:
- Someone without a design background can use these tools to create things that aren't ugly.
- Someone with a design background can explore design space faster.
- A small startup team doesn't need to spend $150K on a design agency to build a tasteful MVP.
Ultimately, Taste Skill isn't a "designer replacer." It's a "let more people do good design" tool.
And it's open source. You can find it on GitHub, use it for free, and even contribute your own design rules.
Next time you ask AI to generate a web page and it serves up that damn purple gradient — you know what to do.
Top comments (0)