mcpField
D
design-tool-picker

design-tool-picker

github.com/majesticlabs-devDesign & UI5068 installsUpdated 7w ago
Repository

About design-tool-picker

A decision guide for developers unsure which design tool to use. It maps design stage, issue type, and the ability to run a UI to the relevant skill, command, or agent.

Key features

  1. 01Recommends tools by design task
  2. 02Distinguishes new and existing UIs
  3. 03Separates visual issues from code quality
  4. 04Explains static and screenshot-based tools
  5. 05Provides common design workflows

Use cases

  1. 01Choose design guidance for a new UI
  2. 02Decide how to iterate on or verify visual changes
  3. 03Select an accessibility code review approach
  4. 04Plan a design system update workflow

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill design-tool-picker

After installing, type/design-tool-pickerin Claude Code to confirm it loaded.

Details

From the project README

Design Tool Picker

When users ask "which design tool should I use?" or seem unsure about design tooling, guide them with this decision tree.

Quick Reference

Your SituationRecommended ToolTypeInvocation
Writing new UI codefrontend-designskillLoaded automatically
Need a design system templateux-briefcommandSkill("ux-brief")
Refining existing UI iterativelyui-ux-designeragentTask(majestic-engineer:design:ui-ux-designer)
Verifying visual changes match intentvisual-validatoragentTask(majestic-engineer:qa:visual-validator)
Reviewing code for accessibilityui-code-auditoragentTask(majestic-engineer:qa:ui-code-auditor)
Styling React componentstailwind-stylingskillSkill(majestic-react:tailwind-styling)

Decision Flow

Question 1: Do you have code written, or are you starting fresh?

Starting fresh → Choose based on what you need:

  • Need design system from scratch: Skill("ux-brief")
  • Just need design guidance while coding: frontend-design skill (auto-loads)

Have code → Continue to Question 2

Question 2: Is the issue visual (layout, colors, spacing) or code quality (a11y, patterns)?

Visual issues → Continue to Question 3

Code quality → ui-code-auditor agent

  • Reviews source code for accessibility violations
  • Detects missing alt text, aria-labels, form labels
  • Finds animation anti-patterns, touch target issues
  • Returns findings with file:line references
Question 3: Can you run the UI and take screenshots?

Yes → Continue to Question 4

No → frontend-design skill

  • Provides design patterns for typography, color, motion
  • Reference while coding without needing running UI
Question 4: Do you want to iterate on the design or verify it's correct?

Iterate → ui-ux-designer agent

  • Takes screenshots, analyzes, implements changes
  • Multiple iteration cycles (default 10)
  • Progressive refinement through visual feedback

Verify → visual-validator agent

  • Checks if changes achieved intended goals
  • Validates accessibility, design system compliance
  • Returns structured pass/fail verdict

Tool Comparison

Screenshot-Based Tools (Visual)
ToolPurposeWhen to Use
ui-ux-designerIterative refinement"Make this look better"
visual-validatorVerification"Did my changes work?"

Both require browser tools and running UI.

Code-Based Tools (Static)
ToolPurposeWhen to Use
ui-code-auditorAccessibility/quality audit"Check my code for a11y issues"
frontend-designDesign guidance"How should I style this?"

Work on source code without running UI.

Creation Tools
ToolPurposeWhen to Use
ux-brief commandGenerate design system"Create a design system for my project"
tailwind-stylingTailwind patterns"Help me use Tailwind effectively"

Common Workflows

New Feature with UI
  1. Skill("ux-brief") if no design system exists
  2. frontend-design skill while implementing
  3. ui-code-auditor before PR to catch a11y issues
  4. visual-validator to verify visuals match intent
Fix Visual Bug
  1. ui-ux-designer if iterating to find the right fix
  2. visual-validator to confirm fix worked
Accessibility Audit
  1. ui-code-auditor for code-level violations
  2. visual-validator for visual accessibility (contrast, focus states)
Design System Update
  1. Skill("ux-brief") to update design system docs
  2. visual-validator to verify components match spec

Comments

Markdown supported