Skip to main content
ClaudeWave
EN, English
Leonxlnx / Subagents

taste-skill

Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages

  • 101.4k stars
  • 6.8k forks
  • 6 open issues
  • Language: JavaScript
  • License: MIT
  • updated

Install

Terminal
git clone https://github.com/Leonxlnx/taste-skill && cp taste-skill/*.md ~/.claude/agents/
  1. Clone the repository and copy the agent .md definitions into ~/.claude/agents (or .claude/agents inside a project).
  2. Start a new Claude Code session to load the agents.
  3. Delegate work to them with the Task/Agent tool or by name.

Editor's note

Taste Skill is a collection of portable agent skills delivered as `SKILL.md` files that instruct AI coding agents to produce higher-quality frontend interfaces with intentional layout, typography, spacing, motion, and hierarchy rather than generic boilerplate output. Skills are installed via the `npx skills add` CLI pointing at the repository, and individual skills can be targeted by name, such as `design-taste-frontend` for the default v2 skill or `industrial-brutalist-ui` for the Swiss-type brutalist variant. The collection integrates directly with Claude Code, Codex, and Cursor, and individual skill files can also be pasted into ChatGPT conversations. A standout detail in v2 is a three-dial tuning system for VARIANCE, MOTION, and DENSITY, along with canonical GSAP code skeletons and a redesign-audit protocol. Separate image-generation skills produce reference boards for web, mobile, and brand kits using tools like ChatGPT Images before handing frames to an implementation agent. Frontend developers, vibe-coders, and no-code builders working with AI agents are the primary audience.

Installable items

13 items in this repository

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

Install

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

Install

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

Install

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

Install

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

Install

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

Install

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

Install

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

Install

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

Install

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

Install

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

Install

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

Install

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

Install
README

Subagents overview

Full README on GitHub

     

Sponsors

interfaces.dev · A design engineering magazine by Jakub Krehel React Bits · animated React components for creative interfaces IMG.LY · CreativeEditor SDK Sent.dm · messaging APIs for SMS, WhatsApp, and RCS

Become a sponsor

Taste Skill is an Agent Skill that makes coding agents design websites and app screens instead of assembling the average landing page. It gives the agent an art direction, real pictures and a way to check its own work in a real browser.

Pages it has built, each from one brief:

The photographs are real, found in open archives and credited by the skill (credits). Watch the launch film.

Install

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

That installs the skill with the npx skills CLI.

The skill runs its scripts with Node 22+ and an installed Chrome, Edge or Chromium. It installs nothing and needs no API keys. Finding pictures needs network access.

Claude Code plugin

Run these inside Claude Code. The skill is namespaced under taste-skill:, so it does not collide with your other skills.

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

/plugin update upgrades it later.

Codex plugin

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

Start a new Codex session afterwards so the skill is loaded.

From a clone, linked instead of copied

./install.sh symlinks the skill into Claude Code (--codex for Codex, --all-agents for both), so a git pull updates it in place.

Already have the skill? Run the install command again; the install name did not change. Looking for one of the older skills? See Moved skills.

How v2 works

The skill is built from a study of 247 curated sites. A build runs in six steps:

  1. Reads the brief and lists what only this client has.

  2. A script deals three of 20 researched directions and the agent picks one.

  3. Finds the idea: one sentence tying the client's own material to that direction.

  4. Builds with real pictures and footage from open collections, credited.

  5. Checks the page in a real browser at three widths and fails it on slop.

  6. Looks at its own screenshots and fixes the top three problems, up to three rounds.

A build takes roughly 30 to 45 minutes and a few hundred thousand tokens. Details are in the changelog and the study.

Dashboards and app screens (v2.1) take their own route: the skill deals one of the app styles distilled from real product screens, builds the shell, the data, the charts and the tables to those numbers, and checks the result with app rules: quiet panels, aligned figures, colour spent on data, a phone layout where the navigation folds away. A product's landing page builds the app it shows the same way, so its screenshots look like a working product.

v2.1 also checks the frame of every page (a clear title on the first screen, equal margins, no section shoved to one side, no random blank stretches) and moves the way strong award sites do, measured on the latest 100 Awwwards Sites of the Day.

Moved skills

This repo holds one skill, design-taste-frontend. The others moved to repos of their own and kept their install names:

Install nameWhere it lives now
high-end-visual-design, minimalist-ui, industrial-brutalist-ui, gpt-taste, stitch-design-taste, design-taste-frontend-v1, design-taste-frontend-v2-experimentalLeonxlnx/taste-skill-classics
imagegen-frontend-web, imagegen-frontend-mobile, brandkit, image-to-codeLeonxlnx/imagegen-skills
redesign-existing-projectsPart of design-taste-frontend, which audits an existing page in a real browser before changing anything
full-output-enforcementRemoved. For the same problem, see Leonxlnx/unlazy

Install a moved skill from its new repo under the same name:

npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

Common Questions

What does the skill need?
Node 22 or newer and Chrome, Edge or Chromium. It installs nothing and uses no API keys. It needs the internet only to find pictures.

Where do the pictures come from, and can I use them?
From open collections such as Wikimedia Commons, Openverse and the Met. Only public domain, CC0, CC BY and CC BY-SA files are offered, and the skill puts the credits on the page. Replace them with your own when you have them.

Does it work with React, Vue, Svelte, plain HTML?
Yes. The rules are about design, not a framework.

Is it for dashboards and app screens?
Yes, since v2.1. The skill tells a page from an app screen and builds a dashboard, an admin view or a settings screen with its own run: a style dealt from a study of real product screens, quiet panels, honest data and charts, and its own checks (inspect.mjs --app).

Support the project

If Taste Skill helps you, consider sponsoring:

Sponsor on GitHub

Open Source Supporters

Get a Kimi API key: taste-skill users get 10% bonus API credits on their first purchase.

Topics
agent-skillsai-agentsanti-slopclaude-codecodexcursordesign-systemfrontendlanding-pageui-designweb-design
Frequently asked

What people ask about taste-skill

What is Leonxlnx/taste-skill?

Leonxlnx/taste-skill is subagents for the Claude AI ecosystem. Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages It has 101.4k GitHub stars and its last recorded update is dated 2026-10-20.

How do I install taste-skill?

You can install taste-skill by cloning the repository (https://github.com/Leonxlnx/taste-skill) or following the README instructions on GitHub. ClaudeWave also provides quick install blocks on this page.

Is Leonxlnx/taste-skill safe to use?

Our security agent has analyzed Leonxlnx/taste-skill and assigned a Trust Score of 100/100 (tier: Verified). See the full breakdown of passed checks and flags on this page.

Who maintains Leonxlnx/taste-skill?

Leonxlnx/taste-skill is maintained by Leonxlnx. The last recorded GitHub activity is dated 2026-10-20, with 6 open issues.

Are there alternatives to taste-skill?

Yes. On ClaudeWave you can browse similar subagents at /categories/agents, sorted by popularity or recent activity.

Maintain this repo? Show its Trust Score in your README

The badge shows this repository's current Trust Score and verdict, and links back to this page. It follows the catalogue data: nobody can buy or edit the score it displays.

ClaudeWave Trust Score for Leonxlnx/taste-skill
Markdown (README)
[![ClaudeWave Trust Score for Leonxlnx/taste-skill](https://claudewave.com/api/badge/leonxlnx-taste-skill)](https://claudewave.com/en/repo/leonxlnx-taste-skill)
HTML
<a href="https://claudewave.com/en/repo/leonxlnx-taste-skill"><img src="https://claudewave.com/api/badge/leonxlnx-taste-skill" alt="ClaudeWave Trust Score for Leonxlnx/taste-skill" width="320" height="64"></a>

What the badge means and how the score is computed

Alternatives

Project homepage
https://tasteskill.dev