name: ui description: “生成UI组件和反馈表单。当用户提及组件、UI、英雄区域、表单、反馈或联系请求时使用。不要用于：认证功能、后端实现、数据库操作或业务逻辑。” description-en: “生成UI组件和反馈表单。当用户提及组件、UI、英雄区域、表单、反馈或联系请求时使用。不要用于：认证功能、后端实现、数据库操作或业务逻辑。” description-ja: “生成UI组件和反馈表单。当用户提及组件、UI、英雄区域、表单、反馈或联系请求时使用。不要用于：认证功能、后端实现、数据库操作或业务逻辑。” allowed-tools: [“Read”, “Write”, “Edit”, “Bash”] user-invocable: false
UI 技能
负责生成UI组件和表单的技能群。
约束的优先级和适用条件
- 基本优先应用
references/ui-skills.md的约束。 references/frontend-design.md仅在“尖锐/独特/表现强烈/品牌强化”等明确指出时应用。- UI Skills 的 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. **不只用颜色判断**
- 例如错误时不仅有红色，还有图标和文本