Sep 4, 2026

designer-skills: 241 Design Skills and 91 Commands for Agentic Design Work

owl-listener's 2,477-star pack gives Claude Code and Gemini CLI 241 design skills and 91 slash commands across 33 plugins and five collections — from user research to visual critique — written so an agent can actually apply design judgment.

#tutorial#agent-tools#creative

Ask a coding agent to "design a settings screen" and you get a plausible-looking guess: design knowledge is written for humans, and the agent reads it literally, guessing where meaning was left out. Owl-Listener/designer-skills writes the judgment down instead — 241 skills and 91 commands across 33 plugins, organized into five collections, for Claude Code and Gemini CLI.

Why This Skill Matters

The front-door repo holds the design-practice collection: 107 skills and 32 commands across 9 plugins. The plugin list reads like a design org chart — design-research (12 skills), design-systems (11), ux-strategy (12), ui-design (19), interaction-design (22), prototyping-testing (8), design-ops (9), designer-toolkit (7), and visual-critique (7).

The architecture is nouns versus verbs. Skills are domain knowledge units — how to write a non-leading interview question, how to define design tokens. Commands are workflows that chain them: /design-research:discover runs personas, an empathy map, and a journey map in one pass; /visual-critique:critique-screen runs all seven visual critiques on a screenshot and returns a prioritized fix list. You mostly reach for commands; the skills run underneath.

Four companion collections extend beyond craft: AI product design (designing agentic experiences), UX program management, design leadership, and inclusive design — each in its own repo.

Installation

Three steps in Claude Code, no terminal work:

/plugin marketplace add Owl-Listener/designer-skills

Then run /plugin, open the Discover tab, and tick the collections you want. Each collection is separately installable, and every plugin doubles as a Gemini CLI extension — the README documents copying .gemini/extensions/ into your project.

Real Workflow: Rescue an Existing Screen

For a product that already exists, the README says start with critique, not new work:

/visual-critique:critique-screen

Drop in a screenshot and you get a prioritized fix list covering hierarchy, brand consistency, composition, and typography — evidence of what is actually broken before anyone adds anything new. From there, /prototyping-testing:evaluate runs a fuller heuristic evaluation, and /design-ops:handoff produces the developer-ready spec package when the fixes are agreed.

For greenfield work the recommended path runs with the grain of the sequence — research, strategy, UI and interaction, systems, ops — starting from /design-research:discover even when you think you already know your users.

Tips

  • The four-plugin starter set — design-research, ux-strategy, ui-design, design-ops — covers the full design cycle; add interaction-design when flows carry real state.
  • Not sure which skill fits? INDEX.md arranges every skill by situation, including the pairs most often mistaken for each other.
  • Installing more plugins does not slow the agent down, per the README — the plugins are lightweight.
  • If something feels hard mid-project, the README's diagnosis: an earlier step in the sequence was probably skipped.

When Not to Use This

These skills encode general design practice; they do not know your brand, your research repository, or your design system's history, and critique output is a starting list, not a verdict. If your immediate need is extracting an existing site's visual system rather than doing design work, an extractor like design-md-chrome fits better — this pack is for the full arc from research through delivery.


See the leaderboard for more skills.