prd-to-design-doc

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

PRD转设计需求文档

概述

本技能帮助将产品需求文档(PRD)转换为完整的设计需求文档,输出内容包括:

• 信息架构图
• 核心交互流程图
• 页面布局规范
• 视觉风格定义
• 异常状态处理
• 埋点需求

使用方法

输入要求

接受以下格式的PRD文档:

• PDF文档(.pdf)
• Word文档(.docx)
• Markdown文档(.md)
• 飞书云文档链接

输出内容

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

1. 项目背景与设计目标

   • 项目背景
   • 设计目标(体验/业务/品牌)
   • 核心设计挑战

2. 用户角色与场景

   • 用户画像
   • 核心使用场景

3. 信息架构

   • 整体信息架构图(Mermaid图)
   • 页面层级结构

4. 核心交互流程

   • 主流程交互流程图
   • 关键分支流程图
   • 异常流程处理

5. 关键交互细节定义

   • 各模块交互规则
   • 状态转换逻辑
   • 动效规范

6. 页面布局规范

   • 页面布局结构图
   • 组件布局规范

7. 视觉风格定义

   • 色彩体系
   • 字体规范
   • 图标规范

8. 异常状态处理

   • 网络异常
   • 业务异常

9. 埋点需求

   • 核心埋点事件表

10. 设计交付清单

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

11. 设计风险评估

    • 风险点识别
    • 应对方案

执行流程

1. 阅读PRD文档

   • 使用file工具读取PRD文档内容
   • 提取核心需求、用户场景、功能点

2. 生成设计需求文档

   • 按照标准章节结构生成设计需求文档
   • 每个章节需要具体、可执行的内容
   • 使用表格、列表等格式提升可读性

3. 生成交互流程图

   • 使用Mermaid语法生成交互流程图
   • 包含主流程、分支流程、异常流程
   • 生成PNG图片保存

4. 输出文档

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

注意事项

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

参考资源

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