# Bugu Product Design Cheatsheet

> 基于布谷AI内容工厂 PRD、用户故事、用户用例、UI 蓝图和工作流模型生成桌面端产品原型图或静态 HTML 原型，适用于 Prompt 工作台、SOP 工作流、图片生成、视频 Prompt、审核台、素材库和工作流管理等一级页面设计。必须先从 PRD 提取角色、用例、端到端路径和验收标准，再生成原型；默认不做移动端、不做营销页、不新增无关导航、不把 canvas 作为普通用户主路径。

- Skill: `limecloud/bugu-product-design-cheatsheet` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add limecloud/bugu-product-design-cheatsheet`
- Raw SKILL.md: https://api.skillmd.com/api/skills/limecloud/bugu-product-design-cheatsheet/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: limecloud (https://skillmd.com/u/limecloud)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/limecloud/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 用户故事或用例。
- 如用户要求截图或浏览器检查，说明执行结果；未要求时说明未执行。
- 如果未生成图片或未跑检查，说明原因。