Give Your Coding Agent Design Taste with Taste Skill

Ask a coding agent for a landing page and you get the average landing page: same grid, same gradient, same stock feel. Taste Skill — a 96k-star set of Agent Skills — makes the agent design instead: it picks an art direction, builds with real photographs, and checks its own work in a real browser.

Why This Skill Matters

The default skill is built from a study of 247 curated sites, and its v2 build runs in six steps: read the brief and list what only this client has, draw three of twenty researched directions and pick one, tie the client's material to that direction in one sentence, build with real pictures, check the page in a real browser at three widths and fail it on slop, then fix the top three problems from its own screenshots — up to three rounds.

The photographs come from open collections such as Wikimedia Commons, Openverse, and the Met, drawn only from public domain, CC0, CC BY, and CC BY-SA files, with credits placed on the page. A build takes roughly 30 to 45 minutes and a few hundred thousand tokens.

Installation

Install every skill in the repo with the npx skills CLI:

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

To install just the default skill, pass its install name:

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

In Claude Code you can use the plugin route instead: /plugin marketplace add Leonxlnx/taste-skill, then /plugin install taste-skill@taste-skill. The default skill needs Node 22 or newer plus an installed Chrome, Edge, or Chromium. It installs nothing, uses no API keys, and needs the internet only to find pictures.

Real Workflow: Brief a Coffee Shop Landing Page

1. Write one brief naming the client, the material, and the feel. For example, paste a prompt like this to your agent:

用 taste-skill 为一家社区咖啡店做落地页：突出店里自烘焙的豆子和手冲吧台，气质安静、纸质感，避免科技感的蓝色渐变。

2. The agent reads the brief and lists what only this client has — the roast bar, the paper texture.
3. A script deals three design directions; the agent picks one and states the idea in a single sentence.
4. It builds the page with real, credited photographs instead of placeholders.
5. It screenshots the result at three widths, fails anything generic, and fixes the top three problems — up to three rounds.

The rules are about design, not a framework, so the output works with React, Vue, Svelte, or plain HTML.

Tips

• Match the skill to the job: redesign-existing-projects audits and fixes a page that already exists, while minimalist-ui, high-end-visual-design, and industrial-brutalist-ui apply a direction you have already decided on.
• If the agent keeps shipping half-finished output, add the full-output-enforcement skill.
• Want images before code? The three image-generation skills produce design comps only — hand the frames to your coding agent, or use image-to-code for the whole pipeline.
• Replace the open-archive photos with your own when you have them; the skill treats them as stand-ins.
• Older versions kept in the repo expose dials like DESIGN_VARIANCE and MOTION_INTENSITY; the v2 default has no dials — its direction comes from the draw and its limits from the inspector.

When Not to Use This

The default skill is for public-facing pages, not dashboards or app screens — the README points product UI at the minimalist or soft skills. And because finding pictures needs network access, a fully offline build is outside what it promises.

See the leaderboard for more skills.