designer-skills-collection

Designer Skills Collection

Skill by ara.so — Design Skills collection.

The Designer Skills Collection is a comprehensive library of 91 skills and 28 commands across 9 plugins for AI coding agents like Claude Code. It provides domain expertise in design research, design systems, UX strategy, UI design, interaction design, prototyping, design ops, and visual critique.

What It Does

This collection teaches AI agents how to:

• Conduct user research (personas, journey maps, interviews, usability testing)
• Build and maintain design systems (tokens, components, accessibility)
• Define UX strategy (competitive analysis, IA, content strategy)
• Design polished UI (layout grids, color systems, typography)
• Create meaningful interactions (micro-animations, state machines, gestures)
• Validate designs (prototyping, testing, heuristic evaluation)
• Streamline design operations (handoff specs, sprint planning, workflows)
• Critique visual designs (hierarchy, brand consistency, composition)

Installation

Claude Code

Step 1: Add the Marketplace

/plugin marketplace add Owl-Listener/designer-skills

Step 2: Install Plugins

/plugin

Navigate to the Discover tab, then select and install the plugins you need from these 9 options:

• design-research (12 skills, 4 commands)
• design-systems (11 skills, 3 commands)
• ux-strategy (11 skills, 3 commands)
• ui-design (14 skills, 4 commands)
• interaction-design (15 skills, 3 commands)
• prototyping-testing (8 skills, 4 commands)
• design-ops (9 skills, 3 commands)
• designer-toolkit (7 skills, 3 commands)
• visual-critique (4 skills, 1 command)

Gemini CLI

Install individual plugins as workspace-scoped extensions:

# Install one plugin
mkdir -p .gemini/extensions
cp

For user-global installation (available in all projects):

Each extension directory contains:

• gemini-extension.json (manifest)
• GEMINI.md (context file with all skills)

Key Commands

Design Research

Design Systems

UX Strategy

UI Design

Interaction Design

Prototyping & Testing

Design Ops

Designer Toolkit

Visual Critique

Usage Patterns

Example: Create a Design System Component

The agent will guide you through:

1. Component naming and purpose
2. Variant definitions
3. Accessibility requirements
4. Token usage
5. Documentation structure
6. Code examples

Example: Run User Research Discovery

The agent will help you:

1. Define research goals
2. Choose appropriate methods
3. Create screeners and scripts
4. Plan recruitment
5. Synthesize findings
6. Generate artifacts (personas, journey maps)

Example: Audit Responsive Design

The agent will check:

1. Breakpoint strategy
2. Layout flexibility
3. Touch target sizes
4. Content prioritization
5. Performance considerations

Configuration

Each plugin is self-contained with no external configuration required. Skills and commands are immediately available after installation.

Plugin Structure

Gemini Extension Structure

Common Workflows

Setting Up a New Design Project

Building a Component Library

Preparing for Developer Handoff

Troubleshooting

Plugin Not Found

Issue: /plugin command doesn't show the marketplace or plugins.

Solution: Ensure you've added the marketplace first:

/plugin marketplace add Owl-Listener/designer-skills

Commands Not Working

Issue: Commands like /design-research:discover return an error.

Solution: Verify the plugin is installed:

/plugin

Check the Installed tab. If missing, go to Discover and install the required plugin.

Gemini Extensions Not Loading

Issue: Gemini CLI doesn't recognize the extensions.

Solution: Ensure the directory structure is correct:

Restart your Gemini session after copying extensions.

Partial Installation

Issue: Only some plugins are available.

Solution: Install plugins individually as needed. You don't need all 9 plugins — install only what your project requires to keep the context manageable.

Best Practices

1. Install Incrementally: Start with 2-3 plugins relevant to your current work, not all 9 at once.

2. Use Commands as Workflows: Commands chain multiple skills together — use them for complex tasks rather than invoking skills individually.

3. Combine Plugins: Many workflows benefit from multiple plugins (e.g., ux-strategy + design-research + ui-design).

4. Reference Documentation: Each skill includes detailed context. Ask the agent to explain a skill if you're unsure how to use it.

5. Workspace vs Global: For Gemini, use workspace-scoped extensions for project-specific design work, global extensions for personal design methodology.

Repository Structure

The source repository contains:

• Plugin directories (each with skills and commands)
• .gemini/extensions/ compiled for Gemini CLI
• CONTRIBUTING.md for adding new skills
• Individual SKILL.md and COMMAND.md files

License

MIT License — free to use, modify, and distribute.