bugu-product-design-cheatsheet

name	bugu-product-design-cheatsheet
description	基于布谷AI内容工厂 PRD、用户故事、用户用例、UI 蓝图和工作流模型生成桌面端产品原型图或静态 HTML 原型，适用于 Prompt 工作台、SOP 工作流、图片生成、视频 Prompt、审核台、素材库和工作流管理等一级页面设计。必须先从 PRD 提取角色、用例、端到端路径和验收标准，再生成原型；默认不做移动端、不做营销页、不新增无关导航、不把 canvas 作为普通用户主路径。
icon	🎨
globs	["docs/aiprompts/**/*.md","docs/roadmap/**/*.md","src/renderer/src/**/*.{tsx,ts,css}","resources/skills/**/*.md"]
alwaysAllow	["Read","Write","Edit"]

布谷AI产品设计图工作流

使用这个 Skill 时，你负责把布谷AI内容工厂的 PRD、用户故事、用户用例、UI 蓝图和路线图转成可执行的桌面端产品原型。默认产物是 布谷AI内容工厂桌面工作台原型，不是通用网页、营销页或移动端。

不要直接凭聊天摘要或个人想象画界面。必须先从 PRD 中抽取“用户是谁、要完成什么、主路径是什么、异常边界是什么、验收条件是什么”，再写业务 UI 契约，最后才决定页面、组件和状态。

严禁把页面做成功能罗列、能力概览、入口合集或状态卡片堆叠。布谷AI的普通用户界面必须表现一个真实业务对象正在被处理：输入从哪里来、当前缺什么、用户要判断什么、主动作是什么、产物交付到哪里、异常如何恢复。

先读事实源

优先读取：

1. docs/aiprompts/business-ux-contract.md
2. docs/roadmap/v2/README.md
3. docs/roadmap/v2/prd.md
4. docs/roadmap/v2/ui-blueprint.md
5. docs/roadmap/v2/workflow-model.md
6. docs/roadmap/v2/llm-playbook.md
7. docs/roadmap/v2/knowledge-systems.md

读取重点：

• 从 prd.md 抽取用户角色、用户故事、用户用例、端到端主路径、功能范围、非目标和验收标准。
• 从 ui-blueprint.md 抽取导航、页面布局、状态和右侧参数栏。
• 从 workflow-model.md 抽取核心对象、状态、步骤和产物模型。
• 从 llm-playbook.md 抽取大模型玩法，不要把知识库误写成唯一入口。
• 从 knowledge-systems.md 抽取品牌 / 产品知识库、IP 知识库、场景库和提示词组的边界。
• 从 business-ux-contract.md 抽取业务 UI 契约、反功能平铺门禁和验收清单。
• 从用户最新反馈抽取必须修正的产品语义，例如视频第三方生成只做复制 Prompt。

如果用户给了截图，先归纳截图中的：

• 页面骨架：左侧导航、顶部栏、中间任务区、右侧参数 / 来源栏。
• 用户明确指出的问题：尺寸、固定 tab、配色、删除项、流程误解。
• 必须保留的已有结构。
• 必须修正的产品语义。

PRD 驱动生成流程

生成任何原型前，必须先做 5 个步骤：

1. 提取 PRD 事实

   • 用户角色：至少列出本次原型服务的 2-4 个角色。
   • 用户故事：列出使用到的 US-xx。
   • 用户用例：列出使用到的 UC-xx。
   • 端到端路径：列出本次原型覆盖哪几条主路径。
   • 非目标 / 禁止项：列出会影响 UI 的边界。

2. 建立页面映射

   • 每一帧必须对应至少一个用户故事或用例。
   • 每个页面要写清主对象、主按钮、完成后状态。
   • 不允许出现“好看但不服务用例”的装饰页。

3. 写原型契约

   • 用 PRD 里的角色、对象、状态、按钮词表生成契约。
   • 契约是后续 HTML / 图片 / 多帧原型的事实源。
   • 契约必须包含：角色、任务、输入物、业务对象、当前状态、主路径、用户决策点、系统反馈、异常 / 待配置状态、最终交付物、完成定义。

4. 执行反功能平铺门禁

   • 如果页面主要是功能入口、能力卡片、状态胶囊或跳转按钮，判定失败。
   • 如果页面没有一个正在处理的业务对象，判定失败。
   • 如果页面没有主动作、异常恢复路径或完成后交付去向，判定失败。
   • 如果控件无法回到用户故事、用例或当前对象状态，删除该控件。

5. 生成原型

   • 默认生成静态 HTML / CSS。
   • 原型里的页面、字段、按钮、状态必须能回到上面的用户故事和用例。
   • 如果和 PRD 冲突，优先修正原型，不改 PRD。

如果生成原型目录，必须在 docs/roadmap/v2/prototype/README.md 中写出：

PRD 映射：
- 角色：[角色]
- 用户故事：[US-xx]
- 用户用例：[UC-xx]
- 主路径：[端到端路径]
- 验收标准：[对应条目]

产品设计原则

布谷AI内容工厂是“内容素材工厂 / 内容工作台”，不是通用聊天平台，也不是炫技 canvas 工具。

默认主链：

品牌 / 产品素材生产：
品牌 / 产品知识库
-> 场景库
-> 提示词组
-> 图片 / 图生视频 Prompt
-> 外部生成工具或内部生成 API
-> 审核 / 素材库 / 混剪包

个人 IP 内容运营：
个人 IP 原始素材
-> IP 知识库
-> IP 运营场景库
-> 文案 / 脚本 / 私域 / 产品化提示词
-> 场景延伸知识库
-> 内容资产和运营资产

设计判断：

• 普通用户主路径是表单和工作台，不是 canvas 拉线。
• 品牌 / 产品知识库不能直接跳 Prompt，中间必须有场景库或内容任务结构。
• IP 知识库是独立体系，不是品牌知识库的字段，也不是简单人设简介。
• 参考图、参考视频、产品资料、SKU 表、竞品内容也能驱动 SOP。
• 视频第三方生成只做“复制视频 Prompt 到外部平台”；软件不创建 RunningHub 任务包，不跟踪第三方任务状态。
• 成品视频只能由用户手动导入，并关联原 Prompt。
• 所有生成结果必须可追溯输入源、Prompt、模型参数和审核状态。

布谷AI桌面视觉语言

目标气质：

• 轻盈、清晰、专业，适合长时间办公。
• 信息优先，装饰只服务层级。
• 桌面应用感强，不做营销 hero。
• 不使用暗色炫技、大面积高饱和渐变、紫蓝一色到底。

布局：

• 固定左侧导航。
• 顶部显示当前项目 / 工作区 / 状态。
• 中间是当前主任务区。
• 右侧是输入源、Prompt、模型参数、审核清单和来源追溯。
• 复杂流程用阶段导轨表达，不强迫用户进入 canvas。

颜色：

• 背景：浅白、浅灰、浅青。
• 主按钮：沿用当前客户端深青绿色实心按钮。
• 当前选中：浅青绿底，深青绿文字。
• 成功 / 可用：柔和绿色。
• 信息 / 次级：天空蓝或 slate。
• 提醒：琥珀色。
• 问题 / blocked：玫瑰红或红色。

组件：

• 面板用实体白色或浅灰，不用磨砂半透明。
• 边框比阴影更重要，阴影要浅。
• 卡片不套卡片；工作台用分栏、分隔线和留白组织层级。
• 同一页面只保留一个主操作按钮。
• 禁用按钮旁必须显示恢复路径。

固定信息架构

默认导航必须先沿用当前客户端，不新增另一套一级入口：

布谷AI内容工厂
├── 图片
│   ├── 图片生成
│   ├── 合规检测
│   └── 图片精修
├── 视频
│   ├── 视频生成
│   ├── 创意视频
│   └── 自定义视频
├── 文案
│   └── 文章生成
├── 知识库
│   └── 成型知识库
├── 资产
│   └── 素材库
└── 管理
    └── skills 管理

v2 新能力必须挂入当前模块，而不是替换一级导航：

• 图片：对标图反推、场景提示词、绿幕文案图、图片质检。
• 视频：视频拆解、视频脚本、视频 Prompt、成品视频导入、混剪包导出。
• 文案：文章生成、标题生成、脚本生成。
• 知识库：品牌 / 产品知识库、IP 知识库、场景库、输入源 / 文档转换。
• 资产：Prompt 工作台、SOP 工作流、素材库、运行历史。
• 管理：Provider 设置、skills 管理、工作流定义、Canvas 编排。

不要把导航改成“项目资料 / 创作记录 / 团队管理 / 资料库”等另一套产品，也不要把 Prompt 工作台或 SOP 工作流放到普通用户第一入口前面。

成套原型契约

生成多张图或完整原型前，先写并遵守契约。契约必须来自 PRD 映射，不允许只按视觉想象或固定模板生成：

成套原型契约：
PRD 映射：[US-xx / UC-xx / 端到端路径 / 验收标准]
目标用户：[运营 / 电商运营 / 短视频运营 / 审核人员 / 内容工程师]
用户任务：[用户此刻要完成的真实业务任务，不是页面能力介绍]
用户目标：[用户打开页面要完成什么交付]
页面映射：[每帧或每页对应的 US-xx / UC-xx]
主页面骨架：[左侧导航 + 顶部上下文 + 中间任务区 + 右侧来源栏]
核心对象：[品牌知识库 / IP 知识库 / 场景库 / 提示词组 / 输入源 / Prompt 草稿 / SOP / 素材 / 视频 Prompt / 审核结果]
输入物：[DOCX / Markdown / 参考图 / 产品资料 / SKU 表 / 用户评论 / 历史素材]
当前状态：[资料缺口 / 待解析 / 可运行 / 生成中 / 待审核 / 已交付 / 待配置]
主动作：[本页唯一主按钮]
用户决策点：[用户需要判断、选择或补充的内容]
系统反馈：[进度、缺口、来源、质检、审核、交付结果]
最终交付物：[Prompt 草稿 / 场景库 / 图片素材 / 视频 Prompt / 混剪素材包 / 发布文案]
统一词表：[按钮、状态、对象名称]
禁用词表：[不能出现在 UI 的工程词]
状态模型：[草稿、可运行、生成中、待审核、已复制外部、已完成、blocked]
用户旅程：[第 1 帧 -> 第 2 帧 -> 第 3 帧...]
异常边界：[无知识库 / 第三方视频生成脱离软件 / 生成服务 blocked / 用户驳回]
视觉锚点：[浅色、白色面板、深青绿按钮、浅青绿选中、状态色]

禁用词表：

• 功能概览
• 能力中心
• 功能清单
• 入口合集
• 模块入口
• 功能罗列
• external-package
• waiting-external
• RunningHub 任务包
• 回填任务
• KnowledgeCitation
• runtime
• Context Run
• Builder

推荐翻译：

• source -> 输入源 / 来源引用
• run -> 运行记录
• artifact -> 素材 / 产物
• external package -> 禁用，改为 复制视频 Prompt
• manual import -> 导入成品视频

v2 推荐帧序列

成套原型推荐从当前客户端已有模块开始覆盖，最终帧序列必须由 PRD 用户故事和用户用例决定。不要为了凑帧生成和本次需求无关的页面。

1. image-generation：按现有截图迭代图片生成主工作台，保留产品图、参考图、提示词输入、生成模式、预览大盘和右侧参数。
2. reference-reverse：对标图反推，挂入图片模块，不要求先选知识库。
3. video-prompt：挂入视频模块，生成视频 Prompt，主按钮是复制到第三方平台，可选导入成品视频。
4. article-generation：挂入文案模块，体现知识库 Agent 文章生成和发布检查。
5. knowledge-scene：挂入知识库模块，体现品牌 / 产品知识库 -> 场景库 -> 提示词组，以及 IP 知识库独立体系。
6. asset-library：挂入资产模块，体现素材筛选、审核、回炉和混剪包导出。
7. skills-management：挂入管理模块，体现 skills、Provider、工作流定义和 canvas 高级编辑边界。

每帧都要说明：

• 对应的 US-xx / UC-xx。
• 用户从哪一步来。
• 本帧要完成什么。
• 主按钮是什么。
• 完成后去哪里。
• 哪些对象和状态沿用上一帧。

页面设计要求

Prompt 工作台

必须体现：

• 输入源列表：品牌知识库、IP 知识库、场景库、参考图、参考视频、产品资料、SKU 表、竞品内容。
• 用户意图输入。
• Agent 多轮调整区。
• 场景卡或 IP 运营场景。
• Prompt 草稿版本。
• 右侧来源引用、模型参数、输出用途和质检规则。

主按钮：生成 Prompt 或 确认 Prompt。

对标图反推

必须体现：

• 参考图上传 / 选择。
• 产品图 / 产品资料。
• 模型分析结果：构图、光线、文字区域、画幅、风格。
• 反推 Prompt 草稿。
• 生成同风格图片。

不要要求先选择知识库。

品牌知识库与场景库

必须体现：

• 品牌 / 产品知识库文档。
• 场景库作为 Prompt 前的中间层。
• 场景卡字段：人群、问题、季节、空间、动作、情绪、镜头、合规边界、输出用途。
• 主按钮：生成场景库 或 生成提示词组。
• 提示词必须强调 UGC 手机实拍、自然光、生活化、细节真实、无 AI 感。

IP 知识库

必须体现：

• IP 知识库是独立体系。
• 六层完整度：身份锚定、价值观立场、声音语言、判断方法、内容素材、创作引擎。
• 场景延伸：口播、文案、私域、产品化、咨询回复。
• 主按钮：构建 IP 知识库 或 生成场景延伸库。

SOP 执行页

必须体现：

• SOP 名称、平台、版本和状态。
• 输入源选择。
• 阶段导轨：输入源 -> Prompt -> 生成 -> 质检 -> 审核 -> 入库。
• 中间结果预览。
• 右侧 Prompt、模型参数、审核清单和产物状态。

视频 Prompt 页

必须体现：

• 视频 Prompt 文本。
• 参考图、时长、画幅、卖点。
• 主按钮：复制 Prompt。
• 状态：已复制外部。
• 清楚说明：第三方生成过程脱离软件。
• 可选动作：导入成品视频。

禁止出现：

• 导出 RunningHub 任务包
• waiting external
• 等待外部任务
• 绑定外部任务

审核与导出

必须体现：

• 素材预览。
• 输入源 / 来源引用。
• Prompt、模型参数、质检结果。
• 审核动作：通过、驳回、重生成、入库。
• 混剪素材包导出：图片、绿幕图、可选视频、混剪清单文件。

生成方式

优先级：

1. 默认生成静态 HTML / CSS 原型，放到 docs/roadmap/v2/prototype/ 或用户指定目录；原型 README 必须包含 PRD 映射。
2. 如果用户明确要图片，先写中文产品设计 brief，再生成图片提示词；brief 和提示词都必须引用 PRD 映射。
3. 不默认做截图或浏览器检查。只有用户明确要求视觉验收、截图交付、浏览器检查或交互验证时，才使用浏览器工具；截图只是验证产物，不是原型生成依据。
4. 如果使用本 skill 的图片脚本，先验证网关；失败后保留 brief，不反复重试。

产品设计 brief 模板

产品设计 brief：
页面：布谷AI内容工厂桌面端 [页面 / 工作台名称]
页面类型：[Prompt 工作台 / SOP 执行页 / 素材审核台 / 视频 Prompt 页 / 工作流管理]
PRD 映射：
- 角色：[角色]
- 用户故事：[US-xx]
- 用户用例：[UC-xx]
- 主路径：[端到端路径]
- 验收标准：[验收标准]
设计目标：[一句话说明这张图解决什么产品问题]
业务 UI 契约：
- 用户任务：[用户此刻正在完成的业务任务]
- 业务对象：[正在处理的对象]
- 输入物：[已选资料和待补资料]
- 当前状态：[当前对象状态]
- 主动作：[唯一主按钮]
- 异常恢复：[资料缺失 / 服务待配置 / 审核驳回时怎么恢复]
- 交付物：[完成后得到什么、交给哪个下游]
保留结构：[左侧导航、顶部项目上下文、中间任务区、右侧来源栏]
本次新增：[必须出现的 Tab / 字段 / 控件 / 表格 / 按钮]
视觉方向：轻盈、清晰、专业，桌面应用感强，信息优先，装饰克制
禁止项：不要移动端，不要营销页，不要功能罗列，不要入口合集，不要英文假字，不要乱码，不要把 canvas 作为普通用户主路径

图片提示词模板

生成一张布谷AI内容工厂桌面端产品原型图。

页面主题：[页面主题]
页面类型：[页面类型]
PRD 映射：[角色 + US-xx + UC-xx + 主路径 + 验收标准]
目标：在保持布谷AI三栏工作台结构的前提下，完成以下产品设计：
1. [要求 1]
2. [要求 2]
3. [要求 3]

必须保留：左侧主导航、顶部项目上下文、中间主任务区、右侧来源 / 参数栏。
必须新增 / 呈现：[中文 Tab、字段、按钮、状态、表格列名]

视觉风格：浅色桌面 GUI，白色实体面板，清晰边框，浅阴影，深青绿主按钮，浅青绿选中态，柔和绿色成功，琥珀提醒，玫瑰红问题态。

严格禁止：不要移动端，不要手机预览，不要营销页，不要新增不相关导航，不要英文假文案，不要乱码，不要暗色炫技，不要大面积高饱和渐变，不要出现 RunningHub 任务包 / waiting-external。

检查清单

交付前检查：

1. 是否每个页面 / 帧都能追溯到 PRD 用户故事和用户用例。
2. 是否仍是布谷AI内容工厂桌面端工作台。
3. 是否使用固定导航和三栏骨架。
4. 是否用“输入源 + Prompt + SOP + 审核 + 素材”表达主链。
5. 是否展示了一个正在处理的业务对象，而不是功能入口矩阵。
6. 是否每页只有一个当前主动作，且完成后有明确交付去向。
7. 是否包含资料缺失、待配置、待审核或驳回等恢复路径。
8. 是否没有把知识库写成所有流程必填。
9. 是否没有把第三方视频生成写成外部任务包或回填闭环。
10. 是否普通用户不用 canvas 也能完成主流程。
11. 是否按钮、状态和恢复路径明确。
12. 是否中文清楚、无乱码、无英文假文案。
13. 是否符合浅色、专业、信息优先的视觉方向。

收尾汇报

汇报时说明：

• 新增或修改了哪些原型 / brief / skill 文件。
• 采用了哪些 v2 PRD 用户故事或用例。
• 如用户要求截图或浏览器检查，说明执行结果；未要求时说明未执行。
• 如果未生成图片或未跑检查，说明原因。