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](references/design-doc-template.md)