Front Design Skill
根据需求生成前端设计文档。
何时使用
- •当用户需要创建前端设计文档时
- •当用户输入 "前端设计"、"设计文档"、"写设计" 等意图时
- •当有新功能需要设计前端实现方案时
能力
此 Skill 可以：
- •收集和分析需求
- •探索现有代码结构和组件
- •拆分功能模块
- •生成符合规范的前端设计文档
设计原则
前端优先: 聚焦页面布局、页面字段描述、组件层次、交互逻辑
- •说明页面布局
- •表单字段及校验规则
- •列表字段及特殊处理逻辑
- •其他功能说明和交互逻辑
前后端分离:
- •仅提供"需要用到的接口"（名称+用途）
- •禁止定义完整的接口和类型
只设计不实现:
- •不编写实现代码
- •仅包含：布局和组件层次、功能描述、字段说明
文档规范
- •存储:
docs/design-docs/ - •命名: 中文文件名，主需求_模块
- •拆分: 按主功能模块拆分文档
实现步骤
- •
Context Gathering
- •读取需求文档 + 分析截图
- •提出结构化问题
- •提出 5-10 个澄清问题
- •
探索代码
- •了解现有代码结构
- •参考类似实现
- •确定可复用组件
- •
模块拆分与设计
- •拆分需求功能模块
- •对每个模块进行设计
- •
生成文档
- •严格按文档规范生成
- •执行约束检查清单
- •
Reader Testing
- •预测读者问题
- •检查文档清晰度和完整性