design-tool-picker

设计工具选择器

当用户询问“我应该使用哪种设计工具？”或似乎不确定该使用什么设计工具时，请通过此决策树为他们提供指导。

快速参考

你的情况	推荐工具	类型	调用方式
编写新的 UI 代码	frontend-design	skill	自动加载
需要设计系统模板	ux-brief	command	Skill("ux-brief")
迭代优化现有 UI	ui-ux-designer	agent	Task(majestic-engineer:design:ui-ux-designer)
验证视觉更改是否符合预期	visual-validator	agent	Task(majestic-engineer:qa:visual-validator)
审查代码的无障碍性	ui-code-auditor	agent	Task(majestic-engineer:qa:ui-code-auditor)
为 React 组件设置样式	tailwind-styling	skill	Skill(majestic-react:tailwind-styling)

---

决策流程

问题 1：你已经写好代码了吗，还是要从头开始？

从头开始 → 根据你的需求选择：

• 需要从零构建设计系统：Skill("ux-brief")
• 只是在编码时需要设计指导：frontend-design skill（自动加载）

已有代码 → 继续回答问题 2

---

问题 2：问题属于视觉层面（布局、颜色、间距）还是代码质量层面（a11y、模式）？

视觉问题 → 继续回答问题 3

代码质量 → ui-code-auditor agent

• 审查源代码中的无障碍违规问题
• 检测缺失的 alt 文本、aria-label 和表单标签
• 查找动画反模式和触控目标问题
• 返回包含文件:行号引用的检查结果

---

问题 3：你能运行 UI 并截取屏幕截图吗？

能 → 继续回答问题 4

不能 → frontend-design skill

• 提供有关排版、颜色和动效的设计模式
• 可在编码时参考，无需运行 UI

---

问题 4：你想迭代优化设计，还是验证设计是否正确？

迭代优化 → ui-ux-designer agent

• 截取屏幕截图、分析并实施更改
• 支持多个迭代周期（默认 10 次）
• 通过视觉反馈逐步优化

验证 → visual-validator agent

• 检查更改是否达成预期目标
• 验证无障碍性及设计系统规范的符合情况
• 返回结构化的通过/未通过判定

---

工具对比

基于屏幕截图的工具（视觉）

工具	用途	适用场景
ui-ux-designer	迭代优化	“让这个看起来更好”
visual-validator	验证	“我的更改生效了吗？”

这两种工具都需要浏览器工具和正在运行的 UI。

基于代码的工具（静态）

工具	用途	适用场景
ui-code-auditor	无障碍性/质量审计	“检查我的代码是否存在 a11y 问题”
frontend-design	设计指导	“我应该如何设置样式？”

无需运行 UI，即可处理源代码。

创建工具

工具	用途	适用场景
ux-brief command	生成设计系统	“为我的项目创建一个设计系统”
tailwind-styling	Tailwind 模式	“帮我有效地使用 Tailwind”

---

常见工作流

带 UI 的新功能

1. 如果尚无设计系统，使用 Skill("ux-brief")
2. 实施过程中使用 frontend-design skill
3. 提交 PR 前使用 ui-code-auditor，以发现 a11y 问题
4. 使用 visual-validator 验证视觉效果是否符合预期

修复视觉问题

1. 如果需要通过迭代找到合适的修复方式，使用 ui-ux-designer
2. 使用 visual-validator 确认修复已生效

无障碍审计

1. 使用 ui-code-auditor 查找代码层面的违规问题
2. 使用 visual-validator 检查视觉无障碍性（对比度、焦点状态）

更新设计系统

1. 使用 Skill("ux-brief") 更新设计系统文档
2. 使用 visual-validator 验证组件是否符合规范