claudeers.

🔓 unclaimed — this page was auto-generated from GitHub. Are you the creator?

Claim this page →
// Automation & Workflows

designer-skills

Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.

// install
git clone https://github.com/Owl-Listener/designer-skills

The Designer Skills Pack

Design skills for the agent era, written so an AI agent can actually use them.

239 skills and 88 commands across 33 plugins, in five collections, for Claude Code and Gemini CLI.

Getting started (no coding needed)

These skills run inside an AI coding assistant. The easiest place to use them is Claude Code, and it takes three steps. No terminal required.

1. Get Claude Code. It's a free app from Anthropic (claude.com). Download it, sign in, and open it. You only do this once.

2. Add the suite. In Claude Code, type this and press enter:

/plugin marketplace add Owl-Listener/designer-skills

This just tells Claude where the skills live. Nothing installs yet.

3. Pick what you want. Type /plugin and press enter, then open the Discover tab. You'll see all the collections. Move with the arrow keys, press space to tick the ones you want, and enter to install. That's it.

I only want the design skills, not everything

Same three steps. On the Discover list in step 3, just tick the design ones, design-research, design-systems, ui-design, interaction-design, and so on, and leave the rest. Install as few or as many as you like, and come back for more any time.

I only want one specific collection

Each collection also has its own door. Swap the command in step 2 for the one you want, for example:

/plugin marketplace add Owl-Listener/inclusive-design-skills

Then do step 3 the same way.

Prefer Gemini CLI?

Each plugin is also a Gemini CLI extension. From your project root:

git clone https://github.com/Owl-Listener/designer-skills /tmp/designer-skills
mkdir -p .gemini/extensions
cp -r /tmp/designer-skills/.gemini/extensions/. .gemini/extensions/

The five collections

CollectionPluginsWhat it covers
Design practice (this repo)9Research, systems, UX strategy, UI, interaction, prototyping & testing, design ops, the designer's toolkit, visual critique.
AI product design6Designing agentic experiences: model interaction, alignment reasoning, system behaviour, evaluation, agent orchestration, prompt architecture.
UX program management6Running design programs: planning, stakeholder comms, delivery, alignment, measurement, process design.
Design leadership6Leading design: people, teams, strategy, org influence, operating cadence, leadership craft.
Inclusive design6Accessible by default: cognitive accessibility, inclusive interaction, accessible content, inclusive personas, adaptive interfaces, accessibility decisions.

Each collection also lives in its own repo, with its own stars and full detail. This repo is the front door, and the home of the design-practice collection below.


Design practice (this repo)

Agentic skills, commands, and plugins for design, from research to systems, UI, interaction, and delivery. 97 skills and 30 commands across 9 plugins.

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-strategy123Shape 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-design163Design 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.
visual-critique72Visual critique: hierarchy, brand consistency, composition, typography, colour, affordance, and information density.

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.
/visual-critique:critique-screenvisual-critiqueRun all seven visual critiques on a screen and output a prioritised fix list.
/visual-critique:critique-uxvisual-critiqueFocused functional critique: hierarchy, affordance, and information density.

What are skills and commands?

Skills are domain knowledge units — nouns. They teach Claude about a design topic: how to create a user persona, how to define design tokens, how to write a non-leading interview question.

Commands are workflows — verbs. They chain skills together to do a complete job: /design-research:discover runs personas, empathy map, and journey map in one go.

You'll mostly reach for commands. The skills run underneath them.

Pick your starting point

I'm starting a new product from scratch

Start with research, even if you think you know the users.

/design-research:discover

Tell Claude: what you're building, who you think the users are, and what problem you're solving. It will run a full discovery cycle — personas, empathy map, journey map — and surface the gaps in your assumptions.

From there, move in sequence:

  • /ux-strategy:frame-problem — structure the design challenge before you start designing
  • /ui-design:design-screen — when you're ready to build
  • /interaction-design:design-interaction — for any flows that have meaningful state or motion
  • /design-systems:create-component — when patterns start repeating and you need to systemise them

Minimum install for this path: design-research, ux-strategy, ui-design, interaction-design

I'm working on an existing product

Start with a critique, not new work.

/visual-critique:critique-screen

Drop a screenshot. Get a prioritised fix list covering hierarchy, brand consistency, composition, and typography. This tells you what's actually broken before you add anything new.

Then:

  • /prototyping-testing:evaluate — run a heuristic evaluation if you want a fuller audit
  • /design-ops:handoff — if you're in a delivery phase and need specs
  • /design-systems:audit-system — if you suspect system debt is the root cause

Minimum install for this path: visual-critique, prototyping-testing, design-ops

I have a specific deliverable to produce

Go directly to the plugin that covers it. You don't need everything.

What you need to producePluginCommand
User personasdesign-research
Interview scriptdesign-research/design-research:interview
Journey mapdesign-research
Competitive analysisux-strategy/ux-strategy:benchmark
Colour paletteui-design/ui-design:color-palette
Typography systemui-design/ui-design:type-system
Component specdesign-systems/design-systems:create-component
Design tokensdesign-systems/design-systems:tokenize
Usability test planprototyping-testing/prototyping-testing:test-plan
Developer handoffdesign-ops/design-ops:handoff
Design rationaledesigner-toolkit/designer-toolkit:write-rationale
Case studydesigner-toolkit/designer-toolkit:write-case-study

I'm building with AI and need to design the AI experience

This collection covers conventional design. For designing AI products specifically — model interaction, alignment reasoning, error personality, agent orchestration — use the companion collection:

/plugin marketplace add Owl-Listener/ai-design-skills

The two collections are designed to work alongside each other.

If you're not sure where to start, install these four and you'll have coverage across the full design cycle:

/plugin install design-research@designer-skills
/plugin install ux-strategy@designer-skills
/plugin install ui-design@designer-skills
/plugin install design-ops@designer-skills

Add others as you need them. The plugins are lightweight — installing more doesn't slow things down.

A note on sequence

The plugins aren't a strict pipeline, but there's a natural grain to them:

design-research → ux-strategy → ui-design / interaction-design → design-systems → design-ops

Research informs strategy. Strategy shapes UI decisions. Patterns in UI become system components. Systems flow into ops. Working against this grain is fine — but if something feels hard, it's often because a step earlier in the sequence was skipped.

Why this exists

Most design knowledge is written for humans to read and interpret. An agent gets none of that nuance. It reads what we wrote literally, and guesses where we left the meaning out, and the guesses pile up into something hollow. This suite writes the judgment down: what a thing is for, when to use it, and what to never do. Taste, made legible.

Questions?

Open an issue. If something isn't working the way you expected, or if a skill output feels wrong for your context, that's signal worth capturing.

Contributing

Each collection takes contributions in its own repo. Add a skill, ship its plugin manifest in the same commit, and open a PR. PRs for new skills or structural changes without a corresponding open issue will be closed without review.

Community Integrations

Tools and plugins built on top of designer-skills:

IntegrationDescriptionMaintainerdesign-library-pluginClaude Code plugin exposing designer-skills via /design-process, with keyword activation across wireframe, prototype, user research, design sprint, and handoff workflows@zeta92

If you've built something on top of this collection and want it listed here, open an issue.

License

MIT.

By MC Dean · MC Percolates on Substack

// compatibility

Platformscli, api
Operating systems
AI compatibilityclaude
LicenseMIT
Pricingopen-source
LanguageMarkdown

// faq

What is designer-skills?

Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.. It is open-source on GitHub.

Is designer-skills free to use?

designer-skills is open-source under the MIT license, so it is free to use.

What category does designer-skills belong to?

designer-skills is listed under automation in the Claudeers registry of Claude-compatible tools.

0 views
1,721 stars
unclaimed
updated 5 days ago

// embed badge

designer-skills on Claudeers
[![Claudeers](https://claudeers.com/api/badge/designer-skills.svg)](https://claudeers.com/designer-skills)

// retro hit counter

designer-skills hit counter
[![Hits](https://claudeers.com/api/counter/designer-skills.svg)](https://claudeers.com/designer-skills)

// reviews

// guestbook

0/500

// related in Automation & Workflows

🔓

The agent that grows with you

// automationNousResearch/Python208,716MIT[ claude ]
🔓

The API to search, scrape, and interact with the web at scale. 🔥

// automationfirecrawl/TypeScript143,720AGPL-3.0[ claude ]
🔓

🌐 Make websites accessible for AI agents. Automate tasks online with ease.

// automationbrowser-use/Python102,507MIT[ claude ]
🔓

An open-source long-horizon SuperAgent harness that researches, codes, and creates. With the help of sandboxes, memories, tools, skill, subagents and message…

// automationbytedance/Python76,016MIT[ claude ]

// built by

Connectorlinks several projects together across the ecosystem · 12 connections

1 of its contributors also build on official projectsclaude-code, claude-cookbooks, claude-plugins-official

→ see how designer-skills connects across the ecosystem