下载地址
https://www.zhengdianxue.com/wp-content/uploads/skills/user_8f3f4407--prd-to-design-doc.zip将提示词发送给你的 AI 安装该 skills
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_8f3f4407/prd-to-design-doc。将产品需求文档(PRD)转换为完整的设计需求文档,包含信息架构、交互流程、页面布局、视觉规范等内容,并自动生成交互流程图。适用于产品设计、交互设计、UI设计等场景。当用户提供PRD文档并需要设计需求文档时触发此技能。
阅读全文 （展开查看完整说明）
概述
PRD转设计需求文档
概述
本技能帮助将产品需求文档(PRD)转换为完整的设计需求文档,输出内容包括:
- 信息架构图
- 核心交互流程图
- 页面布局规范
- 视觉风格定义
- 异常状态处理
- 埋点需求
使用方法
输入要求
接受以下格式的PRD文档:
- PDF文档(.pdf)
- Word文档(.docx)
- Markdown文档(.md)
- 飞书云文档链接
输出内容
生成一份完整的设计需求文档,包含以下章节:
- 项目背景与设计目标
- 项目背景
- 设计目标(体验/业务/品牌)
- 核心设计挑战
- 用户角色与场景
- 用户画像
- 核心使用场景
- 信息架构
- 整体信息架构图(Mermaid图)
- 页面层级结构
- 核心交互流程
- 主流程交互流程图
- 关键分支流程图
- 异常流程处理
- 关键交互细节定义
- 各模块交互规则
- 状态转换逻辑
- 动效规范
- 页面布局规范
- 页面布局结构图
- 组件布局规范
- 视觉风格定义
- 色彩体系
- 字体规范
- 图标规范
- 异常状态处理
- 网络异常
- 业务异常
- 埋点需求
- 核心埋点事件表
- 设计交付清单
- 设计稿清单
- 规范文档清单
- 原型清单
- 设计风险评估
- 风险点识别
- 应对方案
执行流程
- 阅读PRD文档
- 使用file工具读取PRD文档内容
- 提取核心需求、用户场景、功能点
- 生成设计需求文档
- 按照标准章节结构生成设计需求文档
- 每个章节需要具体、可执行的内容
- 使用表格、列表等格式提升可读性
- 生成交互流程图
- 使用Mermaid语法生成交互流程图
- 包含主流程、分支流程、异常流程
- 生成PNG图片保存
- 输出文档
- 将完整设计需求文档保存为Markdown文件
- 将交互流程图保存为PNG文件
- 所有文件放在artifacts目录下
注意事项
- 设计需求文档必须具体可执行,避免空泛表述
- 交互流程图要覆盖主流程+异常流程
- 视觉规范要有具体色值、字号、尺寸
- 埋点需求要包含事件名称、触发时机、关键参数
参考资源
- 设计需求文档模板: [references/design-doc-template.md](references/design-doc-template.md)
