메뉴
BKFlow 唯一的原型产出方式。用 wiremd 纯文本线框 + Mermaid 流程图 + 全页截图，产出低保真但完整标注交互细节的原型，交给设计师出高保真设计稿，并在 TAPD 提设计需求。触发条件："做个原型"、"设计页面"、"出个交互稿"、"给设计师出稿"、"提设计需求"、"prototype xxx"。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when creating a TAPD test request from PRs or requirement changes and needing a standardized, reusable template for BKFlow.
Use when development requirements are confirmed and before implementation starts - ensures a TAPD work item exists for the work, creating one if needed.
After implementing or modifying API code in bkflow/apigw, automatically updates or generates apidoc markdown files in bkflow/apigw/docs/zh/. Use when API views, serializers, or routes are changed, or when the user asks to sync API docs or generate apidoc.
| name | prototype-wireframe |
| description | BKFlow 唯一的原型产出方式。用 wiremd 纯文本线框 + Mermaid 流程图 + 全页截图，产出低保真但完整标注交互细节的原型，交给设计师出高保真设计稿，并在 TAPD 提设计需求。触发条件："做个原型"、"设计页面"、"出个交互稿"、"给设计师出稿"、"提设计需求"、"prototype xxx"。 |
核心理念：原型即纯文本。用 wiremd 写低保真线框（可 diff、可版本化、可导 Figma），用 Mermaid 画全局交互/状态流，用截图内嵌成一份可交付 README，再在 TAPD 提设计需求交给设计师出高保真稿。
低保真是刻意的：线框只表达"结构 + 交互细节"，视觉（配色/字体/圆角/间距）交给设计师按蓝鲸 bk-magic-vue 设计系统定稿。
BKFlow 的原型产出统一走本流程。已废弃、不再使用：
prototype-generator（纯 HTML 工具包 prototypes/base.html + bkflow-prototype.css/js）ui-prototype（直接改真实 Vue 页面当原型）需求确认后想直接进入编码实现，属于 writing-plans / test-driven-development 的范畴，不再用"改 Vue 当原型"这种方式先行。
原型必须建立在已确认的方案之上，不要凭空发挥：
brainstorming skill 澄清意图与方案。docs/specs/YYYY-MM-DD-<topic>-design.md（设计文档）和 / 或 docs/plans/YYYY-MM-DD-<feature>.md（实现计划）。原型 README 必须回链这两份文档。choices 设计控件，不靠猜。digraph proto_flow {
"已确认方案 (spec/plan)" [shape=ellipse];
"确定要覆盖的屏与状态" [shape=box];
"写 wiremd 线框 + callout 标注" [shape=box];
"画 Mermaid 流程/状态图" [shape=box];
"渲染 + 全页截图" [shape=box];
"汇总 README (截图+流程图+交互表)" [shape=box];
"TAPD 提设计需求给设计师" [shape=box];
"已确认方案 (spec/plan)" -> "确定要覆盖的屏与状态";
"确定要覆盖的屏与状态" -> "写 wiremd 线框 + callout 标注";
"写 wiremd 线框 + callout 标注" -> "画 Mermaid 流程/状态图";
"画 Mermaid 流程/状态图" -> "渲染 + 全页截图";
"渲染 + 全页截图" -> "汇总 README (截图+流程图+交互表)";
"汇总 README (截图+流程图+交互表)" -> "TAPD 提设计需求给设计师";
}
prototypes/output/<feature-name>/screens/NN-<name>.md 一个源文件。screens/*.md，用 wiremd 语法搭结构（容器 / 表单 / 表格 / 按钮 / 徽标）。<!-- ❶ ... --> HTML 注释（渲染时 --show-comments 显示），用编号 ❶❷❸ 对应界面元素。.ai/docs/guides/prototyping-workflow.md。flowchart 画全局导航与操作流，用 stateDiagram-v2 画验证 / 交互状态机，用 flowchart LR 画数据联动。npx @eclectic-ai/wiremd 把 screens/*.md 渲染成 sketch 手绘风 HTML。shots/*.png。prototypes/output/<feature-name>/README.md 包含：
docs/specs/、docs/plans/）。| 编号 | 元素 | 交互说明 |）。tapd-workitem-sync 确定 / 获取本次功能的父需求单 ID。.ai/docs/guides/prototyping-workflow.md 的「提设计需求」一节。prototypes/output/<feature-name>/
├── README.md # 概览 + Mermaid 流程图 + 每屏截图 + 编号交互说明表
├── screens/ # wiremd 线框源文件（唯一真源，可 diff / 迭代 / 导 Figma）
│ ├── 01-<name>.md
│ └── ...
└── shots/ # 各屏全页截图（README 内嵌）
├── 01-<name>.png
└── ...
screens/*.md 是唯一真源：改一行重渲染即可，天然可版本化 diff、可 AI 迭代、可导出 Figma。shots/*.png 是展示用截图。| 规则 | 说明 |
|---|---|
| 先有方案 | 原型基于已确认的 spec/plan，缺则先 brainstorming |
| 全状态覆盖 | 有几个 Tab / 步骤 / 状态就出几屏，含成功 / 失败 / 异常态 |
| 交互标注 | 每屏用 <!-- ❶ --> callout 标注交互，README 汇成编号说明表 |
| 纯文本真源 | 线框以 screens/*.md 为准，可 diff；HTML 不入库 |
| 真实 Mock | 用接近真实业务的数据，不用占位符 |
| 先读后端 | 改造类页面先读 Model/Config/Serializer，按真实字段设计控件 |
| 回链文档 | README 回链对应 docs/specs/ 与 docs/plans/ |
| 提设计需求 | 产出后在 TAPD 建子需求单交付设计师，附全部链接 |
| 低保真 | 只表达结构与交互，视觉交给设计师定稿 |
| 错误做法 | 正确做法 |
|---|---|
| 用旧 HTML 工具包 / 改 Vue 页面当原型 | 一律用 wiremd 线框流程 |
| 只出一屏让人脑补其他状态 | 每个状态各出一屏，全状态覆盖 |
| 交互只写文字、图上不标 | 用 <!-- ❶ --> callout 标在图上 |
| 追求高保真配色/像素 | 低保真线框，视觉留给设计师 |
| 把 HTML 产物提交进仓库 | HTML 现渲染，仓库只留 screens/*.md + 截图 |
| 产出原型就完事 | 必须在 TAPD 提设计需求闭环 |
.ai/docs/guides/prototyping-workflow.md.ai/skills/prototype-wireframe/reference/design-principles.md.ai/skills/tapd-workitem-sync/SKILL.mdprototypes/output/space-config-redesign/（随空间配置改版特性分支入库）