@tom_doerr: 87 design skills for Claude Code https://github.com/Owl-Listener/designer-skills…

X AI KOLs Timeline Tools
claude-code design-plugins open-source agentic-design design-toolkit

Summary

A collection of 87 design skills and 27 commands across 8 plugins for Claude Code, covering design research, systems, UI, interaction, and more. Can be installed via the plugin marketplace or used with Gemini CLI.

87 design skills for Claude Code https://github.com/Owl-Listener/designer-skills…
Original Article
View Cached Full Text

Cached at: 05/12/26, 10:54 AM

87 design skills for Claude Code https://github.com/Owl-Listener/designer-skills…

Owl-Listener/designer-skills

Source: https://github.com/Owl-Listener/designer-skills

Designer Skills Collection

Agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery. 87 skills and 27 commands across 8 plugins for Claude Code.

Plugins

PluginSkillsCommandsDescription
design-research124User research: personas, empathy maps, journey maps, interviews, usability testing, card sorting, surveys, and research repositories.
design-systems113Build and maintain design systems: tokens, components, accessibility, theming, motion, governance, and localization.
ux-strategy113Shape product direction: competitive analysis, design principles, experience mapping, information architecture, content strategy, and service blueprints.
ui-design144Craft polished interfaces: layout grids, color systems, typography, responsive design, data viz, and Gestalt/perceptual principles.
interaction-design153Design meaningful interactions: micro-animations, state machines, gestures, feedback, cognitive laws, forms, onboarding, navigation, and search.
prototyping-testing84Validate designs: prototyping strategies, usability testing, heuristic evaluation, and A/B experiments.
design-ops93Streamline operations: critique frameworks, handoff specs, sprint planning, team workflows, design debt, and impact reporting.
designer-toolkit73Essential utilities: design rationale, presentations, case studies, UX writing, system adoption, and design negotiation.

Quick Start

Claude Code

Step 1: Add the Marketplace

/plugin marketplace add Owl-Listener/designer-skills

Step 2: Install Plugins

/plugin

Go to the Discover tab to see all 8 design plugins, then select and install the ones you want.

Gemini CLI

Install individual plugins as workspace-scoped extensions. From your project root:

# Install one plugin (e.g. design-research)
mkdir -p .gemini/extensions
cp -r path/to/designer-skills/.gemini/extensions/design-research .gemini/extensions/

# Or clone the repo and symlink all extensions at once
git clone https://github.com/Owl-Listener/designer-skills /tmp/designer-skills
cp -r /tmp/designer-skills/.gemini/extensions/. .gemini/extensions/

Each extension is a directory under .gemini/extensions/ containing a gemini-extension.json manifest and a GEMINI.md context file compiled from all skills in that plugin. Gemini CLI loads the context automatically when you start a session in that workspace.

To install user-globally (available in all projects):

cp -r path/to/designer-skills/.gemini/extensions/design-research ~/.gemini/extensions/

What Are Skills and Commands?

  • Skills are domain knowledge units (nouns). They teach Claude about a design topic — like creating user personas, defining design tokens, or writing error messages.
  • Commands are workflows (verbs). They chain multiple skills together to accomplish a task — like running a full design system audit or planning a usability test.

All Commands

CommandPluginDescription
/design-research:discoverdesign-researchRun a full user research discovery cycle.
/design-research:interviewdesign-researchPrepare and conduct a user interview.
/design-research:test-plandesign-researchCreate a usability test plan.
/design-research:synthesizedesign-researchSynthesize research data into insights.
/design-systems:audit-systemdesign-systemsAudit a design system for consistency and accessibility.
/design-systems:create-componentdesign-systemsScaffold a full component specification.
/design-systems:tokenizedesign-systemsExtract and organize design tokens.
/ux-strategy:strategizeux-strategyDevelop a complete UX strategy.
/ux-strategy:benchmarkux-strategyRun a competitive benchmarking analysis.
/ux-strategy:frame-problemux-strategyStructure an ambiguous challenge into a clear problem.
/ui-design:design-screenui-designDesign a complete screen layout.
/ui-design:color-paletteui-designGenerate a full color palette with accessibility checks.
/ui-design:type-systemui-designCreate a complete typography system.
/ui-design:responsive-auditui-designAudit a design for responsive behavior.
/interaction-design:design-interactioninteraction-designDesign a complete interaction flow.
/interaction-design:map-statesinteraction-designModel states and transitions for a component.
/interaction-design:error-flowinteraction-designDesign error handling for a feature.
/prototyping-testing:prototype-planprototyping-testingCreate a prototyping and testing plan.
/prototyping-testing:evaluateprototyping-testingRun a heuristic evaluation.
/prototyping-testing:test-planprototyping-testingDesign a complete usability testing plan.
/prototyping-testing:experimentprototyping-testingDesign an A/B experiment.
/design-ops:plan-sprintdesign-opsPlan a design sprint.
/design-ops:handoffdesign-opsGenerate a developer handoff package.
/design-ops:setup-workflowdesign-opsSet up a design team workflow.
/designer-toolkit:write-rationaledesigner-toolkitWrite design rationale for decisions.
/designer-toolkit:build-presentationdesigner-toolkitStructure a design presentation.
/designer-toolkit:write-case-studydesigner-toolkitCreate a portfolio case study.

Contributing

See CONTRIBUTING.md for guidelines on adding new skills, commands, and plugins.

License

MIT — see LICENSE.

Similar Articles