designer-skills-collection

Installs design research, systems, UI, and critique plugins for Claude Code and Gemini CLI.

4|Updated May 16, 2026
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill designer-skills-collection-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer-skills-collection
Source: https://github.com/reason-machines/design-skills/tree/main/skills/designer-skills-collection
Command: npx skills add https://github.com/reason-machines/design-skills --skill designer-skills-collection-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI coding agents lack built-in design expertise, forcing designers and developers to manually prompt for research methods, design system rules, and UX workflows. This collection packages 91 skills and 28 commands across 9 plugins so agents can execute structured design work out of the box. ## Core Features & Use Cases - Nine Domain Plugins: Covers design research, design systems, UX strategy, UI design, interaction design, prototyping and testing, design ops, designer toolkit, and visual critique. - Slash Command Workflows: Commands like /design-research:discover, /design-systems:tokenize, and /ui-design:responsive-audit chain multiple skills into guided workflows. - Multi-Platform Installation: Installs via the Claude Code plugin marketplace or as workspace-scoped Gemini CLI extensions. - Use Case: A product designer starting a new project installs the ux-strategy and design-research plugins, runs /ux-strategy:frame-problem to structure the challenge, then /design-research:discover to plan interviews and synthesize personas. ## Quick Start Add the Owl-Listener/designer-skills marketplace in Claude Code and install the design plugins you need, then run a command like /design-systems:create-component to begin.

Frequently Asked Questions about designer-skills-collection

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install designer skills plugins in Claude Code?▼

Add the marketplace with /plugin marketplace add Owl-Listener/designer-skills, then run /plugin and open the Discover tab to install any of the 9 plugins. Skills and commands become available immediately after installation.

What design tasks can Claude Code do with these plugins?▼

The plugins cover user research, design system audits, UX strategy, UI layout and typography, interaction flows, usability testing, developer handoff, and visual critique. Each domain has dedicated slash commands like /design-research:discover or /ui-design:color-palette.

Can I use designer-skills with Gemini CLI?▼

Yes, copy the plugin folders from the repository's .gemini/extensions directory into your project's .gemini/extensions folder for workspace scope, or into ~/.gemini/extensions for global use. Restart your Gemini session after copying.

Why are designer-skills commands not working in Claude Code?▼

Commands fail when the plugin is not installed or the marketplace was never added. Run /plugin marketplace add Owl-Listener/designer-skills first, then check the Installed tab in /plugin to confirm the required plugin is active.

Do I need to install all 9 designer-skills plugins?▼

No, install only the plugins relevant to your current work to keep the agent context manageable. The documentation recommends starting with 2-3 plugins and combining them as workflows require.