Documentation

The Problem: AI builds "nice" but not "yours"

Tell any AI agent to "build me a landing page" and you already know what you'll get. Rounded cards. A purple-blue gradient. A centered hero. A "Get Started" button. It works. It also looks like everything else.

The reason is simple. The agent's idea of "good design" is an average of averages. It has no clue why Vercel uses border instead of shadow, why Linear keeps its letter-spacing so tight, or why Stripe goes easy on gradients. Even if it did know, cramming all of that into a prompt is borderline impossible.

So you end up with two bad options:

• Write 40 lines of prompt every time ("use #0070f3 for links, -0.02em letter spacing, 8px border radius, no shadows just 1px borders...") and still get half of it wrong.
• Screenshot a site, paste it, say "make it look like this." The agent copies pixels but misses the system behind them.

Neither scales.

The Fix: Design Skills

A skill is a markdown file that describes a design system semantically. It is not a token list. Not a Figma export. Not a component library. Picture a document where an experienced designer explains a brand's visual language to a developer who's seeing it for the first time. That's what it reads like.

Here's what goes inside:

• Visual theme and atmosphere — tells the agent what the brand looks like and why. The philosophy behind the aesthetic. Sentences like "Minimalism as engineering principle." The agent gets intent, not just instructions.
• Color palette and roles — gives every color a hex value and a job. "#ff5b4f, ship red, used for the production deploy flow because shipping should feel urgent." The name tells you what the color does.
• Typography rules — font, size, weight, line-height, letter-spacing. But the real value is context: which style goes where, and why. "Display sizes get -2.4px tracking because headlines should feel like minified code."
• Spacing, shadows, motion, components — every rule, wherever possible, with a reason attached.

Skills keep token, rule, and rationale in the same file. A token tells you what to use but not where. A rule tells you where but not when to bend it. The rationale is what lets an agent make the right call when it hits a situation the file never covers.

Why SKILL.md?

Because it is the language AI agents speak best. They can read JSON tokens but can't interpret them. They can't see Figma files. They'll imitate a screenshot but won't systematize it. Markdown sits in the middle: readable by humans, parseable by machines, easy to version and diff, and you can drop it in your repo.

Most teams don't write their own design system from scratch. Most teams say "make it look like Linear," "give it that Stripe feel," or "keep it close to Apple." These references are real. They come up constantly.

TasteUI collects those starting points. Inspiration files based on Vercel, Stripe, Linear, Apple, Tesla, Notion, Figma, Supabase, and more. All in the same format, all comparable. Pick one, drop it into your project, tell your agent "use this file as reference." Building on top of that language with your own content is up to you.

The goal is not "copy Vercel." It is to give the agent a starting language. Enough context to escape the generic average and land on a specific aesthetic. From there you drift, you make it yours, you evolve it.

How it works

npx tasteui.dev add jane/striped-minimalism

"Use the jane/striped-minimalism skill to build a pricing page with their signature purple gradients and ultra-light typography."

Quick Start

No setup required — just run:

npx tasteui.dev add username/skill-name

Skills are saved to ./.agents/skills/{username}/{skill-name}/SKILL.md. Your AI agent reads the file and follows the design system instructions.