Agent skill
ui-ux-design
Standard Operating Procedure for design workflow. Phase 1: Variations (diverge), Phase 2: Functional (converge), Phase 3: Polish (systemize).
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/ui-ux-design-marcusgoll-robinhood-algo-tradi
SKILL.md
UI/UX Design: Standard Operating Procedure
Training Guide: Three-phase design workflow for UI features.
Phase Overview
Purpose: Generate UI designs through diverge → converge → polish workflow Phases:
- Variations (3-5 grayscale mockups, diverge fast)
- Functional (merge selected variant → functional prototype with a11y + tests)
- Polish (apply brand tokens + performance optimization)
Expected duration: 2-4 hours per phase
Execution Steps
Phase 1: Design Variations
- Create 3-5 grayscale UI variants
- Focus on layout/structure (no colors yet)
- Explore different approaches
- Get stakeholder feedback
Phase 2: Design Functional
- Select best variant
- Make it functional (working prototype)
- Add accessibility (ARIA, keyboard nav)
- Add component tests
- Verify user flows work
Phase 3: Design Polish
- Apply brand design system (colors, fonts, spacing)
- Optimize performance (lazy loading, image compression)
- Refine animations
- Final accessibility audit
Common Mistakes
- Too many variants (>5)
- Design system violations
- Variants not cleaned up
- Accessibility failures
Completion Criteria
- Variants created (3-5 max)
- Functional prototype working
- Design system applied
- Accessibility score ≥95
This SOP guides UI/UX design workflow.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?