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，專業的AI技能分享平臺。

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

這是一個實用的產品設計輔助工具，能將需求文件自動轉換為完整的設計需求文件，輸出內容涵蓋資訊架構、互動流程、視覺規範等核心模組。文件結構清晰規範，配套有參考模板可用。不足之處是缺少使用示例，流程圖自動生成等功能的具體實現說明較簡略，新手可能需要一定時間摸索。總體而言功能定位明確，適合有設計文件需求的產品或互動設計場景使用。