Design Taste Skills
Ten design skills are tracked at
Leonxlnx/taste-skill (MIT).
Agent Compass keeps no copy of them and installs the one that fits the surface.
They are not interchangeable. A dense product UI and a landing page want
opposite advice — one wants information density, restraint, and predictable
affordances; the other wants scale contrast, atmosphere, and a point of view.
Loading both produces a landing page that reads like a dashboard, or a dashboard
that fights its own users. Pick one group and stay in it.
Procedure
1. Name the surface, then pick the group
| Surface |
Install |
Why |
| Landing page, marketing site, portfolio, campaign |
design-taste-frontend + at most one of industrial-brutalist-ui / stitch-design-taste |
Anti-template direction with room for a strong opinion |
| Dense product UI, admin, dashboard, back-office |
high-end-visual-design + minimalist-ui |
Restraint and hierarchy; nothing that competes with the data |
| An existing surface being reworked |
redesign-existing-projects |
Audit-first: it reads what is there before proposing change |
| Brand system, logo, identity deck |
brandkit |
Identity work, not page layout |
| A mockup, screenshot, or Figma frame to convert |
image-to-code |
Reads a reference and produces markup |
| Generated imagery for a web or mobile surface |
imagegen-frontend-web / imagegen-frontend-mobile |
Art direction for generated assets |
Do not install a landing-page skill and a product-UI skill into the same project
unless the project genuinely has both surfaces — and then say which surface you
are working on before you start.
2. Install it
# A project, for Claude Code + Codex + Copilot
agent-compass external-skills . --source taste-skill --skill minimalist-ui,high-end-visual-design
# The full curated set, when a project spans several surfaces
agent-compass external-skills . --source taste-skill --recommended
# User-wide
agent-compass external-skills --source taste-skill --recommended --global
The upstream folder names differ from the skill names (skills/soft-skill/
declares high-end-visual-design). Install by skill name; the mapping table is in
style-and-design-skills.md.
3. Give it a direction, not a vacuum
These skills produce their worst output when asked to "make it look good" with no
constraint. Before generating anything, fix:
- the surface and its primary job;
- a style direction with a name (editorial, Swiss, brutalist, luxury, bento,
scrollytelling) — never "clean and modern";
- the palette and type source: an existing design system, a Figma token
export, or a deliberate choice you can defend;
- what must not change: existing tokens, component API, brand constraints.
If the project already has a design system, the system wins and the skill's job
is to use it well. Read
figma-tokens-to-designmd or
figma-mcp-frontend first when Figma is the
source of truth.
4. Ship the screenshot
AGENTS.md §6 applies to every surface these skills touch. A design change is a
change the user can see, so it owes visual proof at the project's viewport
matrix — see
visual-regression-playwright and the
ui-change-needs-visual-proof
instinct.
A design skill's own claim that the result "looks expensive" is not proof.
5. Agent surfaces are a separate concern
If the surface shows model output — streaming answers, tool calls, approval
gates, agent task rows — ai-native-ui-patterns
governs its behaviour, and it composes with either design group. Taste does not
decide whether a citation is visible or an approval gate blocks.
Freshness
agent-compass upstream-skills --check-updates
agent-compass upstream-skills --update taste-skill --dry
The source publishes 13 skills; Agent Compass curates 10. The other three are
tracked and installable by name, but uncurated — read one before you use it.
Related
1---2name: design-taste-skills3description: Use when a frontend surface needs a visual direction rather than a bug fix — a landing page, a marketing site, a portfolio, a redesign, a brand system, a dense product UI, or turning a mockup or screenshot into code. Picks the one tracked design skill that fits the surface and installs it, then holds the visual-proof gate in force. Triggers: landing page, marketing site, redesign, make it look good, design direction, visual identity, brand kit, logo system, minimal UI, brutalist, editorial layout, screenshot to code, mockup to code, image to code, it looks like a template, AI slop.4---56# Design Taste Skills78Ten design skills are tracked at9[`Leonxlnx/taste-skill`](https://github.com/Leonxlnx/taste-skill) (MIT).10Agent Compass keeps no copy of them and installs the one that fits the surface.1112They are not interchangeable. **A dense product UI and a landing page want13opposite advice** — one wants information density, restraint, and predictable14affordances; the other wants scale contrast, atmosphere, and a point of view.15Loading both produces a landing page that reads like a dashboard, or a dashboard16that fights its own users. Pick one group and stay in it.1718## Procedure1920### 1. Name the surface, then pick the group2122| Surface | Install | Why |23| ------- | ------- | --- |24| Landing page, marketing site, portfolio, campaign | `design-taste-frontend` + at most one of `industrial-brutalist-ui` / `stitch-design-taste` | Anti-template direction with room for a strong opinion |25| Dense product UI, admin, dashboard, back-office | `high-end-visual-design` + `minimalist-ui` | Restraint and hierarchy; nothing that competes with the data |26| An existing surface being reworked | `redesign-existing-projects` | Audit-first: it reads what is there before proposing change |27| Brand system, logo, identity deck | `brandkit` | Identity work, not page layout |28| A mockup, screenshot, or Figma frame to convert | `image-to-code` | Reads a reference and produces markup |29| Generated imagery for a web or mobile surface | `imagegen-frontend-web` / `imagegen-frontend-mobile` | Art direction for generated assets |3031Do not install a landing-page skill and a product-UI skill into the same project32unless the project genuinely has both surfaces — and then say which surface you33are working on before you start.3435### 2. Install it3637```bash38# A project, for Claude Code + Codex + Copilot39agent-compass external-skills . --source taste-skill --skill minimalist-ui,high-end-visual-design4041# The full curated set, when a project spans several surfaces42agent-compass external-skills . --source taste-skill --recommended4344# User-wide45agent-compass external-skills --source taste-skill --recommended --global46```4748The upstream folder names differ from the skill names (`skills/soft-skill/`49declares `high-end-visual-design`). Install by skill name; the mapping table is in50[style-and-design-skills.md](../../docs/tooling/style-and-design-skills.md#upstream-folder-names-differ-from-skill-names).5152### 3. Give it a direction, not a vacuum5354These skills produce their worst output when asked to "make it look good" with no55constraint. Before generating anything, fix:5657- the **surface** and its primary job;58- a **style direction** with a name (editorial, Swiss, brutalist, luxury, bento,59 scrollytelling) — never "clean and modern";60- the **palette and type** source: an existing design system, a Figma token61 export, or a deliberate choice you can defend;62- what must **not** change: existing tokens, component API, brand constraints.6364If the project already has a design system, the system wins and the skill's job65is to use it well. Read66[`figma-tokens-to-designmd`](../figma-tokens-to-designmd/SKILL.md) or67[`figma-mcp-frontend`](../figma-mcp-frontend/SKILL.md) first when Figma is the68source of truth.6970### 4. Ship the screenshot7172`AGENTS.md` §6 applies to every surface these skills touch. A design change is a73change the user can see, so it owes visual proof at the project's viewport74matrix — see75[`visual-regression-playwright`](../visual-regression-playwright/SKILL.md) and the76[`ui-change-needs-visual-proof`](../../knowledge/instincts/ui-change-needs-visual-proof.md)77instinct.7879A design skill's own claim that the result "looks expensive" is not proof.8081### 5. Agent surfaces are a separate concern8283If the surface shows model output — streaming answers, tool calls, approval84gates, agent task rows — [`ai-native-ui-patterns`](../ai-native-ui-patterns/SKILL.md)85governs its behaviour, and it composes with either design group. Taste does not86decide whether a citation is visible or an approval gate blocks.8788## Freshness8990```bash91agent-compass upstream-skills --check-updates92agent-compass upstream-skills --update taste-skill --dry93```9495The source publishes 13 skills; Agent Compass curates 10. The other three are96tracked and installable by name, but uncurated — read one before you use it.9798## Related99100- [style-and-design-skills.md](../../docs/tooling/style-and-design-skills.md) —101 install routes, the folder-name mapping, and the tracked inventories.102- [accessibility](../../docs/guidelines/accessibility.md) — a direction that103 fails contrast or keyboard navigation is not finished.
me-cedric