关于 team-uidesign
team-uidesign 是面向团队的 UI 设计协作技能,按研究、设计令牌、审查和实现的流程组织工作。它使用协调者与专职工作者角色,并提供设计规范、反模式和质量评分参考。
主要功能
- 01协调 UI 设计流程
- 02研究、设计令牌、审查与实现
- 03按角色分配工作者任务
- 04提供设计规范与反模式参考
- 05使用质量评分指南
适用场景
- 01从研究推进到 UI 实现
- 02审查界面的一致性与质量
- 03依据规范和评分指南评估设计
MCP 相关
通过 `mcp__ccw-tools__team_msg` 消息总线协调团队工作者,并使用 CLI 工具进行只读分析和修改。
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ catlog22/ claude-code-workflow --skill team-uidesign安装后在 Claude Code 中输入/team-uidesign确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
roles/coordinator/role.mdroles/coordinator/commands/analyze.mddispatch.mdmonitor.mdroles/designer/role.mdroles/implementer/role.mdroles/researcher/role.mdroles/reviewer/role.mdspecs/anti-patterns.mddesign-standards.mdpipelines.mdscoring-guide.mdteam-config.jsonux-writing.md详细介绍
团队 UI 设计
系统化 UI 设计流程:研究 -> 设计令牌 -> 评审 -> 实现。基于 team-worker Agent 架构——所有工作者角色共用一个 Agent 定义,并从 roles/<role>/role.md 加载各自的 Phase 2-4。
架构
Skill(skill="team-uidesign", args="task description")
|
SKILL.md (this file) = Router
|
+--------------+--------------+
| |
no --role flag --role <name>
| |
Coordinator Worker
roles/coordinator/role.md roles/<name>/role.md
|
+-- analyze → dispatch → spawn workers → STOP
|
+-------+-------+-------+-------+
v v v v
[team-worker agents, each loads roles/<role>/role.md]
researcher designer reviewer implementer
角色注册表
| 角色 | 路径 | 前缀 | 内部循环 |
|---|---|---|---|
| coordinator | roles/coordinator/role.md | — | — |
| researcher | roles/researcher/role.md | RESEARCH-* | false |
| designer | roles/designer/role.md | DESIGN-* | false |
| reviewer | roles/reviewer/role.md | AUDIT-* | false |
| implementer | roles/implementer/role.md | BUILD-* | false |
角色路由器
解析 $ARGUMENTS:
- 包含
--role <name>→ 读取roles/<name>/role.md,执行 Phase 2-4 - 不包含
--role→@roles/coordinator/role.md,执行入口路由器
共享常量
- 会话前缀:
UDS - 会话路径:
.workflow/.team/UDS-<slug>-<date>/ - CLI 工具:
ccw cli --mode analysis(只读),ccw cli --mode write(修改) - 消息总线:
mcp__ccw-tools__team_msg(session_id=<session-id>, ...) - 最大 GC 轮数:2
工作者生成模板
Coordinator 使用此模板生成工作者:
Agent({
subagent_type: "team-worker",
description: "Spawn <role> worker for <task-id>",
team_name: "uidesign",
name: "<role>",
run_in_background: true,
prompt: `## Role Assignment
role: <role>
role_spec: <skill_root>/roles/<role>/role.md
session: <session-folder>
session_id: <session-id>
team_name: uidesign
requirement: <task-description>
inner_loop: false
## Progress Milestones
session_id: <session-id>
Report progress via team_msg at natural phase boundaries (context loaded -> core work done -> verification).
Report blockers immediately via team_msg type="blocker".
Report completion via team_msg type="task_complete" after final SendMessage.
Read role_spec file (@<skill_root>/roles/<role>/role.md) to load Phase 2-4 domain instructions.
Execute built-in Phase 1 (task discovery) -> role Phase 2-4 -> built-in Phase 5 (report).`
})
用户命令
| 命令 | 操作 |
|---|---|
check / status | 查看执行状态图 |
resume / continue | 推进到下一步 |
规范参考
- specs/pipelines.md — 流程定义和任务注册表
- specs/design-standards.md — 卓越设计标准(OKLCH、排版、间距、动效、交互)
- specs/anti-patterns.md — AI 糟粕检测目录(20 项)
- specs/scoring-guide.md — 8 维质量评分标准
- specs/ux-writing.md — UX 文案标准(标签、错误、空状态、语气)
会话目录
.workflow/.team/UDS-<slug>-<date>/
├── .msg/
│ ├── messages.jsonl # Team message bus
│ └── meta.json # Pipeline config + GC state
├── research/ # Researcher output
│ ├── design-system-analysis.json
│ ├── component-inventory.json
│ ├── accessibility-audit.json
│ ├── design-intelligence.json
│ └── visual-quality-baseline.json
├── design/ # Designer output
│ ├── design-tokens.json
│ ├── component-specs/
│ └── layout-specs/
├── audit/ # Reviewer output
│ └── audit-*.md
├── build/ # Implementer output
│ ├── token-files/
│ └── component-files/
└── wisdom/ # Cross-task knowledge
错误处理
| 情况 | 解决方案 |
|---|---|
| 未知命令 | 显示可用命令列表并报错 |
| 未找到角色 | 显示角色注册表并报错 |
| 会话损坏 | 尝试恢复,失败时改为手动处理 |
| 快速推进冲突 | Coordinator 在下次回调时协调解决 |
| 完成操作失败 | 默认设为保持活动状态 |
| GC 循环卡住超过 2 轮 | 请用户决定:接受 / 重试 / 终止 |
评论
支持 Markdown