| name | design-tool-picker |
| description | Help choose the right design tool based on your current task. Use when unsure whether to use frontend-design, ui-ux-designer, visual-validator, or ui-code-auditor. |
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 Situation | Recommended Tool | Type | Invocation |
|---|
| Writing new UI code | frontend-design | skill | Loaded automatically |
| Need a design system template | ux-brief | command | Skill("ux-brief") |
| Refining existing UI iteratively | ui-ux-designer | agent | Task(majestic-engineer:design:ui-ux-designer) |
| Verifying visual changes match intent | visual-validator | agent | Task(majestic-engineer:qa:visual-validator) |
| Reviewing code for accessibility | ui-code-auditor | agent | Task(majestic-engineer:qa:ui-code-auditor) |
| Styling React components | tailwind-styling | skill | Skill(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)
| Tool | Purpose | When to Use |
|---|
ui-ux-designer | Iterative refinement | "Make this look better" |
visual-validator | Verification | "Did my changes work?" |
Both require browser tools and running UI.
Code-Based Tools (Static)
| Tool | Purpose | When to Use |
|---|
ui-code-auditor | Accessibility/quality audit | "Check my code for a11y issues" |
frontend-design | Design guidance | "How should I style this?" |
Work on source code without running UI.
Creation Tools
| Tool | Purpose | When to Use |
|---|
ux-brief command | Generate design system | "Create a design system for my project" |
tailwind-styling | Tailwind patterns | "Help me use Tailwind effectively" |
Common Workflows
New Feature with UI
Skill("ux-brief") if no design system existsfrontend-design skill while implementingui-code-auditor before PR to catch a11y issuesvisual-validator to verify visuals match intent
Fix Visual Bug
ui-ux-designer if iterating to find the right fixvisual-validator to confirm fix worked
Accessibility Audit
ui-code-auditor for code-level violationsvisual-validator for visual accessibility (contrast, focus states)
Design System Update
Skill("ux-brief") to update design system docsvisual-validator to verify components match spec
