Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By Owl-Listener
Design complete UI interaction flows by generating specs with state machine diagrams, micro-animations, gesture patterns, feedback mechanisms, loading states, and error handling strategies. Apply skills for animation principles, UX patterns, and commands like /design-interaction or /map-states to model complex components like forms, media players, or authentication.
npx claudepluginhub owl-listener/designer-skills --plugin interaction-designApply animation principles to UI motion for purposeful, polished interactions.
Design error prevention, detection, and recovery experiences.
Design system feedback for user actions including confirmations, status updates, and notifications.
Design gesture-based interactions for touch and pointer devices.
Design loading, skeleton, and progressive content reveal patterns.
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Design meaningful interactions with micro-animations, state machines, gestures, error handling, and feedback patterns.
Craft polished user interfaces with layout grids, color systems, typography scales, responsive patterns, and visual hierarchy.
Design workflow for coding agents: discovery, research, strategy, inclusive design, critique, and handoff — enforced automatically
UI/UX 介面體驗設計
Expert UI/UX design guidance for unique, accessible interfaces. Always-ask-first protocol for visual decisions, colors, typography, layouts.
Design with Intent. A comprehensive UX and design strategy system — 15 specialized skills and 6 named agents covering strategy, research, experience design, quality assurance, accessibility, measurement, and engineering handoff.
User research skills for designers: personas, empathy maps, journey maps, interview scripts, usability testing, and card sorting.
Essential designer utilities for writing rationale, building presentations, crafting case studies, UX writing, and driving adoption.
Shape product direction through competitive analysis, design principles, experience mapping, and strategic alignment.
Craft polished user interfaces with layout grids, color systems, typography scales, responsive patterns, and visual hierarchy.
Plan and execute design validation through prototyping strategies, usability testing, heuristic evaluation, and A/B experiments.
Agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery. 63 skills and 27 commands across 8 plugins for Claude Code.
| Plugin | Skills | Commands | Description |
|---|---|---|---|
| design-research | 10 | 4 | User research: personas, empathy maps, journey maps, interviews, usability testing, and card sorting. |
| design-systems | 8 | 3 | Build and maintain design systems: tokens, components, accessibility, theming, and documentation. |
| ux-strategy | 8 | 3 | Shape product direction: competitive analysis, design principles, experience mapping, and alignment. |
| ui-design | 9 | 4 | Craft polished interfaces: layout grids, color systems, typography, responsive design, and data viz. |
| interaction-design | 7 | 3 | Design meaningful interactions: micro-animations, state machines, gestures, error handling, and feedback. |
| prototyping-testing | 8 | 4 | Validate designs: prototyping strategies, usability testing, heuristic evaluation, and A/B experiments. |
| design-ops | 7 | 3 | Streamline operations: critique frameworks, handoff specs, sprint planning, and team workflows. |
| designer-toolkit | 6 | 3 | Essential utilities: design rationale, presentations, case studies, UX writing, and system adoption. |
In Claude Code, run:
/plugin marketplace add Owl-Listener/designer-skills
This registers the marketplace so you can browse and install individual plugins.
Open the plugin manager and browse available plugins:
/plugin
Go to the Discover tab to see all 8 design plugins, then select and install the ones you want.
| Command | Plugin | Description |
|---|---|---|
/design-research:discover | design-research | Run a full user research discovery cycle. |
/design-research:interview | design-research | Prepare and conduct a user interview. |
/design-research:test-plan | design-research | Create a usability test plan. |
/design-research:synthesize | design-research | Synthesize research data into insights. |
/design-systems:audit-system | design-systems | Audit a design system for consistency and accessibility. |
/design-systems:create-component | design-systems | Scaffold a full component specification. |
/design-systems:tokenize | design-systems | Extract and organize design tokens. |
/ux-strategy:strategize | ux-strategy | Develop a complete UX strategy. |
/ux-strategy:benchmark | ux-strategy | Run a competitive benchmarking analysis. |
/ux-strategy:frame-problem | ux-strategy | Structure an ambiguous challenge into a clear problem. |
/ui-design:design-screen | ui-design | Design a complete screen layout. |
/ui-design:color-palette | ui-design | Generate a full color palette with accessibility checks. |
/ui-design:type-system | ui-design | Create a complete typography system. |
/ui-design:responsive-audit | ui-design | Audit a design for responsive behavior. |
/interaction-design:design-interaction | interaction-design | Design a complete interaction flow. |
/interaction-design:map-states | interaction-design | Model states and transitions for a component. |
/interaction-design:error-flow | interaction-design | Design error handling for a feature. |
/prototyping-testing:prototype-plan | prototyping-testing | Create a prototyping and testing plan. |
/prototyping-testing:evaluate | prototyping-testing | Run a heuristic evaluation. |
/prototyping-testing:test-plan | prototyping-testing | Design a complete usability testing plan. |
/prototyping-testing:experiment | prototyping-testing | Design an A/B experiment. |
/design-ops:plan-sprint | design-ops | Plan a design sprint. |
/design-ops:handoff | design-ops | Generate a developer handoff package. |
/design-ops:setup-workflow | design-ops | Set up a design team workflow. |
/designer-toolkit:write-rationale | designer-toolkit | Write design rationale for decisions. |
/designer-toolkit:build-presentation | designer-toolkit | Structure a design presentation. |
/designer-toolkit:write-case-study | designer-toolkit | Create a portfolio case study. |