Claude Code team-ui：分阶段协作设计和实现界面

Claude Code 安装步骤

打开 GitHub 固定提交的 `.claude/skills/team-ui/SKILL.md`，核对内容与使用条件。
在自己的项目中创建 `.claude/skills/team-ui/`，把核对后的文件保存为 `.claude/skills/team-ui/SKILL.md`。
在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/team-ui`。

让 UX 和前端角色分阶段交付线框、交互、实现和复核结果，将加载、空状态、错误及键盘操作写进验收。

功能 ui-17 是社区活动筛选器。设计输入说明键盘用户用 Tab 到达 Filter，按 Enter 打开菜单，按 Escape 关闭并把焦点还给 Filter。

UX 和实现复核记录都应满足 {openKey: 'Enter', closeKey: 'Escape', focusAfterClose: 'Filter'}，并记录线框、实现和键盘验收的状态。

GitHub 原文 · 更新日期 2026-11-14

在 Claude Code 中打开保留 ux-designer 和 frontend-engineer 项目代理的 Claude Code Software Studios 工作区。测试时准备项目支持的浏览器与视口。

先由 UX 角色给出交互和线框。用户确认方案后，前端角色再实现，并在后续复核键盘操作和视口表现。