name: ui description: “生成UI组件和反馈表单。当用户提到组件、UI、英雄部分、表单、反馈或联系请求时使用。不要用于：认证功能、后端实现、数据库操作或业务逻辑。” allowed-tools: [“Read”, “Write”, “Edit”, “Bash”] user-invocable: false
UI技能
负责生成UI组件和表单的技能群。
约束的优先级和应用条件
- 基本是优先应用
references/ui-skills.md的约束。 references/frontend-design.md仅在“尖锐/独特/表现强烈/品牌强化”等被明确指定时应用。- UI技能 的 MUST/NEVER 原则上维持。但用户明确要求时允许以下例外:
- 渐变、发光、强烈装饰
- 动画（添加・扩展）
- 自定义缓动
功能详细
| 功能 | 详细 |
|---|---|
| 约束集合 | 参见 references/ui-skills.md / references/frontend-design.md |
| 组件生成 | 参见 references/component-generation.md |
| 反馈表单 | 参见 references/feedback-forms.md |
执行步骤
- 应用约束集合（遵循优先级）
- 品质判定门（步骤 0）
- 分类用户的请求
- 从上述“功能详细”中读取适当的参考文件
- 根据其内容生成
步骤 0: 品质判定门（a11y 检查清单）
UI 组件生成时，确保可访问性:
♿ 可访问性检查清单
生成的 UI 推荐满足以下：
### 必须项目
- [ ] 为图像设置 alt 属性
- [ ] 为表单元素关联 label
- [ ] 可键盘操作（Tab 键移动焦点）
- [ ] 焦点状态视觉上清晰
### 推荐项目
- [ ] 不依赖颜色的信息传达
- [ ] 对比度比 4.5:1 以上（文本）
- [ ] 适当使用 aria-label / aria-describedby
- [ ] 标题结构（h1 → h2 → h3）逻辑
### 交互元素
- [ ] 按钮有适当标签（“详细”而不是“产品详细查看”）
- [ ] 模态/对话框的焦点陷阱
- [ ] 错误信息能被屏幕阅读器读取
针对 VibeCoder
♿ 为了让设计所有人都能使用
1. **为图像添加说明**
- 不是“商品图像”而是“红色运动鞋，正面”
2. **可点击的地方也能用键盘操作**
- Tab 键移动，Enter 键决定
3. **不只用颜色判断**
- 不只是红色=错误，还要有图标+文本