name: prd-to-design-doc label: PRD转设计需求文档 description: 将产品需求文档(PRD)转换为完整的设计需求文档,包含信息架构、交互流程、页面布局、视觉规范等内容,并自动生成交互流程图。适用于产品设计、交互设计、UI设计等场景。当用户提供PRD文档并需要设计需求文档时触发此技能。

PRD转设计需求文档

概述

本技能帮助将产品需求文档(PRD)转换为完整的设计需求文档,输出内容包括: - 信息架构图 - 核心交互流程图 - 页面布局规范 - 视觉风格定义 - 异常状态处理 - 埋点需求

使用方法

输入要求

接受以下格式的PRD文档: - PDF文档(.pdf) - Word文档(.docx) - Markdown文档(.md) - 飞书云文档链接

输出内容

生成一份完整的设计需求文档,包含以下章节:

1. 项目背景与设计目标
2. 项目背景
3. 设计目标(体验/业务/品牌)

4. 核心设计挑战

5. 用户角色与场景

6. 用户画像

7. 核心使用场景

8. 信息架构

9. 整体信息架构图(Mermaid图)

10. 页面层级结构

11. 核心交互流程

12. 主流程交互流程图
13. 关键分支流程图

14. 异常流程处理

15. 关键交互细节定义

16. 各模块交互规则
17. 状态转换逻辑

18. 动效规范

19. 页面布局规范

20. 页面布局结构图

21. 组件布局规范

22. 视觉风格定义

23. 色彩体系
24. 字体规范

25. 图标规范

26. 异常状态处理

27. 网络异常

28. 业务异常

29. 埋点需求

30. 核心埋点事件表

31. 设计交付清单

    • 设计稿清单
    • 规范文档清单
    • 原型清单

      更多技能请访问小葱技能站7w4.net。

32. 设计风险评估

    • 风险点识别
    • 应对方案

执行流程

1. 阅读PRD文档
2. 使用file工具读取PRD文档内容

3. 提取核心需求、用户场景、功能点

4. 生成设计需求文档

5. 按照标准章节结构生成设计需求文档
6. 每个章节需要具体、可执行的内容

7. 使用表格、列表等格式提升可读性

8. 生成交互流程图

9. 使用Mermaid语法生成交互流程图
10. 包含主流程、分支流程、异常流程

11. 生成PNG图片保存

12. 输出文档

13. 将完整设计需求文档保存为Markdown文件
14. 将交互流程图保存为PNG文件
15. 所有文件放在artifacts目录下

注意事项

• 设计需求文档必须具体可执行,避免空泛表述
• 交互流程图要覆盖主流程+异常流程
• 视觉规范要有具体色值、字号、尺寸
• 埋点需求要包含事件名称、触发时机、关键参数

参考资源

• 设计需求文档模板: references/design-doc-template.md

这是一个实用的产品设计辅助工具，能将需求文档自动转换为完整的设计需求文档，输出内容涵盖信息架构、交互流程、视觉规范等核心模块。文档结构清晰规范，配套有参考模板可用。不足之处是缺少使用示例，流程图自动生成等功能的具体实现说明较简略，新手可能需要一定时间摸索。总体而言功能定位明确，适合有设计文档需求的产品或交互设计场景使用。