⚡

UI组件与表单生成技能Skill ui

这是一个专注于生成用户界面（UI）组件和反馈表单的自动化技能。它能够根据用户需求，快速创建符合可访问性标准的网页组件（如英雄区域、表单等）和用户反馈收集界面。核心功能包括组件生成、表单设计、可访问性（a11y）合规检查。适用于前端开发、低代码平台和需要快速构建用户界面的场景。 关键词：UI组件生成，反馈表单设计，前端开发，可访问性a11y，自动化界面构建，低代码，网页表单，用户体验UX

前端开发 0 次安装 0 次浏览 更新于 3/3/2026

name: ui description: “生成UI组件和反馈表单。当用户提到组件、component、UI、hero、表单、form、反馈、feedback、咨询时使用。不适用于：认证功能、后端实现、数据库操作、业务逻辑。” allowed-tools: [“Read”, “Write”, “Edit”, “Bash”] metadata: skillport: category: ui tags: [ui, component, form, feedback] alwaysApply: false

UI技能

负责生成UI组件和表单的技能集合。

包含的子技能

技能 用途
component UI组件生成
feedback 反馈表单生成

路由

  • 组件生成: component/doc.md
  • 反馈表单: feedback/doc.md

执行步骤

  1. 质量判定门（步骤0）
  2. 对用户的请求进行分类
  3. 阅读相应子技能的doc.md
  4. 根据其内容进行生成

步骤0: 质量判定门（a11y检查清单）

生成UI组件时，确保可访问性：

♿ 可访问性检查清单

建议生成的UI满足以下条件：

### 必填项
- [ ] 为图像设置alt属性
- [ ] 为表单元素关联label
- [ ] 支持键盘操作（Tab键切换焦点）
- [ ] 焦点状态视觉上可识别

### 推荐项
- [ ] 信息传达不依赖单一颜色
- [ ] 对比度比4.5:1以上（文本）
- [ ] 适当使用aria-label / aria-describedby
- [ ] 标题结构（h1 → h2 → h3）逻辑清晰

### 交互元素
- [ ] 按钮具有适当的标签（使用“查看产品详情”而非“详情”）
- [ ] 模态框/对话框的焦点陷阱
- [ ] 错误消息能被屏幕阅读器读取

给VibeCoder的提示

♿ 为了设计出人人都能使用的界面

1. **为图片添加描述**
   - 不要用“商品图片”，而用“红色运动鞋，正面视角”

2. **确保可点击区域也能用键盘操作**
   - 用Tab键移动，Enter键确认

3. **不要仅靠颜色传达信息**
   - 除了用红色表示错误，还应加上图标和文字