bugu-product-design-cheatsheet

# 布谷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` 中写出： ```text PRD 映射： - 角色：[角色] - 用户故事：[US-xx] - 用户用例：[UC-xx] - 主路径：[端到端路径] - 验收标准：[对应条目] ``` ## 产品设计原则 布谷AI内容工厂是“内容素材工厂 / 内容工作台”，不是通用聊天平台，也不是炫技 canvas 工具。 默认主链： ```text 品牌 / 产品素材生产： 品牌 / 产品知识库 -> 场景库 -> 提示词组 -> 图片 / 图生视频 Prompt -> 外部生成工具或内部生成 API -> 审核 / 素材库 / 混剪包 ``` ```text 个人 IP 内容运营： 个人 IP 原始素材 -> IP 知识库 -> IP 运营场景库 -> 文案 / 脚本 / 私域 / 产品化提示词 -> 场景延伸知识库 -> 内容资产和运营资产 ``` 设计判断： - 普通用户主路径是表单和工作台，不是 canvas 拉线。 - 品牌 / 产品知识库不能直接跳 Prompt，中间必须有场景库或内容任务结构。 - IP 知识库是独立体系，不是品牌知识库的字段，也不是简单人设简介。 - 参考图、参考视频、产品资料、SKU 表、竞品内容也能驱动 SOP。 - 视频第三方生成只做“复制视频 Prompt 到外部平台”；软件不创建 RunningHub 任务包，不跟踪第三方任务状态。 - 成品视频只能由用户手动导入，并关联原 Prompt。 - 所有生成结果必须可追溯输入源、Prompt、模型参数和审核状态。 ## 布谷AI桌面视觉语言 目标气质： - 轻盈、清晰、专业，适合长时间办公。 - 信息优先，装饰只服务层级。 - 桌面应用感强，不做营销 hero。 - 不使用暗色炫技、大面积高饱和渐变、紫蓝一色到底。 布局： - 固定左侧导航。 - 顶部显示当前项目 / 工作区 / 状态。 - 中间是当前主任务区。 - 右侧是输入源、Prompt、模型参数、审核清单和来源追溯。 - 复杂流程用阶段导轨表达，不强迫用户进入 canvas。 颜色： - 背景：浅白、浅灰、浅青。 - 主按钮：沿用当前客户端深青绿色实心按钮。 - 当前选中：浅青绿底，深青绿文字。 - 成功 / 可用：柔和绿色。 - 信息 / 次级：天空蓝或 slate。 - 提醒：琥珀色。 - 问题 / blocked：玫瑰红或红色。 组件： - 面板用实体白色或浅灰，不用磨砂半透明。 - 边框比阴影更重要，阴影要浅。 - 卡片不套卡片；工作台用分栏、分隔线和留白组织层级。 - 同一页面只保留一个主操作按钮。 - 禁用按钮旁必须显示恢复路径。 ## 固定信息架构 默认导航必须先沿用当前客户端，不新增另一套一级入口： ```text 布谷AI内容工厂 ├── 图片 │ ├── 图片生成 │ ├── 合规检测 │ └── 图片精修 ├── 视频 │ ├── 视频生成 │ ├── 创意视频 │ └── 自定义视频 ├── 文案 │ └── 文章生成 ├── 知识库 │ └── 成型知识库 ├── 资产 │ └── 素材库 └── 管理 └── skills 管理 ``` v2 新能力必须挂入当前模块，而不是替换一级导航： - 图片：对标图反推、场景提示词、绿幕文案图、图片质检。 - 视频：视频拆解、视频脚本、视频 Prompt、成品视频导入、混剪包导出。 - 文案：文章生成、标题生成、脚本生成。 - 知识库：品牌 / 产品知识库、IP 知识库、场景库、输入源 / 文档转换。 - 资产：Prompt 工作台、SOP 工作流、素材库、运行历史。 - 管理：Provider 设置、skills 管理、工作流定义、Canvas 编排。 不要把导航改成“项目资料 / 创作记录 / 团队管理 / 资料库”等另一套产品，也不要把 Prompt 工作台或 SOP 工作流放到普通用户第一入口前面。 ## 成套原型契约 生成多张图或完整原型前，先写并遵守契约。契约必须来自 PRD 映射，不允许只按视觉想象或固定模板生成： ```text 成套原型契约： 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 模板 ```text 产品设计 brief： 页面：布谷AI内容工厂桌面端 [页面 / 工作台名称] 页面类型：[Prompt 工作台 / SOP 执行页 / 素材审核台 / 视频 Prompt 页 / 工作流管理] PRD 映射： - 角色：[角色] - 用户故事：[US-xx] - 用户用例：[UC-xx] - 主路径：[端到端路径] - 验收标准：[验收标准] 设计目标：[一句话说明这张图解决什么产品问题] 业务 UI 契约： - 用户任务：[用户此刻正在完成的业务任务] - 业务对象：[正在处理的对象] - 输入物：[已选资料和待补资料] - 当前状态：[当前对象状态] - 主动作：[唯一主按钮] - 异常恢复：[资料缺失 / 服务待配置 / 审核驳回时怎么恢复] - 交付物：[完成后得到什么、交给哪个下游] 保留结构：[左侧导航、顶部项目上下文、中间任务区、右侧来源栏] 本次新增：[必须出现的 Tab / 字段 / 控件 / 表格 / 按钮] 视觉方向：轻盈、清晰、专业，桌面应用感强，信息优先，装饰克制 禁止项：不要移动端，不要营销页，不要功能罗列，不要入口合集，不要英文假字，不要乱码，不要把 canvas 作为普通用户主路径 ``` ## 图片提示词模板 ```text 生成一张布谷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 用户故事或用例。 - 如用户要求截图或浏览器检查，说明执行结果；未要求时说明未执行。 - 如果未生成图片或未跑检查，说明原因。