From 14566d9866b3b2a7f954ec29f86e10280ab3f02a Mon Sep 17 00:00:00 2001
From: dannydeng <dannydeng@tencent.com>
Date: Wed, 22 Apr 2026 16:22:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(prototypes):=20=E9=87=8D=E6=9E=84=E5=8E=9F?=
 =?UTF-8?q?=E5=9E=8B=E5=B7=A5=E5=85=B7=E5=B9=B6=E6=96=B0=E5=A2=9E=E5=B1=95?=
 =?UTF-8?q?=E5=8E=85=E9=A6=96=E9=A1=B5=E4=B8=8E=E6=B7=B1=E5=BA=A6=E5=8E=9F?=
 =?UTF-8?q?=E5=9E=8B=20--story=3D133683187?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...gine-admin-interaction-audit-2026-04-20.md |  612 +++++
 .ai/skills/prototype-generator/SKILL.md       |  138 +-
 .flake8                                       |    3 +
 .gitignore                                    |    4 +-
 docs/plans/2026-03-23-prototype-toolkit.md    |  879 ++++++
 .../plans/2026-04-10-prototype-bk-standard.md |  846 ++++++
 ...-bkflow-engine-admin-prototype-overhaul.md |  812 ++++++
 .../2026-04-22-prototype-showcase-homepage.md |  640 +++++
 .../2026-03-23-prototype-toolkit-design.md    |  434 +++
 ...2026-04-10-prototype-bk-standard-design.md |  371 +++
 ...-engine-admin-prototype-overhaul-design.md |  517 ++++
 ...4-22-prototype-showcase-homepage-design.md |  385 +++
 prototypes/README.md                          |  114 +
 prototypes/assets/bkflow-prototype.css        | 2363 +++++++++++++++++
 prototypes/assets/bkflow-prototype.js         |  277 ++
 prototypes/assets/bkflow-showcase.css         |  832 ++++++
 prototypes/assets/bkflow-showcase.js          |  114 +
 prototypes/assets/icons/bkflow-logo.svg       |    8 +
 prototypes/examples/README.md                 |   28 +
 prototypes/examples/component-showcase.html   |  609 +++++
 prototypes/features/README.md                 |   55 +
 prototypes/features/_legacy/README.md         |   28 +
 .../_legacy/node-output-viewer/README.md      |    9 +
 .../_legacy/node-output-viewer/index.html     |  646 +++++
 .../_legacy/sops-open-plugin/README.md        |   13 +
 .../_legacy/sops-open-plugin/index.html       |  101 +
 .../_legacy/sops-open-plugin/main-flow.html   |  343 +++
 .../space-open-plugin-management.html         |  343 +++
 .../task-plugin-error-state.html              |  281 ++
 .../template-plugin-selection.html            |  362 +++
 .../_legacy/space-variable-manage/README.md   |    9 +
 .../_legacy/space-variable-manage/index.html  |  651 +++++
 .../CHANGELOG.md                              |    6 +
 .../README.md                                 |   50 +
 .../feature.meta.json                         |   22 +
 .../index.html                                |  278 ++
 .../pages/plugin/plugin-list.html             |  452 ++++
 .../pages/space/credential-list.html          |  256 ++
 .../pages/space/debug-task-list.html          |  199 ++
 .../pages/space/decision-editor.html          |  158 ++
 .../pages/space/decision-list.html            |  121 +
 .../pages/space/flow-debug.html               |  219 ++
 .../pages/space/flow-edit.html                |  356 +++
 .../pages/space/flow-view.html                |  172 ++
 .../pages/space/label-list.html               |  243 ++
 .../pages/space/space-config.html             |  210 ++
 .../pages/space/statistics-exception.html     |  178 ++
 .../pages/space/task-detail-complete.html     |  372 +++
 .../pages/space/task-detail-failed.html       |  389 +++
 .../pages/space/task-list.html                |  167 ++
 .../pages/space/template-list.html            |  433 +++
 .../pages/system/module-config-list.html      |  458 ++++
 .../pages/system/space-config-list.html       |  451 ++++
 prototypes/masters/README.md                  |   28 +
 prototypes/masters/_shared/README.md          |   28 +
 prototypes/masters/_shared/plugin-shell.html  |   83 +
 prototypes/masters/_shared/space-shell.html   |  121 +
 prototypes/masters/_shared/system-shell.html  |   91 +
 prototypes/masters/config-page/README.md      |   12 +
 .../masters/config-page/states/dirty.html     |  115 +
 prototypes/masters/config-page/template.html  |  125 +
 prototypes/masters/decision-editor/README.md  |   12 +
 .../masters/decision-editor/template.html     |  122 +
 prototypes/masters/engine-panel/README.md     |   12 +
 prototypes/masters/engine-panel/template.html |  161 ++
 prototypes/masters/flow-editor/README.md      |   13 +
 .../states/mock-debug-confirm.html            |   85 +
 .../flow-editor/states/node-selected.html     |  117 +
 .../flow-editor/states/publish-confirm.html   |   88 +
 .../flow-editor/states/save-ready.html        |   96 +
 prototypes/masters/flow-editor/template.html  |  314 +++
 prototypes/masters/list-page/README.md        |   13 +
 .../list-page/states/bulk-actions.html        |  116 +
 .../masters/list-page/states/empty.html       |   55 +
 .../masters/list-page/states/error.html       |   55 +
 prototypes/masters/list-page/template.html    |  131 +
 prototypes/masters/overlays/README.md         |   26 +
 prototypes/masters/overlays/dialogs.html      |   84 +
 prototypes/masters/overlays/sidesliders.html  |   76 +
 prototypes/masters/task-detail/README.md      |   14 +
 .../masters/task-detail/states/complete.html  |  136 +
 .../masters/task-detail/states/empty-log.html |  108 +
 .../masters/task-detail/states/failed.html    |  139 +
 prototypes/masters/task-detail/template.html  |  312 +++
 prototypes/serve.py                           |  578 ++++
 prototypes/showcase_catalog.py                |  167 ++
 tests/interface/prototypes/__init__.py        |    1 +
 .../test_bkflow_engine_admin_feature.py       |  206 ++
 .../prototypes/test_flow_editor_contract.py   |  149 ++
 .../prototypes/test_master_contract.py        |  269 ++
 tests/interface/prototypes/test_serve.py      |  167 ++
 .../prototypes/test_showcase_catalog.py       |  176 ++
 .../prototypes/test_showcase_homepage.py      |  446 ++++
 .../prototypes/test_structure_contract.py     |  219 ++
 .../prototypes/test_task_detail_contract.py   |  193 ++
 95 files changed, 23402 insertions(+), 74 deletions(-)
 create mode 100644 .ai/docs/specs/bkflow-engine-admin-interaction-audit-2026-04-20.md
 create mode 100644 docs/plans/2026-03-23-prototype-toolkit.md
 create mode 100644 docs/plans/2026-04-10-prototype-bk-standard.md
 create mode 100644 docs/plans/2026-04-21-bkflow-engine-admin-prototype-overhaul.md
 create mode 100644 docs/plans/2026-04-22-prototype-showcase-homepage.md
 create mode 100644 docs/specs/2026-03-23-prototype-toolkit-design.md
 create mode 100644 docs/specs/2026-04-10-prototype-bk-standard-design.md
 create mode 100644 docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md
 create mode 100644 docs/specs/2026-04-22-prototype-showcase-homepage-design.md
 create mode 100644 prototypes/README.md
 create mode 100644 prototypes/assets/bkflow-prototype.css
 create mode 100644 prototypes/assets/bkflow-prototype.js
 create mode 100644 prototypes/assets/bkflow-showcase.css
 create mode 100644 prototypes/assets/bkflow-showcase.js
 create mode 100644 prototypes/assets/icons/bkflow-logo.svg
 create mode 100644 prototypes/examples/README.md
 create mode 100644 prototypes/examples/component-showcase.html
 create mode 100644 prototypes/features/README.md
 create mode 100644 prototypes/features/_legacy/README.md
 create mode 100644 prototypes/features/_legacy/node-output-viewer/README.md
 create mode 100644 prototypes/features/_legacy/node-output-viewer/index.html
 create mode 100644 prototypes/features/_legacy/sops-open-plugin/README.md
 create mode 100644 prototypes/features/_legacy/sops-open-plugin/index.html
 create mode 100644 prototypes/features/_legacy/sops-open-plugin/main-flow.html
 create mode 100644 prototypes/features/_legacy/sops-open-plugin/space-open-plugin-management.html
 create mode 100644 prototypes/features/_legacy/sops-open-plugin/task-plugin-error-state.html
 create mode 100644 prototypes/features/_legacy/sops-open-plugin/template-plugin-selection.html
 create mode 100644 prototypes/features/_legacy/space-variable-manage/README.md
 create mode 100644 prototypes/features/_legacy/space-variable-manage/index.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/CHANGELOG.md
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/README.md
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/index.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/plugin/plugin-list.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/credential-list.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/debug-task-list.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-editor.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-list.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-debug.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-edit.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-view.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/label-list.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/space-config.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/statistics-exception.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-complete.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-failed.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-list.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/template-list.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/module-config-list.html
 create mode 100644 prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/space-config-list.html
 create mode 100644 prototypes/masters/README.md
 create mode 100644 prototypes/masters/_shared/README.md
 create mode 100644 prototypes/masters/_shared/plugin-shell.html
 create mode 100644 prototypes/masters/_shared/space-shell.html
 create mode 100644 prototypes/masters/_shared/system-shell.html
 create mode 100644 prototypes/masters/config-page/README.md
 create mode 100644 prototypes/masters/config-page/states/dirty.html
 create mode 100644 prototypes/masters/config-page/template.html
 create mode 100644 prototypes/masters/decision-editor/README.md
 create mode 100644 prototypes/masters/decision-editor/template.html
 create mode 100644 prototypes/masters/engine-panel/README.md
 create mode 100644 prototypes/masters/engine-panel/template.html
 create mode 100644 prototypes/masters/flow-editor/README.md
 create mode 100644 prototypes/masters/flow-editor/states/mock-debug-confirm.html
 create mode 100644 prototypes/masters/flow-editor/states/node-selected.html
 create mode 100644 prototypes/masters/flow-editor/states/publish-confirm.html
 create mode 100644 prototypes/masters/flow-editor/states/save-ready.html
 create mode 100644 prototypes/masters/flow-editor/template.html
 create mode 100644 prototypes/masters/list-page/README.md
 create mode 100644 prototypes/masters/list-page/states/bulk-actions.html
 create mode 100644 prototypes/masters/list-page/states/empty.html
 create mode 100644 prototypes/masters/list-page/states/error.html
 create mode 100644 prototypes/masters/list-page/template.html
 create mode 100644 prototypes/masters/overlays/README.md
 create mode 100644 prototypes/masters/overlays/dialogs.html
 create mode 100644 prototypes/masters/overlays/sidesliders.html
 create mode 100644 prototypes/masters/task-detail/README.md
 create mode 100644 prototypes/masters/task-detail/states/complete.html
 create mode 100644 prototypes/masters/task-detail/states/empty-log.html
 create mode 100644 prototypes/masters/task-detail/states/failed.html
 create mode 100644 prototypes/masters/task-detail/template.html
 create mode 100644 prototypes/serve.py
 create mode 100644 prototypes/showcase_catalog.py
 create mode 100644 tests/interface/prototypes/__init__.py
 create mode 100644 tests/interface/prototypes/test_bkflow_engine_admin_feature.py
 create mode 100644 tests/interface/prototypes/test_flow_editor_contract.py
 create mode 100644 tests/interface/prototypes/test_master_contract.py
 create mode 100644 tests/interface/prototypes/test_serve.py
 create mode 100644 tests/interface/prototypes/test_showcase_catalog.py
 create mode 100644 tests/interface/prototypes/test_showcase_homepage.py
 create mode 100644 tests/interface/prototypes/test_structure_contract.py
 create mode 100644 tests/interface/prototypes/test_task_detail_contract.py

diff --git a/.ai/docs/specs/bkflow-engine-admin-interaction-audit-2026-04-20.md b/.ai/docs/specs/bkflow-engine-admin-interaction-audit-2026-04-20.md
new file mode 100644
index 0000000000..afce1971e8
--- /dev/null
+++ b/.ai/docs/specs/bkflow-engine-admin-interaction-audit-2026-04-20.md
@@ -0,0 +1,612 @@
+# BKFlow Engine Admin 交互审计
+
+日期：2026-04-20
+
+环境：`内部测试环境（已脱敏）`
+
+范围：`bkflow_engine_admin` 入口下可见的 `空间管理 / 系统管理 / 我的插件` 交互；重点记录导航方式、页面容器形态、主操作反馈、危险操作确认、空态与异常态，并补充一次真实流程的“创建 -> 编辑配置 -> 发布 -> 调试执行”深链路。
+
+证据目录：`本地采集截图（未纳入版本库）`
+
+## 1. 审计结论
+
+这个入口不是单一的“列表页壳子”，而是三类交互容器混用：
+
+1. 原地弹窗/确认框
+2. 右侧滑出面板
+3. 整页跳转或跨模块跳转
+
+现有 `prototypes/base.html` 更接近“固定导航 + 简单列表页”的静态外壳，但真实页面里至少还存在以下关键差异：
+
+1. 顶栏一级导航会切换整套路由和左侧菜单，而不是只切内容区。
+2. `空间管理` 的二级菜单主要依赖 `activeTab` 查询参数切换。
+3. 主按钮的行为并不统一。
+   `流程 -> 创建流程` 是弹窗。
+   `任务/调试任务 -> 引擎操作` 是跨到 `/enginePanel/...`。
+   `决策表 -> 新建` 是跳到独立编辑页 `/admin_decision/...`。
+4. 列表页并不只是“表格 + 操作列”。
+   真实页面大量使用固定操作列、空态、状态标签、链接跳转、确认弹窗、只读内容弹窗、代码编辑器和侧滑表单。
+5. 配置页不是普通表单。
+   `空间配置` 是大段代码编辑器 + 若干枚举/文本控件，`保存` 默认禁用，`恢复默认值` 有危险确认。
+
+## 2. 全局导航与路由
+
+### 顶栏一级导航
+
+| 一级导航 | 真实路由 | 左侧菜单形态 | 备注 |
+| --- | --- | --- | --- |
+| 空间管理 | `/bkflow_engine_admin/?space_id=171...` | 8 个二级菜单 | 以 `activeTab` 切页 |
+| 系统管理 | `/bkflow_engine_admin/system/` | `空间配置 / 模块配置 / 运营统计` | 独立 path，不再依赖 `space_id` |
+| 我的插件 | `/bkflow_engine_admin/plugin/` | 仅 `蓝鲸插件` | 独立 path |
+
+### 空间管理二级菜单
+
+| 菜单 | 路由形态 | 页面容器主形态 |
+| --- | --- | --- |
+| 流程 | `/bkflow_engine_admin/?space_id=171` | 列表 + 弹窗 + 侧滑 + 确认框 |
+| 任务 | `...?activeTab=task` | 空列表 + 跨模块跳转 |
+| 调试任务 | `...?activeTab=mockTask` | 列表 + 详情跳转 + 删除确认 |
+| 决策表 | `...?activeTab=decisionTable` | 空列表 + 独立编辑页 |
+| 空间配置 | `...?activeTab=config` | 大配置表单 |
+| 凭证管理 | `...?activeTab=credential` | 列表 + 新建侧滑 + 查看内容弹窗 |
+| 运营统计 | `...?activeTab=statistics` | 当前环境中主体未正常渲染 |
+| 标签管理 | `...?activeTab=labelManage` | 列表 + 新增弹窗 |
+
+### 三种典型跳转
+
+| 触发动作 | 目标路由 | 交互含义 |
+| --- | --- | --- |
+| `任务/调试任务 -> 引擎操作` | `/enginePanel/171/?type=task|mockTask` | 跨模块但保留同一产品壳 |
+| `调试任务 -> 任务名称` | `/taskflow/execute/171/?instanceId=<id>&type=mock` | 跳到调试任务执行详情 |
+| `决策表 -> 新建` | `/admin_decision/?space_id=171` | 跳到独立编辑器 |
+
+## 3. 页面逐项记录
+
+### 3.1 空间管理 / 流程
+
+路由：`/bkflow_engine_admin/?space_id=171`
+
+证据：
+
+- `00-space-template-home.png`
+- `01-space-template-create-dialog.png`
+- `02-space-template-create-validation.png`
+- `03-space-template-create-task-sideslider.png`
+- `05-space-template-copy-confirm.png`
+- `06-space-template-delete-confirm.png`
+
+观察：
+
+| 项目 | 细节 |
+| --- | --- |
+| 顶部主按钮 | `创建流程` |
+| 搜索/筛选 | 单搜索框，placeholder 为 `ID/流程名称/标签/创建人/更新人/启用/所属作用域类型/所属作用域值` |
+| 表格 | 固定操作列；行操作包含 `新建任务 / 复制 / 删除` |
+| 分页 | 底部分页，显示总数、每页条数、页码 |
+| 行标题 | 流程名称可点击 |
+
+关键交互：
+
+1. `创建流程`
+   打开居中弹窗，不跳页。
+   字段包含 `流程名称`、`所属作用域类型`、`所属作用域值`、`标签`。
+   底部按钮为 `提交 / 取消`。
+2. 空提交校验
+   `流程名称` 必填，空提交后出现内联错误态。
+3. `新建任务`
+   打开右侧侧滑。
+   默认自动带出任务名称，例如 `<流程名>_YYYYMMDDHHMMSS`。
+   支持 `表单模式 / json模式` 切换。
+   底部按钮为 `提交 / 取消`。
+4. `复制`
+   不是直接执行。
+   先弹确认框，文案包含“是否复制该流程？”
+   附加提示：关联 mock 数据不会同步复制，带决策表节点的流程暂不支持复制。
+   还有一个额外勾选项 `复制包含的子流程`。
+5. `删除`
+   弹确认框，文案形如 `确认删除流程"<name>"?`。
+
+对原型优化的启发：
+
+1. `流程` 页必须支持“同页多层容器”。
+   主列表、创建弹窗、新建任务侧滑、复制确认、删除确认是并存的。
+2. 现有基座里的“创建流程 = 跳页”或“所有主操作都走同一种浮层”都不够贴近真实页面。
+
+#### 深链路补充：真实创建一条流程并进入配置页
+
+审计对象：
+
+- 流程 ID：`2166`
+- 流程名称：`audit-deep-dive-20260420`
+
+深链路证据：
+
+- `90-template-edit-node-selected.png`
+- `91-template-node-config-panel.png`
+- `92-template-global-vars-popup.png`
+- `93-template-save-enabled-after-node-confirm.png`
+- `94-template-debug-save-confirm.png`
+- `95-template-debug-execute-error-modal.png`
+
+实际链路：
+
+1. 在流程列表点击 `创建流程`，仅填写流程名称 `audit-deep-dive-20260420` 即可创建，创建成功后不跳页。
+2. 列表立即回到第一页顶部，新增行直接插入最上方，列表总数由 `57` 增为 `58`。
+3. 点击流程名称跳转到只读页 `/template/view/2166/`，顶部标题为 `查看流程`，此时展示版本区和 `编辑` 按钮。
+4. 点击 `编辑` 后进入 `/template/edit/2166/`，页面标题切为 `编辑流程`，顶部操作区出现 `保存 / 调试 / 发布`。
+
+编辑页的关键交互：
+
+1. 单击画布节点，只会选中节点并显示节点周边的悬浮工具条，不会立刻打开配置表单。
+2. 双击节点后，右侧才会打开 `节点配置` 抽屉。
+3. `节点配置` 不是简化表单，而是按 `基础信息 / 输入参数 / 输出参数` 分组；同屏包含：
+   `标准插件` 重选
+   `插件版本`
+   `节点名称`
+   `失败处理` 多选能力位（`AS / MS / MR / AR`）
+   `超时控制` 开关
+   输入参数编辑框
+   输出参数表格与“勾选为全局变量”
+4. 抽屉顶部还有 `全局变量` 入口，但它不是切整页，而是展开一个浮层式全局变量表格；已内置 `_system.task_name / _system.task_id / _system.task_start_time / _system.operator` 等系统变量。
+5. 节点抽屉底部存在一层局部提交。
+   先点 `确定`，只是把节点配置写回画布。
+   此时顶部全局 `保存` 才会从禁用变为可点。
+6. 顶部再点一次 `保存`，才真正保存整个流程定义。
+   保存后顶部 `保存` 会重新变灰，`发布` 才从禁用切为可点。
+
+发布交互：
+
+1. 点击 `发布` 不会直接提交，而是弹出 `发布流程` 对话框。
+2. 对话框内带默认 `版本号`，实际观测到默认值为 `1.0.0`，并提供 `版本描述` 输入框。
+3. 发布成功后页面回到 `/template/view/2166/`，标题回到 `查看流程`，顶部出现版本徽标 `1.0.0` 与 `最新` 标识。
+
+调试执行交互：
+
+1. 编辑页点击 `调试` 会跳到独立调试路由 `/template/mock/true/2166/`，不是在当前编辑器内切一个 Tab。
+2. 调试页顶部按钮为 `退出调试 / 保存 / 执行调试`，节点点击后会打开 `设置 Mock 数据` 抽屉。
+3. 该抽屉包含 `Mock数据 / 插件配置 / 流程控制选项` 三个分组；`Mock数据` 分组支持 `新增数据方案`，新增后会生成默认方案卡片 `Mock 数据方案1`。
+4. 点击顶部 `执行调试` 时不会直接运行，而是先弹确认框：`确定保存Mock数据并去执行调试?`
+5. 确认后会新开一个标签页 `/template/mock/execute/true/2166/`，而不是覆盖当前调试页。
+6. 新标签页标题为 `调试执行`，表单区包含：
+   自动生成的调试任务名称，实际观测值为 `audit-deep-dive-20260420_调试任务_20260420203115`
+   `填写调试入参` 区
+   `历史调试` 侧栏
+7. 当前环境下，在 `调试执行` 页点击 `执行` 后没有进入成功态，而是弹出全局异常弹层：`应用出现异常`。
+   这说明执行链路在该环境中至少存在一条异常路径，原型不能只表达“成功执行”单一状态。
+
+### 3.2 空间管理 / 任务
+
+路由：`/bkflow_engine_admin/?space_id=171&activeTab=task`
+
+证据：
+
+- `10-space-task-empty-state.png`
+- `11-engine-panel-task-request-form.png`
+
+观察：
+
+| 项目 | 细节 |
+| --- | --- |
+| 默认态 | 列表空态 |
+| 顶部主按钮 | `引擎操作` |
+| 搜索/筛选 | placeholder 为 `ID/任务名称/标签/创建人/执行人/所属模板 ID/所属作用域类型/所属作用域值` |
+| 表格 | 当前空间此页无数据，展示 `暂无数据` |
+
+关键交互：
+
+1. `引擎操作`
+   不开弹窗。
+   直接跳到 `/enginePanel/171/?type=task`。
+2. `/enginePanel/171/?type=task`
+   页面主体是“请求 / 响应”双栏式接口调试表单。
+   包含 `引擎版本`、`请求资源`、`请求方法`、`Query`、`Body`。
+   `发送请求` 默认禁用，`重置` 可点。
+
+对原型优化的启发：
+
+1. `任务` 页不是简单列表详情页。
+   主按钮会跨到另一套请求调试页面。
+2. 基座需要支持“列表页跳到接口调试页”的页面切换模型。
+
+### 3.3 空间管理 / 调试任务
+
+路由：`/bkflow_engine_admin/?space_id=171&activeTab=mockTask`
+
+证据：
+
+- `12-space-mocktask-list.png`
+- `13-space-mocktask-delete-confirm.png`
+- `14-engine-panel-mocktask-request-form.png`
+
+观察：
+
+| 项目 | 细节 |
+| --- | --- |
+| 数据态 | 有真实列表数据 |
+| 状态展示 | 使用状态图标 + 文案，如 `完成 / 失败 / 未执行` |
+| 任务名称 | 链接跳转到 `/taskflow/execute/171/?instanceId=<id>&type=mock` |
+| 行操作 | 仅 `删除` |
+| 分页 | 有总数、每页条数、页码 |
+
+关键交互：
+
+1. `删除`
+   弹确认框，文案形如 `确认删除任务"<name>"?`。
+2. `引擎操作`
+   跳到 `/enginePanel/171/?type=mockTask`。
+   与普通 `任务` 复用同一套请求页，只是 `type` 不同。
+
+对原型优化的启发：
+
+1. `任务` 和 `调试任务` 在视觉结构上相似，但数据态和跳转目标不同。
+2. 状态列需要支持图标 + 颜色，不适合只用纯文本标签占位。
+
+#### 深链路补充：调试任务执行详情页
+
+审计对象：
+
+- 任务 ID：`1192795`
+- 任务名称：`audit-deep-dive-20260420_调试任务_20260420203821`
+- 路由：`/taskflow/execute/171/?instanceId=1192795&type=mock`
+
+证据：
+
+- `96-task-execute-detail-node-detail.png`
+- `97-task-execute-detail-call-log.png`
+- `98-task-execute-detail-config-snapshot.png`
+
+实际观察：
+
+1. 从 `调试任务` 列表点击任务名称，进入的不是流程模板页，而是独立的执行详情页，浏览器标题直接变成任务名称。
+2. 页头信息结构与流程编辑页明显不同：
+   左侧是 `任务执行` + 任务名称 + 运行状态 `完成`
+   右侧没有 `保存 / 调试 / 发布`
+   但提供一个回链图标，可跳回源模板 `/template/view/2166/`
+3. 中央仍是流程画布，但语义已从“可编排”切成“可观察”。
+   流程编辑页里，单击节点只会选中，双击才打开配置抽屉。
+   任务详情页里，单击节点就直接打开 `节点详情` 面板。
+4. 任务详情页点击节点后，没有出现编辑页里的节点悬浮工具条，也没有任何可修改控件；节点详情面板默认是只读分析态。
+5. 节点详情面板顶部会列出当前任务运行过的节点轨迹，例如 `开始节点 / 消息展示 / 结束节点`，选中节点后会显示该节点本次运行状态。
+
+节点详情页签：
+
+1. `执行记录`
+   展示 `异常信息 / 执行信息 / 输入参数 / 输出参数`。
+   实测这条任务显示：
+   `暂无异常`
+   开始/结束时间
+   耗时 `小于 1 秒`
+   输入参数 `展示内容 = audit message 20260420`
+   输出参数 `_result / _loop / _inner_loop`
+2. `配置快照`
+   展示的是任务执行当时的节点配置快照，而不是当前模板最新可编辑配置。
+   内容包括 `标准插件 / 插件版本 / 节点名称 / 是否可选 / 失败处理 / 输入参数 / 输出参数`。
+   这说明执行详情页承担“事后审计”职责，不是“继续编辑”职责。
+3. `操作历史`
+   当前这条任务对应节点下为空表，显示 `暂无数据`。
+   说明该页需要兼容“有分页表格”和“空表格”两种运行态。
+4. `调用日志`
+   使用代码查看器样式展示运行日志，包含行号和较长的 pipeline trace 文本。
+   这里不是简单文本块，存在日志浏览器式的阅读体验。
+
+与流程编辑页的直接差异：
+
+1. 流程编辑页是“配置中心”，任务详情页是“执行取证中心”。
+2. 流程编辑页顶部核心动作是 `保存 / 调试 / 发布`；任务详情页顶部核心信息是 `任务名 + 状态 + 模板回链`。
+3. 流程编辑页节点面板强调“基础信息、输入参数、输出参数的编辑”；任务详情页节点面板强调“执行记录、配置快照、操作历史、调用日志的查看”。
+4. 流程编辑页需要双击节点进入编辑；任务详情页单击节点即可查看详情。
+5. 流程编辑页里配置变化会驱动按钮状态切换；任务详情页没有这类保存状态机，而是运行信息与只读日志。
+
+### 3.4 空间管理 / 决策表
+
+路由：
+
+- 列表：`/bkflow_engine_admin/?space_id=171&activeTab=decisionTable`
+- 新建页：`/admin_decision/?space_id=171`
+
+证据：
+
+- `20-space-decision-empty-state.png`
+- `21-decision-editor-new.png`
+
+观察：
+
+| 项目 | 细节 |
+| --- | --- |
+| 列表态 | 当前空间列表为空 |
+| 主按钮 | `新建` |
+| 空态 | `暂无数据` |
+
+关键交互：
+
+1. `新建`
+   直接跳到独立编辑页 `/admin_decision/?space_id=171`。
+2. 新建页结构
+   顶部有返回箭头和标题 `新建决策表`。
+   分为 `基础信息` 与 `规则配置` 两块。
+   基础信息包含 `名称`、`关联流程`、`描述`。
+   规则配置支持 `条件字段 / 结果字段`，并有空态提示。
+   底部按钮为 `提交 / 取消 / 调试`。
+3. `取消`
+   返回决策表列表页。
+
+对原型优化的启发：
+
+1. 决策表应建模为“列表页 + 专用编辑器”，而不是列表页上的简单弹层。
+
+### 3.5 空间管理 / 空间配置
+
+路由：`/bkflow_engine_admin/?space_id=171&activeTab=config`
+
+证据：
+
+- `30-space-config-code-form.png`
+- `31-space-config-restore-confirm.png`
+
+观察：
+
+| 项目 | 细节 |
+| --- | --- |
+| 页面形态 | 单页长表单，无 Tab |
+| 控件类型 | 文本输入、下拉选择、代码编辑器、JSON 文本框 |
+| 编辑器 | 多个 Monaco 风格代码块，带折叠/展开、工具图标 |
+| 按钮区 | `保存`、`恢复默认值` |
+| 保存态 | 初始为禁用 |
+
+关键交互：
+
+1. `保存`
+   默认禁用，推断需要在有改动后才可提交。
+2. `恢复默认值`
+   弹危险确认框：`确认将所有配置项恢复为默认值？`
+3. 真实字段密度很高。
+   例如 `API 插件配置`、`空间管理员`、`流程版本控制`、`Token过期时间`、`画布模式`、`网关表达式` 等。
+
+对原型优化的启发：
+
+1. 基座需要支持代码编辑器占位，而不是普通 textarea。
+2. 配置页要体现“保存按钮默认禁用”和“恢复默认值危险确认”。
+
+### 3.6 空间管理 / 凭证管理
+
+路由：`/bkflow_engine_admin/?space_id=171&activeTab=credential`
+
+证据：
+
+- `40-space-credential-list.png`
+- `41-space-credential-create-sideslider.png`
+- `42-space-credential-view-content.png`
+
+观察：
+
+| 项目 | 细节 |
+| --- | --- |
+| 顶部主按钮 | `新建` |
+| 列表 | 有真实数据 |
+| 行操作 | `编辑 / 查看内容 / 删除` |
+| 类型列 | 如 `蓝鲸应用认证`、`蓝鲸 Access Token 认证` |
+
+关键交互：
+
+1. `新建`
+   打开右侧侧滑，不跳页。
+   表单包含 `名称`、`类型`、`描述`、`开放范围` 等。
+   `类型` 不是 select，而是横向切换项。
+   当前可见类型有 `蓝鲸应用认证 / 蓝鲸 Access Token 认证 / Basic Auth / 自定义`。
+2. `查看内容`
+   打开只读弹窗。
+   内容以代码块形式展示，敏感字段做掩码，例如 `"access_token": "*********"`.
+
+对原型优化的启发：
+
+1. 凭证页是很典型的“列表 + 创建侧滑 + 查看弹窗”的组合。
+2. 类型切换应做成明显的选项组，不应简化成普通下拉。
+
+### 3.7 空间管理 / 运营统计
+
+路由：`/bkflow_engine_admin/?space_id=171&activeTab=statistics`
+
+证据：
+
+- `50-space-statistics-blank.png`
+
+观察：
+
+1. 路由成功切换到 `activeTab=statistics`。
+2. 左侧菜单仍在，但主内容区在当前环境中几乎为空。
+3. 浏览器 console 里出现了来自外部可视化资源的日志，说明此页可能依赖另一套统计应用或延迟加载资源。
+
+结论：
+
+1. 当前环境下，这一页应标记为“入口可见，但主体未稳定渲染”。
+2. 原型基座优化时不要把它简单当成普通列表页处理。
+
+### 3.8 空间管理 / 标签管理
+
+路由：`/bkflow_engine_admin/?space_id=171&activeTab=labelManage`
+
+证据：
+
+- `60-space-label-empty-list.png`
+- `61-space-label-create-dialog.png`
+
+观察：
+
+1. 首次快照出现过空态，后续数据正常加载为 4 条，说明这里存在异步加载延迟。
+2. 列表字段包含 `标签名称`、`标签描述`、`标签范围`、`标签引用`、`系统默认标签`。
+3. 支持层级标签，名称可包含 `/`，例如 `新标签/第三个二级标签`。
+
+关键交互：
+
+1. `新增标签`
+   打开弹窗。
+   字段包含 `标签名称`、`标签颜色`、`标签描述`、`标签范围`。
+   范围使用多选式切换，当前可选 `任务 / 流程`。
+2. 行操作
+   包含 `编辑 / 删除`。
+
+对原型优化的启发：
+
+1. 标签管理不是纯空态页，真实页面会展示树形/层级标签语义。
+2. 需要支持颜色选择器占位。
+
+### 3.9 系统管理 / 空间配置
+
+路由：`/bkflow_engine_admin/system/`
+
+证据：
+
+- `70-system-space-list.png`
+
+观察：
+
+1. 顶栏切到 `系统管理` 后，左侧菜单变为 `空间配置 / 模块配置 / 运营统计`。
+2. 当前默认页是平台级 `空间配置` 列表，不再绑定具体 `space_id`。
+3. 顶部有 `新增`。
+4. 行操作只有 `编辑`。
+5. 列表字段偏平台管理属性，如 `空间ID`、`空间名称`、`应用ID`、`平台提供服务的地址`、`空间创建的方式`。
+
+对原型优化的启发：
+
+1. 一级导航切换后，侧栏信息架构要整体变化，而不是局部替换。
+
+### 3.10 系统管理 / 模块配置
+
+路由：`/bkflow_engine_admin/system/?activeTab=module`
+
+证据：
+
+- `71-system-module-list.png`
+
+观察：
+
+1. 仍是列表页，顶部有 `新增`。
+2. 行操作为 `编辑 / 删除`。
+3. 字段集中在模块注册信息，如 `模块code`、`模块提供的地址`、`模块的token`、`模块类型`、`隔离类型`。
+
+对原型优化的启发：
+
+1. 系统管理下至少有两种列表页，但信息密度和列宽分配不同于空间管理。
+
+### 3.11 我的插件 / 蓝鲸插件
+
+路由：`/bkflow_engine_admin/plugin/`
+
+证据：
+
+- `80-plugin-list.png`
+- `81-plugin-authorize-dialog.png`
+
+观察：
+
+1. 左侧只有一个菜单 `蓝鲸插件`。
+2. 顶部没有“新增”，只有搜索。
+3. 列表核心字段包括 `插件名称`、`code`、`管理员`、`授权状态`、`使用范围`、`授权状态修改时间`、`授权状态修改人`。
+4. 行操作根据授权状态变化：
+   已授权：`编辑使用范围 / 取消授权`
+   未授权：`编辑使用范围 / 授权`
+
+关键交互：
+
+1. `授权`
+   弹确认框，标题为 `确认授权？`
+   文案会说明授权后的使用含义及执行人信息真实性风险。
+2. `编辑使用范围`
+   可见但本次未深入执行，建议后续原型优化时保留为独立弹层能力。
+
+对原型优化的启发：
+
+1. 这个页面的“操作按钮随状态变化”是重要差异，不能做成固定按钮文案。
+
+## 4. 真实页面里的交互模式归纳
+
+### 4.1 容器模式
+
+| 模式 | 真实示例 |
+| --- | --- |
+| 居中弹窗 | 创建流程、复制确认、删除确认、标签新增、插件授权、凭证查看内容 |
+| 右侧侧滑 | 流程新建任务、凭证新建 |
+| 独立编辑页 | 决策表新建页 |
+| 画布编排页 | `/template/view/:id`、`/template/edit/:id` |
+| 跨模块请求页 | `enginePanel` |
+| 调试执行页 | `/template/mock/true/:id`、`/template/mock/execute/true/:id` |
+| 详情执行页 | `taskflow/execute/...` |
+
+### 4.2 统一规律
+
+1. 危险操作基本都有二次确认。
+2. 主操作反馈并不统一，必须按业务页定制。
+3. 真实页面普遍依赖路由表达状态。
+   `activeTab`
+   `/system/`
+   `/plugin/`
+   `/enginePanel/...`
+   `/admin_decision/...`
+   `/template/view/...`
+   `/template/edit/...`
+   `/template/mock/...`
+4. 空态在多个页面真实存在。
+   任务
+   决策表
+   统计异常页
+   标签管理首屏异步空态
+5. 流程编排页存在明显的“两段式保存”。
+   节点抽屉先 `确定`
+   顶部再 `保存`
+   最后才允许 `发布`
+6. 调试执行不是当前页内就地完成。
+   先保存 Mock 配置
+   再确认
+   再新开标签页执行
+7. 任务详情页和流程编辑页虽然都复用了流程画布，但交互语义完全不同。
+   编辑页是“编排”
+   执行页是“观察”
+   同一套画布不能只换标题就复用
+
+## 5. 直接指导原型工具优化的差距清单
+
+1. `prototypes/base.html` 目前的导航是静态内容切换，缺少真实页面里的“一级导航切路由、二级菜单切 activeTab”的表达。
+2. 现有基座缺少对“同一页面里弹窗、侧滑、确认框并存”的结构支持。
+3. 真实页面大量出现固定操作列、状态标签、空态、分页、行跳转，基座里目前表达偏弱。
+4. 配置页需要代码编辑器、禁用态保存按钮、恢复默认值确认，不能只用普通输入框替代。
+5. 决策表、引擎操作、任务执行详情都不是普通页面切换，应在原型工具中抽成独立页面模版。
+6. 插件授权、凭证查看内容、标签新增这类“轻量业务弹窗”值得做成可复用模版。
+7. 流程编排页需要新增一种高复杂度模版。
+   中央画布
+   节点选中悬浮工具条
+   右侧配置抽屉
+   顶部全局操作条
+8. 原型基座目前缺少“局部确认改变全局保存态”的表达。
+   真实页面里节点抽屉的 `确定` 不等于全局保存，必须单独建模。
+9. 真实调试执行页包含“保存 Mock 数据确认 -> 新开标签页 -> 执行结果/异常”链路。
+   这比普通提交弹窗复杂得多，不能压平为一个 `Run` 按钮。
+10. 任务详情页不能套用流程编辑页原型。
+    它需要专门的“执行详情模版”：
+    页头状态区
+    模板回链
+    只读节点详情
+    执行记录/配置快照/操作历史/调用日志四类内容区
+
+## 6. 后续优化建议
+
+建议后续从 `master` 切一个 worktree 后，先按下面顺序改原型基座：
+
+1. 先重做全局导航骨架。
+   支持 `空间管理 / 系统管理 / 我的插件` 三套导航语义。
+2. 再补三类页面模版。
+   列表页
+   配置页
+   独立编辑页
+3. 再补三类浮层模版。
+   确认弹窗
+   业务表单弹窗
+   右侧侧滑
+4. 最后再把 `流程 / 调试任务 / 空间配置 / 凭证管理 / 插件` 这些高频页映射到新基座上。
+
+## 7. 备注
+
+1. 本次补充审计实际创建并发布了一条专用流程 `audit-deep-dive-20260420`（ID `2166`），用于记录真实编排页和调试链路；未对其他现有业务数据做破坏性修改。
+2. 所有危险操作仍然停在确认层或审计专用对象范围内，未执行删除、授权、恢复默认值等影响现有数据的最终提交动作。
+3. `运营统计` 在当前环境里未正常渲染，需在后续优化时单列处理。
+4. `标签管理` 首次快照出现空态，但后续列表成功渲染，说明该页存在异步加载时序差异。
+5. 新流程的调试执行链路已走到 `/template/mock/execute/true/2166/`，但当前环境点击 `执行` 后出现 `应用出现异常` 弹层，因此本次记录到了异常路径，没有记录到成功执行结果页。
diff --git a/.ai/skills/prototype-generator/SKILL.md b/.ai/skills/prototype-generator/SKILL.md
index 76d0375409..ad05b205b1 100644
--- a/.ai/skills/prototype-generator/SKILL.md
+++ b/.ai/skills/prototype-generator/SKILL.md
@@ -21,65 +21,71 @@ description: 独立的原型生成工具。用自然语言描述需求，AI 澄
 
 ## 完整工作流
 
-1. **启动预览服务器**  
-   - 检查是否已有 `prototypes/serve.py` 在运行（可查看 Cursor 的 **terminals** 状态或本机进程是否监听默认端口 **9080**）。  
+1. **启动预览服务器**
+   - 检查是否已有 `prototypes/serve.py` 在运行（可查看 Cursor 的 **terminals** 状态或本机进程是否监听默认端口 **9080**）。
    - 若未运行，在仓库根下执行：
      ```bash
      cd prototypes && python serve.py &
      ```
    - 默认地址：`http://localhost:9080/`（根目录即 `prototypes/`）。
 
-2. **检查 `base.html`**  
-   - 读取 `prototypes/base.html`。  
-   - **若不存在**：进入「首次使用引导」（见下文），向用户确认后生成 `base.html`，保存到 `prototypes/base.html`，并让用户在浏览器中打开 `http://localhost:9080/base.html` 预览确认。
-
-3. **需求澄清**（生成或大幅改版前必须完成，勿跳过）  
-   逐项提问并记录答案，例如：  
-   - 这个页面要展示什么信息？  
-   - 有哪些数据字段？（表格列 / 表单字段）  
-   - 需要哪些操作？（新建、编辑、删除、启用/停用等）  
-   - 交互方式？（搜索、筛选、侧滑编辑、弹窗确认、Tab 切换等）  
-   - 多个页面之间是否有关联、如何跳转？  
+2. **确认展厅首页合同**
+   - 根路径 `/` 是中文「BKFlow 原型展厅」首页。
+   - 首页展示来源是 `prototypes/features/<slug>/feature.meta.json`，而不是简单目录索引。
+   - 读取现有 feature 的 `README.md` 和 `feature.meta.json`，理解其首页卡片、代表页与排序约定。
+
+3. **参考蓝鲸设计规范（设计输入，不是运行时依赖）**
+   - 生成或大幅调整原型前，优先把 `bkui-knowledge` 作为设计参考源：如果当前会话能访问 `bkui-knowledge` MCP / connector，先读取相关页面模式、组件 API、交互规范和示例。
+   - 若无法访问 `bkui-knowledge`，退回读取本仓库的 `prototypes/examples/component-showcase.html`、相关 `prototypes/masters/` 母版，以及真实前端里相近页面的布局模式。
+   - 参考结果只用于决定页面结构、组件选择、交互模式、间距层级和状态表达；最终产物仍必须落在 `prototypes/features/<slug>/` 或 `prototypes/masters/`，使用 `assets/` 中的静态 CSS/JS。
+   - 不要因为参考 `bkui-knowledge` 而引入 Vue / React / bkui-vue CDN / npm 构建链路，也不要恢复 `prototypes/output/`、`prototypes/metadata/`、`prototypes/cache/` 作为版本库产物。
+   - 若发现当前 `assets/` 或 `masters/` 与蓝鲸标准差距明显，优先沉淀成共享样式或母版能力，再让 feature 页面复用。
+
+4. **需求澄清**（生成或大幅改版前必须完成，勿跳过）
+   逐项提问并记录答案，例如：
+   - 这个页面要展示什么信息？
+   - 有哪些数据字段？（表格列 / 表单字段）
+   - 需要哪些操作？（新建、编辑、删除、启用/停用等）
+   - 交互方式？（搜索、筛选、侧滑编辑、弹窗确认、Tab 切换等）
+   - 多个页面之间是否有关联、如何跳转？
    - （可选）后端是否已有 Model / Serializer？若用户**主动提供**文件路径，可按「后端模型读取」一节做字段提取；否则仅凭描述推断。
 
-4. **生成原型**  
-   - 先阅读 `prototypes/examples/component-showcase.html`（组件与 class 参考）和当前 `prototypes/base.html`（外壳）。  
-   - 复制 `base.html` 结构，在 `<main class="bk-content">` … `</main>` 内填充页面主体；**不要**把侧滑、弹窗等浮层塞进 `main` 内部（见「生成规则」）。  
-   - 将完整 HTML 保存到 **`prototypes/output/<name>.html`**。  
-   - **路径修正**：`base.html` 位于 `prototypes/` 根目录，资源用 `assets/...`；`output/` 下页面多一层目录，**必须**改为 `../assets/bkflow-prototype.css`、`../assets/bkflow-prototype.js` 及 `../assets/icons/...` 等。
-
-5. **告知预览**  
-   - 告诉用户打开：  
-     `http://localhost:9080/output/<name>.html`
-
-6. **迭代**  
-   - 根据反馈修改；新版本命名为 `<name>-v2.html`、`<name>-v3.html` … 保留旧文件便于对比（与「版本管理」规则一致）。
-
-## 生成规则（MUST）
-
-- **先读** `prototypes/examples/component-showcase.html`，了解可用样式与结构模式。  
-- **先读** `prototypes/base.html`，保持导航、布局与资源引用方式一致（再在 output 中做 `../assets/` 修正）。  
-- **CSS class** 一律使用工具包约定的 **`bk-` 前缀**（见下方速查表）。  
-- **交互** 仅通过 **`data-*` 属性** 声明，由 `assets/bkflow-prototype.js` 驱动；支持的属性与用法如下（实现以仓库内 JS 为准）：  
-
-  | 属性 | 用法说明 |
-  |------|----------|
-  | `data-open="<id>"` | 点击打开对应 `id` 的侧滑（`.bk-sideslider`）或弹窗（`.bk-dialog`）；目标元素需带 `id` 且通过 `.is-show` 控制显示（脚本会添加该类）。 |
-  | `data-close` | 点击后关闭最近的侧滑/弹窗；点击 `.bk-sideslider-mask` / `.bk-dialog-mask` 也会关闭。 |
-  | `data-tab="<panelId>"` | 放在 `.bk-tab` 内的 `.bk-tab-item` 上；切换对应 `id` 的 `.bk-tab-panel` 可见性，并切换 `active` 样式。 |
-  | `data-sortable` | 放在表头 `th` 上；点击按该列文本排序（中英文数字），并切换升序/降序指示类。 |
-  | `data-filter="<tableId>"` | 放在输入框等元素上；`input` 时用输入值对 `id` 为 `tableId` 的表格 `tbody` 行做包含匹配过滤。 |
-  | `data-collapse="<panelId>"` | 点击切换 `id` 对应元素的 `hidden` 状态。 |
-  | `data-dropdown="<menuId>"` | 点击切换 `id` 对应下拉容器（如 `.bk-select-dropdown`）的 `is-show`。 |
-  | `data-href="<url>"` | 点击后 `window.location.href` 跳转（如 `../output/other.html`）。 |
-  | `data-notify="<msg>"` | 点击后顶部绿色 Toast 提示，约 2 秒消失。 |
-  | `data-required` | 在表单控件上；提交 `.bk-form` 时若为空则给 `.bk-form-item` 加 `is-error` 并阻止提交。 |
-  | `data-pattern="<regex>"` | 同上，用正则校验控件值。 |
-  | `data-step="<panelId>"` | 在 `.bk-steps-container` 内切换 `.bk-step-panel` 的显示（`hidden`），用于步骤条/向导式布局。 |
-
-- **Mock 数据** 应贴近真实业务语义（流程名、空间、任务状态等），避免「测试1」「aaa」「foo」等占位。  
-- **版本文件**：`xxx.html` → `xxx-v2.html` → `xxx-v3.html`。  
-- **浮层位置**：所有侧滑、弹窗等**必须**放在 `</main>` 之后、`</div>`（闭合 `.bk-layout`）之前或按 `base.html` 同级结构闭合前，且**在** `<script src="../assets/bkflow-prototype.js">` **之前**，保证 DOM 顺序清晰、与示例一致。
+5. **生成或更新 feature 目录**
+   - 生成 `features/<slug>/` 时，必须同步创建或更新 `feature.meta.json`，不要只生成 `README.md` 和 `index.html`。
+   - `feature.meta.json` 应至少包含 `title`、`summary`、`status`、`tags`、`coverTheme`、`order`、`featuredPages`，并能描述首页展示所需的卡片信息、代表页和排序。
+   - `README.md` 负责 narrative 说明，`index.html` 和页面文件负责实际预览。
+   - 代表页信息应尽量贴近真实页面入口，便于首页直接进入重点原型。
+
+6. **生成规则（MUST）**
+   - **先读** `prototypes/examples/component-showcase.html`，了解可用样式与结构模式。
+   - **CSS class** 一律使用工具包约定的 **`bk-` 前缀**（见下方速查表）。
+   - **交互** 仅通过 **`data-*` 属性** 声明，由 `assets/bkflow-prototype.js` 驱动；支持的属性与用法如下（实现以仓库内 JS 为准）：
+
+     | 属性 | 用法说明 |
+     |------|----------|
+     | `data-open="<id>"` | 点击打开对应 `id` 的侧滑（`.bk-sideslider`）或弹窗（`.bk-dialog`）；目标元素需带 `id` 且通过 `.is-show` 控制显示（脚本会添加该类）。 |
+     | `data-close` | 点击后关闭最近的侧滑/弹窗；点击 `.bk-sideslider-mask` / `.bk-dialog-mask` 也会关闭。 |
+     | `data-tab="<panelId>"` | 放在 `.bk-tab` 内的 `.bk-tab-item` 上；切换对应 `id` 的 `.bk-tab-panel` 可见性，并切换 `active` 样式。 |
+     | `data-sortable` | 放在表头 `th` 上；点击按该列文本排序（中英文数字），并切换升序/降序指示类。 |
+     | `data-filter="<tableId>"` | 放在输入框等元素上；`input` 时用输入值对 `id` 为 `tableId` 的表格 `tbody` 行做包含匹配过滤。 |
+     | `data-collapse="<panelId>"` | 点击切换 `id` 对应元素的 `hidden` 状态。 |
+     | `data-dropdown="<menuId>"` | 点击切换 `id` 对应下拉容器（如 `.bk-select-dropdown`）的 `is-show`。 |
+     | `data-href="<url>"` | 点击后 `window.location.href` 跳转。 |
+     | `data-notify="<msg>"` | 点击后顶部绿色 Toast 提示，约 2 秒消失。 |
+     | `data-required` | 在表单控件上；提交 `.bk-form` 时若为空则给 `.bk-form-item` 加 `is-error` 并阻止提交。 |
+     | `data-pattern="<regex>"` | 同上，用正则校验控件值。 |
+     | `data-step="<panelId>"` | 在 `.bk-steps-container` 内切换 `.bk-step-panel` 的显示（`hidden`），用于步骤条/向导式布局。 |
+
+   - Mock 数据应贴近真实业务语义（流程名、空间、任务状态等），避免「测试1」「aaa」「foo」等占位。
+   - 浮层位置要保持与现有页面结构一致，便于预览和复用。
+
+7. **告知预览**
+   - 告诉用户打开：
+     `http://localhost:9080/`
+   - 如果需要直接进入某个 feature，则从首页卡片进入对应的 `features/<slug>/` 页面。
+
+8. **迭代**
+   - 根据反馈修改；保留旧版本或变更记录，便于对比和回看。
 
 ## 可用组件速查
 
@@ -114,31 +120,19 @@ description: 独立的原型生成工具。用自然语言描述需求，AI 澄
 | `data-dropdown="id"` | 下拉展开/收起 |
 | `data-href="page.html"` | 页面跳转 |
 | `data-notify="msg"` | 通知提示 |
-| `data-required` / `data-pattern` | 表单校验（需 `.bk-form` 提交） |
-| `data-step="id"` | 步骤面板切换（需在 `.bk-steps-container` 内） |
+| `data-required` / `data-pattern` | 表单校验 |
+| `data-step="id"` | 步骤面板切换 |
 
 ## 后端模型读取（条件触发）
 
-- **仅当用户明确提供**后端文件路径（如 Model、Config、Serializer）时执行。  
-- 静态阅读源码：提取字段名、类型、`choices`、默认值等；**不**连接数据库、**不**执行 Django。  
-- 粗略映射建议：`BooleanField` → `.bk-switcher`；`choices` → `.bk-select`；短文本 → `.bk-input`；长文本/JSON → `.bk-textarea`。  
+- **仅当用户明确提供**后端文件路径（如 Model、Config、Serializer）时执行。
+- 静态阅读源码：提取字段名、类型、`choices`、默认值等；**不**连接数据库、**不**执行 Django。
+- 粗略映射建议：`BooleanField` → `.bk-switcher`；`choices` → `.bk-select`；短文本 → `.bk-input`；长文本/JSON → `.bk-textarea`。
 - 若文件不存在或用户未提供路径，**跳过**本节，完全依据澄清结果推断字段与控件。
 
-## 首次使用引导（条件触发）
-
-当 **`prototypes/base.html` 不存在** 时：
-
-1. 询问**产品/应用名称**（展示在侧栏或标题区域）。  
-2. 询问**侧栏菜单模块列表**（文案与顺序）。  
-3. 询问**主色调**（默认 `#3a84ff`，写入 `:root` 或内联样式覆盖 `--bk-primary` 若工具包支持）。  
-4. 询问是否有 **logo**（路径或先用占位图；放入 `prototypes/assets/icons/` 或用户指定）。  
-5. 按现有工具包结构生成 `prototypes/base.html`（引用 `assets/bkflow-prototype.css` / `assets/bkflow-prototype.js`，包含 `bk-layout`、`bk-navigation`、`main.bk-content` 空槽）。  
-6. 请用户在 `http://localhost:9080/base.html` 预览确认后再进入页面级原型生成。
-
 ## 反模式（禁止）
 
-- **不要**引入 Vue / React / Angular 等前端框架。  
-- **不要**使用 Tailwind、Bootstrap 等**外部** CSS 框架或 CDN 大型 UI 库（仅用本工具包 `assets/`）。  
-- **不要**在原型中编写真实 API 请求、鉴权或与后端对接的生产逻辑（可为按钮加 `data-notify` 等示意）。  
-- **不要**跳过需求澄清直接生成页面。  
-- **不要**在 `output/` 页面中继续使用 `assets/...` 而不加 `../`（会导致 404）。
+- **不要**引入 Vue / React / Angular 等前端框架。
+- **不要**使用 Tailwind、Bootstrap 等**外部** CSS 框架或 CDN 大型 UI 库（仅用本工具包 `assets/`）。
+- **不要**在原型中编写真实 API 请求、鉴权或与后端对接的生产逻辑（可为按钮加 `data-notify` 等示意）。
+- **不要**跳过需求澄清直接生成页面。
diff --git a/.flake8 b/.flake8
index 85c458ef2a..b2f446117a 100644
--- a/.flake8
+++ b/.flake8
@@ -7,6 +7,9 @@ exclude =
     *migrations*,
     *.pyc,
     .git,
+    .direnv,
+    .venv,
+    .worktrees,
     .cover,
     __pycache__,
     */node_modules/*,
diff --git a/.gitignore b/.gitignore
index bda8cd07ff..bd4e74d148 100644
--- a/.gitignore
+++ b/.gitignore
@@ -155,12 +155,11 @@ pre-*-bkcodeai
 # ide project data
 .codebuddy/
 .cursor/
-.bkui-knowledge.json
 .worktrees/
+.bkui-knowledge.json
 .vscode/
 .idea/
 .claude/
-.worktrees/
 .playwright-cli/
 .superpowers/
 .direnv/
@@ -169,3 +168,4 @@ pre-*-bkcodeai
 backup/
 cov.xml
 .DS_Store
+output/
diff --git a/docs/plans/2026-03-23-prototype-toolkit.md b/docs/plans/2026-03-23-prototype-toolkit.md
new file mode 100644
index 0000000000..523a748fdf
--- /dev/null
+++ b/docs/plans/2026-03-23-prototype-toolkit.md
@@ -0,0 +1,879 @@
+# BKFlow 原型工具包实现计划
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 构建一套零配置、AI 驱动的 HTML 原型生成工具包，含 CSS 设计系统（Phase 1 核心组件）、声明式 JS 交互库、预览服务器、应用外壳和 AI Skill。
+
+**Architecture:** 纯 HTML/CSS/JS 原型工具包，CSS 复刻 bk-magic-vue 2.x 组件外观，JS 通过 data-* 属性提供声明式交互，Python 标准库 HTTP 服务器提供预览和自动刷新。
+
+**Tech Stack:** HTML5, CSS3 (CSS Variables), Vanilla JavaScript, Python 3 (标准库)
+
+**Spec:** `docs/specs/2026-03-23-prototype-toolkit-design.md`
+
+**Scope:** 本计划覆盖 Phase 1（18 个核心组件）+ 工具链 + AI Skill。Phase 2-4 组件为后续增量计划。
+
+---
+
+## 文件结构
+
+```
+prototypes/
+├── assets/
+│   ├── bkflow-prototype.css          ← CSS 设计系统（Phase 1: 18 个核心组件）
+│   ├── bkflow-prototype.js           ← 声明式交互库
+│   └── icons/
+│       └── bkflow-logo.svg           ← bkflow logo
+├── base.html                         ← bkflow 应用外壳
+├── examples/
+│   ├── list-page.html                ← 示例：列表页
+│   ├── form-slider.html              ← 示例：侧滑表单
+│   ├── tab-page.html                 ← 示例：Tab 切换页
+│   ├── detail-page.html              ← 示例：详情页
+│   ├── composite-page.html           ← 示例：复合布局
+│   └── component-showcase.html       ← 全组件展示页
+├── output/
+│   └── .gitkeep
+├── serve.py                          ← 预览服务器
+└── README.md
+```
+
+AI Skill:
+```
+.ai/skills/prototype-generator/SKILL.md
+```
+
+---
+
+## Task 1: 项目脚手架 + 预览服务器
+
+**Files:**
+- Create: `prototypes/serve.py`
+- Create: `prototypes/output/.gitkeep`
+- Create: `prototypes/assets/` (空目录)
+- Create: `prototypes/examples/` (空目录)
+
+- [ ] **Step 1: 创建目录结构**
+
+```bash
+mkdir -p prototypes/{assets/icons,examples,output}
+touch prototypes/output/.gitkeep
+```
+
+- [ ] **Step 2: 实现 serve.py**
+
+零依赖 Python HTTP 服务器，功能：
+- 服务 `prototypes/` 目录下的静态文件
+- 向 HTML 响应注入自动刷新 JS（每 1 秒轮询 `/api/mtime`）
+- `/api/mtime` 端点返回 `output/` 目录下最新文件的修改时间
+- 访问 `/` 时生成索引页，列出 `output/` 和 `examples/` 下的所有 HTML 文件
+- 支持 `--port` 参数，默认 9080
+- 支持 `--host` 参数，默认 `0.0.0.0`
+
+```python
+#!/usr/bin/env python3
+"""BKFlow Prototype Preview Server - Zero dependency."""
+import argparse
+import json
+import os
+import time
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+from pathlib import Path
+
+ROOT = Path(__file__).parent
+
+AUTO_RELOAD_SCRIPT = """
+<script>
+(function() {
+  var lastMtime = 0;
+  setInterval(function() {
+    fetch('/api/mtime').then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (lastMtime && data.mtime > lastMtime) location.reload();
+      lastMtime = data.mtime;
+    }).catch(function() {});
+  }, 1000);
+})();
+</script>
+"""
+
+
+class PrototypeHandler(SimpleHTTPRequestHandler):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory=str(ROOT), **kwargs)
+
+    def do_GET(self):
+        if self.path == '/api/mtime':
+            self._handle_mtime()
+        elif self.path == '/':
+            self._handle_index()
+        else:
+            super().do_GET()
+
+    def _handle_mtime(self):
+        mtime = 0
+        for d in ['output', 'examples']:
+            dirpath = ROOT / d
+            if dirpath.exists():
+                for f in dirpath.glob('*.html'):
+                    mtime = max(mtime, f.stat().st_mtime)
+        self.send_response(200)
+        self.send_header('Content-Type', 'application/json')
+        self.send_header('Cache-Control', 'no-cache')
+        self.end_headers()
+        self.wfile.write(json.dumps({'mtime': mtime}).encode())
+
+    def _handle_index(self):
+        html_parts = ['<!DOCTYPE html><html><head><meta charset="UTF-8">',
+                       '<title>BKFlow Prototypes</title>',
+                       '<style>body{font-family:sans-serif;max-width:800px;margin:40px auto;padding:0 20px}',
+                       'h1{color:#333}h2{color:#666;margin-top:32px}',
+                       'a{color:#3a84ff;text-decoration:none;display:block;padding:8px 0}',
+                       'a:hover{text-decoration:underline}</style></head><body>',
+                       '<h1>BKFlow Prototypes</h1>']
+
+        for section, dirname in [('Output', 'output'), ('Examples', 'examples')]:
+            dirpath = ROOT / dirname
+            files = sorted(dirpath.glob('*.html')) if dirpath.exists() else []
+            if files:
+                html_parts.append(f'<h2>{section}</h2>')
+                for f in files:
+                    rel = f'/{dirname}/{f.name}'
+                    html_parts.append(f'<a href="{rel}">{f.name}</a>')
+
+        if not (ROOT / 'output').exists() or not list((ROOT / 'output').glob('*.html')):
+            html_parts.append('<p style="color:#999">No prototypes yet. Use the prototype-generator skill to create one.</p>')
+
+        html_parts.append('</body></html>')
+        content = '\n'.join(html_parts).encode()
+        self.send_response(200)
+        self.send_header('Content-Type', 'text/html; charset=utf-8')
+        self.end_headers()
+        self.wfile.write(content)
+
+    def end_headers(self):
+        if hasattr(self, '_headers_buffer'):
+            content_type = ''
+            for line in self._headers_buffer:
+                if b'Content-Type' in line and b'text/html' in line:
+                    content_type = 'html'
+                    break
+        super().end_headers()
+
+    def send_response_only(self, code, message=None):
+        super().send_response_only(code, message)
+
+    def copyfile(self, source, outputfile):
+        """Inject auto-reload script into HTML responses."""
+        import io
+        content = source.read()
+        if b'</body>' in content:
+            content = content.replace(b'</body>',
+                                       AUTO_RELOAD_SCRIPT.encode() + b'</body>')
+        outputfile.write(content)
+
+
+def main():
+    parser = argparse.ArgumentParser(description='BKFlow Prototype Preview Server')
+    parser.add_argument('--port', type=int, default=9080)
+    parser.add_argument('--host', default='0.0.0.0')
+    args = parser.parse_args()
+
+    server = HTTPServer((args.host, args.port), PrototypeHandler)
+    print(f'\033[32m✓ Serving prototypes at http://localhost:{args.port}\033[0m')
+    print(f'\033[32m✓ Auto-reload enabled\033[0m')
+    print(f'  Press Ctrl+C to stop')
+    try:
+        server.serve_forever()
+    except KeyboardInterrupt:
+        print('\nStopped.')
+
+
+if __name__ == '__main__':
+    main()
+```
+
+- [ ] **Step 3: 验证服务器启动**
+
+```bash
+cd prototypes && python serve.py &
+sleep 2
+curl -s http://localhost:9080/ | head -5
+curl -s http://localhost:9080/api/mtime
+kill %1
+```
+
+Expected: 索引页 HTML 和 `{"mtime": 0}` JSON 响应。
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add prototypes/
+git commit -m "feat(prototypes): 初始化原型工具包目录结构和预览服务器 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 2: CSS 设计系统 — 变量 + 重置 + 基础样式
+
+**Files:**
+- Create: `prototypes/assets/bkflow-prototype.css`
+
+- [ ] **Step 1: 创建 CSS 文件，写入变量和重置样式**
+
+CSS 变量从 bkflow 前端 `frontend/src/scss/config.scss` 和 `app.scss` 提取。
+
+内容包括：
+- `:root` CSS 变量（主色调、文本、背景、边框、圆角、阴影、字体、布局）
+- Box model reset（`*, *::before, *::after { box-sizing: border-box }`）
+- Body 基础样式（字体、颜色、背景）
+- 基础排版（h1-h6、p、a、code）
+- 滚动条样式（匹配 bkflow 的 `mixins/scrollbar.scss`）
+
+所有值必须使用 `var()` 引用 CSS 变量，不允许写死。
+
+写入 `prototypes/assets/bkflow-prototype.css`。
+
+- [ ] **Step 2: 创建临时测试页面验证基础样式**
+
+创建 `prototypes/output/test-base.html`，包含基础排版元素（h1-h6、段落、链接、code），用浏览器打开验证字体和颜色是否与 bkflow 一致。
+
+- [ ] **Step 3: 验证后删除测试页面，Commit**
+
+```bash
+rm prototypes/output/test-base.html
+git add prototypes/assets/bkflow-prototype.css
+git commit -m "feat(prototypes): CSS 设计系统 - 变量、重置和基础排版 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 3: CSS 设计系统 — Button + Tag
+
+**Files:**
+- Modify: `prototypes/assets/bkflow-prototype.css`
+
+- [ ] **Step 1: 实现 Button 组件样式**
+
+参考 bk-magic-vue 的 Button 组件，实现以下 class：
+- `.bk-button` — 基础按钮（白底灰边框）
+- `.bk-button-primary` — 主要按钮（蓝底白字）
+- `.bk-button-success` — 成功按钮（绿底白字）
+- `.bk-button-warning` — 警告按钮（黄底白字）
+- `.bk-button-danger` — 危险按钮（红底白字）
+- `.bk-button-text` — 文字按钮（无边框）
+- `.bk-button-small` — 小尺寸
+- `.bk-button-large` — 大尺寸
+- `.bk-button-disabled` / `.bk-button[disabled]` — 禁用态
+- 包含 hover、active 状态
+
+关键样式值：高度 32px、font-size 14px、padding 0 15px、border-radius `var(--bk-radius)`。
+
+- [ ] **Step 2: 实现 Tag 组件样式**
+
+- `.bk-tag` — 基础标签
+- `.bk-tag-success` / `.bk-tag-warning` / `.bk-tag-danger` / `.bk-tag-info` — 状态标签
+- `.bk-tag-closable` — 可关闭标签（带 × 图标）
+
+- [ ] **Step 3: 创建测试页面验证，然后 Commit**
+
+创建临时 `prototypes/output/test-button-tag.html` 验证所有按钮和标签变体，确认后删除，commit。
+
+```bash
+git add prototypes/assets/bkflow-prototype.css
+git commit -m "feat(prototypes): CSS 组件 - Button 和 Tag --story=<TAPD_ID>"
+```
+
+---
+
+## Task 4: CSS 设计系统 — Input + Form/FormItem + Search + Switcher
+
+**Files:**
+- Modify: `prototypes/assets/bkflow-prototype.css`
+
+- [ ] **Step 1: 实现 Input 组件**
+
+- `.bk-input` — 基础输入框（高度 32px，border `var(--bk-border-form)`）
+- `.bk-input-large` / `.bk-input-small` — 尺寸变体
+- `.bk-input[disabled]` — 禁用态
+- `.bk-input:focus` — 聚焦态（border 变为 `var(--bk-primary)`）
+- `.bk-textarea` — 多行文本框
+- `.bk-input-group` — 输入框组（前/后缀）
+
+- [ ] **Step 2: 实现 Form/FormItem 组件**
+
+- `.bk-form` — 表单容器
+- `.bk-form-item` — 表单项（包含 label + 控件 + 错误提示）
+- `.bk-form-item .bk-form-label` — 标签（width 100px，右对齐）
+- `.bk-form-item .bk-form-content` — 内容区（margin-left 120px）
+- `.bk-form-item .bk-form-error` — 错误提示（红色 12px）
+- `.bk-form-item.is-required .bk-form-label::before` — 必填星号
+- `.bk-form-item.is-error .bk-input` — 错误态输入框（红色边框）
+- `.bk-form-vertical` — 纵向布局变体（label 在上方）
+
+- [ ] **Step 3: 实现 Search 组件**
+
+- `.bk-search-input` — 搜索输入框（带搜索图标占位）
+
+- [ ] **Step 4: 实现 Switcher 组件**
+
+- `.bk-switcher` — 开关（36px × 20px 圆角胶囊）
+- `.bk-switcher.is-checked` — 开启态（蓝色背景）
+- `.bk-switcher[disabled]` — 禁用态
+
+- [ ] **Step 5: 验证并 Commit**
+
+```bash
+git add prototypes/assets/bkflow-prototype.css
+git commit -m "feat(prototypes): CSS 组件 - Input, Form, Search, Switcher --story=<TAPD_ID>"
+```
+
+---
+
+## Task 5: CSS 设计系统 — Select
+
+**Files:**
+- Modify: `prototypes/assets/bkflow-prototype.css`
+
+- [ ] **Step 1: 实现 Select 组件**
+
+- `.bk-select` — 下拉选择框容器
+- `.bk-select-trigger` — 触发器（看起来像 Input，右侧带下箭头）
+- `.bk-select-dropdown` — 下拉面板（白底，shadow，默认 display:none）
+- `.bk-select-dropdown.is-show` — 展开态
+- `.bk-select-option` — 选项行（hover 高亮）
+- `.bk-select-option.is-selected` — 选中态（蓝色文字 + 勾选图标）
+- `.bk-select-option.is-disabled` — 禁用态
+- `.bk-select[disabled]` — 整体禁用
+- `.bk-select .bk-select-placeholder` — placeholder 文字（灰色）
+
+- [ ] **Step 2: 验证并 Commit**
+
+```bash
+git add prototypes/assets/bkflow-prototype.css
+git commit -m "feat(prototypes): CSS 组件 - Select --story=<TAPD_ID>"
+```
+
+---
+
+## Task 6: CSS 设计系统 — Table + Pagination
+
+**Files:**
+- Modify: `prototypes/assets/bkflow-prototype.css`
+
+- [ ] **Step 1: 实现 Table 组件**
+
+- `.bk-table` — 表格容器（width 100%，border-collapse）
+- `.bk-table thead` — 表头（背景 `#fafbfc`，字色 `var(--bk-text-secondary)`，font-size 12px）
+- `.bk-table th` — 表头单元格（padding 12px 16px，border-bottom）
+- `.bk-table td` — 数据单元格（padding 12px 16px，border-bottom `var(--bk-border-light)`）
+- `.bk-table tr:hover td` — 行 hover（背景 `var(--bk-bg-hover)`）
+- `.bk-table-empty` — 空状态行（居中灰色文字，高度 280px）
+- `.bk-table .bk-table-sort` — 排序图标样式
+- `.bk-table .bk-table-action` — 操作列链接样式（蓝色文字）
+
+- [ ] **Step 2: 实现 Pagination 组件**
+
+- `.bk-pagination` — 分页容器（右对齐，padding 10px 20px）
+- `.bk-pagination-item` — 页码（宽高 32px，居中）
+- `.bk-pagination-item.active` — 当前页（蓝底白字）
+- `.bk-pagination-item:hover` — hover 态
+- `.bk-pagination-prev` / `.bk-pagination-next` — 前/后翻页
+- `.bk-pagination-total` — 总数文字（"共 X 条"）
+
+- [ ] **Step 3: 验证并 Commit**
+
+```bash
+git add prototypes/assets/bkflow-prototype.css
+git commit -m "feat(prototypes): CSS 组件 - Table 和 Pagination --story=<TAPD_ID>"
+```
+
+---
+
+## Task 7: CSS 设计系统 — Tab + Card
+
+**Files:**
+- Modify: `prototypes/assets/bkflow-prototype.css`
+
+- [ ] **Step 1: 实现 Tab 组件**
+
+- `.bk-tab` — Tab 容器
+- `.bk-tab-header` — Tab 头部（底部 border）
+- `.bk-tab-item` — Tab 项（padding 8px 16px，cursor pointer）
+- `.bk-tab-item.active` — 激活态（蓝色文字 + 底部 2px 蓝色 border）
+- `.bk-tab-item:hover` — hover 态
+- `.bk-tab-panel` — Tab 面板容器
+- `.bk-tab-panel[hidden]` — 隐藏的面板（display: none）
+
+- [ ] **Step 2: 实现 Card 组件**
+
+- `.bk-card` — 卡片容器（白底、border、border-radius、shadow）
+- `.bk-card-header` — 卡片头部（底部 border）
+- `.bk-card-body` — 卡片内容区（padding）
+- `.bk-card-footer` — 卡片底部
+
+- [ ] **Step 3: 验证并 Commit**
+
+```bash
+git add prototypes/assets/bkflow-prototype.css
+git commit -m "feat(prototypes): CSS 组件 - Tab 和 Card --story=<TAPD_ID>"
+```
+
+---
+
+## Task 8: CSS 设计系统 — Dialog + Sideslider
+
+**Files:**
+- Modify: `prototypes/assets/bkflow-prototype.css`
+
+- [ ] **Step 1: 实现 Dialog 组件**
+
+- `.bk-dialog` — 弹窗容器（fixed 全屏遮罩，默认 display:none）
+- `.bk-dialog.is-show` — 显示态
+- `.bk-dialog-mask` — 半透明黑色遮罩
+- `.bk-dialog-content` — 弹窗内容（居中白色卡片，max-width 480px）
+- `.bk-dialog-header` — 头部（标题 + 关闭按钮，padding 16px 24px，border-bottom）
+- `.bk-dialog-body` — 主体内容（padding 24px）
+- `.bk-dialog-footer` — 底部按钮区（padding 16px 24px，右对齐）
+
+- [ ] **Step 2: 实现 Sideslider 组件**
+
+- `.bk-sideslider` — 侧滑容器（fixed 全屏遮罩，默认 display:none）
+- `.bk-sideslider.is-show` — 显示态
+- `.bk-sideslider-mask` — 半透明遮罩
+- `.bk-sideslider-content` — 侧滑面板（固定右侧，width 640px，白底，shadow）
+- `.bk-sideslider-header` — 头部（深色背景 #333，白色文字，关闭按钮）
+- `.bk-sideslider-body` — 主体内容（height calc(100% - header - footer)，overflow-y auto）
+- `.bk-sideslider-footer` — 底部按钮区（border-top，padding）
+- `.bk-sideslider-close` — 关闭按钮
+
+CSS transition：Dialog 淡入，Sideslider 从右侧滑入。
+
+- [ ] **Step 3: 验证并 Commit**
+
+```bash
+git add prototypes/assets/bkflow-prototype.css
+git commit -m "feat(prototypes): CSS 组件 - Dialog 和 Sideslider --story=<TAPD_ID>"
+```
+
+---
+
+## Task 9: CSS 设计系统 — Navigation + Layout + 辅助组件
+
+**Files:**
+- Modify: `prototypes/assets/bkflow-prototype.css`
+
+- [ ] **Step 1: 实现 Navigation 组件**
+
+参考 bkflow 的 `Navigation.vue`（深色侧边栏 `#1f2738`，顶部 header 48px）。
+
+- `.bk-navigation` — 导航容器
+- `.bk-navigation-header` — 顶部区域（logo + 产品名，高度 `var(--bk-header-height)`）
+- `.bk-navigation-menu` — 菜单列表
+- `.bk-navigation-menu-item` — 菜单项（padding，hover 高亮）
+- `.bk-navigation-menu-item.active` — 当前激活项（左侧蓝色指示条）
+
+- [ ] **Step 2: 实现布局原语**
+
+- `.bk-layout` — 页面骨架（flex，min-width `var(--bk-min-width)`，height 100vh）
+- `.bk-content` — 内容区（flex 1，overflow-y auto，padding 20px，background `var(--bk-bg-body)`）
+- `.bk-toolbar` — 操作栏（flex，justify-content space-between，margin-bottom 16px）
+- `.bk-aside` — 侧边面板（width 240px，border-right）
+- `.bk-split` — 分栏布局（flex）
+- `.bk-info-card` — KV 信息卡片
+- `.bk-steps-container` — 步骤容器
+- `.bk-canvas` — 画布区占位
+
+- [ ] **Step 3: 实现辅助组件**
+
+- `.bk-breadcrumb` — 面包屑容器（flex，gap 8px）
+- `.bk-breadcrumb-item` — 面包屑项 + 分隔符
+- `.bk-loading` — 加载状态（居中旋转动画）
+- `.bk-exception` — 异常/空状态（居中图标 + 文字，高度 280px）
+- `.bk-grid-row` / `.bk-grid-col` — 栅格行列（flex，支持 col-1 到 col-24）
+
+- [ ] **Step 4: 验证并 Commit**
+
+```bash
+git add prototypes/assets/bkflow-prototype.css
+git commit -m "feat(prototypes): CSS 组件 - Navigation, Layout 原语和辅助组件 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 10: JS 声明式交互库
+
+**Files:**
+- Create: `prototypes/assets/bkflow-prototype.js`
+
+- [ ] **Step 1: 实现核心框架和 open/close 交互**
+
+初始化函数在 DOMContentLoaded 时扫描所有 `data-*` 属性并绑定事件。
+
+实现：
+- `data-open="target-id"` — 给目标元素添加 `is-show` class
+- `data-close` — 从最近的 `.bk-dialog` 或 `.bk-sideslider` 祖先移除 `is-show` class
+- 点击遮罩层（`.bk-dialog-mask` / `.bk-sideslider-mask`）关闭浮层
+
+```javascript
+(function() {
+  'use strict';
+  document.addEventListener('DOMContentLoaded', function() {
+    initOpen();
+    initClose();
+    initTabs();
+    initSort();
+    initFilter();
+    initCollapse();
+    initDropdown();
+    initSteps();
+    initHref();
+    initNotify();
+    initValidation();
+  });
+
+  function initOpen() { /* data-open */ }
+  function initClose() { /* data-close + mask click */ }
+  // ... 下面各 step 实现
+})();
+```
+
+- [ ] **Step 2: 实现 Tab 切换交互**
+
+- `data-tab="panel-id"` — 点击时：
+  1. 同级 `.bk-tab-item` 移除 `active` class
+  2. 当前元素添加 `active` class
+  3. 同容器内所有 `.bk-tab-panel` 设为 `hidden`
+  4. 目标 panel 移除 `hidden`
+
+- [ ] **Step 3: 实现表格排序交互**
+
+- `data-sortable` 在 `<th>` 上 — 点击时：
+  1. 获取该列索引
+  2. 读取 `<tbody>` 所有行
+  3. 按该列文本内容排序（切换升序/降序）
+  4. 重新插入 DOM
+  5. 更新排序指示器样式
+
+- [ ] **Step 4: 实现搜索过滤交互**
+
+- `data-filter="table-id"` 在 `<input>` 上 — 输入时：
+  1. 获取输入值（小写）
+  2. 遍历目标表格的 `<tbody>` 所有行
+  3. 行内文本不包含输入值的行设为 `display:none`
+
+- [ ] **Step 5: 实现折叠、下拉、步骤、跳转、通知交互**
+
+- `data-collapse="panel-id"` — toggle 目标的 `is-collapsed` class
+- `data-dropdown="menu-id"` — toggle 目标的 `is-show` class + 点击其他区域关闭
+- `data-step="step-id"` — 切换步骤面板可见性
+- `data-href="page.html"` — `window.location.href` 跳转
+- `data-notify="消息"` — 创建一个临时通知元素，3 秒后自动移除
+- `data-required` 在 `<input>` / `<textarea>` 上 — 所在 form 提交时，值为空则给输入框添加 `is-error` class 并显示 `.bk-form-error` 提示
+- `data-pattern="regex"` 在 `<input>` 上 — 所在 form 提交时，值不匹配正则则标记错误
+
+- [ ] **Step 6: 验证交互功能**
+
+创建临时测试页面 `prototypes/output/test-interactions.html`，包含：
+- 一个按钮打开 Sideslider，Sideslider 内有关闭按钮
+- 一个 Tab 组件，3 个 Tab 可切换
+- 一个带 `data-sortable` 的表格
+- 一个搜索框过滤表格
+
+在浏览器中逐一测试所有交互。
+
+- [ ] **Step 7: 删除测试页面，Commit**
+
+```bash
+rm prototypes/output/test-interactions.html
+git add prototypes/assets/bkflow-prototype.js
+git commit -m "feat(prototypes): JS 声明式交互库 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 11: 应用外壳 base.html
+
+**Files:**
+- Create: `prototypes/base.html`
+- Create: `prototypes/assets/icons/bkflow-logo.svg`
+
+- [ ] **Step 1: 创建 bkflow logo SVG**
+
+简单的 SVG logo 占位（或从 `frontend/src/` 中提取现有 logo）。查看 `frontend/src/App.vue` 或 `frontend/src/components/Navigation.vue` 确认 logo 使用方式。
+
+- [ ] **Step 2: 创建 base.html**
+
+完整的 bkflow 应用外壳，包含：
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型</title>
+  <link rel="stylesheet" href="assets/bkflow-prototype.css">
+</head>
+<body>
+  <div class="bk-layout">
+    <nav class="bk-navigation">
+      <div class="bk-navigation-header">
+        <img src="assets/icons/bkflow-logo.svg" alt="BKFlow" height="24">
+        <span>流程引擎服务</span>
+      </div>
+      <ul class="bk-navigation-menu">
+        <li class="bk-navigation-menu-item active">空间管理</li>
+        <li class="bk-navigation-menu-item">模板管理</li>
+        <li class="bk-navigation-menu-item">任务管理</li>
+        <li class="bk-navigation-menu-item">凭证管理</li>
+        <li class="bk-navigation-menu-item">决策表</li>
+        <li class="bk-navigation-menu-item">插件管理</li>
+        <li class="bk-navigation-menu-item">统计分析</li>
+      </ul>
+    </nav>
+    <main class="bk-content">
+      <!-- 内容区：AI 生成的内容放在这里 -->
+    </main>
+  </div>
+  <script src="assets/bkflow-prototype.js"></script>
+</body>
+</html>
+```
+
+菜单项参考 bkflow 的 `frontend/src/router/index.js` 确认实际模块列表。
+
+- [ ] **Step 3: 在浏览器中预览确认外壳效果**
+
+```bash
+cd prototypes && python serve.py &
+# 打开浏览器访问 http://localhost:9080/base.html
+```
+
+确认：深色侧边导航栏、logo、菜单项、灰色内容区背景。
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add prototypes/base.html prototypes/assets/icons/
+git commit -m "feat(prototypes): bkflow 应用外壳 base.html --story=<TAPD_ID>"
+```
+
+---
+
+## Task 12: 示例页面 — list-page + form-slider
+
+**Files:**
+- Create: `prototypes/examples/list-page.html`
+- Create: `prototypes/examples/form-slider.html`
+
+- [ ] **Step 1: 创建 list-page.html**
+
+基于 `base.html` 外壳，在内容区实现一个典型的列表页（参考 bkflow 的凭证管理页 `views/admin/Space/Credential/index.vue`）：
+
+- 面包屑导航
+- 操作栏：搜索框（data-filter）+ 新建按钮（data-open 侧滑）
+- 数据表格：5 列（名称、类型、创建人、创建时间、操作），带 data-sortable
+- 分页
+- Mock 数据：5 行接近真实业务的数据
+
+- [ ] **Step 2: 创建 form-slider.html**
+
+基于 `base.html` 外壳，在内容区实现列表页 + 侧滑表单：
+
+- 与 list-page.html 类似的列表
+- 点击"新建"按钮打开侧滑面板（data-open）
+- 侧滑内包含表单：名称（Input）、类型（Select）、描述（Textarea）、启用（Switcher）
+- 底部：取消（data-close）+ 提交（data-close + data-notify）
+
+- [ ] **Step 3: 在浏览器中预览验证**
+
+验证：
+- 列表页搜索过滤可用
+- 表头排序可用
+- 新建按钮打开侧滑
+- 侧滑关闭、提交通知可用
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add prototypes/examples/
+git commit -m "feat(prototypes): 示例页面 - 列表页和侧滑表单 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 13: 示例页面 — tab-page + detail-page + composite-page
+
+**Files:**
+- Create: `prototypes/examples/tab-page.html`
+- Create: `prototypes/examples/detail-page.html`
+- Create: `prototypes/examples/composite-page.html`
+
+- [ ] **Step 1: 创建 tab-page.html**
+
+基于 `base.html` 外壳，实现 Tab 切换页（参考 bkflow 空间配置页）：
+- 3 个 Tab：基本信息、权限配置、高级设置
+- 每个 Tab 面板包含不同的表单内容
+- 使用 data-tab 交互
+
+- [ ] **Step 2: 创建 detail-page.html**
+
+基于 `base.html` 外壳，实现详情页（参考 bkflow 任务详情）：
+- 面包屑导航
+- 标题 + 状态 Tag
+- KV 信息卡片（创建人、创建时间、执行时长等）
+- 操作按钮（重新执行、暂停等）
+
+- [ ] **Step 3: 创建 composite-page.html**
+
+基于 `base.html` 外壳，实现复合布局：
+- bk-split 左右分栏
+- 左侧：分组列表（bk-aside）
+- 右侧：操作栏 + 表格 + 分页
+- 点击左侧分组可高亮
+
+- [ ] **Step 4: 验证并 Commit**
+
+```bash
+git add prototypes/examples/
+git commit -m "feat(prototypes): 示例页面 - Tab页、详情页和复合布局 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 14: 全组件展示页
+
+**Files:**
+- Create: `prototypes/examples/component-showcase.html`
+
+- [ ] **Step 1: 创建 component-showcase.html**
+
+一个完整的页面，按分类展示所有 Phase 1 组件的各种变体和状态。每个组件区域包含：
+- 组件名称标题
+- 各变体（类型、尺寸、状态）的实例
+- 对应的 CSS class 名称注释
+
+分类展示：
+1. **基础**：Button（所有变体）、Tag（所有状态）
+2. **表单**：Input、Textarea、Select、Search、Switcher、Form/FormItem
+3. **数据展示**：Table（含排序）、Pagination
+4. **导航**：Tab、Breadcrumb
+5. **反馈**：Dialog、Sideslider、Loading、Exception
+6. **布局**：Grid、Card
+7. **布局原语**：toolbar、aside、split、info-card
+
+- [ ] **Step 2: 在浏览器中预览，逐一对比各组件与 bk-magic-vue 真实样式**
+
+重点对比：Button、Input、Table、Tab、Sideslider 这 5 个最常用组件的样式差异，调整 CSS 直到满意。
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add prototypes/examples/component-showcase.html
+git commit -m "feat(prototypes): Phase 1 全组件展示页 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 15: AI Skill — prototype-generator
+
+**Files:**
+- Create: `.ai/skills/prototype-generator/SKILL.md`
+
+- [ ] **Step 1: 编写 SKILL.md**
+
+内容包含：
+
+1. **Skill 元数据**：name、description、触发条件
+2. **定位说明**：独立工具，不接入 superpowers 流程链
+3. **完整工作流**：
+   - 启动 serve.py
+   - 检查 base.html（不存在则引导构建）
+   - 需求澄清（逐一提问）
+   - 读取 base.html 外壳 → 填充内容区 → 保存到 output/
+   - 告知预览 URL
+   - 迭代循环
+4. **生成规则**：
+   - 读取 `examples/component-showcase.html` 了解可用组件 class
+   - 读取 `base.html` 获取外壳 HTML 结构
+   - **路径修正规则**：`base.html` 在 `prototypes/` 根目录，引用 `assets/...`；生成到 `output/` 的文件需要使用 `../assets/...`（多一级目录）。Skill 必须在生成时将 `href="assets/..."` 和 `src="assets/..."` 替换为 `href="../assets/..."` 和 `src="../assets/..."`
+   - CSS class 使用 `bk-` 前缀
+   - 交互使用 `data-*` 属性
+   - Mock 数据接近真实业务
+   - 版本管理：xxx.html → xxx-v2.html → xxx-v3.html
+5. **后端模型读取规则**（可选）
+6. **首次使用引导**（构建 base.html 的流程）
+
+- [ ] **Step 2: 验证 Skill 可被识别**
+
+确认 `.ai/skills/prototype-generator/SKILL.md` 文件路径正确，内容完整。
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add .ai/skills/prototype-generator/
+git commit -m "feat(prototypes): AI Skill - prototype-generator --story=<TAPD_ID>"
+```
+
+---
+
+## Task 16: README + Skill 注册
+
+**Files:**
+- Create: `prototypes/README.md`
+- Modify: `AGENTS.md` — 添加 prototype-generator skill 条目
+- Modify: `.cursor/rules/use-skills.mdc` — 添加 prototype-generator skill 条目
+
+- [ ] **Step 1: 编写 README.md**
+
+内容：
+- 工具包介绍和用途
+- 快速开始（3 步：启动服务器、触发 skill、预览原型）
+- 目录结构说明
+- 组件 CSS class 速查表（Phase 1 组件）
+- 交互 data-* 属性速查表
+
+- [ ] **Step 2: 注册 Skill**
+
+在 `AGENTS.md` 的技能表格中添加：
+
+```markdown
+| prototype-generator | `.ai/skills/prototype-generator/SKILL.md` | 需要快速出产品原型时，如"做个原型"、"设计页面" |
+```
+
+在 `.cursor/rules/use-skills.mdc` 的技能表格中添加同样的条目。
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add prototypes/README.md AGENTS.md .cursor/rules/use-skills.mdc
+git commit -m "docs(prototypes): README 和 Skill 注册 --story=<TAPD_ID>"
+```
+
+---
+
+## Checkpoint: Phase 1 完成验证
+
+完成 Task 1-16 后，执行以下验证：
+
+- [ ] **验证 1: 服务器可启动**
+```bash
+cd prototypes && python serve.py --port 9081 &
+curl -s http://localhost:9081/ | grep "BKFlow"
+curl -s http://localhost:9081/api/mtime
+kill %1
+```
+
+- [ ] **验证 2: 所有示例页面可访问且交互正常**
+
+在浏览器中逐一打开：
+- `http://localhost:9081/examples/list-page.html` — 搜索、排序、新建按钮可用
+- `http://localhost:9081/examples/form-slider.html` — 侧滑打开/关闭/提交可用
+- `http://localhost:9081/examples/tab-page.html` — Tab 切换可用
+- `http://localhost:9081/examples/detail-page.html` — 页面展示正常
+- `http://localhost:9081/examples/composite-page.html` — 左右分栏、分组切换可用
+- `http://localhost:9081/examples/component-showcase.html` — 所有组件展示正常
+
+- [ ] **验证 3: AI Skill 可识别**
+
+在 Cursor 中输入"做一个原型"，确认 prototype-generator skill 被触发。
diff --git a/docs/plans/2026-04-10-prototype-bk-standard.md b/docs/plans/2026-04-10-prototype-bk-standard.md
new file mode 100644
index 0000000000..92ec894de3
--- /dev/null
+++ b/docs/plans/2026-04-10-prototype-bk-standard.md
@@ -0,0 +1,846 @@
+# BKFlow 原型工具 `bk-standard` Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 将 `prototypes/` 升级为以 `bk-standard` 为主模式的原型编排层，动态消费 `@blueking/bkui-knowledge` 的设计规范、组件 API 与模板资产，默认输出真实 BK 组件预览并保留静态 fallback。
+
+**Architecture:** 第一版继续以 Python 为编排主线，新增 `knowledge adapter -> prototype contract -> bk-standard renderer -> validator -> metadata` 链路。`bkui-knowledge` 的最新内容通过 `npm` 拉取与本地缓存进入渲染链路；在 AI 会话存在 MCP 时，由 `.ai/skills/prototype-generator` 优先使用 MCP 工具生成更完整的 contract 输入。
+
+**Tech Stack:** Python 3, stdlib + `subprocess`, HTML, Vue 3 CDN, `bkui-vue` CDN preview shell, pytest, existing `prototypes/serve.py`
+
+**Spec:** `docs/specs/2026-04-10-prototype-bk-standard-design.md`
+
+**Scope:** 本计划仅覆盖 `bk-standard` 第一版基础链路：知识缓存、contract 编译、`preview-html` renderer、validator、metadata、`serve.py` 与 skill/doc 迁移。`preview-app`、复杂多路由原型和更多布局模板作为后续增量计划。
+
+---
+
+## 执行前提
+
+在开始任何代码修改前，先完成以下前置动作：
+
+- 准备独立 worktree：
+
+```bash
+cd /Users/dengyh/Projects/bk-flow
+git worktree add ../bk-flow-prototype-bk-standard -b feat/prototype-bk-standard
+```
+
+- 准备 TAPD 单据 ID：
+  - 若本地有 TAPD MCP，先按 `tapd-workitem-sync` 获取短 ID
+  - 若当前会话没有 TAPD 能力，向需求方索取 TAPD 短 ID，再替换本计划里的 `<TAPD_ID>`
+- 确认本地 `node` / `npm` 可用（用于 `npm view` / `npm pack`）：
+
+```bash
+node -v
+npm -v
+```
+
+Expected:
+- `node >= 18.20.4`
+- `npm >= 10.7.0`
+
+---
+
+## 文件结构
+
+```
+prototypes/
+├── __init__.py                              ← 让 prototypes 可作为 Python package 被 `python -m` 调用
+├── generate.py                              ← CLI 入口；读取 contract、调用 renderer、写 output + metadata
+├── knowledge_adapter.py                     ← `bkui-knowledge` 版本解析、npm 拉取、缓存加载、模板/API 读取
+├── contract.py                              ← `prototype contract` 数据模型、校验与编译逻辑
+├── project_overrides.py                     ← BKFlow 项目覆盖规则加载
+├── validator.py                             ← 知识完整性、contract 完整性、渲染结果与降级校验
+├── metadata.py                              ← 产物 metadata 写入与读取
+├── renderers/
+│   ├── __init__.py
+│   ├── bk_standard.py                       ← 真实 BK 组件 `preview-html` 渲染器
+│   └── static_fallback.py                   ← 现有 `base.html` + `bkflow-prototype.css/js` 的兜底渲染器
+├── cache/
+│   ├── .gitkeep
+│   └── bkui-knowledge/                      ← 解包后的版本缓存
+├── metadata/
+│   └── .gitkeep                             ← 每个产物的 contract / metadata
+├── project_overrides.json                   ← BKFlow 轻量覆盖：模块名、状态文案、token 等
+├── serve.py                                 ← 预览服务器，新增 metadata 感知
+├── README.md                                ← 更新为 `bk-standard` 默认模式
+└── base.html                                ← 明确降级为 `static-fallback`
+
+tests/interface/prototypes/
+├── __init__.py
+├── fixtures/
+│   ├── contract_table_page.json             ← 样例 contract
+│   ├── knowledge_manifest.json              ← 最小 manifest fixture
+│   ├── preview_template.html                ← `bkui-demo` shell fixture
+│   ├── layout_admin_left.vue                ← `bkui-builder` 布局 fixture
+│   ├── page_table.vue                       ← `bkui-builder` 页面 fixture
+│   └── component_api_navigation.json        ← 组件 API fixture
+├── test_knowledge_adapter.py
+├── test_contract.py
+├── test_bk_standard_renderer.py
+├── test_validator.py
+├── test_generate_cli.py
+└── test_serve.py
+
+.ai/skills/
+└── prototype-generator/SKILL.md             ← 默认进入 `bk-standard`，MCP-first，fallback-aware
+```
+
+---
+
+## Task 1: 搭好 `bk-standard` 骨架与测试夹具
+
+**Files:**
+- Create: `prototypes/__init__.py`
+- Create: `prototypes/renderers/__init__.py`
+- Create: `prototypes/cache/.gitkeep`
+- Create: `prototypes/metadata/.gitkeep`
+- Create: `prototypes/project_overrides.json`
+- Create: `tests/interface/prototypes/__init__.py`
+- Create: `tests/interface/prototypes/fixtures/contract_table_page.json`
+- Create: `tests/interface/prototypes/fixtures/knowledge_manifest.json`
+- Create: `tests/interface/prototypes/fixtures/preview_template.html`
+- Create: `tests/interface/prototypes/fixtures/layout_admin_left.vue`
+- Create: `tests/interface/prototypes/fixtures/page_table.vue`
+- Create: `tests/interface/prototypes/fixtures/component_api_navigation.json`
+
+- [ ] **Step 1: 创建最小目录和占位文件**
+
+```bash
+mkdir -p prototypes/renderers prototypes/cache prototypes/metadata
+mkdir -p tests/interface/prototypes/fixtures
+touch prototypes/__init__.py
+touch prototypes/renderers/__init__.py
+touch prototypes/cache/.gitkeep
+touch prototypes/metadata/.gitkeep
+touch tests/interface/prototypes/__init__.py
+```
+
+- [ ] **Step 2: 写入 BKFlow 项目覆盖默认值**
+
+```json
+{
+  "product_name": "BKFlow",
+  "navigation": {
+    "header_title": "BKFlow",
+    "side_title": "工作流平台"
+  },
+  "status_labels": {
+    "enabled": "启用",
+    "disabled": "停用",
+    "draft": "草稿"
+  },
+  "design_tokens": {
+    "brand_primary": "#3a84ff"
+  }
+}
+```
+
+- [ ] **Step 3: 从当前 `bkui-knowledge` 版本提取最小 fixture**
+
+将以下内容保存为 fixture：
+- `knowledge/manifest.json` -> `knowledge_manifest.json`
+- `knowledge/skills/bkui-demo/assets/preview-template.html` -> `preview_template.html`
+- `knowledge/skills/bkui-builder/assets/layouts/admin-layout-left.vue` -> `layout_admin_left.vue`
+- `knowledge/skills/bkui-builder/assets/pages/table-page.vue` -> `page_table.vue`
+- `knowledge/component-apis/vue3/navigation.json` -> `component_api_navigation.json`
+
+- [ ] **Step 4: 写入样例 contract**
+
+```json
+{
+  "name": "space-variable-manage",
+  "mode": "bk-standard",
+  "layout_pattern": "table-page",
+  "preview_strategy": "preview-html",
+  "component_plan": ["navigation", "table", "pagination", "dialog", "input", "button"],
+  "design_rules": ["prefer-standard-admin-layout", "prefer-real-bk-components"],
+  "anti_patterns": ["avoid-handwritten-fake-dialog"],
+  "project_overrides": {
+    "module_name": "空间变量"
+  },
+  "knowledge_context": {
+    "version": "0.0.1-beta.32",
+    "skills": ["bkui-builder", "bkui-cheatsheet", "bkui-quick-start", "bkui-demo"],
+    "components": ["navigation", "table", "pagination", "dialog"]
+  },
+  "page_model": {
+    "title": "空间变量",
+    "actions": ["新建", "编辑", "删除"],
+    "filters": ["状态", "关键字"]
+  }
+}
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add prototypes/__init__.py prototypes/renderers/__init__.py prototypes/cache/.gitkeep prototypes/metadata/.gitkeep prototypes/project_overrides.json tests/interface/prototypes/
+git commit -m "feat(prototypes): 初始化 bk-standard 骨架与测试夹具 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 2: 实现 `knowledge_adapter` 的版本解析、npm 拉取与缓存回退
+
+**Files:**
+- Create: `prototypes/knowledge_adapter.py`
+- Create: `tests/interface/prototypes/test_knowledge_adapter.py`
+
+- [ ] **Step 1: 写失败测试，覆盖版本解析与缓存回退**
+
+```python
+from pathlib import Path
+
+from prototypes.knowledge_adapter import KnowledgeAdapter
+
+
+def test_loads_cached_version_without_hitting_npm(tmp_path, monkeypatch):
+    cache_dir = tmp_path / "cache"
+    package_dir = cache_dir / "bkui-knowledge" / "0.0.1-beta.32" / "package"
+    package_dir.mkdir(parents=True)
+    (package_dir / "knowledge").mkdir()
+    (package_dir / "knowledge" / "manifest.json").write_text('{"version":"0.0.1-beta.32"}', encoding="utf-8")
+
+    adapter = KnowledgeAdapter(cache_root=cache_dir)
+
+    def _boom(*args, **kwargs):
+        raise AssertionError("npm should not be called")
+
+    monkeypatch.setattr(adapter, "_run_npm", _boom)
+
+    resolved = adapter.resolve(version="0.0.1-beta.32", allow_network=False)
+
+    assert resolved.version == "0.0.1-beta.32"
+    assert resolved.source == "cache"
+
+
+def test_falls_back_to_cached_version_when_pack_fails(tmp_path, monkeypatch):
+    cache_dir = tmp_path / "cache"
+    cached = cache_dir / "bkui-knowledge" / "0.0.1-beta.31" / "package"
+    cached.mkdir(parents=True)
+    (cached / "knowledge").mkdir()
+    (cached / "knowledge" / "manifest.json").write_text('{"version":"0.0.1-beta.31"}', encoding="utf-8")
+
+    adapter = KnowledgeAdapter(cache_root=cache_dir)
+    monkeypatch.setattr(adapter, "_fetch_latest_version", lambda: "0.0.1-beta.32")
+    monkeypatch.setattr(adapter, "_download_package", lambda version: (_ for _ in ()).throw(RuntimeError("pack failed")))
+
+    resolved = adapter.resolve(version=None, allow_network=True)
+
+    assert resolved.version == "0.0.1-beta.31"
+    assert resolved.source == "cache-fallback"
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_knowledge_adapter.py -v`  
+Expected: `ModuleNotFoundError` 或 `ImportError`，因为 `prototypes/knowledge_adapter.py` 尚不存在。
+
+- [ ] **Step 3: 实现最小 `KnowledgeAdapter`**
+
+```python
+from __future__ import annotations
+
+import json
+import subprocess
+import tarfile
+import tempfile
+from dataclasses import dataclass
+from pathlib import Path
+
+
+@dataclass
+class KnowledgePackage:
+    version: str
+    source: str
+    package_root: Path
+
+
+class KnowledgeAdapter:
+    def __init__(self, cache_root: Path | str):
+        self.cache_root = Path(cache_root)
+        self.package_cache_root = self.cache_root / "bkui-knowledge"
+
+    def resolve(self, version: str | None, allow_network: bool = True) -> KnowledgePackage:
+        requested = version or (self._fetch_latest_version() if allow_network else None)
+        if requested:
+            cached = self._package_dir(requested)
+            if cached.exists():
+                return KnowledgePackage(version=requested, source="cache", package_root=cached)
+        if requested and allow_network:
+            try:
+                return self._download_package(requested)
+            except Exception:
+                fallback = self._latest_cached_package()
+                if fallback:
+                    return fallback
+                raise
+        fallback = self._latest_cached_package()
+        if fallback:
+            return fallback
+        raise RuntimeError("No bkui-knowledge package is available")
+
+    def load_manifest(self, package: KnowledgePackage) -> dict:
+        path = package.package_root / "knowledge" / "manifest.json"
+        return json.loads(path.read_text(encoding="utf-8"))
+
+    def load_text_asset(self, package: KnowledgePackage, relative_path: str) -> str:
+        return (package.package_root / relative_path).read_text(encoding="utf-8")
+```
+
+- [ ] **Step 4: 补齐 `npm view` / `npm pack` / tar 解包细节，并让测试通过**
+
+Run: `pytest tests/interface/prototypes/test_knowledge_adapter.py -v`  
+Expected: `2 passed`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add prototypes/knowledge_adapter.py tests/interface/prototypes/test_knowledge_adapter.py
+git commit -m "feat(prototypes): 增加 bkui-knowledge 缓存与 npm 回退适配器 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 3: 实现 `prototype contract` 模型、编译器与项目覆盖合并
+
+**Files:**
+- Create: `prototypes/contract.py`
+- Create: `prototypes/project_overrides.py`
+- Create: `tests/interface/prototypes/test_contract.py`
+
+- [ ] **Step 1: 写失败测试，覆盖 contract 必填项和覆盖合并**
+
+```python
+import json
+from pathlib import Path
+
+import pytest
+
+from prototypes.contract import PrototypeContract, compile_contract
+
+
+def test_compile_contract_merges_project_overrides(tmp_path):
+    override_file = tmp_path / "project_overrides.json"
+    override_file.write_text('{"navigation":{"header_title":"BKFlow"}}', encoding="utf-8")
+
+    compiled = compile_contract(
+        raw_contract={
+            "name": "space-variable-manage",
+            "mode": "bk-standard",
+            "layout_pattern": "table-page",
+            "preview_strategy": "preview-html",
+            "component_plan": ["navigation", "table"],
+            "knowledge_context": {"version": "0.0.1-beta.32", "skills": [], "components": []},
+            "page_model": {"title": "空间变量"}
+        },
+        override_path=override_file,
+    )
+
+    assert compiled.project_overrides["navigation"]["header_title"] == "BKFlow"
+
+
+def test_compile_contract_requires_preview_strategy(tmp_path):
+    with pytest.raises(ValueError, match="preview_strategy"):
+        compile_contract(
+            raw_contract={
+                "name": "broken",
+                "mode": "bk-standard",
+                "layout_pattern": "table-page",
+                "component_plan": ["navigation"]
+            },
+            override_path=tmp_path / "missing.json",
+        )
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_contract.py -v`  
+Expected: `ModuleNotFoundError` 或 `ImportError`。
+
+- [ ] **Step 3: 实现 dataclass + 校验函数**
+
+```python
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+
+
+@dataclass
+class PrototypeContract:
+    name: str
+    mode: str
+    layout_pattern: str
+    preview_strategy: str
+    component_plan: list[str]
+    knowledge_context: dict
+    page_model: dict
+    design_rules: list[str] = field(default_factory=list)
+    anti_patterns: list[str] = field(default_factory=list)
+    project_overrides: dict = field(default_factory=dict)
+
+
+def compile_contract(raw_contract: dict, override_path) -> PrototypeContract:
+    required = ["name", "mode", "layout_pattern", "preview_strategy", "component_plan", "knowledge_context", "page_model"]
+    for key in required:
+        if not raw_contract.get(key):
+            raise ValueError(f"Missing required contract field: {key}")
+    overrides = load_project_overrides(override_path)
+    merged = dict(raw_contract)
+    merged["project_overrides"] = deep_merge(overrides, raw_contract.get("project_overrides", {}))
+    return PrototypeContract(**merged)
+```
+
+- [ ] **Step 4: 让测试通过，并补一条序列化测试**
+
+Run: `pytest tests/interface/prototypes/test_contract.py -v`  
+Expected: `3 passed`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add prototypes/contract.py prototypes/project_overrides.py tests/interface/prototypes/test_contract.py
+git commit -m "feat(prototypes): 增加 prototype contract 编译与项目覆盖合并 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 4: 实现 `bk_standard` 渲染器，生成真实 BK 组件 `preview-html`
+
+**Files:**
+- Create: `prototypes/renderers/bk_standard.py`
+- Create: `tests/interface/prototypes/test_bk_standard_renderer.py`
+
+- [ ] **Step 1: 写失败测试，覆盖模板选择与 HTML 注入**
+
+```python
+from pathlib import Path
+
+from prototypes.contract import compile_contract
+from prototypes.renderers.bk_standard import BKStandardRenderer
+
+
+def test_render_preview_html_uses_real_bk_shell(tmp_path):
+    contract = compile_contract(
+        raw_contract={
+            "name": "space-variable-manage",
+            "mode": "bk-standard",
+            "layout_pattern": "table-page",
+            "preview_strategy": "preview-html",
+            "component_plan": ["navigation", "table", "pagination", "dialog"],
+            "knowledge_context": {
+                "version": "0.0.1-beta.32",
+                "skills": ["bkui-builder", "bkui-demo"],
+                "components": ["navigation", "table"]
+            },
+            "page_model": {"title": "空间变量"}
+        },
+        override_path=Path("prototypes/project_overrides.json"),
+    )
+
+    renderer = BKStandardRenderer(
+        preview_template=Path("tests/interface/prototypes/fixtures/preview_template.html"),
+        layout_template=Path("tests/interface/prototypes/fixtures/layout_admin_left.vue"),
+        page_template=Path("tests/interface/prototypes/fixtures/page_table.vue"),
+    )
+
+    html = renderer.render(contract)
+
+    assert "cdn.jsdelivr.net/npm/vue@3.4" in html
+    assert "cdn.jsdelivr.net/npm/bkui-vue@2.0.2-beta.112" in html
+    assert "空间变量" in html
+    assert "bk-navigation" in html
+    assert "bk-table" in html
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_bk_standard_renderer.py -v`  
+Expected: `ModuleNotFoundError` 或 `ImportError`。
+
+- [ ] **Step 3: 实现 SFC 片段提取与模板拼装**
+
+```python
+import re
+from pathlib import Path
+
+
+def extract_sfc_blocks(content: str) -> dict[str, str]:
+    def _match(tag: str) -> str:
+        m = re.search(rf"<{tag}[^>]*>(.*?)</{tag}>", content, re.S)
+        return m.group(1).strip() if m else ""
+    return {
+        "template": _match("template"),
+        "script_setup": _match("script"),
+        "style": _match("style"),
+    }
+
+
+class BKStandardRenderer:
+    def __init__(self, preview_template: Path, layout_template: Path, page_template: Path):
+        self.preview_template = preview_template
+        self.layout_template = layout_template
+        self.page_template = page_template
+
+    def render(self, contract) -> str:
+        preview = self.preview_template.read_text(encoding="utf-8")
+        page_blocks = extract_sfc_blocks(self.page_template.read_text(encoding="utf-8"))
+        html = preview.replace("{{PAGE_TITLE}}", contract.page_model["title"])
+        html = html.replace("{{COMPONENT_TEMPLATE}}", page_blocks["template"])
+        html = html.replace("{{COMPONENT_SETUP}}", page_blocks["script_setup"])
+        html = html.replace("{{CUSTOM_STYLES}}", page_blocks["style"])
+        return html
+```
+
+- [ ] **Step 4: 补齐布局选择、页面模式映射和 title / action / filter 注入**
+
+Run: `pytest tests/interface/prototypes/test_bk_standard_renderer.py -v`  
+Expected: `2 passed`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add prototypes/renderers/bk_standard.py tests/interface/prototypes/test_bk_standard_renderer.py
+git commit -m "feat(prototypes): 实现 bk-standard preview-html 渲染器 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 5: 实现 validator、metadata 与静态 fallback 选择
+
+**Files:**
+- Create: `prototypes/validator.py`
+- Create: `prototypes/metadata.py`
+- Create: `prototypes/renderers/static_fallback.py`
+- Create: `tests/interface/prototypes/test_validator.py`
+
+- [ ] **Step 1: 写失败测试，覆盖强约束、降级标记与 metadata 写入**
+
+```python
+import json
+from pathlib import Path
+
+import pytest
+
+from prototypes.metadata import write_metadata
+from prototypes.validator import ValidationResult, validate_contract
+
+
+def test_validate_contract_requires_knowledge_context():
+    result = validate_contract({
+        "name": "space-variable-manage",
+        "mode": "bk-standard",
+        "layout_pattern": "table-page",
+        "preview_strategy": "preview-html",
+        "component_plan": ["navigation"]
+    })
+    assert not result.ok
+    assert "knowledge_context" in result.errors[0]
+
+
+def test_write_metadata_marks_degraded_output(tmp_path):
+    metadata_file = tmp_path / "space-variable-manage.json"
+    write_metadata(
+        metadata_file,
+        {
+            "name": "space-variable-manage",
+            "mode": "static-fallback",
+            "degraded": True,
+            "degrade_reason": "bk-standard-render failed"
+        },
+    )
+    payload = json.loads(metadata_file.read_text(encoding="utf-8"))
+    assert payload["degraded"] is True
+    assert payload["degrade_reason"] == "bk-standard-render failed"
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_validator.py -v`  
+Expected: `ModuleNotFoundError` 或 `ImportError`。
+
+- [ ] **Step 3: 实现 validator 与 metadata 写入**
+
+```python
+from dataclasses import dataclass, field
+
+
+@dataclass
+class ValidationResult:
+    ok: bool
+    errors: list[str] = field(default_factory=list)
+    warnings: list[str] = field(default_factory=list)
+
+
+def validate_contract(contract: dict) -> ValidationResult:
+    errors = []
+    for key in ["name", "mode", "layout_pattern", "preview_strategy", "component_plan", "knowledge_context"]:
+        if not contract.get(key):
+            errors.append(f"Missing required field: {key}")
+    return ValidationResult(ok=not errors, errors=errors)
+```
+
+- [ ] **Step 4: 实现 `static_fallback` 渲染器，只包装现有 `base.html` 链路**
+
+```python
+from pathlib import Path
+
+
+class StaticFallbackRenderer:
+    def __init__(self, base_html: Path):
+        self.base_html = base_html
+
+    def render(self, body_html: str) -> str:
+        base = self.base_html.read_text(encoding="utf-8")
+        return base.replace("<!-- BKFLOW_PROTOTYPE_CONTENT -->", body_html)
+```
+
+- [ ] **Step 5: 让测试通过，并补一条“降级后必须写 metadata”的测试**
+
+Run: `pytest tests/interface/prototypes/test_validator.py -v`  
+Expected: `3 passed`.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/validator.py prototypes/metadata.py prototypes/renderers/static_fallback.py tests/interface/prototypes/test_validator.py
+git commit -m "feat(prototypes): 增加 validator、metadata 与静态 fallback 渲染器 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 6: 实现 `generate.py` CLI，并把 output / metadata 串起来
+
+**Files:**
+- Create: `prototypes/generate.py`
+- Create: `tests/interface/prototypes/test_generate_cli.py`
+
+- [ ] **Step 1: 写失败测试，覆盖 contract 输入与产物输出**
+
+```python
+import json
+from pathlib import Path
+
+from prototypes.generate import main
+
+
+def test_generate_cli_writes_output_and_metadata(tmp_path):
+    contract_file = tmp_path / "contract.json"
+    contract_file.write_text(
+        Path("tests/interface/prototypes/fixtures/contract_table_page.json").read_text(encoding="utf-8"),
+        encoding="utf-8",
+    )
+
+    output_dir = tmp_path / "output"
+    metadata_dir = tmp_path / "metadata"
+    output_dir.mkdir()
+    metadata_dir.mkdir()
+
+    exit_code = main([
+        "--contract", str(contract_file),
+        "--output-dir", str(output_dir),
+        "--metadata-dir", str(metadata_dir),
+        "--mode", "bk-standard",
+    ])
+
+    assert exit_code == 0
+    assert (output_dir / "space-variable-manage.html").exists()
+    assert (metadata_dir / "space-variable-manage.json").exists()
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_generate_cli.py -v`  
+Expected: `ModuleNotFoundError` 或 `ImportError`。
+
+- [ ] **Step 3: 实现 CLI 主流程**
+
+```python
+import argparse
+import json
+from pathlib import Path
+
+
+def main(argv=None):
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--contract", required=True)
+    parser.add_argument("--mode", default="bk-standard")
+    parser.add_argument("--output-dir", default="prototypes/output")
+    parser.add_argument("--metadata-dir", default="prototypes/metadata")
+    args = parser.parse_args(argv)
+
+    raw_contract = json.loads(Path(args.contract).read_text(encoding="utf-8"))
+    contract = compile_contract(raw_contract, Path("prototypes/project_overrides.json"))
+    validation = validate_contract(raw_contract)
+    if not validation.ok:
+        raise SystemExit("\n".join(validation.errors))
+
+    html = render_contract(contract, mode=args.mode)
+    output_path = Path(args.output_dir) / f"{contract.name}.html"
+    output_path.write_text(html, encoding="utf-8")
+    write_metadata(Path(args.metadata_dir) / f"{contract.name}.json", {"name": contract.name, "mode": args.mode})
+    return 0
+```
+
+- [ ] **Step 4: 让测试通过，并增加 `static-fallback` 选择分支**
+
+Run: `pytest tests/interface/prototypes/test_generate_cli.py -v`  
+Expected: `2 passed`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add prototypes/generate.py tests/interface/prototypes/test_generate_cli.py
+git commit -m "feat(prototypes): 增加 bk-standard 原型生成 CLI --story=<TAPD_ID>"
+```
+
+---
+
+## Task 7: 升级 `serve.py`、README 与 `prototype-generator` skill
+
+**Files:**
+- Modify: `prototypes/serve.py`
+- Modify: `prototypes/README.md`
+- Modify: `.ai/skills/prototype-generator/SKILL.md`
+- Create: `tests/interface/prototypes/test_serve.py`
+
+- [ ] **Step 1: 写失败测试，覆盖 index 页面展示 metadata**
+
+```python
+from prototypes.serve import PrototypeRequestHandler, list_html_files, latest_mtime_under
+
+
+def test_index_lists_html_files_and_mode_badges(tmp_path, monkeypatch):
+    output_dir = tmp_path / "output"
+    metadata_dir = tmp_path / "metadata"
+    output_dir.mkdir()
+    metadata_dir.mkdir()
+    (output_dir / "space-variable-manage.html").write_text("<html></html>", encoding="utf-8")
+    (metadata_dir / "space-variable-manage.json").write_text('{"mode":"bk-standard","knowledge_version":"0.0.1-beta.32"}', encoding="utf-8")
+
+    monkeypatch.setattr("prototypes.serve.OUTPUT_DIR", str(output_dir))
+    monkeypatch.setattr("prototypes.serve.METADATA_DIR", str(metadata_dir))
+
+    items = list_html_files()
+    assert items[0][1].endswith("space-variable-manage.html")
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_serve.py -v`  
+Expected: `ImportError` 或断言失败，因为 `METADATA_DIR` / metadata 感知尚未实现。
+
+- [ ] **Step 3: 修改 `serve.py`，增加 metadata 感知与标准模式展示**
+
+需要完成：
+- 新增 `METADATA_DIR = os.path.join(PROTOTYPES_ROOT, "metadata")`
+- index 页面读取对应 metadata，展示：
+  - 渲染模式
+  - `bkui-knowledge` 版本
+  - 是否发生降级
+- 保持现有 `/api/mtime` 和自动刷新行为不回归
+
+- [ ] **Step 4: 更新 README**
+
+README 需改为：
+- `bk-standard` 是默认推荐模式
+- 静态 HTML 是 fallback
+- 新增生成命令示例：
+
+```bash
+python -m prototypes.generate --contract prototypes/metadata/space-variable-manage.contract.json --mode bk-standard
+```
+
+- [ ] **Step 5: 更新 `.ai/skills/prototype-generator/SKILL.md`**
+
+将 skill 主流程改为：
+- 优先生成 `bk-standard` contract
+- 若 AI 会话有 `bkui-knowledge` MCP，则先调用：
+  - `recommend_skills`
+  - `batch_load`
+  - `get_component_api`
+- 将结果写入 `prototypes/metadata/<name>.contract.json`
+- 再调用 `python -m prototypes.generate --contract ... --mode bk-standard`
+- 仅在标准链路失败时退回 `static-fallback`
+
+- [ ] **Step 6: 跑测试和 smoke verification**
+
+Run: `pytest tests/interface/prototypes/test_serve.py -v`  
+Expected: `2 passed`.
+
+Run: `python -m prototypes.generate --contract tests/interface/prototypes/fixtures/contract_table_page.json --mode bk-standard --output-dir prototypes/output --metadata-dir prototypes/metadata`  
+Expected: 生成 `prototypes/output/space-variable-manage.html` 与 `prototypes/metadata/space-variable-manage.json`。
+
+Run: `cd prototypes && python serve.py --port 9090`  
+Expected: 打开 `http://localhost:9090/` 可看到 `space-variable-manage.html` 及其 `bk-standard` / 版本信息。
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add prototypes/serve.py prototypes/README.md .ai/skills/prototype-generator/SKILL.md tests/interface/prototypes/test_serve.py prototypes/output prototypes/metadata
+git commit -m "feat(prototypes): 切换到 bk-standard 默认原型工作流 --story=<TAPD_ID>"
+```
+
+---
+
+## Task 8: 做一轮端到端验收并清理遗留文案
+
+**Files:**
+- Modify: `prototypes/README.md`
+- Modify: `prototypes/base.html`（仅增加 fallback 注释或占位标记时修改）
+- Modify: `docs/specs/2026-04-10-prototype-bk-standard-design.md`（仅在实现后发现偏差时回写）
+
+- [ ] **Step 1: 运行完整原型测试集**
+
+Run: `pytest tests/interface/prototypes/ -v`  
+Expected: 全部通过。
+
+- [ ] **Step 2: 手工检查产物与 metadata 一致性**
+
+检查项：
+- `output/*.html` 是否包含 Vue 3 + `bkui-vue` CDN
+- `metadata/*.json` 是否记录 `mode`、`knowledge_version`、`degraded`
+- index 页面是否能区分 `bk-standard` 与 `static-fallback`
+
+- [ ] **Step 3: 清理 README / `base.html` 中仍把静态模式写成主路线的文案**
+
+保留原则：
+- `base.html` 只作为 fallback 资产
+- README 与 skill 文案都必须明确 `bk-standard` 是默认推荐模式
+
+- [ ] **Step 4: 运行最终 smoke verification**
+
+Run: `python -m prototypes.generate --contract tests/interface/prototypes/fixtures/contract_table_page.json --mode bk-standard --output-dir /tmp/bk-standard-output --metadata-dir /tmp/bk-standard-metadata`  
+Expected: `/tmp/bk-standard-output/space-variable-manage.html` 成功生成。
+
+Run: `python -m prototypes.generate --contract tests/interface/prototypes/fixtures/contract_table_page.json --mode static-fallback --output-dir /tmp/bk-static-output --metadata-dir /tmp/bk-static-metadata`  
+Expected: fallback 产物成功生成，metadata 中 `mode = static-fallback`。
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add prototypes/README.md prototypes/base.html docs/specs/2026-04-10-prototype-bk-standard-design.md
+git commit -m "docs(prototypes): 收口 bk-standard 文档与验收记录 --story=<TAPD_ID>"
+```
+
+---
+
+## 最终验证清单
+
+执行完成后，至少运行以下命令：
+
+```bash
+pytest tests/interface/prototypes/ -v
+python -m prototypes.generate --contract tests/interface/prototypes/fixtures/contract_table_page.json --mode bk-standard --output-dir prototypes/output --metadata-dir prototypes/metadata
+python -m prototypes.generate --contract tests/interface/prototypes/fixtures/contract_table_page.json --mode static-fallback --output-dir /tmp/bk-static-output --metadata-dir /tmp/bk-static-metadata
+cd prototypes && python serve.py --port 9090
+```
+
+成功标准：
+
+- `tests/interface/prototypes/` 全绿
+- `bk-standard` 产物包含真实 BK 组件预览壳
+- metadata 记录模式、版本和降级状态
+- `serve.py` 首页可识别标准模式产物
+- skill 与 README 都把 `bk-standard` 作为主路径
diff --git a/docs/plans/2026-04-21-bkflow-engine-admin-prototype-overhaul.md b/docs/plans/2026-04-21-bkflow-engine-admin-prototype-overhaul.md
new file mode 100644
index 0000000000..bc2ea47af9
--- /dev/null
+++ b/docs/plans/2026-04-21-bkflow-engine-admin-prototype-overhaul.md
@@ -0,0 +1,812 @@
+# BKFlow Engine Admin Prototype Overhaul Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 重构 `prototypes/` 为“页面类型母版库 + feature 跟进目录”模式，并基于真实审计结果深度重建 `bkflow_engine_admin` 原型集合。
+
+**Architecture:** 保留 `prototypes/assets/` 作为共享样式与交互层，新增 `masters/` 作为长期页面类型真源，新增 `features/` 作为单次需求目录，`examples/` 收缩为工具参考。预览服务器改为以 `masters / features / examples` 为主要索引对象，首个 feature 用母版组合出完整的 `space / system / plugin` 原型链路，同时将旧 `examples/` 与 `output/` 内容迁入新结构或 `_legacy/`。
+
+**Tech Stack:** HTML5, CSS3, Vanilla JavaScript, Python 3 stdlib preview server, pytest contract tests
+
+**Spec:** `docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md`
+
+**Audit Baseline:** `.ai/docs/specs/bkflow-engine-admin-interaction-audit-2026-04-20.md`
+
+**TAPD Story:** `133683187`
+
+---
+
+## 执行前提
+
+- 使用独立 worktree，避免污染当前脏工作区：
+
+```bash
+cd /Users/dengyh/Projects/bk-flow
+git fetch origin master
+git worktree add .worktrees/bkflow-engine-admin-prototype-overhaul -b codex/bkflow-engine-admin-prototype-overhaul origin/master
+```
+
+- 后续所有实现、验证、提交都在新 worktree 中执行。
+- commit message 统一追加 `--story=133683187`。
+- 交互细节以真实审计文档为准，尤其是：
+  - 流程编辑页的两段式保存、节点配置抽屉、全局变量、发布弹窗
+  - 任务详情页的只读画布、节点详情、执行记录、配置快照、调用日志
+  - 调试执行链路的确认弹窗与异常态
+
+---
+
+## 文件结构
+
+| File | Action | Responsibility |
+|---|---|---|
+| `prototypes/README.md` | Modify | 说明新目录结构、预览入口、母版/feature 协作方式 |
+| `prototypes/serve.py` | Modify | 根索引改为 `masters / features / examples`，兼容 `_legacy` 过渡内容 |
+| `prototypes/assets/bkflow-prototype.css` | Modify | 新母版和 feature 共用的壳子、浮层、流程页、任务详情页样式 |
+| `prototypes/assets/bkflow-prototype.js` | Modify | 新增导航组切换、通用 class toggle、局部状态切换等交互能力 |
+| `prototypes/masters/README.md` | Create | 母版目录说明 |
+| `prototypes/masters/_shared/README.md` | Create | 三套导航壳子说明 |
+| `prototypes/masters/_shared/space-shell.html` | Create | 空间管理壳子 |
+| `prototypes/masters/_shared/system-shell.html` | Create | 系统管理壳子 |
+| `prototypes/masters/_shared/plugin-shell.html` | Create | 插件管理壳子 |
+| `prototypes/masters/overlays/README.md` | Create | 浮层模式说明 |
+| `prototypes/masters/overlays/dialogs.html` | Create | 确认弹窗 / 表单弹窗 / 异常弹窗示例 |
+| `prototypes/masters/overlays/sidesliders.html` | Create | 右侧侧滑示例 |
+| `prototypes/masters/list-page/README.md` | Create | 列表页母版说明 |
+| `prototypes/masters/list-page/template.html` | Create | 列表页母版 |
+| `prototypes/masters/list-page/states/*.html` | Create | 空态、异常态、批量态等 |
+| `prototypes/masters/config-page/README.md` | Create | 长表单/代码编辑母版说明 |
+| `prototypes/masters/config-page/template.html` | Create | 配置页母版 |
+| `prototypes/masters/config-page/states/*.html` | Create | dirty / disabled / confirm 等状态 |
+| `prototypes/masters/engine-panel/README.md` | Create | 调试面板母版说明 |
+| `prototypes/masters/engine-panel/template.html` | Create | 调试面板母版 |
+| `prototypes/masters/decision-editor/README.md` | Create | 决策表编辑页母版说明 |
+| `prototypes/masters/decision-editor/template.html` | Create | 决策表编辑页母版 |
+| `prototypes/masters/flow-editor/README.md` | Create | 流程编辑母版说明 |
+| `prototypes/masters/flow-editor/template.html` | Create | 流程编辑母版主页面 |
+| `prototypes/masters/flow-editor/states/*.html` | Create | 节点选中、保存可用、发布确认、调试确认等状态 |
+| `prototypes/masters/task-detail/README.md` | Create | 任务详情母版说明 |
+| `prototypes/masters/task-detail/template.html` | Create | 任务详情母版主页面 |
+| `prototypes/masters/task-detail/states/*.html` | Create | 成功态、失败态、空日志态等 |
+| `prototypes/features/README.md` | Create | feature 目录说明 |
+| `prototypes/features/_legacy/README.md` | Create | 历史原型归档说明 |
+| `prototypes/features/bkflow-engine-admin-prototype-overhaul/README.md` | Create | 本次 feature 说明与 spec/plan 回链 |
+| `prototypes/features/bkflow-engine-admin-prototype-overhaul/CHANGELOG.md` | Create | feature 轻量变更记录 |
+| `prototypes/features/bkflow-engine-admin-prototype-overhaul/index.html` | Create | feature 入口页 |
+| `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/...` | Create | `space / system / plugin` 具体页面 |
+| `prototypes/examples/README.md` | Create | examples 收缩后的用途说明 |
+| `prototypes/examples/component-showcase.html` | Modify | 与新目录和资产约定保持一致 |
+| `prototypes/examples/*.html` | Delete | 旧示例页迁入 `masters/` 后移除 |
+| `prototypes/base.html` | Delete | 由 `_shared/` 三套壳子替代 |
+| `prototypes/output/*` | Move/Delete | 历史产物迁入 `features/` 或 `_legacy/`，不再作为主产出 |
+| `prototypes/cache/` | Delete | 删除未启用的空占位目录 |
+| `prototypes/metadata/` | Delete | 删除未启用的空占位目录 |
+| `prototypes/renderers/` | Delete | 删除未启用的空占位目录 |
+| `.ai/skills/prototype-generator/SKILL.md` | Modify | 输出目标改为 `masters/features` 结构，移除对 `base.html` + 扁平 `output/` 的强绑定 |
+| `tests/interface/prototypes/__init__.py` | Create | prototype 测试包 |
+| `tests/interface/prototypes/test_serve.py` | Create | 预览服务器索引与 mtime 合同测试 |
+| `tests/interface/prototypes/test_structure_contract.py` | Create | 新目录和 README 合同测试 |
+| `tests/interface/prototypes/test_master_contract.py` | Create | 母版文件和关键 DOM 标记测试 |
+| `tests/interface/prototypes/test_flow_editor_contract.py` | Create | 流程编辑母版深度合同测试 |
+| `tests/interface/prototypes/test_task_detail_contract.py` | Create | 任务详情母版深度合同测试 |
+| `tests/interface/prototypes/test_bkflow_engine_admin_feature.py` | Create | 首个 feature 页面清单与入口测试 |
+
+---
+
+### Task 1: 预览服务器与根索引切到新结构
+
+**Files:**
+- Create: `tests/interface/prototypes/__init__.py`
+- Create: `tests/interface/prototypes/test_serve.py`
+- Modify: `prototypes/serve.py`
+- Modify: `prototypes/README.md`
+
+- [ ] **Step 1: 写预览服务器失败测试**
+
+创建 `tests/interface/prototypes/test_serve.py`，至少覆盖两个约束：
+
+```python
+from pathlib import Path
+import importlib.util
+
+
+def _load_serve():
+    path = Path("prototypes/serve.py")
+    spec = importlib.util.spec_from_file_location("prototype_serve", path)
+    module = importlib.util.module_from_spec(spec)
+    spec.loader.exec_module(module)
+    return module
+
+
+def test_list_html_files_groups_new_sections(tmp_path, monkeypatch):
+    serve = _load_serve()
+    for section in ["masters", "features", "examples"]:
+        root = tmp_path / section
+        root.mkdir()
+        (root / "index.html").write_text("<!doctype html>", encoding="utf-8")
+        monkeypatch.setattr(serve, f"{section.upper()}_DIR", str(root))
+
+    items = serve.list_html_files()
+    sections = {section for section, _ in items}
+    assert "masters" in sections
+    assert "features" in sections
+    assert "examples" in sections
+
+
+def test_latest_mtime_scans_new_roots(tmp_path, monkeypatch):
+    serve = _load_serve()
+    for section in ["masters", "features", "examples"]:
+        root = tmp_path / section
+        root.mkdir(exist_ok=True)
+        (root / "index.html").write_text("<!doctype html>", encoding="utf-8")
+        monkeypatch.setattr(serve, f"{section.upper()}_DIR", str(root))
+
+    mtime = serve.latest_mtime_under((serve.MASTERS_DIR, serve.FEATURES_DIR, serve.EXAMPLES_DIR))
+    assert isinstance(mtime, float)
+```
+
+- [ ] **Step 2: 跑测试，确认当前实现失败**
+
+Run: `pytest tests/interface/prototypes/test_serve.py -v`  
+Expected: FAIL，因为当前 `serve.py` 仍只索引 `output/` 和 `examples/`。
+
+- [ ] **Step 3: 改造 `prototypes/serve.py`**
+
+实现以下行为：
+- 增加 `MASTERS_DIR`、`FEATURES_DIR`
+- `/` 根索引按 section 分组展示 `masters / features / examples`
+- `output/` 仅作为过渡区展示，若为空则不作为主 section
+- `/api/mtime` 轮询范围扩展到 `masters / features / examples / assets`
+- 保留 HTML 自动注入 reload 脚本能力
+
+- [ ] **Step 4: 更新 `prototypes/README.md` 的目录说明和启动说明**
+
+明确写出：
+- `masters/` 是长期真源
+- `features/` 是单次需求目录
+- `examples/` 只保留组件参考
+- 根索引的推荐预览路径
+
+- [ ] **Step 5: 重新跑测试和基础检查**
+
+Run:
+
+```bash
+pytest tests/interface/prototypes/test_serve.py -v
+python -m py_compile prototypes/serve.py
+```
+
+Expected:
+- pytest 全绿
+- `py_compile` 无报错
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/serve.py prototypes/README.md tests/interface/prototypes/__init__.py tests/interface/prototypes/test_serve.py
+git commit -m "feat(prototypes): 调整预览服务器以支持 masters 和 features --story=133683187"
+```
+
+---
+
+### Task 2: 搭起新目录骨架与目录合同测试
+
+**Files:**
+- Create: `tests/interface/prototypes/test_structure_contract.py`
+- Create: `prototypes/masters/README.md`
+- Create: `prototypes/masters/_shared/README.md`
+- Create: `prototypes/features/README.md`
+- Create: `prototypes/features/_legacy/README.md`
+- Create: `prototypes/examples/README.md`
+
+- [ ] **Step 1: 写目录合同失败测试**
+
+在 `tests/interface/prototypes/test_structure_contract.py` 中至少覆盖：
+
+```python
+from pathlib import Path
+
+
+def test_required_root_directories_exist():
+    required = [
+        "prototypes/masters",
+        "prototypes/features",
+        "prototypes/examples",
+    ]
+    for path in required:
+        assert Path(path).exists(), path
+
+
+def test_required_readmes_exist():
+    required = [
+        "prototypes/masters/README.md",
+        "prototypes/masters/_shared/README.md",
+        "prototypes/features/README.md",
+        "prototypes/features/_legacy/README.md",
+        "prototypes/examples/README.md",
+    ]
+    for path in required:
+        assert Path(path).is_file(), path
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_structure_contract.py -v`  
+Expected: FAIL，因为新目录和 README 还不存在。
+
+- [ ] **Step 3: 创建新目录与 README**
+
+创建：
+- `prototypes/masters/`
+- `prototypes/masters/_shared/`
+- `prototypes/features/`
+- `prototypes/features/_legacy/`
+- `prototypes/examples/README.md`
+
+README 内容至少说明：
+- 目录目的
+- 什么该放、什么不该放
+- 与 `docs/specs/` / `docs/plans/` 的关系
+
+- [ ] **Step 4: 在 `prototypes/README.md` 中补充目录树**
+
+将根 README 的目录结构更新为新版本，避免文档和真实结构脱节。
+
+- [ ] **Step 5: 跑测试**
+
+Run: `pytest tests/interface/prototypes/test_structure_contract.py -v`  
+Expected: PASS
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/README.md prototypes/masters/README.md prototypes/masters/_shared/README.md prototypes/features/README.md prototypes/features/_legacy/README.md prototypes/examples/README.md tests/interface/prototypes/test_structure_contract.py
+git commit -m "feat(prototypes): 初始化新目录骨架与结构合同 --story=133683187"
+```
+
+---
+
+### Task 3: 共享壳子、浮层体系与资产能力升级
+
+**Files:**
+- Modify: `prototypes/assets/bkflow-prototype.css`
+- Modify: `prototypes/assets/bkflow-prototype.js`
+- Create: `prototypes/masters/_shared/space-shell.html`
+- Create: `prototypes/masters/_shared/system-shell.html`
+- Create: `prototypes/masters/_shared/plugin-shell.html`
+- Create: `prototypes/masters/overlays/README.md`
+- Create: `prototypes/masters/overlays/dialogs.html`
+- Create: `prototypes/masters/overlays/sidesliders.html`
+- Create: `tests/interface/prototypes/test_master_contract.py`
+
+- [ ] **Step 1: 写共享壳子失败测试**
+
+在 `tests/interface/prototypes/test_master_contract.py` 中先写最小合同：
+
+```python
+from pathlib import Path
+
+
+def test_shared_shells_exist():
+    for path in [
+        "prototypes/masters/_shared/space-shell.html",
+        "prototypes/masters/_shared/system-shell.html",
+        "prototypes/masters/_shared/plugin-shell.html",
+    ]:
+        assert Path(path).is_file(), path
+
+
+def test_overlays_examples_exist():
+    for path in [
+        "prototypes/masters/overlays/dialogs.html",
+        "prototypes/masters/overlays/sidesliders.html",
+    ]:
+        assert Path(path).is_file(), path
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_master_contract.py -v`  
+Expected: FAIL
+
+- [ ] **Step 3: 创建三套共享壳子**
+
+壳子要求：
+- 共享顶栏结构，但一级导航状态不同
+- `space-shell.html` 带空间选择区与空间侧栏
+- `system-shell.html` 带系统管理侧栏
+- `plugin-shell.html` 带插件侧栏
+- 页面只保留壳子和占位内容，不混入具体业务表格
+
+- [ ] **Step 4: 创建浮层母版**
+
+`dialogs.html` 至少包含：
+- 删除确认弹窗
+- 发布确认弹窗
+- 异常提示弹窗
+
+`sidesliders.html` 至少包含：
+- 表单编辑侧滑
+- 只读详情侧滑
+
+- [ ] **Step 5: 升级共享 CSS/JS**
+
+只补“多页面都要用”的通用能力：
+- 导航组切换
+- 通用 `data-toggle-target` / `data-toggle-class`
+- 右侧面板开合
+- 保存按钮从禁用到可用的 class 切换
+
+不要把 feature 级业务逻辑塞进共享 JS。
+
+- [ ] **Step 6: 跑测试和预览 smoke test**
+
+Run:
+
+```bash
+pytest tests/interface/prototypes/test_master_contract.py -v
+python prototypes/serve.py --port 9080 >/tmp/bkflow-prototypes.log 2>&1 &
+sleep 2
+curl -s http://localhost:9080/ | rg "masters|features|examples"
+pkill -f "prototypes/serve.py --port 9080" || true
+```
+
+Expected:
+- pytest 通过
+- 根索引能看到 `masters`
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add prototypes/assets/bkflow-prototype.css prototypes/assets/bkflow-prototype.js prototypes/masters/_shared/ prototypes/masters/overlays/ tests/interface/prototypes/test_master_contract.py
+git commit -m "feat(prototypes): 建立共享壳子与浮层母版 --story=133683187"
+```
+
+---
+
+### Task 4: 落地中复杂度母版
+
+**Files:**
+- Create: `prototypes/masters/list-page/README.md`
+- Create: `prototypes/masters/list-page/template.html`
+- Create: `prototypes/masters/list-page/states/empty.html`
+- Create: `prototypes/masters/list-page/states/error.html`
+- Create: `prototypes/masters/list-page/states/bulk-actions.html`
+- Create: `prototypes/masters/config-page/README.md`
+- Create: `prototypes/masters/config-page/template.html`
+- Create: `prototypes/masters/config-page/states/dirty.html`
+- Create: `prototypes/masters/engine-panel/README.md`
+- Create: `prototypes/masters/engine-panel/template.html`
+- Create: `prototypes/masters/decision-editor/README.md`
+- Create: `prototypes/masters/decision-editor/template.html`
+- Modify: `tests/interface/prototypes/test_master_contract.py`
+
+- [ ] **Step 1: 扩展母版合同测试**
+
+为每类母版补文件和关键标记断言，例如：
+
+```python
+def test_list_page_template_contains_toolbar_and_table():
+    html = Path("prototypes/masters/list-page/template.html").read_text(encoding="utf-8")
+    assert "bk-toolbar" in html
+    assert "bk-table" in html
+
+
+def test_config_page_template_contains_form_and_save_bar():
+    html = Path("prototypes/masters/config-page/template.html").read_text(encoding="utf-8")
+    assert "bk-form" in html
+    assert "保存" in html
+```
+
+- [ ] **Step 2: 跑测试，确认新增断言失败**
+
+Run: `pytest tests/interface/prototypes/test_master_contract.py -v`  
+Expected: FAIL
+
+- [ ] **Step 3: 实现 `list-page` 母版**
+
+要求：
+- 顶部工具栏
+- 搜索/筛选
+- 状态列
+- 操作列
+- 分页
+- 空态 / 异常态 / 批量操作态
+
+- [ ] **Step 4: 实现 `config-page`、`engine-panel`、`decision-editor` 母版**
+
+分别覆盖：
+- 配置页：长表单、代码块、保存禁用态、dirty 态
+- 调试面板：请求区、响应区、发送/重置按钮
+- 决策编辑：基础信息、规则区、空态、底部操作区
+
+- [ ] **Step 5: 跑测试**
+
+Run: `pytest tests/interface/prototypes/test_master_contract.py -v`  
+Expected: PASS
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/masters/list-page prototypes/masters/config-page prototypes/masters/engine-panel prototypes/masters/decision-editor tests/interface/prototypes/test_master_contract.py
+git commit -m "feat(prototypes): 增加列表页与配置类母版 --story=133683187"
+```
+
+---
+
+### Task 5: 实现流程编辑深度母版
+
+**Files:**
+- Create: `prototypes/masters/flow-editor/README.md`
+- Create: `prototypes/masters/flow-editor/template.html`
+- Create: `prototypes/masters/flow-editor/states/node-selected.html`
+- Create: `prototypes/masters/flow-editor/states/save-ready.html`
+- Create: `prototypes/masters/flow-editor/states/publish-confirm.html`
+- Create: `prototypes/masters/flow-editor/states/mock-debug-confirm.html`
+- Create: `tests/interface/prototypes/test_flow_editor_contract.py`
+- Modify: `prototypes/assets/bkflow-prototype.css`
+- Modify: `prototypes/assets/bkflow-prototype.js`
+
+- [ ] **Step 1: 写流程编辑母版失败测试**
+
+创建 `tests/interface/prototypes/test_flow_editor_contract.py`：
+
+```python
+from pathlib import Path
+
+
+def test_flow_editor_template_has_required_regions():
+    html = Path("prototypes/masters/flow-editor/template.html").read_text(encoding="utf-8")
+    assert "流程编辑" in html or "flow-editor" in html
+    assert "全局变量" in html
+    assert "发布" in html
+    assert "保存" in html
+
+
+def test_flow_editor_state_pages_exist():
+    for path in [
+        "prototypes/masters/flow-editor/states/node-selected.html",
+        "prototypes/masters/flow-editor/states/save-ready.html",
+        "prototypes/masters/flow-editor/states/publish-confirm.html",
+        "prototypes/masters/flow-editor/states/mock-debug-confirm.html",
+    ]:
+        assert Path(path).is_file(), path
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_flow_editor_contract.py -v`  
+Expected: FAIL
+
+- [ ] **Step 3: 基于真实审计实现主母版**
+
+`template.html` 至少覆盖：
+- 流程标题、版本区、返回入口
+- 画布区、节点悬浮工具条
+- 节点配置抽屉
+- 全局变量入口
+- 顶部保存 / 发布 / 调试入口
+
+- [ ] **Step 4: 用状态页拆出关键状态机**
+
+状态页必须分别体现：
+- 节点选中后出现配置工具条
+- 节点抽屉点“确定”后顶部“保存”变可用
+- 发布前确认弹窗
+- 调试执行前确认弹窗
+
+- [ ] **Step 5: 用最少共享 JS 支撑状态切换**
+
+只实现可复用的状态切换：
+- 节点选中 -> 打开抽屉
+- 确认配置 -> 顶部保存按钮可用
+- 发布 / 调试 -> 弹出确认层
+
+- [ ] **Step 6: 跑测试与手工 smoke**
+
+Run:
+
+```bash
+pytest tests/interface/prototypes/test_flow_editor_contract.py -v
+python prototypes/serve.py --port 9080 >/tmp/bkflow-prototypes.log 2>&1 &
+sleep 2
+curl -s http://localhost:9080/masters/flow-editor/template.html | head -n 5
+pkill -f "prototypes/serve.py --port 9080" || true
+```
+
+Expected:
+- pytest 通过
+- 页面可被服务到
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add prototypes/masters/flow-editor prototypes/assets/bkflow-prototype.css prototypes/assets/bkflow-prototype.js tests/interface/prototypes/test_flow_editor_contract.py
+git commit -m "feat(prototypes): 落地流程编辑深度母版 --story=133683187"
+```
+
+---
+
+### Task 6: 实现任务详情深度母版
+
+**Files:**
+- Create: `prototypes/masters/task-detail/README.md`
+- Create: `prototypes/masters/task-detail/template.html`
+- Create: `prototypes/masters/task-detail/states/complete.html`
+- Create: `prototypes/masters/task-detail/states/failed.html`
+- Create: `prototypes/masters/task-detail/states/empty-log.html`
+- Create: `tests/interface/prototypes/test_task_detail_contract.py`
+- Modify: `prototypes/assets/bkflow-prototype.css`
+- Modify: `prototypes/assets/bkflow-prototype.js`
+
+- [ ] **Step 1: 写任务详情母版失败测试**
+
+创建 `tests/interface/prototypes/test_task_detail_contract.py`：
+
+```python
+from pathlib import Path
+
+
+def test_task_detail_template_has_required_tabs():
+    html = Path("prototypes/masters/task-detail/template.html").read_text(encoding="utf-8")
+    for label in ["执行记录", "配置快照", "操作历史", "调用日志"]:
+        assert label in html
+
+
+def test_task_detail_states_exist():
+    for path in [
+        "prototypes/masters/task-detail/states/complete.html",
+        "prototypes/masters/task-detail/states/failed.html",
+        "prototypes/masters/task-detail/states/empty-log.html",
+    ]:
+        assert Path(path).is_file(), path
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_task_detail_contract.py -v`  
+Expected: FAIL
+
+- [ ] **Step 3: 实现 `task-detail` 主母版**
+
+要求：
+- 执行态页头
+- 模板回链
+- 只读画布
+- 点击节点打开详情
+- 右侧详情 / 变量 / 记录面板
+
+- [ ] **Step 4: 用状态页覆盖关键执行结果**
+
+分别体现：
+- 成功态
+- 失败态
+- 调用日志为空态
+
+- [ ] **Step 5: 跑测试**
+
+Run: `pytest tests/interface/prototypes/test_task_detail_contract.py -v`  
+Expected: PASS
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/masters/task-detail prototypes/assets/bkflow-prototype.css prototypes/assets/bkflow-prototype.js tests/interface/prototypes/test_task_detail_contract.py
+git commit -m "feat(prototypes): 落地任务详情深度母版 --story=133683187"
+```
+
+---
+
+### Task 7: 用母版拼出首个 feature
+
+**Files:**
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/README.md`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/CHANGELOG.md`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/index.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/template-list.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-view.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-edit.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-debug.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-list.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/debug-task-list.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-complete.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-failed.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-list.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-editor.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/space-config.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/credential-list.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/label-list.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/statistics-exception.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/space-config-list.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/module-config-list.html`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/plugin/plugin-list.html`
+- Create: `tests/interface/prototypes/test_bkflow_engine_admin_feature.py`
+
+- [ ] **Step 1: 写 feature 页面清单失败测试**
+
+创建 `tests/interface/prototypes/test_bkflow_engine_admin_feature.py`，至少覆盖：
+
+```python
+from pathlib import Path
+
+
+FEATURE_ROOT = Path("prototypes/features/bkflow-engine-admin-prototype-overhaul")
+
+
+def test_feature_docs_exist_and_link_spec_plan():
+    readme = (FEATURE_ROOT / "README.md").read_text(encoding="utf-8")
+    assert "docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md" in readme
+    assert "docs/plans/2026-04-21-bkflow-engine-admin-prototype-overhaul.md" in readme
+
+
+def test_feature_pages_exist():
+    required = [
+        FEATURE_ROOT / "pages/space/flow-edit.html",
+        FEATURE_ROOT / "pages/space/task-detail-complete.html",
+        FEATURE_ROOT / "pages/system/module-config-list.html",
+        FEATURE_ROOT / "pages/plugin/plugin-list.html",
+    ]
+    for path in required:
+        assert path.is_file(), path
+```
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_bkflow_engine_admin_feature.py -v`  
+Expected: FAIL
+
+- [ ] **Step 3: 创建 feature 文档和入口**
+
+`README.md` 必须包含：
+- spec 路径
+- plan 路径
+- 使用到的母版
+- 页面入口清单
+
+`index.html` 必须按 `space / system / plugin` 分组列出所有页面入口。
+
+- [ ] **Step 4: 逐页落成首个 feature**
+
+按真实审计优先级处理：
+- 先 `template-list / flow-view / flow-edit / flow-debug`
+- 再 `task-list / debug-task-list / task-detail-*`
+- 最后 `decision-* / space-config / credential / label / statistics / system / plugin`
+
+每个页面都必须：
+- 使用正确的相对路径引用 `assets`：
+  - `index.html` 使用 `../../assets/...`
+  - `pages/space/*.html`、`pages/system/*.html`、`pages/plugin/*.html` 使用 `../../../../assets/...`
+- 保持导航高亮正确
+- 体现对应页面的关键状态
+
+- [ ] **Step 5: 跑测试和入口检查**
+
+Run:
+
+```bash
+pytest tests/interface/prototypes/test_bkflow_engine_admin_feature.py -v
+python prototypes/serve.py --port 9080 >/tmp/bkflow-prototypes.log 2>&1 &
+sleep 2
+curl -s http://localhost:9080/ | rg "bkflow-engine-admin-prototype-overhaul"
+pkill -f "prototypes/serve.py --port 9080" || true
+```
+
+Expected:
+- pytest 通过
+- 根索引能看到该 feature
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/features/bkflow-engine-admin-prototype-overhaul tests/interface/prototypes/test_bkflow_engine_admin_feature.py
+git commit -m "feat(prototypes): 交付 bkflow engine admin 首个 feature 原型集 --story=133683187"
+```
+
+---
+
+### Task 8: 迁移历史内容并更新原型生成约定
+
+**Files:**
+- Modify: `.ai/skills/prototype-generator/SKILL.md`
+- Modify: `prototypes/examples/component-showcase.html`
+- Delete: `prototypes/base.html`
+- Delete: `prototypes/examples/composite-page.html`
+- Delete: `prototypes/examples/detail-page.html`
+- Delete: `prototypes/examples/flow-edit.html`
+- Delete: `prototypes/examples/form-slider.html`
+- Delete: `prototypes/examples/list-page.html`
+- Delete: `prototypes/examples/tab-page.html`
+- Delete: `prototypes/examples/task-detail.html`
+- Delete: `prototypes/cache/`
+- Delete: `prototypes/metadata/`
+- Delete: `prototypes/renderers/`
+- Move/Create: `prototypes/features/_legacy/sops-open-plugin/*`
+- Move/Create: `prototypes/features/_legacy/space-variable-manage/*`
+- Move/Create: `prototypes/features/_legacy/node-output-viewer/*`
+- Delete/Deprecate: `prototypes/output/*`
+- Modify: `tests/interface/prototypes/test_structure_contract.py`
+
+- [ ] **Step 1: 扩展结构合同，约束 examples/output 的新职责**
+
+在 `tests/interface/prototypes/test_structure_contract.py` 增加断言：
+- `examples/` 只保留 `README.md` 和 `component-showcase.html`
+- `base.html` 不再存在
+- `cache/ metadata/ renderers` 不再存在
+- 历史 output 页面迁入 `features/_legacy/`
+
+- [ ] **Step 2: 跑测试，确认失败**
+
+Run: `pytest tests/interface/prototypes/test_structure_contract.py -v`  
+Expected: FAIL
+
+- [ ] **Step 3: 迁移旧 examples 与 output**
+
+迁移策略：
+- 旧 `examples/*.html` 对应吸收进 `masters/`
+- `output/sops-open-plugin-*.html` 迁入 `prototypes/features/_legacy/sops-open-plugin/`
+- `output/space-variable-manage.html` 迁入 `prototypes/features/_legacy/space-variable-manage/`
+- `output/node-output-viewer-proposal-v1.html` 迁入 `prototypes/features/_legacy/node-output-viewer/`
+
+- [ ] **Step 4: 删除 `base.html` 并更新 skill**
+
+`.ai/skills/prototype-generator/SKILL.md` 需要同步：
+- 生成目标从 `output/<name>.html` 改为 `features/<slug>/...`
+- 不再要求先读 `base.html`
+- 生成时优先复用 `masters/`
+- 历史/临时页面才进入 `_legacy`
+
+- [ ] **Step 5: 跑完整 prototype 测试集合**
+
+Run:
+
+```bash
+pytest tests/interface/prototypes -v
+python -m py_compile prototypes/serve.py
+```
+
+Expected:
+- `tests/interface/prototypes` 全绿
+- `py_compile` 通过
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add .ai/skills/prototype-generator/SKILL.md prototypes tests/interface/prototypes
+git commit -m "refactor(prototypes): 迁移历史原型并更新新结构约定 --story=133683187"
+```
+
+---
+
+## 完成检查
+
+全部任务完成后，再做一次完整验证：
+
+```bash
+pytest tests/interface/prototypes -v
+python -m py_compile prototypes/serve.py
+python prototypes/serve.py --port 9080 >/tmp/bkflow-prototypes.log 2>&1 &
+sleep 2
+curl -s http://localhost:9080/ | rg "masters|features|examples|bkflow-engine-admin-prototype-overhaul"
+pkill -f "prototypes/serve.py --port 9080" || true
+```
+
+Expected:
+- prototype 测试全绿
+- 预览服务器可启动
+- 根索引能看到 `masters / features / examples`
+- 首个 feature 可从根索引进入
+
+## 交付标准
+
+- `prototypes/` 根目录第一次打开即可分清母版、feature、示例
+- `flow-editor` 与 `task-detail` 母版明确分离，且均带关键状态页
+- `bkflow-engine-admin-prototype-overhaul` 覆盖 `space / system / plugin` 核心页面
+- 历史原型不再堆在扁平 `output/`
+- `prototype-generator` skill 与新目录结构一致
+
+## 人工审阅提示
+
+执行实现时，优先看以下页面是否真正“做深做准”：
+- `prototypes/masters/flow-editor/template.html`
+- `prototypes/masters/task-detail/template.html`
+- `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-edit.html`
+- `prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-complete.html`
diff --git a/docs/plans/2026-04-22-prototype-showcase-homepage.md b/docs/plans/2026-04-22-prototype-showcase-homepage.md
new file mode 100644
index 0000000000..2bed419587
--- /dev/null
+++ b/docs/plans/2026-04-22-prototype-showcase-homepage.md
@@ -0,0 +1,640 @@
+# Prototype Showcase Homepage Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 将 `prototypes/` 根首页从路径列表页升级为中文原型展厅首页，以 `features/` 为主入口展示成套原型，并支持代码生成封面、搜索筛选和弱化的工具资源区。
+
+**Architecture:** 保留 `prototypes/serve.py` 作为静态预览服务器和根路由入口，但把 feature 元数据收集与降级逻辑拆到新的 `prototypes/showcase_catalog.py` 中，使首页数据契约可测试、可演进。首页视觉和轻交互通过新增的 `prototypes/assets/bkflow-showcase.css` 与 `prototypes/assets/bkflow-showcase.js` 承接；每个 feature 通过 `feature.meta.json` 提供中文标题、摘要、封面主题和代表页信息，`masters/examples` 只在首页底部资源区以轻入口形式出现。
+
+**Tech Stack:** Python 3 stdlib preview server, HTML5, CSS3, Vanilla JavaScript, JSON metadata, pytest contract tests
+
+**Spec:** `docs/specs/2026-04-22-prototype-showcase-homepage-design.md`
+
+**Related Baseline:** `prototypes/features/bkflow-engine-admin-prototype-overhaul/index.html`
+
+**TAPD Story:** `133683187`
+
+---
+
+## 执行前提
+
+- 所有修改都在 worktree `/Users/dengyh/Projects/bk-flow/.worktrees/bkflow-engine-admin-prototype-overhaul` 内完成。
+- 验证命令统一优先使用当前 worktree 的虚拟环境：
+
+```bash
+cd /Users/dengyh/Projects/bk-flow/.worktrees/bkflow-engine-admin-prototype-overhaul
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django tests/interface/prototypes -v
+```
+
+- Python 语法兼容性必须对齐 CI 的 Python 3.9：
+
+```bash
+python3.9 -m py_compile prototypes/serve.py prototypes/showcase_catalog.py
+```
+
+- commit message 统一追加 `--story=133683187`。
+
+---
+
+## 文件结构
+
+| File | Action | Responsibility |
+|---|---|---|
+| `prototypes/showcase_catalog.py` | Create | 解析 `features/<slug>/feature.meta.json`，汇总首页展厅所需数据，并实现缺失元数据时的降级逻辑 |
+| `prototypes/serve.py` | Modify | 用展厅首页替换根路径列表页，渲染 Hero、Feature 卡片、代表页面和资源区，同时保留已有 mtime / HTML reload 逻辑 |
+| `prototypes/assets/bkflow-showcase.css` | Create | 承接首页 Hero、展厅卡片、封面主题、资源区、响应式布局的专用样式 |
+| `prototypes/assets/bkflow-showcase.js` | Create | 承接首页搜索、筛选和空结果提示的轻交互 |
+| `prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json` | Create | 为现有 feature 提供首页展示所需的中文标题、摘要、封面主题和代表页面信息 |
+| `prototypes/features/README.md` | Modify | 说明 `feature.meta.json` 的职责、字段和新增 feature 时的维护要求 |
+| `prototypes/README.md` | Modify | 更新首页定位、快速开始和元数据约定，说明根路径已升级为展厅首页 |
+| `.ai/skills/prototype-generator/SKILL.md` | Modify | 将“新增 feature 时同步创建/更新 `feature.meta.json`”写入工具使用规则 |
+| `tests/interface/prototypes/test_showcase_catalog.py` | Create | 覆盖 feature 元数据解析、降级、代表页选择和排序逻辑 |
+| `tests/interface/prototypes/test_showcase_homepage.py` | Create | 覆盖根首页的 Hero、Feature 卡片、代表页面、资源区和交互 data hooks |
+| `tests/interface/prototypes/test_structure_contract.py` | Modify | 增加 `feature.meta.json` 与首页静态资源的存在性合同 |
+
+---
+
+### Task 1: 建立首页元数据契约和 catalog 解析层
+
+**Files:**
+- Create: `tests/interface/prototypes/test_showcase_catalog.py`
+- Create: `prototypes/showcase_catalog.py`
+- Create: `prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json`
+- Modify: `prototypes/features/README.md`
+
+- [ ] **Step 1: 写 catalog 失败测试**
+
+在 `tests/interface/prototypes/test_showcase_catalog.py` 中新增至少 2 组测试，明确“有元数据”和“无元数据回退”两条路径：
+
+```python
+import importlib.util
+import json
+from pathlib import Path
+
+
+def _load_catalog():
+    path = Path("prototypes/showcase_catalog.py")
+    spec = importlib.util.spec_from_file_location("prototype_showcase_catalog", path)
+    module = importlib.util.module_from_spec(spec)
+    assert spec.loader is not None
+    spec.loader.exec_module(module)
+    return module
+
+
+def test_collect_feature_catalog_reads_meta_and_featured_pages(tmp_path):
+    catalog = _load_catalog()
+    feature_dir = tmp_path / "features" / "demo-feature"
+    pages_dir = feature_dir / "pages"
+    pages_dir.mkdir(parents=True)
+    (pages_dir / "flow-edit.html").write_text("<html></html>", encoding="utf-8")
+    (pages_dir / "task-detail.html").write_text("<html></html>", encoding="utf-8")
+    (feature_dir / "feature.meta.json").write_text(
+        json.dumps(
+            {
+                "title": "示例原型",
+                "summary": "覆盖流程编辑与任务详情。",
+                "status": "可评审",
+                "tags": ["流程编辑", "任务详情"],
+                "coverTheme": "mixed-admin",
+                "featuredPages": [
+                    {
+                        "path": "pages/flow-edit.html",
+                        "title": "流程编辑页",
+                        "summary": "画布与节点抽屉。",
+                        "pageType": "流程编辑",
+                    }
+                ],
+            },
+            ensure_ascii=False,
+        ),
+        encoding="utf-8",
+    )
+
+    items = catalog.collect_feature_catalog(str(tmp_path / "features"))
+
+    assert items[0]["title"] == "示例原型"
+    assert items[0]["status"] == "可评审"
+    assert items[0]["cover_theme"] == "mixed-admin"
+    assert items[0]["page_count"] == 2
+    assert items[0]["featured_pages"][0]["title"] == "流程编辑页"
+
+
+def test_collect_feature_catalog_falls_back_when_meta_missing(tmp_path):
+    catalog = _load_catalog()
+    feature_dir = tmp_path / "features" / "demo-fallback"
+    pages_dir = feature_dir / "pages"
+    pages_dir.mkdir(parents=True)
+    (pages_dir / "alpha.html").write_text("<html></html>", encoding="utf-8")
+    (pages_dir / "beta.html").write_text("<html></html>", encoding="utf-8")
+
+    items = catalog.collect_feature_catalog(str(tmp_path / "features"))
+
+    assert items[0]["slug"] == "demo-fallback"
+    assert items[0]["status"] == "待补充"
+    assert items[0]["cover_theme"] == "mixed-admin"
+    assert len(items[0]["featured_pages"]) == 2
+```
+
+- [ ] **Step 2: 跑测试，确认当前失败**
+
+Run:
+
+```bash
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django tests/interface/prototypes/test_showcase_catalog.py -v
+```
+
+Expected:
+- `test_showcase_catalog.py` 报错，因为 `prototypes/showcase_catalog.py` 尚不存在
+
+- [ ] **Step 3: 实现 `prototypes/showcase_catalog.py` 的最小 catalog 解析**
+
+实现以下具体函数，而不是把逻辑全部堆进 `serve.py`：
+
+```python
+DEFAULT_STATUS = "待补充"
+DEFAULT_SUMMARY = "尚未补充首页摘要"
+DEFAULT_THEME = "mixed-admin"
+
+
+def collect_feature_catalog(features_dir: str) -> list[dict]:
+    ...
+
+
+def collect_showcase_stats(features_dir: str, masters_dir: str) -> dict:
+    ...
+```
+
+最小实现要求：
+- 扫描 `features/` 下的一级 feature 目录，跳过 `_legacy`
+- 统计该 feature 下全部 `.html` 页面数
+- 读取 `feature.meta.json`，并规范化字段名为首页渲染所需字段
+- 元数据缺失时回退到默认 `summary / status / coverTheme`
+- 无效 `featuredPages.path` 自动跳过
+- 默认按 `order` 升序、更新时间降序排序
+
+- [ ] **Step 4: 为现有 feature 补真实元数据，并同步目录说明**
+
+新增 `prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json`，至少包含：
+
+```json
+{
+  "title": "BKFlow 引擎管理后台原型重构",
+  "summary": "覆盖 Space / System / Plugin 三个入口，包含流程、任务、决策与配置链路。",
+  "status": "可评审",
+  "tags": ["流程编辑", "任务详情", "系统配置"],
+  "coverTheme": "mixed-admin",
+  "order": 10,
+  "featuredPages": [
+    {
+      "path": "pages/space/flow-edit.html",
+      "title": "流程编辑页",
+      "summary": "画布编排、节点抽屉与两段式保存。",
+      "pageType": "流程编辑"
+    },
+    {
+      "path": "pages/space/task-detail-complete.html",
+      "title": "任务详情页",
+      "summary": "执行状态、节点观察与日志查看。",
+      "pageType": "任务详情"
+    }
+  ]
+}
+```
+
+同时更新 `prototypes/features/README.md`，明确：
+- `feature.meta.json` 是首页展示契约
+- README 继续承担说明文档职责
+- 新增 feature 时需要同步维护两者
+
+- [ ] **Step 5: 重新跑 catalog 测试**
+
+Run:
+
+```bash
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django tests/interface/prototypes/test_showcase_catalog.py -v
+python3.9 -m py_compile prototypes/showcase_catalog.py
+```
+
+Expected:
+- pytest 全绿
+- `py_compile` 无语法报错
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/showcase_catalog.py \
+  prototypes/features/README.md \
+  prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json \
+  tests/interface/prototypes/test_showcase_catalog.py
+git commit -m "feat(prototypes): 增加首页展厅元数据契约 --story=133683187"
+```
+
+---
+
+### Task 2: 用展厅布局替换根首页的路径列表
+
+**Files:**
+- Create: `tests/interface/prototypes/test_showcase_homepage.py`
+- Modify: `prototypes/serve.py`
+- Modify: `prototypes/README.md`
+
+- [ ] **Step 1: 写首页结构失败测试**
+
+在 `tests/interface/prototypes/test_showcase_homepage.py` 中创建一组基于临时目录的服务器测试，覆盖中文 Hero、统计信息、最近更新、Feature 卡片、代表页面和资源区：
+
+```python
+import importlib.util
+import json
+import threading
+from contextlib import contextmanager
+from http.server import HTTPServer
+from pathlib import Path
+from urllib.request import urlopen
+
+
+def _load_serve():
+    path = Path("prototypes/serve.py")
+    spec = importlib.util.spec_from_file_location("prototype_serve", path)
+    module = importlib.util.module_from_spec(spec)
+    assert spec.loader is not None
+    spec.loader.exec_module(module)
+    return module
+
+
+@contextmanager
+def _run_server(serve):
+    server = HTTPServer(("127.0.0.1", 0), serve.PrototypeRequestHandler)
+    thread = threading.Thread(target=server.serve_forever, daemon=True)
+    thread.start()
+    try:
+        yield f"http://127.0.0.1:{server.server_port}"
+    finally:
+        server.shutdown()
+        server.server_close()
+        thread.join(timeout=2)
+
+
+def test_root_index_renders_showcase_sections(tmp_path, monkeypatch):
+    serve = _load_serve()
+    root = tmp_path / "prototypes"
+    features = root / "features" / "demo-feature"
+    masters = root / "masters" / "flow-editor"
+    examples = root / "examples"
+    assets = root / "assets"
+    (features / "pages").mkdir(parents=True)
+    masters.mkdir(parents=True)
+    examples.mkdir(parents=True)
+    assets.mkdir(parents=True)
+    (features / "index.html").write_text("<html></html>", encoding="utf-8")
+    (features / "pages" / "flow-edit.html").write_text("<html></html>", encoding="utf-8")
+    (features / "feature.meta.json").write_text(
+        json.dumps(
+            {
+                "title": "示例原型",
+                "summary": "覆盖流程编辑。",
+                "status": "可评审",
+                "coverTheme": "flow-editor",
+                "featuredPages": [
+                    {
+                        "path": "pages/flow-edit.html",
+                        "title": "流程编辑页",
+                        "summary": "画布编排。",
+                        "pageType": "流程编辑"
+                    }
+                ]
+            },
+            ensure_ascii=False,
+        ),
+        encoding="utf-8",
+    )
+
+    monkeypatch.setattr(serve, "PROTOTYPES_ROOT", str(root))
+    monkeypatch.setattr(serve, "FEATURES_DIR", str(root / "features"))
+    monkeypatch.setattr(serve, "MASTERS_DIR", str(root / "masters"))
+    monkeypatch.setattr(serve, "EXAMPLES_DIR", str(root / "examples"))
+    monkeypatch.setattr(serve, "ASSETS_DIR", str(root / "assets"))
+
+    with _run_server(serve) as base_url:
+        body = urlopen(base_url).read().decode("utf-8")
+
+    assert "BKFlow 原型展厅" in body
+    assert "示例原型" in body
+    assert "最近更新" in body
+    assert "代表页面" in body
+    assert "工具资源" in body
+    assert "查看这组原型" in body
+```
+
+- [ ] **Step 2: 跑首页测试，确认当前失败**
+
+Run:
+
+```bash
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django tests/interface/prototypes/test_showcase_homepage.py -v
+```
+
+Expected:
+- FAIL，因为根首页目前仍是英文路径列表页
+
+- [ ] **Step 3: 改造 `prototypes/serve.py` 的根路径渲染**
+
+把 `/` 的渲染方式替换为展厅首页，并保证其职责清晰：
+
+```python
+from showcase_catalog import collect_feature_catalog, collect_showcase_stats
+
+
+def _send_index(self) -> None:
+    feature_items = collect_feature_catalog(FEATURES_DIR)
+    stats = collect_showcase_stats(FEATURES_DIR, MASTERS_DIR)
+    body = render_showcase_homepage(
+        feature_items=feature_items,
+        stats=stats,
+        masters_dir=MASTERS_DIR,
+        examples_dir=EXAMPLES_DIR,
+    )
+    ...
+```
+
+首页 HTML 结构至少包含：
+- Hero 首屏
+- 统计信息条
+- 最近更新区
+- Feature 展区
+- 代表页面区
+- 工具资源区
+
+同时要移除当前这种主布局：
+
+```html
+<h2>masters</h2>
+<ul>
+  <li><a href="/masters/...">...</a></li>
+</ul>
+```
+
+它可以退化为资源区内部的轻量链接，但不能再是首页主体。
+
+- [ ] **Step 4: 更新 `prototypes/README.md` 的首页说明**
+
+把 README 中的“浏览器预览”改成展厅式入口描述，明确：
+- 根路径是中文展厅首页
+- `features` 是首页主角
+- `masters/examples` 是底部资源区
+
+- [ ] **Step 5: 跑首页测试和已有服务器测试**
+
+Run:
+
+```bash
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django \
+  tests/interface/prototypes/test_showcase_homepage.py \
+  tests/interface/prototypes/test_serve.py -v
+python3.9 -m py_compile prototypes/serve.py prototypes/showcase_catalog.py
+```
+
+Expected:
+- 新旧服务器相关测试都为 PASS
+- `py_compile` 无报错
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/serve.py prototypes/README.md tests/interface/prototypes/test_showcase_homepage.py
+git commit -m "feat(prototypes): 将根首页改为原型展厅入口 --story=133683187"
+```
+
+---
+
+### Task 3: 补首页专用视觉系统、封面主题和搜索筛选交互
+
+**Files:**
+- Create: `prototypes/assets/bkflow-showcase.css`
+- Create: `prototypes/assets/bkflow-showcase.js`
+- Modify: `prototypes/serve.py`
+- Modify: `tests/interface/prototypes/test_showcase_homepage.py`
+
+- [ ] **Step 1: 先补一轮失败测试，锁定资产引用和交互 hooks**
+
+在 `tests/interface/prototypes/test_showcase_homepage.py` 中增加契约测试，要求首页至少具备以下 tokens：
+
+```python
+def test_root_index_includes_showcase_assets_and_filter_hooks(tmp_path, monkeypatch):
+    ...
+    assert 'href="/assets/bkflow-showcase.css"' in body
+    assert 'src="/assets/bkflow-showcase.js"' in body
+    assert 'data-showcase-search' in body
+    assert 'data-showcase-filter="all"' in body
+    assert 'data-feature-card' in body
+    assert 'data-cover-theme="flow-editor"' in body
+```
+
+- [ ] **Step 2: 跑测试，确认当前失败**
+
+Run:
+
+```bash
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django tests/interface/prototypes/test_showcase_homepage.py -v
+```
+
+Expected:
+- FAIL，因为首页还没有引入专用 CSS / JS，也没有搜索筛选 hooks
+
+- [ ] **Step 3: 创建首页专用 CSS，落 Hero、卡片和封面主题**
+
+新建 `prototypes/assets/bkflow-showcase.css`，至少覆盖：
+- Hero 大标题和统计卡片
+- Feature 卡片网格
+- 代表页面卡片
+- 资源区弱化样式
+- 4 到 5 种代码生成封面主题
+- 移动端单列布局
+
+建议最小结构：
+
+```css
+.bk-showcase-page {}
+.bk-showcase-hero {}
+.bk-showcase-stat-grid {}
+.bk-feature-grid {}
+.bk-feature-card {}
+.bk-feature-cover[data-cover-theme="flow-editor"] {}
+.bk-feature-cover[data-cover-theme="task-detail"] {}
+.bk-page-preview-grid {}
+.bk-resource-grid {}
+```
+
+- [ ] **Step 4: 创建首页专用 JS，并在 `serve.py` 中接入**
+
+新建 `prototypes/assets/bkflow-showcase.js`，只做轻交互：
+
+```javascript
+document.addEventListener("DOMContentLoaded", () => {
+  const search = document.querySelector("[data-showcase-search]");
+  const filters = Array.from(document.querySelectorAll("[data-showcase-filter]"));
+  const cards = Array.from(document.querySelectorAll("[data-feature-card]"));
+
+  function applyFilters() {
+    const keyword = (search?.value || "").trim().toLowerCase();
+    const active = document.querySelector("[data-showcase-filter].active")?.dataset.showcaseFilter || "all";
+    ...
+  }
+
+  search?.addEventListener("input", applyFilters);
+  filters.forEach((button) => button.addEventListener("click", ...));
+});
+```
+
+并在 `serve.py` 的首页 HTML 中：
+- 引入 `/assets/bkflow-showcase.css`
+- 引入 `/assets/bkflow-showcase.js`
+- 为卡片输出 `data-feature-card`、`data-tags`、`data-status`、`data-cover-theme`
+- 增加搜索框、筛选按钮和空结果占位
+
+- [ ] **Step 5: 跑首页测试和全量原型测试**
+
+Run:
+
+```bash
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django tests/interface/prototypes -v
+python3.9 -m py_compile prototypes/serve.py prototypes/showcase_catalog.py
+```
+
+Expected:
+- 全部 prototype tests PASS
+- `py_compile` PASS
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add prototypes/assets/bkflow-showcase.css \
+  prototypes/assets/bkflow-showcase.js \
+  prototypes/serve.py \
+  tests/interface/prototypes/test_showcase_homepage.py
+git commit -m "feat(prototypes): 增加首页展厅视觉与筛选交互 --story=133683187"
+```
+
+---
+
+### Task 4: 对齐文档、生成规则和结构合同，确保后续 feature 能自动接入首页
+
+**Files:**
+- Modify: `tests/interface/prototypes/test_structure_contract.py`
+- Modify: `prototypes/README.md`
+- Modify: `prototypes/features/README.md`
+- Modify: `.ai/skills/prototype-generator/SKILL.md`
+
+- [ ] **Step 1: 写失败测试，锁定静态资源和元数据合同**
+
+扩展 `tests/interface/prototypes/test_structure_contract.py`，至少新增：
+
+```python
+from pathlib import Path
+
+
+def test_showcase_assets_exist():
+    required = [
+        "prototypes/assets/bkflow-showcase.css",
+        "prototypes/assets/bkflow-showcase.js",
+    ]
+    for path in required:
+        assert Path(path).is_file(), path
+
+
+def test_active_feature_has_showcase_meta():
+    path = Path("prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json")
+    assert path.is_file(), path
+    assert '"title"' in path.read_text(encoding="utf-8")
+```
+
+- [ ] **Step 2: 跑失败测试**
+
+Run:
+
+```bash
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django tests/interface/prototypes/test_structure_contract.py -v
+```
+
+Expected:
+- 如果前面任务尚未完成，会先看到缺资源或缺元数据失败
+
+- [ ] **Step 3: 更新 README 与 skill 规则**
+
+把以下内容写实：
+- `prototypes/README.md`：首页展厅定位、`feature.meta.json` 简介、首页展示来源
+- `prototypes/features/README.md`：新增 feature 时必须同步维护 `feature.meta.json`
+- `.ai/skills/prototype-generator/SKILL.md`：当生成 `features/<slug>/` 时，同步创建或更新 `feature.meta.json`
+
+禁止继续沿用旧思路：
+- 不要让 AI 只创建 `README.md` 和 `index.html` 却漏掉首页元数据
+- 不要让首页展示信息硬编码到 `serve.py`
+
+- [ ] **Step 4: 跑结构测试与文档相关回归**
+
+Run:
+
+```bash
+PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django \
+  tests/interface/prototypes/test_structure_contract.py \
+  tests/interface/prototypes/test_showcase_catalog.py \
+  tests/interface/prototypes/test_showcase_homepage.py -v
+```
+
+Expected:
+- 结构合同、catalog、homepage 三类测试全部 PASS
+
+- [ ] **Step 5: 做一次本地烟测**
+
+Run:
+
+```bash
+python prototypes/serve.py --port 9139 >/tmp/prototype-showcase.log 2>&1 &
+sleep 1
+curl -s http://127.0.0.1:9139/ | head -80
+```
+
+Expected:
+- 返回首页 HTML
+- 输出中包含 `BKFlow 原型展厅`
+- 输出中包含 `查看这组原型`
+
+结束后停止本地进程，避免占用端口。
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add tests/interface/prototypes/test_structure_contract.py \
+  prototypes/README.md \
+  prototypes/features/README.md \
+  .ai/skills/prototype-generator/SKILL.md
+git commit -m "docs(prototypes): 对齐展厅首页的元数据与使用规则 --story=133683187"
+```
+
+---
+
+## 最终验证清单
+
+在所有 task 完成后，统一执行以下验证：
+
+- [ ] `PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/bin/pytest -c /dev/null -p no:django tests/interface/prototypes -v`
+- [ ] `python3.9 -m py_compile prototypes/serve.py prototypes/showcase_catalog.py`
+- [ ] 本地打开 `http://localhost:9139/` 确认首页首屏、Feature 卡片、代表页面区、资源区和筛选交互正常
+- [ ] 打开 `prototypes/features/bkflow-engine-admin-prototype-overhaul/index.html` 确认 feature 内页入口未被首页改造破坏
+
+## 风险提醒
+
+1. `serve.py` 仍然是 stdlib 单文件服务器，首页渲染逻辑不要无限膨胀，catalog 与 HTML 片段生成应尽量分层。
+2. 搜索和筛选只做前端轻交互，不要把首页做成复杂后台。
+3. `feature.meta.json` 是展示契约，不要把完整 README 内容复制进去。
+4. 现阶段只有一个 active feature，首页要为未来多个 feature 预留布局，但不要为了未来过度设计。
+
+## 完成定义
+
+当以下条件全部满足时，才算本计划完成：
+
+1. 根首页从 URL 列表页升级为中文原型展厅首页。
+2. 首页主区域以 `features/` 为主角，而不是 `masters/examples`。
+3. 首页展示中文标题、摘要、标签和代码生成封面，而不是要求用户阅读 slug。
+4. 现有 `bkflow-engine-admin-prototype-overhaul` feature 能通过 `feature.meta.json` 自动出现在首页。
+5. 新增 feature 时，只要补 `feature.meta.json`，就能被首页自动纳入展示。
+6. 所有 prototype tests 和 Python 3.9 语法校验通过。
diff --git a/docs/specs/2026-03-23-prototype-toolkit-design.md b/docs/specs/2026-03-23-prototype-toolkit-design.md
new file mode 100644
index 0000000000..9cde4b50f8
--- /dev/null
+++ b/docs/specs/2026-03-23-prototype-toolkit-design.md
@@ -0,0 +1,434 @@
+# BKFlow 原型工具包设计文档
+
+> **日期**：2026-03-23
+> **状态**：Reviewed
+> **目标**：构建一套零配置、AI 驱动的原型生成工具，让后端开发者能快速产出高保真可交互的 HTML 原型
+
+## 1. 背景与动机
+
+BKFlow 的前端基于 Vue 2.7 + bk-magic-vue + Webpack 构建，搭建开发环境需要 Node.js、npm install、后端 API 等一系列依赖。对于不熟悉前端的后端开发者，仅仅为了产出原型就搭建完整前端环境成本过高，且很多页面交互依赖真实后端接口。
+
+我们需要一套独立的原型工具，满足以下核心需求：
+
+- **零配置**：不需要 Node.js、npm、webpack，不依赖任何后端接口
+- **AI 驱动**：用自然语言描述需求，AI 澄清后自动生成可交互原型
+- **高保真**：视觉上贴近 bkflow 现有页面风格（bk-magic-vue 组件外观）
+- **可交互**：Tab 切换、侧滑打开/关闭、弹窗、搜索过滤等原型级交互可用
+- **易分享**：产出的原型能直接给产品/设计在浏览器中查看和体验
+
+## 2. 方案选型
+
+评估了三种方案：
+
+| 方案 | 思路 | 优点 | 缺点 |
+|------|------|------|------|
+| **A. 纯 HTML 原型工具包** | CSS 设计系统 + Vanilla JS 交互库 | 零依赖、AI 生成最可靠、离线可用 | 复杂交互需额外 JS |
+| B. CDN Vue 3 + 组件库 | 通过 CDN 加载 Vue 3 运行时 | 交互能力强 | AI 生成易出错、需联网或下载运行时 |
+| C. Python Flask 服务器 | Flask + Jinja2 模板渲染 | Python 原生技术栈 | 架构偏重、前端交互仍需 JS |
+
+**选择方案 A**，理由：
+1. 对 AI 生成最友好——纯 HTML/CSS 结构简单，出错率最低
+2. 真正零依赖——只需 Python 标准库起 HTTP 服务
+3. 可渐进增强——未来需要更复杂交互时可引入 Vue 3 CDN，不冲突
+
+## 3. 整体架构
+
+工具包放在仓库根目录下 `bkflow-prototype/`，与 `bkflow/`、`frontend/` 并列：
+
+```
+bk-flow/                              ← 仓库根目录
+├── bkflow/                           ← 后端代码
+├── frontend/                         ← 前端代码
+├── prototypes/                       ← 原型工具包（本文档的产物）
+└── ...
+
+prototypes/                           ← 原型工具包根目录
+├── assets/                           ← 静态资源
+│   ├── bkflow-prototype.css          ← CSS 设计系统（复刻 bk-magic-vue 60+ 组件）
+│   ├── bkflow-prototype.js           ← 声明式交互库
+│   └── icons/                        ← SVG 图标集
+├── base.html                        ← 预制的 bkflow 应用外壳（导航栏+菜单+空内容区）
+├── examples/                         ← 常见页面模式示例（参考用，不做约束）
+│   ├── list-page.html                ← 示例：列表页
+│   ├── form-slider.html              ← 示例：侧滑表单
+│   ├── tab-page.html                 ← 示例：Tab 切换
+│   ├── detail-page.html              ← 示例：详情页
+│   ├── composite-page.html           ← 示例：复合布局
+│   └── component-showcase.html       ← 全组件展示页（样式参考）
+├── output/                           ← AI 生成的原型存放处
+│   └── (*.html)
+├── serve.py                          ← 预览服务器（零依赖 Python）
+└── README.md                         ← 使用说明
+```
+
+五个核心模块：
+
+| 模块 | 职责 |
+|------|------|
+| **CSS 设计系统** (`bkflow-prototype.css`) | 复刻 bk-magic-vue 全部组件的视觉外观，通过 CSS class 使用 |
+| **JS 交互库** (`bkflow-prototype.js`) | 提供声明式交互能力，通过 HTML data-* 属性驱动 |
+| **示例文件** (`examples/`) | 常见页面模式的示例，供 AI 学习参考，不限制生成结果 |
+| **预览服务器** (`serve.py`) | 零依赖 Python HTTP 服务，支持自动刷新 |
+| **AI Skill** (`.ai/skills/prototype-generator/SKILL.md`) | 独立的 Cursor skill，定义 AI 如何使用工具包生成原型。与现有 `ui-prototype` skill 并存 |
+
+## 4. CSS 设计系统
+
+### 4.1 设计变量
+
+从 bkflow 前端代码（`frontend/src/scss/config.scss`、`app.scss`）提取，确保配色完全一致：
+
+```css
+:root {
+  /* 主色调 */
+  --bk-primary: #3a84ff;
+  --bk-success: #2dcb56;
+  --bk-warning: #f8b53f;
+  --bk-danger: #ff5757;
+
+  /* 文本 */
+  --bk-text-primary: #333333;
+  --bk-text-secondary: #666666;
+  --bk-text-tertiary: #999999;
+  --bk-text-disabled: #cfcccc;
+
+  /* 背景 */
+  --bk-bg-default: #ffffff;
+  --bk-bg-main: #f5f5f5;
+  --bk-bg-body: #f4f7fa;
+  --bk-bg-hover: #edf4fd;
+  --bk-bg-nav: #f0f7ff;
+
+  /* 边框 */
+  --bk-border: #dcdee5;
+  --bk-border-form: #c3cdd7;
+  --bk-border-light: #ebebeb;
+
+  /* 圆角 */
+  --bk-radius: 2px;
+  --bk-radius-md: 4px;
+  --bk-radius-lg: 6px;
+
+  /* 阴影 */
+  --bk-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.09);
+  --bk-shadow-lg: 0 0 20px 0 rgba(0, 0, 0, 0.15);
+
+  /* 字体 */
+  --bk-font: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+  --bk-font-size: 14px;
+  --bk-font-size-sm: 12px;
+  --bk-font-size-lg: 16px;
+  --bk-font-size-xl: 20px;
+
+  /* 布局 */
+  --bk-header-height: 48px;
+  --bk-nav-bg: #1f2738;
+  --bk-min-width: 1366px;
+}
+```
+
+### 4.2 组件覆盖范围
+
+完整覆盖 bk-magic-vue 2.5 全部组件 + 3 个 bkflow 特有组件。**以下方 Phase 表为唯一完整清单**，本节按分类列出便于查阅。
+
+CSS class 命名与 bk-magic-vue 组件名保持一致，使用 `bk-` 前缀。
+
+#### 基础 (6)
+Color、Icon、Button、Link、Transition、Font
+
+#### 布局 (2)
+Grid、ResizeLayout
+
+#### 导航 (9)
+Navigation、Tab、Steps、Process、Breadcrumb、Divider、FixedNavbar、BackTop、Affix
+
+#### 表单 (16)
+Form/FormItem、Input、Radio、Checkbox、Select、Cascade、Switcher、ColorPicker、DatePicker、TimePicker、TagInput、Upload、Search、Slider、Transfer、Rate
+
+#### 数据展示 (16)
+Table、Pagination、Tag、Badge、Tree、BigTree、Collapse、DropdownMenu、Timeline、Progress、RoundProgress、Swiper、AnimateNumber、Diff、VirtualScroll、Image
+
+#### 反馈 (12)
+Dialog、Sideslider、Loading、Alert、Exception、Message、Notify、Popover、Popconfirm、Tooltips、Card、Spin
+
+#### BKFlow 特有 (3)
+FlowNode（流程节点静态展示）、FlowConnection（节点连线）、CodeEditor（代码编辑器占位）
+
+### 4.3 分 Phase 实现
+
+| Phase | 组件 | 数量 | 说明 |
+|-------|------|------|------|
+| Phase 1 | Button、Input、Select、Switcher、Form/FormItem、Table、Pagination、Tab、Dialog、Sideslider、Search、Tag、Breadcrumb、Loading、Exception、Navigation、Grid、Card | 18 | 核心骨架，完成即可出原型 |
+| Phase 2 | Radio、Checkbox、DatePicker、TimePicker、TagInput、Upload、Cascade、ColorPicker、Slider、Transfer、Rate | 11 | 表单增强 |
+| Phase 3 | Tree、BigTree、Collapse、DropdownMenu、Timeline、Progress、RoundProgress、Badge、Alert、Message、Notify、Popover、Popconfirm、Tooltips | 14 | 数据展示 + 反馈 |
+| Phase 4 | Steps、Process、ResizeLayout、Divider、FixedNavbar、BackTop、Affix、Swiper、AnimateNumber、Diff、VirtualScroll、Image、Spin、Icon、Color、Font、Link、Transition、FlowNode、FlowConnection、CodeEditor | 21 | 导航 + 基础补全 + 高级 + bkflow 特有 |
+
+> **合计 64 个组件**：Phase 1 (18) + Phase 2 (11) + Phase 3 (14) + Phase 4 (21) = 64
+
+## 5. JS 交互库
+
+### 5.1 设计原则
+
+**声明式交互**：通过 HTML `data-*` 属性声明交互行为，生成原型时无需编写任何 JavaScript 代码。`bkflow-prototype.js` 在页面加载时自动扫描这些属性并绑定事件。
+
+### 5.2 支持的交互
+
+| 交互 | HTML 属性 | 效果 |
+|------|-----------|------|
+| 打开侧滑/弹窗 | `data-open="target-id"` | 打开 id 对应的侧滑面板或弹窗 |
+| 关闭浮层 | `data-close` | 关闭当前所在的侧滑/弹窗 |
+| Tab 切换 | `data-tab="panel-id"` | 切换显示对应 Tab 面板 |
+| 表头排序 | `data-sortable` | 点击表头列排序（切换升序/降序） |
+| 搜索过滤 | `data-filter="table-id"` | 输入时实时过滤指定表格的行 |
+| 折叠展开 | `data-collapse="panel-id"` | 折叠/展开指定面板 |
+| 下拉菜单 | `data-dropdown="menu-id"` | 展开/收起下拉菜单 |
+| 表单校验提示 | `data-required` / `data-pattern="regex"` | 提交时显示校验错误样式 |
+| 步骤切换 | `data-step="step-id"` | 点击进入下一步/上一步 |
+| 页面跳转 | `data-href="other-page.html"` | 原型间页面跳转 |
+| 通知消息 | `data-notify="成功信息"` | 点击后弹出通知提示 |
+
+### 5.3 用法示例
+
+```html
+<!-- 点击按钮打开侧滑 -->
+<button class="bk-button bk-button-primary" data-open="create-slider">
+  新建
+</button>
+
+<!-- 侧滑面板 -->
+<div id="create-slider" class="bk-sideslider">
+  <div class="bk-sideslider-header">
+    <span>新建凭证</span>
+    <span class="bk-sideslider-close" data-close>&times;</span>
+  </div>
+  <div class="bk-sideslider-body">
+    <!-- 表单内容 -->
+  </div>
+  <div class="bk-sideslider-footer">
+    <button class="bk-button" data-close>取消</button>
+    <button class="bk-button bk-button-primary" data-close data-notify="创建成功">提交</button>
+  </div>
+</div>
+```
+
+## 6. 布局原语
+
+不使用固定页面模板，而是提供一组可自由组合的布局原语。AI 根据具体需求即时构造最合适的页面结构。
+
+| 布局原语 | CSS class | 说明 |
+|----------|-----------|------|
+| 页面骨架 | `bk-layout` | 导航 + 侧边栏 + 内容区 |
+| 操作栏 | `bk-toolbar` | 搜索 + 筛选 + 操作按钮的水平容器 |
+| 数据表格区 | `bk-table` + `bk-pagination` | 表格 + 分页组合 |
+| 侧边面板 | `bk-aside` | 可放树形导航或分组列表 |
+| 侧滑层 | `bk-sideslider` | 从右侧滑出的面板 |
+| 弹窗层 | `bk-dialog` | 居中弹窗 |
+| Tab 容器 | `bk-tab` | 可嵌套任意内容的标签页 |
+| 表单区 | `bk-form` | 字段组 + 校验 |
+| 信息卡片区 | `bk-info-card` | KV 键值对展示 |
+| 步骤容器 | `bk-steps-container` | 分步表单 / 向导 |
+| 画布区 | `bk-canvas` | 流程图静态展示 |
+| 分栏布局 | `bk-split` | 左右或上下分栏 |
+
+这些原语可以自由嵌套组合，例如：
+- 左侧树 + 右侧（操作栏 + 表格 + 侧滑表单）
+- 步骤容器里嵌套三个表单区
+- Tab 容器内每个面板是独立的列表页
+
+`examples/` 目录下的示例文件展示常见组合模式，供 AI 生成时参考学习，但不限制生成结果。
+
+## 7. 预览服务器
+
+### 7.1 技术实现
+
+`serve.py` 是一个零依赖的 Python 脚本，仅使用标准库 (`http.server`)。
+
+功能：
+- **静态文件服务**：服务 `prototypes/` 目录下的所有文件
+- **自动刷新**：向 HTML 响应中注入一小段 JS，每 1 秒轮询服务端 `/api/mtime` 端点检测文件变化，变化时自动刷新浏览器
+- **原型索引页**：访问根路径 `/` 时展示 `output/` 下所有原型的列表页，点击即可进入
+- **端口可配**：`python serve.py --port 9080`，默认 9080
+
+### 7.2 使用方式
+
+```bash
+cd prototypes
+python serve.py
+# ✓ Serving prototypes at http://localhost:9080
+# ✓ Auto-reload enabled
+```
+
+如果通过 SSH 远程开发，需要做端口转发：
+```bash
+ssh -L 9080:localhost:9080 your-devcloud-host
+```
+
+## 8. AI Skill：prototype-generator
+
+### 8.1 定位
+
+这是一个**独立的 Cursor skill**，存放在 `.ai/skills/prototype-generator/SKILL.md`。它不属于 superpowers 研发流程，不会链接到 writing-plans、TDD 等其他 skill。它自己完成从需求澄清到原型生成的全流程。
+
+与现有的 `.ai/skills/ui-prototype/SKILL.md`（面向前端开发者，在 Vue 代码中迭代）并存，各有各的适用场景：
+
+| Skill | 适用场景 | 产出物 | 依赖 |
+|-------|---------|--------|------|
+| `ui-prototype` | 前端开发者在真实代码中迭代 UI | Vue 组件 | Node.js + 前端环境 |
+| `prototype-generator` | 后端开发者/产品经理快速出原型 | 自包含 HTML 文件 | 仅 Python |
+
+### 8.2 触发条件
+
+用户说以下类似的话时触发：
+- "做一个 xxx 的原型"
+- "设计一下 xxx 页面"
+- "帮我出一个 xxx 的交互稿"
+- "prototype xxx"
+
+### 8.3 完整工作流
+
+Skill 自身包含完整的工作循环，不依赖外部 skill：
+
+1. **启动预览服务器** — 检查 `serve.py` 是否已在运行，没有则启动
+2. **检查外壳** — 检查 `base.html` 是否存在，不存在则进入外壳构建引导（见 8.5）
+3. **需求澄清** — 逐一提问确认：
+   - 页面要展示什么信息？有哪些数据字段？
+   - 需要什么操作？新建、编辑、删除、启用/停用？
+   - 交互方式？搜索、筛选、侧滑编辑、弹窗确认？
+   - 多个页面之间有关联吗？
+   - （可选）用户显式提供后端文件路径时，读取 Model/Config/Serializer 提取字段
+4. **生成原型** — 复制 `base.html` 作为基础，在其内容区（`<main class="bk-content">`）中填充具体页面内容，保存到 `output/`
+5. **告知用户预览** — 给出预览 URL
+6. **迭代循环** — 用户反馈 → AI 增量修改 → 生成新版本文件（`xxx-v2.html`）→ 再预览 → 循环直到满意
+
+### 8.4 AI Skill 能力
+
+| 能力 | 说明 |
+|------|------|
+| 需求澄清 | 逐一提问确认页面类型、字段、操作、交互 |
+| 布局组合 | 根据需求自由组合布局原语，不限于固定模板 |
+| 生成原型 | 复制 `base.html` 外壳，在内容区填充具体页面内容（布局原语 + 组件 + Mock 数据 + 声明式交互） |
+| 多页面关联 | 支持生成多个关联页面（如列表页 + 编辑侧滑），页面间可跳转 |
+| 读取后端模型 | 用户显式提供后端文件路径时，读取 `bkflow/` 下的 Model/Config/Serializer，提取字段名、类型、choices、默认值，输出字段-控件映射表。不连接真实数据库或后端服务，仅做静态代码分析。如果后端代码不存在则跳过，基于用户描述推断字段 |
+| 增量迭代 | 只改反馈提到的部分。版本历史通过文件名后缀管理：`plugin-management.html`（初版）→ `plugin-management-v2.html` → `plugin-management-v3.html`，旧版本保留在 `output/` 目录中供回溯 |
+| 全组件参考 | 读取 `component-showcase.html` 了解所有可用组件的 class 写法 |
+
+### 8.5 页面外壳 (`base.html`)
+
+`base.html` 是预先打磨好的应用外壳，包含：
+- 顶部导航栏（产品 logo、产品名、用户头像）
+- 左侧菜单（各功能模块菜单项，可点击高亮）
+- 空的内容区（`<main class="bk-content"></main>` 占位）
+- CSS/JS 引用
+
+外壳打磨一次，确保高保真。AI 生成原型时**只负责填充内容区**。
+
+**首次使用引导**：当 `base.html` 不存在时（如另一个项目首次使用此工具），skill 进入外壳构建引导流程：
+
+1. 询问产品名称（显示在导航栏）
+2. 询问左侧菜单有哪些模块
+3. 询问主色调（默认蓝鲸蓝 `#3a84ff`，如需自定义可修改 CSS 变量）
+4. 询问是否有 logo 图片（可选，放入 `assets/icons/`）
+5. 生成 `base.html` → 用户在浏览器预览确认
+6. 确认后回到正常的原型生成流程
+
+对于 bkflow 项目，`base.html` 会随工具包一起预制好，不需要走引导流程。
+
+### 8.6 生成的 HTML 文件结构
+
+以 `base.html` 为基础，AI 填充 `bk-content` 区域：
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>插件管理 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../assets/bkflow-prototype.css">
+</head>
+<body>
+  <div class="bk-layout">
+    <!-- ↓ 以下来自 base.html，AI 不需要生成 ↓ -->
+    <nav class="bk-navigation">
+      <div class="bk-navigation-header">BKFlow</div>
+      <ul class="bk-navigation-menu">
+        <li class="active">插件管理</li>
+        <li>模板管理</li>
+        <li>任务管理</li>
+        ...
+      </ul>
+    </nav>
+    <!-- ↑ 外壳部分结束 ↑ -->
+
+    <main class="bk-content">
+      <!-- ↓ AI 只生成这里面的内容 ↓ -->
+      <div class="bk-toolbar">...</div>
+      <div class="bk-table">...</div>
+      <!-- ↑ AI 生成的内容结束 ↑ -->
+    </main>
+  </div>
+  <!-- 侧滑/弹窗等浮层放在 body 末尾 -->
+  <script src="../assets/bkflow-prototype.js"></script>
+</body>
+</html>
+```
+
+关键约束：
+- CSS class 使用 `bk-` 前缀，与 bk-magic-vue 组件名一致
+- 交互通过 `data-*` 属性声明
+- Mock 数据直接写在 HTML 中，使用接近真实业务的数据
+- 每个原型是自包含的 HTML 文件，只依赖 `assets/` 下的共享资源
+- **原型文件仅允许扁平存放在 `output/` 一级目录下**（即 `prototypes/output/<name>.html`），不允许子目录嵌套。静态资源统一用 `../assets/` 相对路径引用，`serve.py` 以 `prototypes/` 为根目录服务
+
+## 9. 扩展性：bk-magic-vue 版本兼容
+
+当前实现目标是 bk-magic-vue 2.x，但蓝鲸生态内有些产品使用 bk-magic-vue 3.x（bkui-vue3），两个版本在配色、圆角、阴影、部分组件结构上有差异。设计上预留以下扩展能力：
+
+### 9.1 CSS 变量集中管理
+
+所有组件样式必须引用 CSS 变量，不允许在组件 class 中写死颜色、尺寸等值。这样切换 v2/v3 只需替换变量层。
+
+```css
+/* ✅ 正确：引用变量 */
+.bk-button { border-radius: var(--bk-radius); }
+
+/* ❌ 错误：写死值 */
+.bk-button { border-radius: 2px; }
+```
+
+### 9.2 未来 v3 支持方式
+
+不需要现在实现，但架构上预留路径：在 `assets/` 下放置可选的版本覆盖文件。
+
+```
+assets/
+├── bkflow-prototype.css       ← 基础样式（默认 v2）
+├── bkflow-prototype.js        ← 交互库（版本无关）
+└── theme-v3-override.css      ← （未来）v3 变量覆盖 + 组件差异
+```
+
+使用时只需多引一行 CSS 即可切换到 v3 风格：
+```html
+<link rel="stylesheet" href="../assets/bkflow-prototype.css">
+<link rel="stylesheet" href="../assets/theme-v3-override.css"> <!-- 可选 -->
+```
+
+### 9.3 实现约束
+
+- CSS 变量全部定义在 `:root` 中，组件样式只用 `var()` 引用
+- 组件 class 命名保持 `bk-` 前缀，v2 和 v3 共用
+- 同一个组件如果 v2/v3 结构差异大（如 Navigation），在 override 文件中用相同 class 名覆盖
+
+## 10. 组件展示页
+
+`examples/component-showcase.html` 是一个特殊的示例文件，展示所有组件的样式和用法。它同时承担两个职责：
+
+1. **AI 参考**：AI 生成原型前可以读取此文件，了解每个组件的 CSS class 写法
+2. **人工验证**：开发者可以在浏览器中打开此文件，验证组件样式是否与 bk-magic-vue 一致
+
+## 11. 风险与应对
+
+| 风险 | 影响 | 应对 |
+|------|------|------|
+| CSS 复刻精度不够 | 原型与真实页面有视觉差异 | 以 bk-magic-vue 源码为参考，关键组件逐像素对比；接受原型级别的近似 |
+| 复杂交互超出声明式能力 | 如拖拽排序、联动表单无法实现 | 在 JS 库中预留 `data-custom` 扩展点；极端场景可在原型中内联 JS |
+| 60+ 组件开发量大 | 初期投入较高 | 分 Phase 实现，Phase 1 完成即可覆盖大部分原型需求 |
+| AI 生成的 HTML 质量不稳定 | 偶尔生成不正确的结构 | `component-showcase.html` 作为参考减少错误；提供清晰的 class 命名规范 |
diff --git a/docs/specs/2026-04-10-prototype-bk-standard-design.md b/docs/specs/2026-04-10-prototype-bk-standard-design.md
new file mode 100644
index 0000000000..6c63c97de2
--- /dev/null
+++ b/docs/specs/2026-04-10-prototype-bk-standard-design.md
@@ -0,0 +1,371 @@
+# BKFlow 原型工具 `bk-standard` 设计文档
+
+> 日期：2026-04-10
+> 状态：Draft（设计基线已确认，待书面评审）
+> 目标：将 `prototypes/` 从纯静态 HTML 原型工具升级为以蓝鲸标准为主、动态引用 `@blueking/bkui-knowledge` 规范与模板资产的原型编排层
+
+## 1. 背景
+
+BKFlow 当前已经有一套可用的原型工具链：
+
+- `prototypes/`：纯 HTML / CSS / Vanilla JS 的静态原型工具包，适合快速出稿和分享
+- `.ai/skills/prototype-generator`：驱动 AI 基于上述工具包生成原型
+
+这套方案解决了“零构建、快出稿”的问题，但也有明显边界：
+
+- 页面视觉主要依赖本地复刻样式，而不是真实蓝鲸组件
+- 蓝鲸规范的更新需要手工同步到本地 skill / 样式 / 模板
+- 原型能做到“像蓝鲸”，但很难做到“直接跑出真实蓝鲸组件效果”
+- 页面骨架和交互模式更接近 BKFlow 当前静态实现，难以持续向更新的蓝鲸标准收敛
+
+与此同时，`@blueking/bkui-knowledge` 已经提供了一套可动态消费的蓝鲸前端知识能力：
+
+- 组件 API
+- 设计规范与反模式
+- 页面模板与布局资产
+- 真实预览模板
+- MCP 工具接口与 skills 同步机制
+
+BKFlow 本身处于蓝鲸生态内，且前端原型能力未来希望逐步走向更标准、更可复用的方向。因此新的原型工具主目标不再是“复刻当前项目页面”，而是：
+
+1. 优先遵循蓝鲸标准
+2. 尽量使用真实蓝鲸组件效果
+3. 在此基础上保留 BKFlow 项目级覆盖能力
+
+## 2. 设计目标
+
+本次设计的核心目标如下：
+
+- **蓝鲸标准优先**：原型生成时优先遵循 `bkui-knowledge` 中的设计规范，而不是仅复用组件 API
+- **动态引用**：尽量不在本地 skill 中硬编码蓝鲸规范文本，包更新后原型工具应能自动吃到最新知识
+- **真实组件效果**：默认输出真实 BK 组件预览，而不是仅靠本地 CSS 复刻
+- **保留可降级能力**：当动态知识、真实预览或运行时不可用时，仍保留静态原型兜底
+- **可追踪**：每个原型产物都能追溯其使用的蓝鲸知识版本、模板来源与降级原因
+
+## 3. 非目标
+
+本设计明确不做以下事情：
+
+- 不把 `@blueking/bkui-knowledge` 当作业务运行时依赖直接嵌入 BKFlow 主前端工程
+- 不把 `bkui-knowledge` 的 skill / reference / example 整体复制到仓库里长期维护
+- 不要求第一版就支持任意复杂多路由原型应用
+- 不把 BKFlow 当前 Vue2 + `bk-magic-vue` 的页面实现细节作为主设计来源
+
+## 4. 方案选型
+
+围绕新原型工具的主方向，评估了三条路线：
+
+| 方案 | 思路 | 优点 | 缺点 |
+|------|------|------|------|
+| A. 静态增强 | 继续使用当前 HTML 工具，只在生成前动态查询 `bkui-knowledge` 约束输出 | 接入最轻，迁移最稳 | 只能“更像蓝鲸”，无法默认获得真实组件效果 |
+| B. 完全替换为真实预览工程 | 放弃当前 `prototypes/` 静态能力，全面转向真实 BK 组件预览 | 保真度最高 | 迁移成本大，失去现有静态工具的兜底能力 |
+| **C. 原型编排层 + `bk-standard` 主模式** | 保留 `prototypes/` 作为统一入口，新增 `bk-standard` 渲染器，静态原型降级为 fallback | 兼顾标准化、动态更新和降级能力 | 实现复杂度高于单一路线 |
+
+**最终选择方案 C。**
+
+选择理由：
+
+1. 用户优先级已经明确为“尽量使用真实蓝鲸组件效果”
+2. 项目长期目标是逐步走向蓝鲸更标准的页面结构与交互规范
+3. 现有 `prototypes/` 已经能覆盖静态兜底场景，不应完全丢弃
+4. `bkui-knowledge` 提供的是“知识服务 + 模板资产”，最适合作为新主模式的动态规范源
+
+## 5. 总体架构
+
+新的 `prototypes/` 不再等同于“纯静态 HTML 工具”，而是升级为一个**原型编排层**。其职责是：
+
+- 解析用户原型意图
+- 动态拉取蓝鲸知识
+- 编译页面规范合同
+- 选择合适的渲染器输出原型
+- 校验原型是否符合蓝鲸规范
+- 记录产物元数据
+
+### 5.1 核心模块
+
+| 模块 | 职责 |
+|------|------|
+| `intent-parser` | 将用户描述整理为页面意图：页面类型、关键任务、交互、保真等级 |
+| `knowledge-adapter` | 动态读取 `bkui-knowledge` 的规范、组件 API、模板与示例 |
+| `contract-compiler` | 将知识与项目覆盖项编译成结构化 `prototype contract` |
+| `bk-standard-renderer` | 按合同生成蓝鲸标准原型，默认输出真实 BK 组件预览 |
+| `validator` | 校验知识加载、合同完整性、渲染结果和规范一致性 |
+| `artifact-recorder` | 为产物记录版本、知识来源、模板来源和降级原因 |
+
+### 5.2 数据流
+
+```text
+用户需求
+  -> intent-parser
+  -> knowledge-adapter
+  -> contract-compiler
+  -> bk-standard-renderer
+  -> validator
+  -> output + metadata
+```
+
+### 5.3 主模式与降级模式
+
+新的原型工具保留多个输出模式，但主模式固定为：
+
+- **主模式：`bk-standard`**
+  - 蓝鲸标准优先
+  - 真实 BK 组件预览优先
+  - 动态引用 `bkui-knowledge`
+- **降级模式：`static-fallback`**
+  - 保留当前 `bkflow-prototype.css/js` 静态能力
+  - 仅作为最后一级兜底
+
+## 6. 动态知识接入
+
+### 6.1 核心原则
+
+`bkui-knowledge` 在本设计中不是“组件素材包”，而是**动态规范源**。原型工具必须同时消费：
+
+- 设计规范
+- 组件契约
+- 模板资产
+- 参考示例
+
+### 6.2 知识分层
+
+`knowledge-adapter` 应按以下层次消费 `bkui-knowledge`：
+
+1. **设计规范层**
+   - 来源：`bkui-builder`、`bkui-cheatsheet`、`bkui-quick-start`、`bkui-demo`
+   - 用途：约束页面骨架、布局结构、组件组合、常见反模式
+2. **组件契约层**
+   - 来源：`knowledge/component-apis/vue3/*.json`
+   - 用途：校验组件 Props / Events / Slots / 使用禁忌
+3. **参考实现层**
+   - 来源：`knowledge/examples/`、`bkui-builder/assets/layouts/`、`bkui-builder/assets/pages/`、`bkui-demo/assets/`
+   - 用途：为列表页、详情页、向导页等页面选择标准骨架与预览模板
+4. **项目覆盖层**
+   - 来源：BKFlow 本地配置
+   - 用途：补充项目名称、模块文案、少量视觉 token、状态语义等轻量覆盖
+
+### 6.3 接入优先级
+
+动态引用应采用固定优先级，避免将上游内容写死到本地 skill 中：
+
+1. **MCP 主通道**
+   - 优先调用稳定工具接口：
+     - `get_knowledge_index`
+     - `recommend_skills`
+     - `get_skill`
+     - `get_component_api`
+     - `batch_load`
+2. **npm fallback 通道**
+   - 当 MCP 不可用时，临时拉取并解析 `@blueking/bkui-knowledge`
+   - 读取 `knowledge/manifest.json`、skill 目录、组件 API、模板和示例
+3. **本地缓存通道**
+   - 使用最近一次成功解析的版本
+4. **静态兜底通道**
+   - 真实标准链路无法建立时，退回 `static-fallback`
+
+### 6.4 版本策略
+
+为兼顾“动态更新”和“可回退、可复现”，建议采用以下策略：
+
+- 默认跟随 `@blueking/bkui-knowledge` 当前可用版本
+- 每次生成原型时记录实际使用的知识版本
+- 本地缓存最近一次成功解析的版本
+- 新版本解析失败时，自动回退到最近成功版本
+- 提供显式刷新能力，用于手动强制更新知识缓存
+
+## 7. `prototype contract`
+
+### 7.1 角色
+
+`prototype contract` 是新工具链的稳定中间层。后续的 renderer 和 validator 只依赖 contract，而不直接依赖上游 markdown 文本或本地 prompt。
+
+### 7.2 最小结构
+
+建议 contract 至少包含以下字段：
+
+```json
+{
+  "mode": "bk-standard",
+  "layout_pattern": "table-page",
+  "preview_strategy": "preview-html",
+  "component_plan": ["navigation", "table", "pagination", "form", "dialog"],
+  "design_rules": [],
+  "anti_patterns": [],
+  "project_overrides": {},
+  "fallback_policy": {
+    "allow_static_fallback": true
+  },
+  "knowledge_context": {
+    "version": "0.0.1-beta.32",
+    "skills": ["bkui-builder", "bkui-cheatsheet", "bkui-quick-start", "bkui-demo"],
+    "components": ["navigation", "table", "pagination", "dialog"]
+  }
+}
+```
+
+### 7.3 编译规则
+
+`contract-compiler` 需要在生成前强制补齐以下信息：
+
+- 页面骨架：列表页、详情页、向导页、工作台页等
+- 布局约束：导航、筛选区、表格区、详情区、弹层区如何组织
+- 组件计划：优先使用哪些 BK 组件
+- 反模式：明确禁止出现的布局或组件组合
+- 预览策略：`preview-html` 或 `preview-app`
+- 项目覆盖项：BKFlow 本地命名与轻量品牌化信息
+
+若 contract 缺失上述关键字段，则不允许进入最终渲染。
+
+## 8. `bk-standard` 渲染器
+
+### 8.1 默认输出形态
+
+`bk-standard` 应优先输出**真实 BK 组件预览页**，而不是仅由本地 CSS 复刻。
+
+默认形态为：
+
+- **`preview-html`**
+  - 生成可直接打开的独立预览 HTML
+  - 页面中的组件应来自真实 BK 组件运行时
+  - 预览外壳优先复用 `bkui-demo` 模板资产
+
+复杂场景可扩展：
+
+- **`preview-app`**
+  - 用于跨页流程较多或需要更完整状态管理的场景
+  - 第一版不作为默认路径
+
+### 8.2 模板与页面骨架来源
+
+`bk-standard-renderer` 不应再以当前 `prototypes/base.html` 作为标准主壳，而应优先消费上游模板资产：
+
+- 布局骨架：`bkui-builder/assets/layouts/`
+- 页面模板：`bkui-builder/assets/pages/`
+- 预览模板：`bkui-demo/assets/preview-template*.html`
+- 视觉映射：`bkui-builder/references/visual-mapping.md`
+
+生成策略应为：
+
+1. 先判断页面属于何种模式，例如 `table-page`、`detail-page`、`wizard-form`
+2. 再选择最接近的蓝鲸标准骨架
+3. 最后注入字段、操作、文案与 mock 数据
+
+### 8.3 BKFlow 项目覆盖
+
+BKFlow 当前项目不再提供“主渲染模式”，而只作为 `project-overrides` 输入层，补充：
+
+- 模块名与菜单命名
+- 常见业务状态文案
+- 导航分组习惯
+- 少量项目级 token 与语义配置
+
+设计优先级应固定为：
+
+`运行时可实现性 > 蓝鲸组件硬约束 > 蓝鲸设计规范 > BKFlow 项目覆盖 > 本地默认值`
+
+## 9. 目录职责调整
+
+建议将 `prototypes/` 重构为如下职责：
+
+```text
+prototypes/
+├── renderers/
+│   ├── bk-standard/
+│   └── static-fallback/
+├── cache/
+│   └── bkui-knowledge/
+├── output/
+│   └── ...
+├── metadata/
+│   └── ...
+├── assets/                         # 仅服务 static-fallback
+├── base.html                       # 降级为 legacy fallback 壳
+└── serve.py
+```
+
+其中：
+
+- `assets/`、`base.html` 继续保留，但只服务 `static-fallback`
+- 标准模式的壳子与页面骨架主要由 `bkui-knowledge` 动态提供
+
+## 10. 校验与回退机制
+
+### 10.1 四层校验
+
+新工具链至少需要四层校验：
+
+1. **知识解析校验**
+   - 是否成功加载关键 skills、组件 API、模板资产
+2. **合同完整性校验**
+   - `prototype contract` 是否完整且可执行
+3. **渲染结果校验**
+   - 是否真的生成了目标 BK 组件预览，而非静态伪装
+4. **规范一致性校验**
+   - 是否违反 `bkui-builder` / `bkui-cheatsheet` / `bkui-quick-start` 中的强规范与反模式
+
+### 10.2 回退顺序
+
+发生异常时应按固定顺序回退：
+
+1. `bk-standard / MCP 实时读取`
+2. `bk-standard / 本地缓存版本`
+3. `bk-standard / npm fallback`
+4. `static-fallback`
+
+任何降级都必须被记录，且不允许在无标记情况下静默退回手写 DOM。
+
+## 11. 产物元数据
+
+为保证动态知识链路的可追踪性，建议每个产物都附带一份元数据，至少记录：
+
+- 本次使用的 `bkui-knowledge` 版本
+- 实际加载的 skills 列表
+- 实际加载的组件 API 列表
+- 选中的布局模板与预览模板
+- 项目覆盖项
+- 是否发生降级
+- 降级原因
+
+元数据是内部工具链资产，不要求直接展示给最终评审者，但必须可供后续排查与复现。
+
+## 12. 迁移策略
+
+建议采用渐进迁移，而不是一次性推翻当前工具：
+
+### Phase 1：建立标准主链路
+
+- 引入 `knowledge-adapter`
+- 建立 `prototype contract`
+- 实现 `bk-standard` 的 `preview-html`
+- 跑通 `MCP -> fallback -> cache` 读取链路
+
+### Phase 2：加入规则校验与元数据
+
+- 增加知识加载校验
+- 增加规范一致性校验
+- 记录产物元数据
+
+### Phase 3：静态链路收口
+
+- 将现有 `assets/`、`base.html` 明确降级为 `static-fallback`
+- 调整 `prototype-generator` skill，使其默认进入 `bk-standard`
+
+### Phase 4：复杂场景增强
+
+- 支持 `preview-app`
+- 增加更复杂的多页面、流程类原型能力
+
+## 13. 最终结论
+
+本设计确认以下基线：
+
+1. `prototypes/` 将升级为原型编排层，而不再只是纯静态 HTML 工具
+2. 新的主模式为 `bk-standard`
+3. `bk-standard` 默认输出真实 BK 组件预览页
+4. `@blueking/bkui-knowledge` 是动态规范源，重点消费设计规范、组件契约和模板资产
+5. 原型生成必须先形成 `prototype contract`，再进入渲染
+6. `static-fallback` 保留，但仅作为最后一级兜底
+7. BKFlow 项目元素通过 `project-overrides` 注入，而不再主导页面骨架
+8. 每次生成都必须经过校验，并记录来源元数据
+
+这套方案的核心价值，不是简单“把旧原型工具接上一个新包”，而是将原型能力从“本地静态复刻”升级为“可动态追随蓝鲸规范演进的标准化原型系统”。
diff --git a/docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md b/docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md
new file mode 100644
index 0000000000..49c421264e
--- /dev/null
+++ b/docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md
@@ -0,0 +1,517 @@
+# BKFlow Engine Admin Prototype Overhaul Design
+
+> 日期：2026-04-21
+> 状态：Draft（方案已确认，已完成人工自审，待书面审阅）
+> 目标：重构 `prototypes/` 为“页面类型母版库 + feature 跟进目录”模式，并基于真实 BKFlow 审计结果深度重建 `bkflow_engine_admin` 原型集合
+
+## 1. 背景
+
+当前 `prototypes/` 已能支撑快速生成静态 HTML 原型，但在这次 `bkflow_engine_admin` 原型对齐任务中暴露出三类结构性问题：
+
+1. **目录不可管理**
+   `examples/`、`output/`、`base.html` 混杂在同一层，`output/` 又是扁平目录，无法看出某个原型属于哪次需求，也无法表达页面之间的层级关系。
+2. **原型基座过于通用**
+   `prototypes/base.html` 更接近“单壳 + 简单列表”的演示页，而真实 BKFlow 页面存在显著差异：
+   - 顶栏一级导航会整体切换信息架构
+   - 页面会混用弹窗、侧滑、独立编辑页、执行详情页、接口调试页
+   - 流程编辑页与任务详情页虽然都复用了流程画布，但交互语义完全不同
+3. **缺少可持续演进机制**
+   每次需求如果直接往 `output/` 堆页面，会导致“临时产物”和“长期母版”混在一起，难以沉淀真正可复用的页面标准。
+
+同时，本次对 `stag` 环境的真实页面审计已经补齐了高复杂链路，包括：
+
+- 流程创建
+- 流程查看 / 编辑 / 发布
+- 流程调试
+- 调试任务执行详情
+- 任务详情与流程编辑页的交互差异
+
+审计文档位于：
+
+- `.ai/docs/specs/bkflow-engine-admin-interaction-audit-2026-04-20.md`
+
+这为 `prototypes/` 的重构提供了足够明确的对齐基线。
+
+## 2. 设计目标
+
+本次重构的核心目标如下：
+
+1. **目录清晰**
+   任何人第一次进入 `prototypes/`，都能立刻分清：
+   - 通用母版在哪里
+   - 某次需求的原型在哪里
+   - 示例参考在哪里
+2. **母版可沉淀**
+   形成一组按页面类型组织的母版库，作为长期 `source of truth`。
+3. **需求可追溯**
+   每次需求都有自己的原型目录，并能显式关联到 `docs/specs/` 与 `docs/plans/`。
+4. **页面做深做准**
+   不只产出“长得像”的页面，而要把真实 BKFlow 的关键交互状态、容器模式、保存机制和执行态信息表达出来。
+5. **支持持续演进**
+   新需求可以在 feature 目录里快速落地，同时把通用能力回刷到母版库，而不会再次形成扁平堆积。
+
+## 3. 非目标
+
+本设计明确不做以下事情：
+
+1. 不修改真实业务前端 `frontend/src/views/`。
+2. 不把原型工具升级为完整低代码平台或页面搭建器。
+3. 不在目录命名中强制携带 TAPD、工单号、负责人等管理信息。
+4. 不要求历史所有原型一次性精修到统一标准；优先完成目录治理和主链路高精度重建。
+
+## 4. 设计原则
+
+### 4.1 母版优先
+
+`prototypes/masters/` 是长期真源。  
+需求目录允许落具体页面，但通用能力最终必须沉淀回母版。
+
+### 4.2 页面类型优先于业务页面
+
+母版按粗颗粒页面类型组织，而不是按具体业务功能一一复制。  
+这样既能复用，也能保留不同业务页面之间的真实差异。
+
+### 4.3 Feature 目录只承接单次需求
+
+`prototypes/features/<slug>/` 只服务于某个需求或专题改造，承载：
+
+- 成套页面入口
+- 轻量 README
+- 轻量变更记录
+
+它不是长期母版库，不承担通用标准定义职责。
+
+### 4.4 文档以 slug 建立绑定
+
+`docs/specs/`、`docs/plans/` 和 `prototypes/features/` 使用同一个稳定 `slug` 关联，但只有 `docs/specs/` 与 `docs/plans/` 按项目规范带日期前缀。
+
+### 4.5 对齐真实交互，而不是只对齐静态长相
+
+原型需要表达的内容包括但不限于：
+
+- 页面容器类型
+- 路由语义
+- 保存与发布状态机
+- 只读与可编辑的边界
+- 执行记录、日志、异常态
+
+## 5. 方案选型
+
+围绕 `prototypes/` 的新组织方式，评估三种方案：
+
+| 方案 | 思路 | 优点 | 缺点 |
+|------|------|------|------|
+| **A. 页面类型母版库 + feature 跟进目录** | 母版按页面类型组织，需求单独建目录承接实际页面 | 目录清晰、可沉淀、最适合持续演进 | 首次重构量较大 |
+| B. 需求目录优先 | 每次需求独立一套页面，再人工抽回母版 | 单次开发快 | 长期容易再次分叉 |
+| C. 组件库优先 | 核心是组件展示，页面只是拼装示例 | 复用率高 | 不适合“所有页面做深做准”的目标 |
+
+**最终选择方案 A。**
+
+选择理由：
+
+1. 能同时解决“目录扁平”和“页面难沉淀”两个问题。
+2. 最适合本次任务里已经明确的高复杂页面差异。
+3. 能兼容后续需求继续沿用同一套目录治理方式。
+
+## 6. 新的目录结构
+
+建议将 `prototypes/` 重构为：
+
+```text
+prototypes/
+├── assets/
+│   ├── bkflow-prototype.css
+│   ├── bkflow-prototype.js
+│   └── icons/
+├── masters/
+│   ├── _shared/
+│   ├── overlays/
+│   ├── list-page/
+│   ├── config-page/
+│   ├── flow-editor/
+│   ├── task-detail/
+│   ├── engine-panel/
+│   └── decision-editor/
+├── features/
+│   ├── bkflow-engine-admin-prototype-overhaul/
+│   └── _legacy/
+├── examples/
+│   ├── README.md
+│   └── component-showcase.html
+├── serve.py
+└── README.md
+```
+
+### 6.1 各目录职责
+
+| 路径 | 职责 |
+|------|------|
+| `assets/` | 共享样式、脚本、图标资源，首轮尽量原地保留 |
+| `masters/` | 页面类型母版库，长期真源 |
+| `features/` | 单次需求目录，承接成套原型 |
+| `features/_legacy/` | 历史扁平原型的过渡归档区，仅迁移阶段存在 |
+| `examples/` | 组件参考和最小演示，不再承载业务原型输出 |
+
+## 7. 母版库设计
+
+首批母版建议按以下 8 类组织：
+
+### 7.1 `_shared/`
+
+放共享壳子、导航骨架、通用布局片段，不作为对外页面展示。
+
+它需要支持三套真实导航语义：
+
+- `space`
+- `system`
+- `plugin`
+
+### 7.2 `overlays/`
+
+统一维护浮层模式：
+
+- 确认弹窗
+- 业务表单弹窗
+- 只读内容弹窗
+- 右侧侧滑
+
+### 7.3 `list-page/`
+
+承接中高频列表页，需覆盖：
+
+- 顶部工具栏
+- 搜索与筛选
+- 固定操作列
+- 状态列
+- 空态
+- 分页
+- 危险操作确认
+
+对应真实页面：
+
+- 流程
+- 调试任务
+- 凭证管理
+- 标签管理
+- 系统空间配置
+- 系统模块配置
+- 插件列表
+
+### 7.4 `config-page/`
+
+承接长表单与代码编辑器型页面，需覆盖：
+
+- 单页长滚动
+- 代码编辑器区块
+- 保存禁用态
+- 修改后可保存
+- 恢复默认值确认
+
+对应真实页面：
+
+- 空间配置
+
+### 7.5 `flow-editor/`
+
+高复杂度母版，需覆盖：
+
+- 查看流程
+- 编辑流程
+- 版本徽标
+- 画布编排
+- 节点悬浮工具条
+- 节点配置抽屉
+- 全局变量浮层
+- 两段式保存
+- 发布弹窗
+- 调试入口
+
+### 7.6 `task-detail/`
+
+高复杂度母版，需覆盖：
+
+- 执行态页头
+- 运行状态徽标
+- 模板回链
+- 只读画布
+- 单击节点打开详情
+- `执行记录 / 配置快照 / 操作历史 / 调用日志`
+- 成功态 / 失败态 / 空日志态
+
+### 7.7 `engine-panel/`
+
+承接接口调试页，需覆盖：
+
+- 请求区
+- 响应区
+- 禁用态发送按钮
+- 重置按钮
+- 参数区域
+
+### 7.8 `decision-editor/`
+
+承接决策表独立编辑页，需覆盖：
+
+- 基础信息
+- 规则配置
+- 规则空态
+- 底部操作区
+
+## 8. Feature 目录设计
+
+每次需求使用：
+
+```text
+prototypes/features/<slug>/
+├── README.md
+├── CHANGELOG.md
+├── index.html
+└── pages/
+```
+
+### 8.1 README 约束
+
+`README.md` 至少包含：
+
+- 对应 spec 路径
+- 对应 plan 路径
+- 本 feature 的目标
+- 使用到的母版列表
+- 页面入口清单
+
+建议结构：
+
+```md
+# <feature title>
+
+## Related Docs
+- Spec: /docs/specs/YYYY-MM-DD-<slug>-design.md
+- Plan: /docs/plans/YYYY-MM-DD-<slug>.md
+
+## Purpose
+...
+
+## Master Pages Used
+- /prototypes/masters/list-page/
+- /prototypes/masters/flow-editor/
+
+## Pages
+- index.html
+- pages/...
+```
+
+### 8.2 CHANGELOG 约束
+
+`CHANGELOG.md` 只记录轻量里程碑，例如：
+
+- 初始化需求目录
+- 新增页面
+- 回刷某类母版
+
+不承担设计文档职责。
+
+## 9. 首个 Feature：`bkflow-engine-admin-prototype-overhaul`
+
+首个 feature 直接覆盖整个 `bkflow_engine_admin` 原型重建。
+
+目录建议：
+
+```text
+prototypes/features/bkflow-engine-admin-prototype-overhaul/
+├── README.md
+├── CHANGELOG.md
+├── index.html
+└── pages/
+    ├── space/
+    ├── system/
+    └── plugin/
+```
+
+### 9.1 页面清单
+
+#### `pages/space/`
+
+- `template-list.html`
+- `flow-view.html`
+- `flow-edit.html`
+- `flow-debug.html`
+- `task-list.html`
+- `debug-task-list.html`
+- `task-detail-complete.html`
+- `task-detail-failed.html`
+- `decision-list.html`
+- `decision-editor.html`
+- `space-config.html`
+- `credential-list.html`
+- `label-list.html`
+- `statistics-exception.html`
+
+#### `pages/system/`
+
+- `space-config-list.html`
+- `module-config-list.html`
+
+#### `pages/plugin/`
+
+- `plugin-list.html`
+
+### 9.2 页面覆盖原则
+
+这批页面需尽量和真实 BKFlow 审计结论一一对应，重点覆盖：
+
+- 流程编辑页的深度交互
+- 任务详情页的运行态信息
+- 调试执行链路
+- 列表页的真实操作组合
+- 异常态与空态
+
+## 10. 同步规则
+
+### 10.1 母版优先
+
+同步规则采用“母版优先”：
+
+1. feature 页面落地前，先识别要用哪些母版。
+2. 如果母版能力不足，先补母版。
+3. 再基于更新后的母版生成 feature 页面。
+
+### 10.2 Feature 不是长期真源
+
+`features/<slug>/` 用于承接实际需求交付，但不作为长期页面标准定义来源。  
+任何可复用结构最终都要回到 `masters/`。
+
+### 10.3 examples 不参与同步
+
+`examples/` 只用于说明原型工具如何用，不再承担业务页面演进职责。
+
+## 11. 迁移策略
+
+迁移按照“先立新结构，再迁旧内容，最后删旧目录”的顺序进行。
+
+### 11.1 首轮保留
+
+以下内容首轮尽量原地保留，降低风险：
+
+- `assets/`
+- `serve.py`
+- `examples/component-showcase.html`
+
+### 11.2 示例页迁移
+
+| 旧文件 | 新去向 |
+|--------|--------|
+| `examples/list-page.html` | `masters/list-page/template.html` |
+| `examples/flow-edit.html` | `masters/flow-editor/template.html` |
+| `examples/task-detail.html` | `masters/task-detail/template.html` |
+| `examples/form-slider.html` | `masters/overlays/sidesliders.html` |
+| `examples/detail-page.html` | 拆分吸收或淘汰 |
+| `examples/tab-page.html` | 拆分吸收或淘汰 |
+| `examples/composite-page.html` | 拆分吸收或淘汰 |
+
+### 11.3 历史 output 迁移
+
+历史页面迁移规则：
+
+- 有明确主题和延续价值的，迁入对应 `features/<slug>/`
+- 暂时找不到明确归属的，迁入 `features/_legacy/<slug>/`
+
+建议首批迁移：
+
+- `output/sops-open-plugin-*.html` -> `features/sops-open-plugin/`
+- `output/space-variable-manage.html` -> `features/space-variable-manage/`
+- `output/node-output-viewer-proposal-v1.html` -> `features/node-output-viewer/`
+
+## 12. 实施任务拆分
+
+建议拆成 7 个任务顺序推进：
+
+### Task 01：目录骨架重构
+
+- 建立 `masters/`、`features/`、新 `examples/`
+- 调整 `README.md`
+- 迁移基础资源引用
+
+### Task 02：共享壳子与浮层体系
+
+- 建立 `_shared/`
+- 建立 `overlays/`
+- 抽出 `space / system / plugin` 三套导航骨架
+
+### Task 03：中复杂度母版
+
+- `list-page`
+- `config-page`
+- `engine-panel`
+- `decision-editor`
+
+### Task 04：流程编辑深度母版
+
+- `flow-editor`
+- 两段式保存
+- 节点抽屉 / 全局变量 / 发布
+
+### Task 05：任务详情深度母版
+
+- `task-detail`
+- 成功态 / 失败态
+- 日志与快照视图
+
+### Task 06：首个 feature 落地
+
+- 完成 `bkflow-engine-admin-prototype-overhaul`
+- 用母版拼出整套 `space / system / plugin` 页面
+
+### Task 07：历史内容归档与清理
+
+- 清理旧 `output/`
+- 将历史原型归位到 `features/` 或 `_legacy/`
+- 收口旧示例页职责
+
+## 13. 完成标准
+
+### 13.1 目录治理
+
+- `prototypes/` 新结构落地
+- 扁平 `output/` 不再作为主产出目录
+- 任意 feature 目录都具备 `README.md`、`CHANGELOG.md`、`index.html`
+
+### 13.2 母版能力
+
+- 首批母版均可单独预览
+- `flow-editor` 与 `task-detail` 明确分离
+- 母版不是空骨架，而是带真实状态示例
+
+### 13.3 首个 feature
+
+- `features/bkflow-engine-admin-prototype-overhaul/` 能覆盖：
+  - 空间管理
+  - 系统管理
+  - 我的插件
+- 打开 `index.html` 能浏览整套原型
+
+### 13.4 真实交互还原
+
+- 流程编辑页必须覆盖：
+  - 画布
+  - 节点工具条
+  - 配置抽屉
+  - 全局变量
+  - 两段式保存
+  - 发布弹窗
+- 任务详情页必须覆盖：
+  - 执行态页头
+  - 模板回链
+  - 执行记录
+  - 配置快照
+  - 操作历史
+  - 调用日志
+- 调试执行链路必须体现：
+  - Mock 数据配置
+  - 执行前确认
+  - 成功或异常态
+
+## 14. 风险与约束
+
+1. `运营统计` 在当前 `stag` 环境下未稳定渲染，因此首轮原型应保留异常态页面，不应伪造成正常列表页。
+2. 调试执行链路在某些路径下会出现全局异常弹层，原型需要明确覆盖异常路径。
+3. 当前工作区已有较多未归类历史文件，因此迁移过程中应避免一次性硬删，优先完成新结构落地后再清理旧目录。
diff --git a/docs/specs/2026-04-22-prototype-showcase-homepage-design.md b/docs/specs/2026-04-22-prototype-showcase-homepage-design.md
new file mode 100644
index 0000000000..987d5e8a0d
--- /dev/null
+++ b/docs/specs/2026-04-22-prototype-showcase-homepage-design.md
@@ -0,0 +1,385 @@
+# Prototype Showcase Homepage Design
+
+> 日期：2026-04-22
+> 状态：Draft（方案已确认，待书面审阅）
+> 目标：将 `prototypes/` 根首页从“URL 路径列表”升级为面向评审与浏览的中文原型展厅首页
+
+## 1. 背景
+
+当前 `prototypes/serve.py` 在根路径 `/` 返回的是一个按 `masters / features / examples` 分组的 HTML 路径列表。它已经满足了“能打开页面”的最低要求，但在原型工具已经完成目录重构之后，这种入口暴露出三个明显问题：
+
+1. **目录感太强**
+   首页首先呈现的是文件路径，而不是原型本身的价值、范围和页面特征。对评审、产品、设计或第一次进入工具的人来说，理解成本偏高。
+2. **与 feature 目录模型不匹配**
+   新版目录已经明确采用 `masters/` 作为长期母版库、`features/<slug>/` 作为需求级交付目录，但首页没有把 `feature` 作为主入口来表达，仍然停留在“静态文件浏览器”层面。
+3. **观感落差明显**
+   `features/bkflow-engine-admin-prototype-overhaul/index.html` 已经具备较完整的中文标题、卡片分组和展厅式观感，而工具首页仍是默认列表风格，造成入口质量和 feature 内页质量不一致。
+
+用户期望首页更接近 Figma 社区、Codesign 一类“可浏览的作品展厅”，但仍要保留 BKFlow 原型工具的可维护性和目录治理能力。
+
+## 2. 设计目标
+
+本次首页改造的目标如下：
+
+1. **首页先表达作品，而不是路径**
+   用户进入后先看到“有哪些原型交付”，再决定进入哪一组页面。
+2. **以 `features/` 为首页主角**
+   首页优先服务成套需求原型浏览，`masters` 与 `examples` 保留但弱化。
+3. **提供中文化展示信息**
+   首页应展示中文标题、中文摘要、中文标签与中文状态，不能要求用户通过 slug 或路径推断含义。
+4. **保留轻量维护成本**
+   不引入真实截图流水线；首页使用代码生成的封面卡片和轻量元数据即可接入新 feature。
+5. **继续兼容当前静态工具链**
+   保持 `serve.py + HTML/CSS/JS` 的零 Node、零构建模式，不引入新的运行时依赖。
+
+## 3. 非目标
+
+本次设计明确不做以下事情：
+
+1. 不把首页改造成完整的原型管理后台。
+2. 不引入真实页面截图生成、存储、同步机制。
+3. 不改变 `features/<slug>/index.html` 作为 feature 内部入口页的职责。
+4. 不要求 `masters/`、`examples/` 也拥有与 `features/` 同等级的首页视觉权重。
+5. 不引入数据库、服务端模板引擎或前端框架。
+
+## 4. 方案选型
+
+围绕首页的表达方式，评估三种方向：
+
+| 方案 | 思路 | 优点 | 缺点 |
+|------|------|------|------|
+| **A. Feature 展厅首页** | 首页以 `feature` 大卡片为主，下方辅以代表页面与资源区 | 最符合“作品展厅”目标，同时保持目录治理关系 | 需要补充 feature 元数据契约 |
+| B. 纯页面画廊 | 首页直接铺开所有具体页面卡片 | 观感最强，像设计稿画廊 | 页面一多就会失控，弱化 feature 组织 |
+| C. 工作台式首页 | Feature、masters、examples 平级展示 | 信息完整 | 仍然偏内部工具，不像展厅 |
+
+**最终选择方案 A。**
+
+选择理由：
+
+1. 用户明确希望首页更像“展厅”，而不是“目录页”。
+2. `features/` 已经是新版原型组织的主轴，首页应强化而不是绕开这条主线。
+3. 方案 A 能兼顾观感与可维护性，不会因为追求画廊效果而打散 `spec / plan / feature` 的绑定关系。
+
+## 5. 总体设计
+
+首页保持由 `prototypes/serve.py` 在 `/` 动态生成，但生成结果不再是简单列表，而是一个中文化的原型展厅首页。整体信息架构分为 4 层：
+
+### 5.1 Hero 首屏
+
+首页顶部为展厅首屏，职责是建立第一印象和主导航意图。
+
+应包含：
+
+- 中文主标题，例如“BKFlow 原型展厅”
+- 一句中文副标题，说明这是“按需求组织的高保真交互原型入口”
+- 3 组以内的关键统计信息，例如：
+  - Feature 数量
+  - 页面总数
+  - 母版数量
+- 一个主操作按钮，例如“浏览最新原型”
+- 一个次级按钮或锚点，例如“查看工具资源”
+
+Hero 的角色是“告诉用户这是什么”，而不是“立即列路径”。
+
+### 5.2 Feature 展厅主区域
+
+首页主体是 `features/` 的大卡片展区，每张卡片代表一个 `features/<slug>/` 目录。
+
+每张卡片必须包含：
+
+- 中文标题
+- 中文摘要
+- 状态标签
+- 页面数量
+- 引用母版数量（如果有）
+- 设计化封面
+- 主按钮“查看这组原型”
+
+卡片整体可点击进入 feature 入口页，但仍保留按钮以降低理解成本。
+
+### 5.3 代表页面预览区
+
+在 feature 主区域之后，展示跨 feature 挑选出来的代表页面预览卡片。其目的不是替代 feature 内页，而是让用户快速建立“这套原型大概长什么样”的感知。
+
+每张预览卡片应展示：
+
+- 页面中文名
+- 一句话摘要
+- 页面类型标签，如“流程编辑”“任务详情”“列表页”
+- 所属 feature
+- 对应入口链接
+
+缩略图不使用真实截图，而是采用代码生成的抽象页面封面。
+
+### 5.4 工具资源次级区
+
+`masters/`、`examples/`、`README` 等工具资源放在首页底部次级区域，以轻量卡片或简短入口列表呈现。
+
+该区域职责是：
+
+- 为维护者保留入口
+- 弱化目录信息对首页主视觉的干扰
+- 避免 `masters / examples` 与 `features` 在首页争夺同一层级
+
+## 6. Feature 卡片设计
+
+Feature 卡片采用 `封面 + 信息 + 行动` 三层结构。
+
+### 6.1 封面层
+
+封面不是页面截图，而是代码生成的设计化主题卡面。封面用于表达这组原型的大致气质，而不是精确复刻某个页面。
+
+首批支持的封面主题建议包括：
+
+- `flow-editor`
+- `task-detail`
+- `list-management`
+- `config-panel`
+- `mixed-admin`
+
+封面可由几种稳定的抽象元素组合而成，例如：
+
+- 顶部操作条
+- 左侧列表栏
+- 中央画布/表格区
+- 右侧抽屉
+- 状态徽标或节点块
+
+这样可以保证：
+
+- 没有截图维护成本
+- 风格统一
+- 新 feature 只需声明主题即可接入
+
+### 6.2 信息层
+
+Feature 卡片的信息层全部以中文展示为主，slug 只在次要位置存在，或不在首页直接展示。
+
+推荐字段：
+
+- `title`：中文标题
+- `summary`：一句话说明覆盖范围
+- `status`：例如“可评审”“建设中”“已归档”
+- `tags`：如“流程编辑”“任务详情”“系统配置”
+- `pageCount`
+- `masterCount`
+- `updatedAt`
+
+### 6.3 行动层
+
+推荐为每张卡片提供：
+
+- 主按钮：`查看这组原型`
+- 次按钮：`查看代表页面`
+
+卡片 hover 时可以增强按钮可见性，但不应隐藏所有主要行动，避免桌面端与移动端体验差异过大。
+
+## 7. 数据来源设计
+
+首页数据采用 **自动扫描 + 轻量元数据** 的双层模式。
+
+### 7.1 自动扫描层
+
+`serve.py` 继续负责扫描以下目录：
+
+- `prototypes/features/`
+- `prototypes/masters/`
+- `prototypes/examples/`
+
+自动收集的事实数据包括：
+
+- feature 数量
+- 页面数量
+- 每个 feature 的 HTML 页面清单
+- 最近修改时间
+- `masters` 与 `examples` 的可访问入口
+
+这层只负责客观事实，不承载人工展示文案。
+
+### 7.2 轻量元数据层
+
+每个 `features/<slug>/` 目录新增一个轻量元数据文件：
+
+- `feature.meta.json`
+
+该文件只承载首页展示需要的人类可读信息，不替代 `README.md`。
+
+建议结构如下：
+
+```json
+{
+  "title": "BKFlow 引擎管理后台原型重构",
+  "summary": "覆盖 Space / System / Plugin 三个入口，包含流程、任务、决策与配置链路。",
+  "status": "可评审",
+  "tags": ["流程编辑", "任务详情", "系统配置"],
+  "coverTheme": "mixed-admin",
+  "order": 10,
+  "featuredPages": [
+    {
+      "path": "pages/space/flow-edit.html",
+      "title": "流程编辑页",
+      "summary": "画布编排、节点抽屉与两段式保存。",
+      "pageType": "流程编辑"
+    },
+    {
+      "path": "pages/space/task-detail-complete.html",
+      "title": "任务详情页",
+      "summary": "执行状态、节点观察和日志查看。",
+      "pageType": "任务详情"
+    }
+  ]
+}
+```
+
+### 7.3 为什么不用硬解析 README
+
+虽然 `README.md` 已经存在并包含 feature 描述，但首页不应依赖 Markdown 文本解析来获得展示信息，原因如下：
+
+1. README 的职责偏向说明与追踪，不是稳定数据接口。
+2. Markdown 结构容易在人工编辑时漂移。
+3. 首页生成逻辑需要稳定、可测试、低歧义的字段源。
+
+因此推荐把 `README.md` 视为文档，把 `feature.meta.json` 视为首页数据契约。
+
+## 8. 降级与容错策略
+
+首页需要对不完整数据保持可用，而不是在某个 feature 缺字段时整体失效。
+
+### 8.1 缺少 `feature.meta.json`
+
+如果某个 feature 目录没有元数据文件：
+
+- 用 slug 生成一个临时标题
+- `summary` 使用默认占位文案，如“尚未补充首页摘要”
+- `status` 标记为“待补充”
+- `coverTheme` 使用默认主题 `mixed-admin`
+- `featuredPages` 默认选取前 2 个代表性 HTML 页面
+
+### 8.2 元数据中的页面路径无效
+
+如果 `featuredPages.path` 指向不存在的页面：
+
+- 跳过该页面卡片
+- 不影响首页其他区域渲染
+
+### 8.3 无 feature 数据
+
+如果 `features/` 下没有任何有效 feature：
+
+- 首页仍显示 Hero 区
+- 主区域显示友好的空状态，而不是空白页
+- 工具资源区照常显示
+
+### 8.4 `masters/examples` 缺少说明信息
+
+首页底部资源区可以退化为固定入口卡片，不依赖复杂元数据。
+
+## 9. 交互设计
+
+首页交互应保持轻量，但要明显区别于纯静态目录页。
+
+### 9.1 搜索
+
+提供一个首页搜索框，支持按以下字段做前端过滤：
+
+- feature 中文标题
+- slug
+- tags
+- featured page 标题
+
+搜索不需要服务端参与，只需在浏览器端根据已渲染的数据属性过滤卡片。
+
+### 9.2 筛选
+
+首页提供轻量筛选项，首版建议支持：
+
+- 状态
+- 页面类型标签
+
+筛选控件应保持简洁，避免把首页做成复杂后台。
+
+### 9.3 最近更新
+
+首页 Hero 下方或 Feature 区顶部可增加“最近更新”提示，基于自动扫描得到的修改时间排序。
+
+它的作用是帮助用户优先看到刚更新的原型，而不是成为一个独立页面列表。
+
+### 9.4 悬浮反馈
+
+Feature 卡片 hover 时建议提供：
+
+- 卡片轻微抬升
+- 边框或投影增强
+- 封面元素轻微位移
+- 行动按钮更明显
+
+但动画需保持克制，不做营销化或过重的过场。
+
+## 10. 视觉方向
+
+首页整体风格采用 **“轻展厅 + 工具理性”** 的方向。
+
+具体原则：
+
+1. 背景不使用纯白文件页，而采用浅色渐变、轻网格或弱光斑。
+2. Hero 区需要明显的品牌感，但不做营销站式夸张视觉。
+3. Feature 卡片尺寸偏大、中文标题清晰、层级明显。
+4. 路径与 slug 退到弱层级，只保留给维护者识别。
+5. `masters / examples` 入口使用较轻的视觉权重，作为资源区存在。
+
+## 11. 实现边界
+
+虽然本文件不进入实现细节，但需要提前定义几个边界，避免后续实现偏航：
+
+1. **首页继续由 `serve.py` 生成**
+   不新建一个固定的 `index.html` 作为首页真源。
+2. **允许引入新的共享静态资源**
+   如有必要，可新增专门的首页 CSS / JS 资源文件放在 `prototypes/assets/` 下，用于承接展厅视觉和前端筛选逻辑。
+3. **不引入构建链**
+   所有视觉与交互仍保持在静态 HTML/CSS/JS 范围内。
+4. **不依赖真实截图**
+   封面一律由代码生成。
+
+## 12. 测试与验收
+
+首页改造完成后，至少需要覆盖以下验证点：
+
+### 12.1 结构测试
+
+- 根首页包含 Hero、Feature 区、代表页面区、资源区
+- 首页不再输出简单的路径列表结构作为主布局
+- `features` 成为首页主区域而非次级列表
+
+### 12.2 元数据解析测试
+
+- 能正确读取 `feature.meta.json`
+- 缺少元数据时能回退到默认展示
+- `featuredPages` 无效路径不会导致渲染失败
+
+### 12.3 文案与统计测试
+
+- 首页显示中文标题和中文摘要
+- 页面数、feature 数等统计值与扫描结果一致
+- 最近更新时间或最近更新排序逻辑正确
+
+### 12.4 交互测试
+
+- 搜索能过滤 feature 卡片
+- 状态/标签筛选能联动隐藏和显示卡片
+- 卡片链接能正确跳转到 feature 入口页或代表页
+
+### 12.5 兼容性测试
+
+- 桌面端下卡片布局和 Hero 区正常
+- 移动端下卡片能单列阅读，不出现严重溢出
+
+## 13. 成功标准
+
+本次首页改造完成后，应达到以下结果：
+
+1. 打开 `http://localhost:9080/` 时，用户第一眼看到的是中文原型展厅，而不是文件索引页。
+2. 用户无需读 URL 路径，就能理解每组 feature 的用途和覆盖范围。
+3. 新增 feature 只需补一个目录和一份轻量元数据，即可被首页自动纳入展厅。
+4. `masters` 与 `examples` 仍然可访问，但不会抢占首页主视觉焦点。
+5. 工具仍保持零构建、可本地运行、可测试的静态模式。
+
diff --git a/prototypes/README.md b/prototypes/README.md
new file mode 100644
index 0000000000..34d0965a58
--- /dev/null
+++ b/prototypes/README.md
@@ -0,0 +1,114 @@
+# BKFlow 原型工具包
+
+## 简介
+
+BKFlow 原型工具包是一套**零 Node 依赖**的静态 HTML/CSS/JS 工具：用蓝鲸风格的设计系统（`bkflow-prototype.css`）和声明式交互（`bkflow-prototype.js`），在浏览器里快速做出可点击、可演示的页面原型。适合后端、产品或任何需要在**不搭前端工程**的前提下产出高保真交互稿的人；当前推荐把长期页面类型沉淀到 `masters/`，把单次需求页面放到 `features/`，把历史扁平页面迁入 `features/_legacy/`，而 `examples/` 只保留组件参考。根路径 `/` 是中文「BKFlow 原型展厅」首页，不再把根首页描述成简单目录索引。
+
+## 蓝鲸设计规范参考
+
+设计新原型或大幅调整页面时，应优先参考蓝鲸标准设计规范。若当前 AI 会话能访问 `bkui-knowledge`，可读取相关页面模式、组件 API 和交互示例作为设计输入；若无法访问，则以本仓库的 `examples/component-showcase.html`、`masters/` 母版和真实前端相近页面为基线。
+
+这里的参考只用于决定页面结构、组件选择、交互模式和状态表达。最终产物仍然落在 `features/` 或 `masters/`，使用本目录 `assets/` 下的静态 CSS/JS；不要恢复旧的 `output/`、`metadata/`、`cache/` 生成产物目录，也不要引入 Vue/React、bkui-vue CDN 或 npm 构建链路。
+
+## 快速开始
+
+1. **启动预览服务器**：`cd prototypes && python serve.py`
+2. **在 Cursor 中触发**：对 AI 说「做一个 xxx 的原型」或遵循 `.ai/skills/prototype-generator/SKILL.md`
+3. **浏览器预览**：打开 `http://localhost:9080`（根路径就是展厅首页，优先展示 `features/`）
+
+## 首页展示来源
+
+- `feature.meta.json` 是仓库内 active feature 的首页展示来源；运行时仍保留容错回退，所以缺失或损坏时会退到目录中的可展示 HTML 页面。
+- `title`、`summary`、`status`、`tags`、`coverTheme`、`order` 和 `featuredPages` 会共同决定首页卡片与代表页。
+- `README.md` 负责背景说明，HTML 页面负责实际预览。
+- 当 feature 缺少 `feature.meta.json` 时，首页会回退到目录中的可展示 HTML 页面。
+
+### 首页元数据
+
+```json
+{
+  "title": "页面标题",
+  "summary": "一句话简介",
+  "status": "可评审",
+  "tags": ["流程编辑", "任务详情"],
+  "coverTheme": "mixed-admin",
+  "order": 10,
+  "featuredPages": [
+    {
+      "path": "pages/space/flow-edit.html",
+      "title": "流程编辑页",
+      "summary": "画布编排和节点抽屉",
+      "pageType": "流程编辑"
+    }
+  ]
+}
+```
+
+首页只认这些元数据字段来排序、分组和挑选代表页，不需要再回头依赖旧的扁平首页目录认知。
+
+## 目录结构
+
+| 路径 | 说明 |
+|------|------|
+| `assets/bkflow-prototype.css` | 设计系统样式（Phase 1 起覆盖核心组件） |
+| `assets/bkflow-prototype.js` | 声明式交互（`data-*` 属性驱动） |
+| `assets/icons/` | 图标等静态资源（如 logo） |
+| `masters/` | 长期页面类型真源，按母版类别组织 |
+| `masters/_shared/` | 共享壳子与导航骨架，供各类母版复用 |
+| `features/` | 单次需求目录，承接某个 slug 下的成套页面 |
+| `features/_legacy/` | 历史扁平原型的过渡归档区 |
+| `examples/` | 页面模式示例，仅保留 `component-showcase.html` 组件参考 |
+| `serve.py` | 基于标准库的静态服务与简单自动刷新 |
+
+## 组件 CSS Class 速查表（Phase 1）
+
+| 组件 | 常用 class |
+|------|------------|
+| **Button** | `.bk-button`、`.bk-button-primary`、`.bk-button-success`、`.bk-button-warning`、`.bk-button-danger`、`.bk-button-text`、`.bk-button-small`、`.bk-button-large`、`.bk-button-disabled` |
+| **Tag** | `.bk-tag`、`.bk-tag-success`、`.bk-tag-warning`、`.bk-tag-danger`、`.bk-tag-info` |
+| **Input** | `.bk-input`、`.bk-textarea`、`.bk-input-small`、`.bk-input-large`、`.bk-input-group`、`.bk-input-group-addon` |
+| **Search** | `.bk-search-input` |
+| **Switcher** | `.bk-switcher`、`.is-checked` |
+| **Select** | `.bk-select`、`.bk-select-trigger`、`.bk-select-placeholder`、`.bk-select-dropdown`、`.bk-select-option`、`.is-show`、`.is-selected`、`.is-disabled` |
+| **Form** | `.bk-form`、`.bk-form-item`、`.bk-form-label`、`.bk-form-content`、`.bk-form-error`、`.bk-form-vertical`、`.is-required`、`.is-error` |
+| **Table** | `.bk-table`、`.bk-table-sort`、`.bk-table-empty`、`.bk-table-action`、表头 `.is-asc` / `.is-desc` |
+| **Pagination** | `.bk-pagination`、`.bk-pagination-item`、`.bk-pagination-total`、`.active` |
+| **Tab** | `.bk-tab`、`.bk-tab-header`、`.bk-tab-item`、`.bk-tab-panel`、`.active`、`[hidden]` 控制面板 |
+| **Card** | `.bk-card`、`.bk-card-header`、`.bk-card-body`、`.bk-card-footer` |
+| **Dialog** | `.bk-dialog`、`.bk-dialog-mask`、`.bk-dialog-content`、`.bk-dialog-header`、`.bk-dialog-body`、`.bk-dialog-footer`、`.bk-dialog-close`、`.is-show` |
+| **Sideslider** | `.bk-sideslider`、`.bk-sideslider-mask`、`.bk-sideslider-content`、`.bk-sideslider-header`、`.bk-sideslider-body`、`.bk-sideslider-footer`、`.bk-sideslider-close`、`.is-show` |
+| **Navigation / 布局** | `.bk-layout`、`.bk-navigation`、`.bk-navigation-header`、`.bk-navigation-menu`、`.bk-navigation-menu-item`、`.bk-content`、`.active` |
+| **工具栏与扩展布局** | `.bk-toolbar`、`.bk-toolbar-left`、`.bk-toolbar-right`、`.bk-aside`、`.bk-split`、`.bk-info-card`、`.bk-info-card-item`、`.bk-info-card-label`、`.bk-info-card-value` |
+| **Breadcrumb** | `.bk-breadcrumb`、`.bk-breadcrumb-item` |
+| **Loading** | `.bk-loading` |
+| **Exception** | `.bk-exception` |
+| **Grid** | `.bk-grid-row`、`.bk-grid-col-1` … `.bk-grid-col-24` |
+
+更完整的示例见 `examples/component-showcase.html`。
+
+## 交互 `data-*` 属性速查表
+
+| 属性 | 用法 | 效果 |
+|------|------|------|
+| `data-open` | `data-open="浮层元素 id"` | 打开对应侧滑或弹窗（需与 `.bk-sideslider` / `.bk-dialog` 等结构配合） |
+| `data-close` | 置于关闭按钮等元素上 | 关闭当前侧滑/弹窗 |
+| `data-tab` | `data-tab="面板 id"` | 切换 Tab 对应面板显示 |
+| `data-sortable` | 表头 `th` 上声明 | 点击表头列切换升序/降序排序 |
+| `data-filter` | 输入框等，`data-filter="表格 id"` | 按输入内容过滤表格行 |
+| `data-collapse` | `data-collapse="面板 id"` | 折叠/展开指定面板 |
+| `data-dropdown` | `data-dropdown="菜单 id"` | 展开/收起下拉菜单 |
+| `data-required` | 表单项控件上 | 提交时校验必填，错误时展示表单错误态 |
+| `data-pattern` | `data-pattern="正则字符串"` | 提交时用正则校验值 |
+| `data-href` | `data-href="其它页面.html"` | 原型页间跳转 |
+| `data-notify` | `data-notify="提示文案"` | 点击后弹出通知提示 |
+| `data-step` | `data-step="步骤面板 id"` | 步骤/向导面板切换 |
+
+## 远程开发
+
+通过 SSH 连接远端开发机时，把本机浏览器指向远端 `serve.py` 端口，可在本地执行：
+
+```bash
+ssh -L 9080:localhost:9080 your-user@your-dev-host
+```
+
+然后在本地浏览器访问 `http://localhost:9080` 即可预览远端 `prototypes` 服务。
diff --git a/prototypes/assets/bkflow-prototype.css b/prototypes/assets/bkflow-prototype.css
new file mode 100644
index 0000000000..b27aa35bf8
--- /dev/null
+++ b/prototypes/assets/bkflow-prototype.css
@@ -0,0 +1,2363 @@
+/* ============================================================
+   BKFlow Prototype Toolkit — CSS Design System
+   All values use CSS custom properties for bk-magic-vue v3 theming.
+   ============================================================ */
+
+/* ----------------------------------------------------------
+   Part 1: CSS Variables + Reset + Base Typography
+   ---------------------------------------------------------- */
+
+:root {
+  /* Primary */
+  --bk-primary: #3a84ff;
+  --bk-primary-hover: #699df4;
+  --bk-primary-active: #2b6ede;
+  --bk-success: #2dcb56;
+  --bk-warning: #f8b53f;
+  --bk-danger: #ff5757;
+
+  /* Text */
+  --bk-text-primary: #333333;
+  --bk-text-secondary: #666666;
+  --bk-text-tertiary: #999999;
+  --bk-text-disabled: #cfcccc;
+
+  /* Background */
+  --bk-bg-default: #ffffff;
+  --bk-bg-main: #f5f5f5;
+  --bk-bg-body: #f5f7fa;
+  --bk-bg-hover: #edf4fd;
+  --bk-bg-nav: #f0f7ff;
+  --bk-bg-table-header: #fafbfc;
+
+  /* Border */
+  --bk-border: #dcdee5;
+  --bk-border-form: #c3cdd7;
+  --bk-border-light: #ebebeb;
+
+  /* Radius */
+  --bk-radius: 2px;
+  --bk-radius-md: 4px;
+  --bk-radius-lg: 6px;
+
+  /* Shadow */
+  --bk-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.09);
+  --bk-shadow-lg: 0 0 20px 0 rgba(0, 0, 0, 0.15);
+
+  /* Font */
+  --bk-font: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+  --bk-font-size: 14px;
+  --bk-font-size-sm: 12px;
+  --bk-font-size-lg: 16px;
+  --bk-font-size-xl: 20px;
+
+  /* Layout */
+  --bk-header-height: 52px;
+  --bk-nav-width: 260px;
+  --bk-nav-bg: #1f2738;
+  --bk-header-bg: #182132;
+  --bk-min-width: 1366px;
+
+  /* Sidebar */
+  --bk-nav-text: #96a2b9;
+  --bk-nav-text-active: #ffffff;
+  --bk-nav-item-height: 40px;
+  --bk-nav-space-bg: #464d60;
+  --bk-nav-space-color: #dcdee5;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: var(--bk-font-size);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--bk-font);
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-primary);
+  background-color: var(--bk-bg-body);
+  line-height: 1.5;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--bk-text-primary);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+h1 { font-size: var(--bk-font-size-xl); }
+h2 { font-size: var(--bk-font-size-lg); }
+h3 { font-size: var(--bk-font-size); }
+
+a {
+  color: var(--bk-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--bk-primary-hover);
+}
+
+/* ----------------------------------------------------------
+   Part 2: Button
+   ---------------------------------------------------------- */
+
+.bk-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 15px;
+  font-size: var(--bk-font-size);
+  font-family: var(--bk-font);
+  line-height: 1;
+  color: var(--bk-text-primary);
+  background-color: var(--bk-bg-default);
+  border: 1px solid var(--bk-border);
+  border-radius: var(--bk-radius);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  user-select: none;
+  vertical-align: middle;
+}
+
+.bk-button:hover {
+  color: var(--bk-primary);
+  border-color: var(--bk-primary);
+  background-color: var(--bk-bg-hover);
+}
+
+.bk-button:active {
+  color: var(--bk-primary-active);
+  border-color: var(--bk-primary-active);
+}
+
+.bk-button + .bk-button {
+  margin-left: 8px;
+}
+
+.bk-button-primary {
+  color: var(--bk-bg-default);
+  background-color: var(--bk-primary);
+  border-color: var(--bk-primary);
+}
+
+.bk-button-primary:hover {
+  color: var(--bk-bg-default);
+  background-color: var(--bk-primary-hover);
+  border-color: var(--bk-primary-hover);
+}
+
+.bk-button-primary:active {
+  color: var(--bk-bg-default);
+  background-color: var(--bk-primary-active);
+  border-color: var(--bk-primary-active);
+}
+
+.bk-button-success {
+  color: var(--bk-bg-default);
+  background-color: var(--bk-success);
+  border-color: var(--bk-success);
+}
+
+.bk-button-success:hover {
+  opacity: 0.85;
+}
+
+.bk-button-success:active {
+  opacity: 1;
+}
+
+.bk-button-warning {
+  color: var(--bk-bg-default);
+  background-color: var(--bk-warning);
+  border-color: var(--bk-warning);
+}
+
+.bk-button-warning:hover {
+  opacity: 0.85;
+}
+
+.bk-button-warning:active {
+  opacity: 1;
+}
+
+.bk-button-danger {
+  color: var(--bk-bg-default);
+  background-color: var(--bk-danger);
+  border-color: var(--bk-danger);
+}
+
+.bk-button-danger:hover {
+  opacity: 0.85;
+}
+
+.bk-button-danger:active {
+  opacity: 1;
+}
+
+.bk-button-text {
+  color: var(--bk-primary);
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.bk-button-text:hover {
+  color: var(--bk-primary-hover);
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.bk-button-text:active {
+  color: var(--bk-primary-active);
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.bk-button-small {
+  height: 26px;
+  padding: 0 11px;
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-button-large {
+  height: 38px;
+  padding: 0 19px;
+}
+
+.bk-button[disabled],
+.bk-button-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ----------------------------------------------------------
+   Part 3: Tag
+   ---------------------------------------------------------- */
+
+.bk-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: var(--bk-font-size-sm);
+  line-height: 1.5;
+  border-radius: var(--bk-radius);
+  border: 1px solid var(--bk-border);
+  color: var(--bk-text-primary);
+  background-color: var(--bk-bg-main);
+  vertical-align: middle;
+}
+
+.bk-tag-success {
+  color: var(--bk-success);
+  background-color: #e5f8eb;
+  border-color: #b3ebc4;
+}
+
+.bk-tag-warning {
+  color: #d98e0b;
+  background-color: #fef5e6;
+  border-color: #fce0a8;
+}
+
+.bk-tag-danger {
+  color: var(--bk-danger);
+  background-color: #ffeded;
+  border-color: #ffbcbc;
+}
+
+.bk-tag-info {
+  color: var(--bk-primary);
+  background-color: #e1ecff;
+  border-color: #a3c5fd;
+}
+
+/* ----------------------------------------------------------
+   Part 4: Input + Textarea
+   ---------------------------------------------------------- */
+
+.bk-input {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  font-size: var(--bk-font-size);
+  font-family: var(--bk-font);
+  color: var(--bk-text-primary);
+  background-color: var(--bk-bg-default);
+  border: 1px solid var(--bk-border-form);
+  border-radius: var(--bk-radius);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.bk-input:focus {
+  border-color: var(--bk-primary);
+}
+
+.bk-input::placeholder {
+  color: var(--bk-text-tertiary);
+}
+
+.bk-input[disabled] {
+  background-color: var(--bk-bg-table-header);
+  cursor: not-allowed;
+  color: var(--bk-text-disabled);
+}
+
+.bk-input-small {
+  height: 26px;
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-input-large {
+  height: 38px;
+  font-size: var(--bk-font-size-lg);
+}
+
+.bk-textarea {
+  display: block;
+  width: 100%;
+  min-height: 80px;
+  padding: 6px 10px;
+  font-size: var(--bk-font-size);
+  font-family: var(--bk-font);
+  color: var(--bk-text-primary);
+  background-color: var(--bk-bg-default);
+  border: 1px solid var(--bk-border-form);
+  border-radius: var(--bk-radius);
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.15s ease;
+}
+
+.bk-textarea:focus {
+  border-color: var(--bk-primary);
+}
+
+.bk-textarea::placeholder {
+  color: var(--bk-text-tertiary);
+}
+
+.bk-textarea[disabled] {
+  background-color: var(--bk-bg-table-header);
+  cursor: not-allowed;
+  color: var(--bk-text-disabled);
+}
+
+.bk-input-group {
+  display: flex;
+  align-items: stretch;
+}
+
+.bk-input-group .bk-input {
+  flex: 1;
+  border-radius: 0;
+}
+
+.bk-input-group .bk-input:first-child {
+  border-radius: var(--bk-radius) 0 0 var(--bk-radius);
+}
+
+.bk-input-group .bk-input:last-child {
+  border-radius: 0 var(--bk-radius) var(--bk-radius) 0;
+}
+
+.bk-input-group-addon {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-secondary);
+  background-color: var(--bk-bg-main);
+  border: 1px solid var(--bk-border-form);
+  white-space: nowrap;
+}
+
+.bk-input-group-addon:first-child {
+  border-right: none;
+  border-radius: var(--bk-radius) 0 0 var(--bk-radius);
+}
+
+.bk-input-group-addon:last-child {
+  border-left: none;
+  border-radius: 0 var(--bk-radius) var(--bk-radius) 0;
+}
+
+/* ----------------------------------------------------------
+   Part 5: Form
+   ---------------------------------------------------------- */
+
+.bk-form {
+  font-size: var(--bk-font-size);
+}
+
+.bk-form-item {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.bk-form-label {
+  width: 100px;
+  text-align: right;
+  padding-right: 20px;
+  line-height: 32px;
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-secondary);
+  flex-shrink: 0;
+}
+
+.bk-form-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.bk-form-error {
+  color: var(--bk-danger);
+  font-size: var(--bk-font-size-sm);
+  margin-top: 4px;
+  display: none;
+}
+
+.bk-form-item.is-required .bk-form-label::before {
+  content: "*";
+  color: var(--bk-danger);
+  margin-right: 4px;
+}
+
+.bk-form-item.is-error .bk-input,
+.bk-form-item.is-error .bk-textarea,
+.bk-form-item.is-error .bk-select-trigger {
+  border-color: var(--bk-danger);
+}
+
+.bk-form-item.is-error .bk-form-error {
+  display: block;
+}
+
+.bk-form-vertical .bk-form-item {
+  flex-direction: column;
+}
+
+.bk-form-vertical .bk-form-label {
+  text-align: left;
+  width: auto;
+  padding-right: 0;
+  margin-bottom: 6px;
+}
+
+/* ----------------------------------------------------------
+   Part 6: Search
+   ---------------------------------------------------------- */
+
+.bk-search-input {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 10px 0 32px;
+  font-size: var(--bk-font-size);
+  font-family: var(--bk-font);
+  color: var(--bk-text-primary);
+  background-color: var(--bk-bg-default);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  border: 1px solid var(--bk-border-form);
+  border-radius: var(--bk-radius);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.bk-search-input:focus {
+  border-color: var(--bk-primary);
+}
+
+.bk-search-input::placeholder {
+  color: var(--bk-text-tertiary);
+}
+
+/* ----------------------------------------------------------
+   Part 7: Switcher
+   ---------------------------------------------------------- */
+
+.bk-switcher {
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: #c4c6cc;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  vertical-align: middle;
+  border: none;
+  outline: none;
+  flex-shrink: 0;
+}
+
+.bk-switcher::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: var(--bk-bg-default);
+  transition: left 0.2s ease;
+}
+
+.bk-switcher.is-checked {
+  background-color: var(--bk-primary);
+}
+
+.bk-switcher.is-checked::after {
+  left: 19px;
+}
+
+.bk-switcher[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ----------------------------------------------------------
+   Part 8: Select
+   ---------------------------------------------------------- */
+
+.bk-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.bk-select-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 30px 0 10px;
+  font-size: var(--bk-font-size);
+  font-family: var(--bk-font);
+  color: var(--bk-text-primary);
+  background-color: var(--bk-bg-default);
+  border: 1px solid var(--bk-border-form);
+  border-radius: var(--bk-radius);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s ease;
+  position: relative;
+}
+
+.bk-select-trigger:hover {
+  border-color: var(--bk-primary);
+}
+
+.bk-select-trigger::after {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--bk-text-tertiary);
+  transition: transform 0.2s ease;
+}
+
+.bk-select.is-show .bk-select-trigger::after {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.bk-select-placeholder {
+  color: var(--bk-text-tertiary);
+}
+
+.bk-select-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  margin-top: 4px;
+  background-color: var(--bk-bg-default);
+  border: 1px solid var(--bk-border);
+  border-radius: var(--bk-radius-md);
+  box-shadow: var(--bk-shadow);
+  z-index: 1000;
+  display: none;
+  max-height: 216px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.bk-select-dropdown.is-show {
+  display: block;
+}
+
+.bk-select-option {
+  padding: 6px 12px;
+  line-height: 28px;
+  cursor: pointer;
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-primary);
+  transition: background-color 0.1s ease;
+}
+
+.bk-select-option:hover {
+  background-color: var(--bk-bg-hover);
+}
+
+.bk-select-option.is-selected {
+  color: var(--bk-primary);
+}
+
+.bk-select-option.is-disabled {
+  color: var(--bk-text-disabled);
+  cursor: not-allowed;
+}
+
+.bk-select-option.is-disabled:hover {
+  background-color: transparent;
+}
+
+/* ----------------------------------------------------------
+   Part 9: Table + Pagination
+   ---------------------------------------------------------- */
+
+.bk-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--bk-bg-default);
+}
+
+.bk-table thead {
+  background-color: var(--bk-bg-table-header);
+}
+
+.bk-table th {
+  padding: 12px 16px;
+  text-align: left;
+  font-weight: normal;
+  color: var(--bk-text-secondary);
+  font-size: var(--bk-font-size-sm);
+  border-bottom: 1px solid var(--bk-border);
+}
+
+.bk-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--bk-border-light);
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-primary);
+}
+
+.bk-table tr:hover td {
+  background-color: var(--bk-bg-hover);
+}
+
+.bk-table-empty {
+  text-align: center;
+  color: var(--bk-text-tertiary);
+  height: 280px;
+  vertical-align: middle;
+}
+
+.bk-table-empty td {
+  text-align: center;
+  color: var(--bk-text-tertiary);
+}
+
+.bk-table-sort {
+  cursor: pointer;
+  user-select: none;
+}
+
+.bk-table-sort::after {
+  content: "↕";
+  margin-left: 4px;
+  color: var(--bk-text-disabled);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-table-sort.is-asc::after {
+  content: "↑";
+  color: var(--bk-primary);
+}
+
+.bk-table-sort.is-desc::after {
+  content: "↓";
+  color: var(--bk-primary);
+}
+
+.bk-table-action {
+  color: var(--bk-primary);
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: var(--bk-font-size);
+  padding: 0;
+}
+
+.bk-table-action:hover {
+  color: var(--bk-primary-hover);
+}
+
+.bk-table-action + .bk-table-action {
+  margin-left: 12px;
+}
+
+/* Pagination */
+
+.bk-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 10px 0;
+  gap: 4px;
+}
+
+.bk-pagination-item {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--bk-radius);
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-primary);
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.bk-pagination-item.active {
+  background-color: var(--bk-primary);
+  color: var(--bk-bg-default);
+}
+
+.bk-pagination-item:hover:not(.active) {
+  background-color: var(--bk-bg-hover);
+}
+
+.bk-pagination-total {
+  color: var(--bk-text-secondary);
+  margin-right: auto;
+  font-size: var(--bk-font-size);
+}
+
+/* ----------------------------------------------------------
+   Part 10: Tab + Card
+   ---------------------------------------------------------- */
+
+.bk-tab {
+  font-size: var(--bk-font-size);
+}
+
+.bk-tab-header {
+  display: flex;
+  border-bottom: 1px solid var(--bk-border);
+}
+
+.bk-tab-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  color: var(--bk-text-secondary);
+  position: relative;
+  font-size: var(--bk-font-size);
+  transition: color 0.15s ease;
+  user-select: none;
+}
+
+.bk-tab-item:hover {
+  color: var(--bk-primary);
+}
+
+.bk-tab-item.active {
+  color: var(--bk-primary);
+}
+
+.bk-tab-item.active::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--bk-primary);
+}
+
+.bk-tab-panel {
+  padding: 16px 0;
+}
+
+.bk-tab-panel[hidden] {
+  display: none;
+}
+
+/* Card */
+
+.bk-card {
+  background-color: var(--bk-bg-default);
+  border: 1px solid var(--bk-border-light);
+  border-radius: var(--bk-radius-md);
+  box-shadow: var(--bk-shadow);
+}
+
+.bk-card-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--bk-border-light);
+  font-weight: 600;
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-primary);
+}
+
+.bk-card-body {
+  padding: 16px;
+}
+
+.bk-card-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--bk-border-light);
+}
+
+/* ----------------------------------------------------------
+   Part 11: Dialog + Sideslider
+   ---------------------------------------------------------- */
+
+.bk-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.bk-dialog.is-show {
+  display: flex;
+}
+
+.bk-dialog-mask {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: -1;
+}
+
+.bk-dialog-content {
+  background-color: var(--bk-bg-default);
+  border-radius: var(--bk-radius-lg);
+  max-width: 480px;
+  width: 90%;
+  z-index: 1;
+  box-shadow: var(--bk-shadow-lg);
+}
+
+.bk-dialog-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--bk-border-light);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--bk-font-size-lg);
+  font-weight: 600;
+  color: var(--bk-text-primary);
+}
+
+.bk-dialog-body {
+  padding: 24px;
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-primary);
+}
+
+.bk-dialog-footer {
+  padding: 16px 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.bk-dialog-close {
+  cursor: pointer;
+  font-size: var(--bk-font-size-xl);
+  color: var(--bk-text-tertiary);
+  background: none;
+  border: none;
+  line-height: 1;
+  transition: color 0.15s ease;
+}
+
+.bk-dialog-close:hover {
+  color: var(--bk-text-primary);
+}
+
+/* Sideslider */
+
+.bk-sideslider {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: none;
+}
+
+.bk-sideslider.is-show {
+  display: block;
+}
+
+.bk-sideslider-mask {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.bk-sideslider-content {
+  position: fixed;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 640px;
+  background-color: var(--bk-bg-default);
+  box-shadow: var(--bk-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+}
+
+.bk-sideslider.is-show .bk-sideslider-content {
+  transform: translateX(0);
+}
+
+.bk-sideslider-header {
+  height: var(--bk-header-height);
+  background-color: #313238;
+  color: var(--bk-bg-default);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  justify-content: space-between;
+  flex-shrink: 0;
+  font-size: var(--bk-font-size-lg);
+}
+
+.bk-sideslider-close {
+  cursor: pointer;
+  font-size: var(--bk-font-size-xl);
+  color: rgba(255, 255, 255, 0.8);
+  background: none;
+  border: none;
+  line-height: 1;
+  transition: color 0.15s ease;
+}
+
+.bk-sideslider-close:hover {
+  color: var(--bk-bg-default);
+}
+
+.bk-sideslider-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px 40px;
+}
+
+.bk-sideslider-footer {
+  padding: 16px 40px;
+  border-top: 1px solid var(--bk-border-light);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* ----------------------------------------------------------
+   Part 12: Navigation + Layout Primitives + Helpers
+   ---------------------------------------------------------- */
+
+/* bk-navigation: top header + sidebar dual-layer layout (matches bk-magic-vue) */
+
+.bk-navigation {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--bk-min-width);
+  height: 100vh;
+}
+
+.bk-navigation-header {
+  height: var(--bk-header-height);
+  background-color: var(--bk-header-bg);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  z-index: 100;
+}
+
+.bk-navigation-header-title {
+  width: var(--bk-nav-width);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.bk-navigation-header-title img {
+  height: 26px;
+}
+
+.bk-navigation-header-title span {
+  color: var(--bk-bg-default);
+  font-size: var(--bk-font-size-lg);
+  white-space: nowrap;
+}
+
+.bk-navigation-header-right {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+.bk-navigation-header-nav {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.bk-navigation-header-nav-item {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: var(--bk-nav-text);
+  font-size: var(--bk-font-size);
+  cursor: pointer;
+  transition: color 0.15s ease;
+  white-space: nowrap;
+}
+
+.bk-navigation-header-nav-item:hover {
+  color: var(--bk-nav-text-active);
+}
+
+.bk-navigation-header-nav-item.active {
+  color: var(--bk-nav-text-active);
+}
+
+.bk-navigation-header-nav-item.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--bk-primary);
+}
+
+.bk-navigation-header-user {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--bk-nav-text);
+  font-size: var(--bk-font-size);
+  cursor: pointer;
+}
+
+.bk-navigation-header-user:hover {
+  color: var(--bk-nav-text-active);
+}
+
+.bk-navigation-header-user-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--bk-font-size-sm);
+  color: rgba(255, 255, 255, 0.85);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.bk-user-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  min-width: 140px;
+  background-color: var(--bk-bg-default);
+  border: 1px solid var(--bk-border);
+  border-radius: var(--bk-radius-md);
+  box-shadow: var(--bk-shadow);
+  z-index: 200;
+  padding: 4px 0;
+  list-style: none;
+}
+
+.bk-user-dropdown.is-show {
+  display: block;
+}
+
+.bk-user-dropdown-item {
+  padding: 8px 16px;
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.bk-user-dropdown-item:hover {
+  background-color: var(--bk-bg-hover);
+  color: var(--bk-primary);
+}
+
+/* Sidebar (below header) */
+
+.bk-navigation-wrapper {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.bk-navigation-sidebar {
+  width: var(--bk-nav-width);
+  background-color: var(--bk-nav-bg);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.bk-navigation-space {
+  padding: 12px 8px;
+  flex-shrink: 0;
+}
+
+.bk-navigation-space-select {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  background-color: var(--bk-nav-space-bg);
+  color: var(--bk-nav-space-color);
+  border: none;
+  border-radius: var(--bk-radius);
+  font-size: var(--bk-font-size-sm);
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.bk-navigation-space-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--bk-radius);
+  background-color: var(--bk-primary);
+  color: var(--bk-bg-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.bk-navigation-menu {
+  list-style: none;
+  padding: 0;
+  margin: 4px 0;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.bk-navigation-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: var(--bk-nav-item-height);
+  padding: 0 22px;
+  color: var(--bk-nav-text);
+  cursor: pointer;
+  font-size: var(--bk-font-size);
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.bk-navigation-menu-item:hover {
+  color: var(--bk-nav-text-active);
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.bk-navigation-menu-item.active {
+  color: var(--bk-nav-text-active);
+  background-color: var(--bk-primary);
+  border-radius: 0;
+}
+
+.bk-navigation-menu-icon {
+  font-size: 16px;
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.bk-navigation-footer {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.bk-navigation-collapse {
+  color: var(--bk-nav-text);
+  cursor: pointer;
+  font-size: var(--bk-font-size-lg);
+  background: none;
+  border: none;
+  opacity: 0.6;
+  transition: opacity 0.15s ease;
+}
+
+.bk-navigation-collapse:hover {
+  opacity: 1;
+}
+
+/* Sidebar collapsed state */
+
+.bk-navigation-sidebar.is-collapsed {
+  width: 60px;
+}
+
+.bk-navigation-sidebar.is-collapsed .bk-navigation-space {
+  padding: 12px 6px;
+}
+
+.bk-navigation-sidebar.is-collapsed .bk-navigation-space-select span:last-child {
+  display: none;
+}
+
+.bk-navigation-sidebar.is-collapsed .bk-navigation-menu-item {
+  justify-content: center;
+  padding: 0;
+  font-size: 0;
+}
+
+.bk-navigation-sidebar.is-collapsed .bk-navigation-menu-icon {
+  font-size: 18px;
+  width: auto;
+  margin: 0;
+}
+
+/* Page panels (for base.html in-page content switching) */
+
+.bk-page-panel {
+  display: none;
+}
+
+.bk-page-panel:first-child {
+  display: block;
+}
+
+/* Layout Primitives */
+
+.bk-layout {
+  display: flex;
+  min-width: var(--bk-min-width);
+  height: 100vh;
+}
+
+.bk-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+  background-color: var(--bk-bg-body);
+}
+
+.bk-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.bk-toolbar-left,
+.bk-toolbar-right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.bk-aside {
+  width: 240px;
+  border-right: 1px solid var(--bk-border);
+  background-color: var(--bk-bg-default);
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.bk-split {
+  display: flex;
+  height: 100%;
+}
+
+.bk-info-card {
+  background-color: var(--bk-bg-default);
+  padding: 16px;
+  border-radius: var(--bk-radius-md);
+  border: 1px solid var(--bk-border-light);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.bk-info-card-item {
+  font-size: var(--bk-font-size);
+}
+
+.bk-info-card-label {
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+  margin-bottom: 4px;
+}
+
+.bk-info-card-value {
+  color: var(--bk-text-primary);
+}
+
+/* Helpers */
+
+.bk-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--bk-font-size);
+  color: var(--bk-text-secondary);
+  margin-bottom: 16px;
+}
+
+.bk-breadcrumb-item {
+  color: var(--bk-text-tertiary);
+}
+
+.bk-breadcrumb-item:last-child {
+  color: var(--bk-text-primary);
+}
+
+.bk-breadcrumb-item + .bk-breadcrumb-item::before {
+  content: "/";
+  margin-right: 8px;
+  color: var(--bk-text-disabled);
+}
+
+/* Loading spinner */
+
+.bk-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.bk-loading::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--bk-border);
+  border-top-color: var(--bk-primary);
+  border-radius: 50%;
+  animation: bk-spin 0.6s linear infinite;
+}
+
+@keyframes bk-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Exception / empty state */
+
+.bk-exception {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size);
+  gap: 12px;
+}
+
+/* 24-column grid */
+
+.bk-grid-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.bk-grid-col-1  { width: calc(100% * 1 / 24); }
+.bk-grid-col-2  { width: calc(100% * 2 / 24); }
+.bk-grid-col-3  { width: calc(100% * 3 / 24); }
+.bk-grid-col-4  { width: calc(100% * 4 / 24); }
+.bk-grid-col-5  { width: calc(100% * 5 / 24); }
+.bk-grid-col-6  { width: calc(100% * 6 / 24); }
+.bk-grid-col-7  { width: calc(100% * 7 / 24); }
+.bk-grid-col-8  { width: calc(100% * 8 / 24); }
+.bk-grid-col-9  { width: calc(100% * 9 / 24); }
+.bk-grid-col-10 { width: calc(100% * 10 / 24); }
+.bk-grid-col-11 { width: calc(100% * 11 / 24); }
+.bk-grid-col-12 { width: calc(100% * 12 / 24); }
+.bk-grid-col-13 { width: calc(100% * 13 / 24); }
+.bk-grid-col-14 { width: calc(100% * 14 / 24); }
+.bk-grid-col-15 { width: calc(100% * 15 / 24); }
+.bk-grid-col-16 { width: calc(100% * 16 / 24); }
+.bk-grid-col-17 { width: calc(100% * 17 / 24); }
+.bk-grid-col-18 { width: calc(100% * 18 / 24); }
+.bk-grid-col-19 { width: calc(100% * 19 / 24); }
+.bk-grid-col-20 { width: calc(100% * 20 / 24); }
+.bk-grid-col-21 { width: calc(100% * 21 / 24); }
+.bk-grid-col-22 { width: calc(100% * 22 / 24); }
+.bk-grid-col-23 { width: calc(100% * 23 / 24); }
+.bk-grid-col-24 { width: 100%; }
+
+/* ----------------------------------------------------------
+   Shared Shells / Overlays
+   ---------------------------------------------------------- */
+
+.bk-prototype-shell {
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, rgba(58, 132, 255, 0.08), transparent 32%),
+    linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
+}
+
+.bk-prototype-shell .bk-navigation-header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+}
+
+.bk-prototype-shell .bk-navigation-wrapper {
+  min-height: calc(100vh - var(--bk-header-height));
+}
+
+.bk-prototype-shell .bk-content {
+  padding: 24px;
+}
+
+.bk-prototype-page-title {
+  margin-bottom: 16px;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.bk-prototype-card {
+  background: var(--bk-bg-default);
+  border: 1px solid var(--bk-border-light);
+  border-radius: var(--bk-radius-md);
+  box-shadow: var(--bk-shadow);
+  padding: 20px;
+}
+
+.bk-prototype-card + .bk-prototype-card {
+  margin-top: 16px;
+}
+
+.bk-prototype-card-meta {
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+  margin-top: 8px;
+}
+
+.bk-prototype-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+
+.bk-right-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 360px;
+  height: 100vh;
+  background: var(--bk-bg-default);
+  border-left: 1px solid var(--bk-border);
+  box-shadow: var(--bk-shadow-lg);
+  transform: translateX(100%);
+  transition: transform 0.2s ease;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+}
+
+.bk-right-panel.is-open {
+  transform: translateX(0);
+}
+
+.bk-right-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--bk-border-light);
+  font-weight: 600;
+}
+
+.bk-right-panel-body {
+  padding: 20px;
+  color: var(--bk-text-secondary);
+  overflow: auto;
+}
+
+.bk-save-button.is-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.bk-save-button.is-enabled {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.bk-toggle-hidden {
+  display: none;
+}
+
+/* ----------------------------------------------------------
+   Part 17: Flow Editor Master
+   ---------------------------------------------------------- */
+
+.bk-flow-editor {
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top right, rgba(58, 132, 255, 0.12), transparent 24%),
+    linear-gradient(180deg, #f6f8fc 0%, #eef2f8 100%);
+}
+
+.bk-flow-editor-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.bk-flow-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 18px 24px;
+  background: rgba(255, 255, 255, 0.96);
+  border-bottom: 1px solid rgba(195, 205, 215, 0.7);
+  box-shadow: 0 8px 24px rgba(15, 35, 95, 0.06);
+}
+
+.bk-flow-editor-meta {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.bk-flow-editor-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
+.bk-flow-editor-title h1 {
+  font-size: 22px;
+}
+
+.bk-flow-editor-title p {
+  margin-top: 3px;
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-version-area {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  border: 1px solid rgba(58, 132, 255, 0.18);
+  border-radius: 999px;
+  background: rgba(58, 132, 255, 0.08);
+}
+
+.bk-flow-version-label {
+  color: var(--bk-text-secondary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-version-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #e1ecff;
+  color: var(--bk-primary-active);
+  font-size: var(--bk-font-size-sm);
+  font-weight: 600;
+}
+
+.bk-flow-editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bk-flow-editor-main {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 20px;
+  padding: 20px 24px 28px;
+}
+
+.bk-flow-editor-rail {
+  display: grid;
+  gap: 16px;
+  align-content: start;
+}
+
+.bk-flow-section-card {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(220, 222, 229, 0.8);
+  border-radius: 18px;
+  box-shadow: 0 14px 30px rgba(15, 35, 95, 0.08);
+  padding: 18px;
+}
+
+.bk-flow-section-card h2,
+.bk-flow-section-card h3 {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.bk-flow-section-card p,
+.bk-flow-section-card li {
+  color: var(--bk-text-secondary);
+}
+
+.bk-flow-section-card ul {
+  margin-left: 18px;
+  display: grid;
+  gap: 6px;
+}
+
+.bk-flow-canvas-shell {
+  min-height: 720px;
+  border-radius: 22px;
+  overflow: hidden;
+  border: 1px solid rgba(220, 222, 229, 0.8);
+  box-shadow: 0 18px 40px rgba(15, 35, 95, 0.08);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.bk-flow-canvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(220, 222, 229, 0.8);
+}
+
+.bk-flow-canvas-header strong {
+  display: block;
+  font-size: 16px;
+  margin-bottom: 3px;
+}
+
+.bk-flow-canvas-header span {
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-canvas-tools {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--bk-text-secondary);
+}
+
+.bk-flow-tool-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #f5f7fa;
+  border: 1px solid #dfe6f0;
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-canvas {
+  position: relative;
+  min-height: 640px;
+  background:
+    linear-gradient(rgba(26, 39, 56, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(26, 39, 56, 0.05) 1px, transparent 1px),
+    linear-gradient(180deg, #fbfcfe 0%, #f1f5fb 100%);
+  background-size: 28px 28px, 28px 28px, 100% 100%;
+}
+
+.bk-flow-canvas-stage {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-40%, -50%);
+  display: flex;
+  align-items: center;
+}
+
+.bk-flow-link {
+  position: relative;
+  width: 78px;
+  height: 2px;
+  background: #c4c6cc;
+}
+
+.bk-flow-link::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  right: 0;
+  border-left: 7px solid #c4c6cc;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+}
+
+.bk-flow-node {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 170px;
+  min-height: 76px;
+  padding: 14px 18px;
+  border: 1px solid rgba(154, 165, 177, 0.55);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.96);
+  color: var(--bk-text-primary);
+  box-shadow: 0 16px 30px rgba(31, 39, 56, 0.08);
+}
+
+button.bk-flow-node {
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.bk-flow-node::before {
+  content: "";
+  position: absolute;
+  inset: 8px auto auto 10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--bk-primary);
+  box-shadow: 0 0 0 4px rgba(58, 132, 255, 0.12);
+}
+
+.bk-flow-node strong {
+  font-size: 15px;
+}
+
+.bk-flow-node span {
+  margin-top: 5px;
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-node-start,
+.bk-flow-node-end {
+  min-width: 84px;
+  min-height: 42px;
+  border-radius: 999px;
+  color: var(--bk-bg-default);
+  background: linear-gradient(135deg, #3a84ff 0%, #6ca9ff 100%);
+  border: none;
+  box-shadow: 0 16px 28px rgba(58, 132, 255, 0.22);
+}
+
+.bk-flow-node-end {
+  background: linear-gradient(135deg, #2dcb56 0%, #72d18a 100%);
+  box-shadow: 0 16px 28px rgba(45, 203, 86, 0.22);
+}
+
+.bk-flow-node.is-selected {
+  border-color: var(--bk-primary);
+  box-shadow:
+    0 0 0 4px rgba(58, 132, 255, 0.14),
+    0 16px 30px rgba(31, 39, 56, 0.12);
+}
+
+.bk-flow-node-toolbar {
+  position: absolute;
+  left: 52%;
+  top: 26%;
+  display: none;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(24, 33, 50, 0.92);
+  color: #dce3f1;
+  box-shadow: 0 16px 28px rgba(12, 24, 50, 0.24);
+}
+
+.bk-flow-node-toolbar.is-visible {
+  display: inline-flex;
+}
+
+.bk-flow-toolbar-title {
+  padding-right: 10px;
+  border-right: 1px solid rgba(220, 227, 241, 0.22);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-toolbar-button {
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.bk-flow-toolbar-button:hover {
+  color: #ffffff;
+}
+
+.bk-flow-drawer-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.bk-flow-drawer-header p {
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+  margin-top: 4px;
+}
+
+.bk-flow-drawer-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bk-flow-drawer-group + .bk-flow-drawer-group {
+  margin-top: 22px;
+}
+
+.bk-flow-drawer-group h4 {
+  margin-bottom: 12px;
+  font-size: 15px;
+}
+
+.bk-flow-two-col {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.bk-flow-stack {
+  display: grid;
+  gap: 12px;
+}
+
+.bk-flow-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--bk-text-secondary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-input-block,
+.bk-flow-inline-box {
+  border: 1px solid var(--bk-border);
+  border-radius: 10px;
+  background: #fbfcff;
+  padding: 12px;
+}
+
+.bk-flow-inline-box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.bk-flow-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(58, 132, 255, 0.18);
+  background: rgba(58, 132, 255, 0.08);
+  color: var(--bk-primary-active);
+  font-size: var(--bk-font-size-sm);
+  font-weight: 600;
+}
+
+.bk-flow-code-block {
+  min-height: 110px;
+  border-radius: 12px;
+  background: #101a2b;
+  color: #c7d2e5;
+  padding: 14px;
+  font-family: Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.bk-flow-io-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-io-table th,
+.bk-flow-io-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #ebeff5;
+  text-align: left;
+}
+
+.bk-flow-io-table th {
+  color: var(--bk-text-secondary);
+  background: #f5f7fa;
+}
+
+.bk-flow-footer-hint {
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-vars-float .bk-dialog-content {
+  width: 560px;
+  margin: 96px 90px 0 auto;
+  border-radius: 16px;
+}
+
+.bk-flow-vars-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-flow-vars-table th,
+.bk-flow-vars-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #ebeff5;
+  text-align: left;
+}
+
+.bk-flow-vars-table th {
+  background: #f5f7fa;
+  color: var(--bk-text-secondary);
+}
+
+.bk-flow-confirm-note {
+  margin-top: 10px;
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+  line-height: 1.6;
+}
+
+/* ----------------------------------------------------------
+   Part 18: Task Detail Master
+   ---------------------------------------------------------- */
+
+.bk-task-detail {
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, rgba(45, 203, 86, 0.08), transparent 22%),
+    linear-gradient(180deg, #f7f9fc 0%, #edf2f8 100%);
+}
+
+.bk-task-detail-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.bk-task-detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 20px 24px;
+  background: rgba(255, 255, 255, 0.96);
+  border-bottom: 1px solid rgba(195, 205, 215, 0.7);
+  box-shadow: 0 8px 24px rgba(15, 35, 95, 0.05);
+}
+
+.bk-task-detail-meta {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  min-width: 0;
+}
+
+.bk-task-detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.bk-task-detail-label {
+  display: block;
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.bk-task-detail-title h1 {
+  font-size: 24px;
+  word-break: break-all;
+}
+
+.bk-task-detail-title p {
+  margin-top: 4px;
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-task-detail-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+
+.bk-task-status {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 12px;
+  border-radius: 999px;
+  font-size: var(--bk-font-size-sm);
+  font-weight: 600;
+}
+
+.bk-task-status.is-success {
+  color: #17663a;
+  background: rgba(45, 203, 86, 0.16);
+}
+
+.bk-task-status.is-running {
+  color: #1f4ea1;
+  background: rgba(58, 132, 255, 0.16);
+}
+
+.bk-task-status.is-failed {
+  color: #a62c2c;
+  background: rgba(255, 87, 87, 0.18);
+}
+
+.bk-task-status.is-neutral {
+  color: #4a5d78;
+  background: rgba(110, 132, 163, 0.16);
+}
+
+.bk-task-detail-summary {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.bk-task-detail-chip {
+  min-width: 140px;
+  padding: 10px 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(58, 132, 255, 0.14);
+  background: rgba(58, 132, 255, 0.06);
+}
+
+.bk-task-detail-chip-label,
+.bk-task-detail-summary-label {
+  display: block;
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-task-detail-main {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 420px;
+  gap: 20px;
+  padding: 20px 24px 28px;
+}
+
+.bk-task-detail-canvas-shell {
+  min-width: 0;
+  border-radius: 22px;
+  overflow: hidden;
+  border: 1px solid rgba(220, 222, 229, 0.8);
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 18px 40px rgba(15, 35, 95, 0.08);
+}
+
+.bk-task-detail-canvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(220, 222, 229, 0.8);
+}
+
+.bk-task-detail-canvas-header strong {
+  display: block;
+  font-size: 16px;
+  margin-bottom: 3px;
+}
+
+.bk-task-detail-canvas-header span {
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-task-detail-canvas {
+  min-height: 720px;
+}
+
+.bk-task-detail-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: 22px;
+  overflow: hidden;
+  border: 1px solid rgba(220, 222, 229, 0.8);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 18px 40px rgba(15, 35, 95, 0.08);
+}
+
+.bk-task-detail-panel.is-open {
+  box-shadow:
+    0 0 0 1px rgba(58, 132, 255, 0.12),
+    0 18px 40px rgba(15, 35, 95, 0.12);
+}
+
+.bk-task-detail-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 18px 20px 16px;
+  border-bottom: 1px solid rgba(220, 222, 229, 0.8);
+}
+
+.bk-task-detail-panel-header h2 {
+  font-size: 18px;
+}
+
+.bk-task-detail-node-trail {
+  margin-top: 5px;
+  color: var(--bk-text-tertiary);
+  font-size: var(--bk-font-size-sm);
+}
+
+.bk-task-detail-panel-summary {
+  display: grid;
+  gap: 10px;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(220, 222, 229, 0.8);
+  background: linear-gradient(180deg, rgba(58, 132, 255, 0.04), rgba(58, 132, 255, 0));
+}
+
+.bk-task-detail-summary-card {
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(220, 222, 229, 0.8);
+  background: #fbfcfe;
+}
+
+.bk-task-detail-summary-card strong {
+  display: block;
+  margin-top: 3px;
+}
+
+.bk-task-detail-source-block {
+  display: grid;
+  gap: 10px;
+}
+
+.bk-task-detail-panel .bk-tab-header {
+  padding: 0 12px;
+  overflow-x: auto;
+  background: #fbfcff;
+}
+
+.bk-task-detail-panel .bk-tab-item {
+  background: transparent;
+  border: none;
+  font: inherit;
+  white-space: nowrap;
+}
+
+.bk-task-detail-panel-body {
+  flex: 1;
+  overflow: auto;
+  padding: 18px 20px 20px;
+}
+
+.bk-task-detail-section {
+  display: grid;
+  gap: 14px;
+}
+
+.bk-task-detail-block {
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(220, 222, 229, 0.85);
+  background: #fbfcfe;
+}
+
+.bk-task-detail-block.is-danger {
+  border-color: rgba(255, 87, 87, 0.34);
+  background: rgba(255, 87, 87, 0.05);
+}
+
+.bk-task-detail-block h3 {
+  margin-bottom: 10px;
+  font-size: 15px;
+}
+
+.bk-task-detail-note {
+  color: var(--bk-text-secondary);
+}
+
+.bk-task-detail-note.is-danger {
+  color: #a62c2c;
+  font-weight: 600;
+}
+
+.bk-task-detail-kv {
+  display: grid;
+  gap: 10px;
+}
+
+.bk-task-detail-kv div {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeff5;
+}
+
+.bk-task-detail-kv dt {
+  color: var(--bk-text-tertiary);
+}
+
+.bk-task-detail-kv dd {
+  color: var(--bk-text-primary);
+  text-align: right;
+}
+
+.bk-task-detail-code {
+  border-radius: 12px;
+  background: #101a2b;
+  color: #c7d2e5;
+  padding: 14px;
+  font-family: Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.bk-task-detail-empty-cell {
+  text-align: center;
+  color: var(--bk-text-tertiary);
+}
+
+.bk-log-viewer {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr);
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid rgba(16, 26, 43, 0.24);
+  background: #0f1724;
+  color: #d7e2f0;
+  min-height: 160px;
+}
+
+.bk-log-viewer .line-numbers {
+  padding: 14px 10px;
+  background: #0b1220;
+  color: #60708a;
+  font-family: Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  text-align: right;
+  white-space: pre-wrap;
+  user-select: none;
+}
+
+.bk-log-viewer pre,
+.bk-log-empty-copy {
+  margin: 0;
+  padding: 14px 16px;
+  font-family: Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.bk-log-empty {
+  align-items: stretch;
+}
+
+.bk-log-empty .bk-log-empty-copy {
+  display: flex;
+  align-items: center;
+  color: #8ea0bb;
+}
+
+@media (max-width: 1360px) {
+  .bk-task-detail-main {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/prototypes/assets/bkflow-prototype.js b/prototypes/assets/bkflow-prototype.js
new file mode 100644
index 0000000000..6b0efe499e
--- /dev/null
+++ b/prototypes/assets/bkflow-prototype.js
@@ -0,0 +1,277 @@
+/* ============================================================
+   BKFlow Prototype Toolkit - Shared Shell Interaction Layer
+   Only the cross-page behaviors needed by prototype masters.
+   ============================================================ */
+
+(function () {
+  "use strict";
+
+  function openOverlay(id) {
+    var el = document.getElementById(id);
+    if (el) el.classList.add("is-show");
+  }
+
+  function setInteractiveState(el, enabled) {
+    if (!el) return;
+    if (enabled) {
+      el.classList.remove("is-disabled");
+      el.classList.add("is-enabled");
+      el.removeAttribute("disabled");
+      el.setAttribute("aria-disabled", "false");
+      return;
+    }
+
+    el.classList.remove("is-enabled");
+    el.classList.add("is-disabled");
+    el.setAttribute("disabled", "disabled");
+    el.setAttribute("aria-disabled", "true");
+  }
+
+  function applyInteractiveState(selector, enabled) {
+    if (!selector) return;
+    document.querySelectorAll(selector).forEach(function (el) {
+      setInteractiveState(el, enabled);
+    });
+  }
+
+  function setTaskStatusClass(el, statusText) {
+    if (!el) return;
+
+    var statusClassMap = {
+      "完成": "is-success",
+      "成功": "is-success",
+      "失败": "is-failed",
+      "运行中": "is-running",
+      "未执行": "is-neutral",
+      "等待中": "is-neutral",
+      "等待人工处理": "is-neutral",
+    };
+
+    el.textContent = statusText;
+    el.classList.remove("is-success", "is-running", "is-failed", "is-neutral");
+    el.classList.add(statusClassMap[statusText] || "is-neutral");
+  }
+
+  function applyNodeDetailSource(panel, sourceId) {
+    if (!panel || !sourceId) return;
+
+    panel.querySelectorAll("[data-detail-source-group][data-detail-source-id]").forEach(function (block) {
+      block.hidden = block.getAttribute("data-detail-source-id") !== sourceId;
+    });
+  }
+
+  function closeOverlay(el) {
+    while (
+      el &&
+      !el.classList.contains("bk-sideslider") &&
+      !el.classList.contains("bk-dialog")
+    ) {
+      el = el.parentElement;
+    }
+    if (el) el.classList.remove("is-show");
+  }
+
+  document.addEventListener("click", function (e) {
+    var opener = e.target.closest("[data-open]");
+    if (opener) {
+      e.preventDefault();
+      openOverlay(opener.getAttribute("data-open"));
+      return;
+    }
+
+    var closer = e.target.closest("[data-close]");
+    if (closer) {
+      e.preventDefault();
+      closeOverlay(closer);
+      return;
+    }
+
+    var mask = e.target;
+    if (mask.classList.contains("bk-sideslider-mask") || mask.classList.contains("bk-dialog-mask")) {
+      closeOverlay(mask);
+    }
+  });
+
+  document.addEventListener("click", function (e) {
+    var navItem = e.target.closest(".bk-navigation-header-nav-item, .bk-prototype-nav-item");
+    if (!navItem) return;
+    var navLink = navItem.getAttribute("data-nav-link");
+    if (navLink) {
+      e.preventDefault();
+      if (navItem.classList.contains("active")) return;
+      window.location.href = navLink;
+      return;
+    }
+
+    e.preventDefault();
+
+    var groupId = navItem.getAttribute("data-nav-group");
+    var nav = navItem.closest(".bk-navigation-header-nav, .bk-prototype-nav");
+    if (nav) {
+      nav.querySelectorAll(".bk-navigation-header-nav-item, .bk-prototype-nav-item").forEach(function (item) {
+        item.classList.toggle("active", item === navItem);
+      });
+    }
+
+    if (!groupId) return;
+    var root = navItem.closest(".bk-navigation, .bk-prototype-shell") || document;
+    root.querySelectorAll(".bk-navigation-menu[data-nav-group], .bk-prototype-sidebar[data-nav-group]").forEach(function (menu) {
+      menu.style.display = menu.getAttribute("data-nav-group") === groupId ? "" : "none";
+    });
+    root.querySelectorAll(".bk-navigation-space[data-nav-group], .bk-prototype-space[data-nav-group]").forEach(function (sp) {
+      sp.style.display = sp.getAttribute("data-nav-group") === groupId ? "" : "none";
+    });
+
+    var visibleMenu = root.querySelector('.bk-navigation-menu[data-nav-group="' + groupId + '"], .bk-prototype-sidebar[data-nav-group="' + groupId + '"]');
+    if (visibleMenu) {
+      var firstItem = visibleMenu.querySelector(".bk-navigation-menu-item, .bk-prototype-sidebar-item");
+      if (firstItem) firstItem.click();
+    }
+  });
+
+  document.addEventListener("click", function (e) {
+    var menuItem = e.target.closest(".bk-navigation-menu-item[data-page], .bk-prototype-sidebar-item[data-page]");
+    if (!menuItem) return;
+    e.preventDefault();
+
+    var pageId = menuItem.getAttribute("data-page");
+    var container = menuItem.closest(".bk-navigation, .bk-prototype-shell") || document;
+
+    container.querySelectorAll(".bk-navigation-menu-item[data-page], .bk-prototype-sidebar-item[data-page]").forEach(function (item) {
+      item.classList.toggle("active", item === menuItem);
+    });
+
+    container.querySelectorAll(".bk-page-panel").forEach(function (panel) {
+      panel.hidden = panel.id !== pageId;
+    });
+  });
+
+  document.addEventListener("click", function (e) {
+    var trigger = e.target.closest("[data-toggle-target][data-toggle-class]");
+    if (!trigger) return;
+    e.preventDefault();
+
+    var selector = trigger.getAttribute("data-toggle-target");
+    var className = trigger.getAttribute("data-toggle-class");
+    document.querySelectorAll(selector).forEach(function (target) {
+      target.classList.toggle(className);
+    });
+  });
+
+  document.addEventListener("click", function (e) {
+    var opener = e.target.closest("[data-right-panel-open]");
+    if (opener) {
+      e.preventDefault();
+      document.querySelectorAll(opener.getAttribute("data-right-panel-open")).forEach(function (panel) {
+        panel.classList.add("is-open");
+      });
+      return;
+    }
+
+    var closer = e.target.closest("[data-right-panel-close]");
+    if (closer) {
+      e.preventDefault();
+      document.querySelectorAll(closer.getAttribute("data-right-panel-close")).forEach(function (panel) {
+        panel.classList.remove("is-open");
+      });
+    }
+  });
+
+  document.addEventListener("click", function (e) {
+    var trigger = e.target.closest("[data-save-target]");
+    if (!trigger) return;
+    e.preventDefault();
+
+    applyInteractiveState(trigger.getAttribute("data-save-target"), true);
+  });
+
+  document.addEventListener("click", function (e) {
+    var collapseBtn = e.target.closest(".bk-navigation-collapse");
+    if (!collapseBtn) return;
+    e.preventDefault();
+    var sidebar = collapseBtn.closest(".bk-navigation-sidebar");
+    if (!sidebar) return;
+    var isCollapsed = sidebar.classList.toggle("is-collapsed");
+    collapseBtn.textContent = isCollapsed ? "⟩" : "⟨";
+    collapseBtn.title = isCollapsed ? "展开导航" : "收起导航";
+  });
+
+  document.addEventListener("click", function (e) {
+    var trigger = e.target.closest("[data-enable-target], [data-disable-target]");
+    if (!trigger) return;
+
+    applyInteractiveState(trigger.getAttribute("data-enable-target"), true);
+    applyInteractiveState(trigger.getAttribute("data-disable-target"), false);
+  });
+
+  document.addEventListener("click", function (e) {
+    var node = e.target.closest("[data-node-select]");
+    if (!node) return;
+
+    var root = node.closest(".bk-flow-editor, .bk-flow-editor-shell, .bk-task-detail, .bk-task-detail-shell") || document;
+    var group = node.getAttribute("data-node-select");
+    root.querySelectorAll('[data-node-select="' + group + '"]').forEach(function (item) {
+      item.classList.toggle("is-selected", item === node);
+    });
+
+    var toolbarSelector = node.getAttribute("data-node-toolbar");
+    if (toolbarSelector) {
+      root.querySelectorAll(toolbarSelector).forEach(function (toolbar) {
+        toolbar.classList.add("is-visible");
+        var label = toolbar.querySelector("[data-node-toolbar-label]");
+        if (label && node.getAttribute("data-node-name")) {
+          label.textContent = node.getAttribute("data-node-name");
+        }
+      });
+    }
+
+    var panelSelector = node.getAttribute("data-node-open");
+    if (panelSelector) {
+      root.querySelectorAll(panelSelector).forEach(function (panel) {
+        panel.classList.add("is-open");
+
+        var title = panel.querySelector("[data-node-panel-title]");
+        if (title && node.getAttribute("data-node-name")) {
+          title.textContent = node.getAttribute("data-node-name");
+        }
+
+        var status = panel.querySelector("[data-node-panel-status]");
+        if (status && node.getAttribute("data-node-status")) {
+          setTaskStatusClass(status, node.getAttribute("data-node-status"));
+        }
+
+        var trail = panel.querySelector("[data-node-panel-trail]");
+        if (trail && node.getAttribute("data-node-trail")) {
+          trail.textContent = node.getAttribute("data-node-trail");
+        }
+
+        applyNodeDetailSource(panel, node.getAttribute("data-node-detail-source"));
+      });
+    }
+  });
+
+  document.addEventListener("dblclick", function (e) {
+    var opener = e.target.closest("[data-dblopen]");
+    if (!opener) return;
+    e.preventDefault();
+    openOverlay(opener.getAttribute("data-dblopen"));
+  });
+
+  document.addEventListener("click", function (e) {
+    var trigger = e.target.closest("[data-tab-group][data-tab-target]");
+    if (!trigger) return;
+    e.preventDefault();
+
+    var group = trigger.getAttribute("data-tab-group");
+    var targetId = trigger.getAttribute("data-tab-target");
+    var root = trigger.closest("[data-tab-root]") || document;
+
+    root.querySelectorAll('[data-tab-group="' + group + '"]').forEach(function (item) {
+      item.classList.toggle("active", item === trigger);
+    });
+
+    root.querySelectorAll('.bk-tab-panel[data-tab-panel-group="' + group + '"]').forEach(function (panel) {
+      panel.hidden = panel.id !== targetId;
+    });
+  });
+})();
diff --git a/prototypes/assets/bkflow-showcase.css b/prototypes/assets/bkflow-showcase.css
new file mode 100644
index 0000000000..eb80b12974
--- /dev/null
+++ b/prototypes/assets/bkflow-showcase.css
@@ -0,0 +1,832 @@
+:root {
+  --showcase-bg: #eef3fb;
+  --showcase-surface: rgba(255, 255, 255, 0.82);
+  --showcase-surface-strong: #ffffff;
+  --showcase-text: #102036;
+  --showcase-muted: #607089;
+  --showcase-border: rgba(132, 152, 183, 0.22);
+  --showcase-primary: #165dff;
+  --showcase-primary-strong: #0f4ed0;
+  --showcase-accent: #00a7c8;
+  --showcase-warm: #ffb547;
+  --showcase-shadow: 0 24px 60px rgba(20, 35, 60, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  color: var(--showcase-text);
+  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(22, 93, 255, 0.16), transparent 28%),
+    radial-gradient(circle at top right, rgba(0, 167, 200, 0.12), transparent 24%),
+    linear-gradient(180deg, #f7faff 0%, var(--showcase-bg) 100%);
+  min-height: 100vh;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 10%, transparent 10% 100%),
+    linear-gradient(245deg, rgba(255, 255, 255, 0.2) 0 15%, transparent 15% 100%);
+  opacity: 0.7;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+.showcase-shell {
+  position: relative;
+  max-width: 1260px;
+  margin: 0 auto;
+  padding: 32px 24px 64px;
+}
+
+.showcase-hero,
+.showcase-section {
+  position: relative;
+  overflow: hidden;
+  background: var(--showcase-surface);
+  backdrop-filter: blur(18px);
+  border: 1px solid var(--showcase-border);
+  border-radius: 24px;
+  box-shadow: var(--showcase-shadow);
+}
+
+.showcase-hero::after,
+.showcase-section::after {
+  content: "";
+  position: absolute;
+  inset: auto -24px -48px auto;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(22, 93, 255, 0.15), transparent 65%);
+  pointer-events: none;
+}
+
+.showcase-hero {
+  padding: 32px;
+  margin-bottom: 20px;
+}
+
+.showcase-kicker {
+  margin: 0 0 12px;
+  color: var(--showcase-muted);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.showcase-hero h1 {
+  margin: 0;
+  font-size: clamp(36px, 4vw, 56px);
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+}
+
+.showcase-hero p {
+  max-width: 780px;
+  margin: 16px 0 0;
+  color: #44536b;
+  line-height: 1.85;
+}
+
+.showcase-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.bk-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 1px solid #cad6e6;
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--showcase-text);
+  transition:
+    transform 120ms ease,
+    box-shadow 120ms ease,
+    border-color 120ms ease,
+    background 120ms ease;
+}
+
+.bk-button:hover {
+  transform: translateY(-1px);
+  border-color: rgba(22, 93, 255, 0.28);
+  box-shadow: 0 12px 30px rgba(20, 35, 60, 0.08);
+}
+
+.bk-button-primary {
+  background: linear-gradient(135deg, var(--showcase-primary), var(--showcase-primary-strong));
+  border-color: transparent;
+  color: #fff;
+}
+
+.showcase-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.showcase-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(136, 158, 190, 0.2);
+  background: rgba(248, 251, 255, 0.9);
+}
+
+.showcase-stat strong,
+.showcase-card h3,
+.showcase-mini-card h3 {
+  margin: 0;
+  color: var(--showcase-muted);
+  font-size: 14px;
+}
+
+.showcase-stat span {
+  color: var(--showcase-text);
+  font-size: 30px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+.showcase-section {
+  padding: 24px;
+  margin-top: 20px;
+}
+
+.showcase-section h2 {
+  margin: 0;
+  font-size: 24px;
+}
+
+.showcase-section > h2 + * {
+  margin-top: 16px;
+}
+
+.showcase-toolbar {
+  display: grid;
+  gap: 16px;
+}
+
+.showcase-search {
+  display: grid;
+  gap: 8px;
+}
+
+.showcase-search span,
+.showcase-filter-label {
+  color: var(--showcase-muted);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.showcase-search input {
+  width: 100%;
+  padding: 13px 16px;
+  border: 1px solid rgba(132, 152, 183, 0.28);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.95);
+  color: var(--showcase-text);
+  outline: none;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.showcase-search input:focus {
+  border-color: rgba(22, 93, 255, 0.55);
+  box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.1);
+}
+
+.showcase-filter-cluster {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.showcase-filter-group {
+  display: grid;
+  gap: 8px;
+}
+
+.showcase-filter-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.showcase-filter-pill {
+  border: 1px solid rgba(132, 152, 183, 0.22);
+  border-radius: 999px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #425066;
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    color 120ms ease,
+    border-color 120ms ease,
+    transform 120ms ease;
+}
+
+.showcase-filter-pill:hover {
+  transform: translateY(-1px);
+  border-color: rgba(22, 93, 255, 0.28);
+}
+
+.showcase-filter-pill.is-active {
+  background: linear-gradient(135deg, rgba(22, 93, 255, 0.14), rgba(0, 167, 200, 0.12));
+  color: var(--showcase-primary-strong);
+  border-color: rgba(22, 93, 255, 0.38);
+}
+
+.showcase-summary {
+  margin: 0;
+  color: var(--showcase-muted);
+  font-size: 14px;
+}
+
+.showcase-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.showcase-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 18px;
+  border: 1px solid rgba(132, 152, 183, 0.2);
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.88));
+}
+
+.showcase-card[data-feature-card] {
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    border-color 160ms ease,
+    opacity 120ms ease;
+}
+
+.showcase-card[data-feature-card]:hover {
+  transform: translateY(-2px);
+  border-color: rgba(22, 93, 255, 0.26);
+  box-shadow: 0 18px 36px rgba(20, 35, 60, 0.08);
+}
+
+.showcase-card-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.showcase-card h3 {
+  font-size: 20px;
+  color: var(--showcase-text);
+}
+
+.showcase-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: rgba(22, 93, 255, 0.12);
+  color: var(--showcase-primary-strong);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.showcase-cover-meta {
+  margin: 0;
+  color: var(--showcase-muted);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.showcase-card > p {
+  margin: 0;
+  color: #45546c;
+  line-height: 1.75;
+}
+
+.showcase-meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin: 4px 0 0;
+}
+
+.showcase-meta div {
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(132, 152, 183, 0.16);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.showcase-meta dt {
+  margin-bottom: 4px;
+  color: var(--showcase-muted);
+  font-size: 12px;
+}
+
+.showcase-meta dd {
+  margin: 0;
+  color: var(--showcase-text);
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.showcase-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.showcase-tag {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(22, 93, 255, 0.08);
+  color: #46607f;
+  font-size: 12px;
+}
+
+.showcase-actions .bk-button {
+  min-height: 36px;
+}
+
+.showcase-page-list,
+.showcase-updates,
+.showcase-resources {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.showcase-page-list {
+  display: grid;
+  gap: 10px;
+}
+
+.showcase-page,
+.showcase-page-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 0;
+  border-top: 1px solid rgba(132, 152, 183, 0.16);
+}
+
+.showcase-page:first-child,
+.showcase-page-item:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.showcase-page span,
+.showcase-page-item span,
+.showcase-updates span,
+.showcase-resources span,
+.showcase-empty {
+  color: var(--showcase-muted);
+}
+
+.showcase-feature-pages-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 14px;
+}
+
+.showcase-feature-pages {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(132, 152, 183, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.showcase-feature-pages-head {
+  display: grid;
+  gap: 6px;
+}
+
+.showcase-feature-pages-kicker {
+  margin: 0;
+  color: var(--showcase-muted);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.showcase-feature-pages-head h3 {
+  margin: 0;
+  color: var(--showcase-text);
+  font-size: 20px;
+}
+
+.showcase-feature-pages-summary {
+  margin: 0;
+  color: #45546c;
+  line-height: 1.6;
+}
+
+.showcase-page-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.showcase-page-feature,
+.showcase-page-type,
+.showcase-page-summary {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: rgba(22, 93, 255, 0.08);
+  color: #46607f;
+  font-size: 12px;
+}
+
+.showcase-page-feature {
+  background: rgba(0, 167, 200, 0.12);
+}
+
+.showcase-page-type {
+  background: rgba(255, 181, 71, 0.18);
+}
+
+.showcase-updates {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.showcase-updates li,
+.showcase-resources li {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(132, 152, 183, 0.18);
+  background: rgba(248, 251, 255, 0.96);
+}
+
+.showcase-mini-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+}
+
+.showcase-mini-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(132, 152, 183, 0.18);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.showcase-mini-card p {
+  margin: 0;
+  color: #45546c;
+  line-height: 1.65;
+}
+
+.showcase-mini-card a {
+  align-self: flex-start;
+}
+
+.showcase-resources {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.showcase-resources a {
+  font-weight: 700;
+}
+
+.showcase-empty {
+  margin: 16px 0 0;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px dashed rgba(132, 152, 183, 0.32);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.cover-preview {
+  display: grid;
+  gap: 10px;
+  min-height: 132px;
+  padding: 14px;
+  border-radius: 18px;
+  border: 1px solid rgba(132, 152, 183, 0.16);
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 42%),
+    linear-gradient(135deg, rgba(22, 93, 255, 0.08), rgba(0, 167, 200, 0.08));
+}
+
+.cover-theme-label {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(16, 32, 54, 0.72);
+}
+
+.cover-window,
+.cover-detail-shell,
+.cover-list-board,
+.cover-config-form,
+.cover-mixed-grid {
+  position: relative;
+  flex: 1;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.74);
+  border: 1px solid rgba(132, 152, 183, 0.16);
+}
+
+.cover-window {
+  padding: 10px;
+}
+
+.cover-window-bar {
+  display: block;
+  width: 52px;
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(22, 93, 255, 0.9), rgba(0, 167, 200, 0.75));
+}
+
+.cover-flow-canvas {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  gap: 8px;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.cover-flow-node,
+.cover-detail-sidebar span,
+.cover-detail-title,
+.cover-detail-panel,
+.cover-list-toolbar span,
+.cover-list-row,
+.cover-config-field,
+.cover-mixed-card {
+  display: block;
+}
+
+.cover-flow-node {
+  padding: 10px 8px;
+  border-radius: 12px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 800;
+  color: #18314f;
+}
+
+.cover-flow-node--input {
+  background: rgba(22, 93, 255, 0.12);
+}
+
+.cover-flow-node--action {
+  background: rgba(0, 167, 200, 0.12);
+}
+
+.cover-flow-node--review {
+  background: rgba(255, 181, 71, 0.18);
+}
+
+.cover-flow-link {
+  height: 2px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(22, 93, 255, 0.75), rgba(0, 167, 200, 0.65));
+}
+
+.cover-detail-shell {
+  display: grid;
+  grid-template-columns: 84px minmax(0, 1fr);
+  gap: 10px;
+  padding: 12px;
+}
+
+.cover-detail-sidebar {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+  padding: 10px;
+  border-radius: 12px;
+  background: rgba(22, 93, 255, 0.08);
+}
+
+.cover-detail-sidebar span {
+  display: block;
+  height: 10px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(22, 93, 255, 0.82), rgba(0, 167, 200, 0.56));
+}
+
+.cover-detail-main {
+  display: grid;
+  gap: 8px;
+  padding: 4px 2px;
+}
+
+.cover-detail-title {
+  display: block;
+  width: 68%;
+  height: 16px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(22, 93, 255, 0.84), rgba(0, 167, 200, 0.7));
+}
+
+.cover-detail-panel {
+  display: block;
+  height: 26px;
+  border-radius: 12px;
+  background: rgba(22, 93, 255, 0.12);
+}
+
+.cover-detail-panel--wide {
+  height: 42px;
+  background: rgba(0, 167, 200, 0.12);
+}
+
+.cover-list-board {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+}
+
+.cover-list-toolbar {
+  display: flex;
+  gap: 8px;
+}
+
+.cover-list-toolbar span {
+  display: block;
+  height: 12px;
+  border-radius: 999px;
+  background: rgba(22, 93, 255, 0.12);
+}
+
+.cover-list-toolbar span:first-child {
+  flex: 1.2;
+}
+
+.cover-list-toolbar span:last-child {
+  flex: 0.8;
+  background: rgba(0, 167, 200, 0.14);
+}
+
+.cover-list-table {
+  display: grid;
+  gap: 6px;
+}
+
+.cover-list-row {
+  display: block;
+  height: 16px;
+  border-radius: 8px;
+  background: rgba(22, 93, 255, 0.1);
+}
+
+.cover-list-row--head {
+  height: 18px;
+  background: linear-gradient(90deg, rgba(22, 93, 255, 0.2), rgba(0, 167, 200, 0.16));
+}
+
+.cover-config-form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding: 12px;
+}
+
+.cover-config-field {
+  display: block;
+  height: 28px;
+  border-radius: 12px;
+  background: rgba(22, 93, 255, 0.12);
+}
+
+.cover-config-field--label {
+  height: 12px;
+  width: 58%;
+  align-self: center;
+  background: rgba(16, 32, 54, 0.16);
+}
+
+.cover-config-field--wide {
+  grid-column: 1 / -1;
+  height: 40px;
+  background: rgba(0, 167, 200, 0.12);
+}
+
+.cover-mixed-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  padding: 12px;
+}
+
+.cover-mixed-card {
+  min-height: 38px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(22, 93, 255, 0.18), rgba(0, 167, 200, 0.16));
+}
+
+.cover-mixed-card--wide {
+  grid-column: 1 / -1;
+  min-height: 54px;
+  background: linear-gradient(135deg, rgba(255, 181, 71, 0.2), rgba(22, 93, 255, 0.12));
+}
+
+@media (max-width: 960px) {
+  .showcase-stats,
+  .showcase-filter-cluster,
+  .showcase-meta {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .showcase-shell {
+    padding: 20px 16px 48px;
+  }
+
+  .showcase-hero,
+  .showcase-section {
+    border-radius: 18px;
+  }
+
+  .showcase-hero {
+    padding: 24px;
+  }
+
+  .showcase-section {
+    padding: 20px;
+  }
+
+  .showcase-stats,
+  .showcase-filter-cluster,
+  .showcase-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .showcase-card {
+    padding: 16px;
+  }
+
+  .showcase-filter-pills {
+    gap: 6px;
+  }
+
+  .cover-preview {
+    min-height: 118px;
+  }
+}
diff --git a/prototypes/assets/bkflow-showcase.js b/prototypes/assets/bkflow-showcase.js
new file mode 100644
index 0000000000..6f54b37ee0
--- /dev/null
+++ b/prototypes/assets/bkflow-showcase.js
@@ -0,0 +1,114 @@
+(function () {
+  function normalize(value) {
+    return String(value || "").trim().toLowerCase();
+  }
+
+  function splitTags(value) {
+    return String(value || "")
+      .split(",")
+      .map(function (item) {
+        return item.trim().toLowerCase();
+      })
+      .filter(Boolean);
+  }
+
+  function initShowcase() {
+    var root = document.querySelector("[data-showcase-root]");
+    if (!root) {
+      return;
+    }
+
+    var searchInput = root.querySelector("[data-showcase-search]");
+    var summary = root.querySelector("[data-showcase-summary]");
+    var emptyState = root.querySelector("[data-showcase-empty]");
+    var cards = Array.prototype.slice.call(root.querySelectorAll("[data-feature-card]"));
+    var groups = Array.prototype.slice.call(root.querySelectorAll("[data-showcase-filter-group]"));
+    var state = {
+      status: "all",
+      tag: "all",
+      query: "",
+    };
+
+    function setGroupActive(group, value) {
+      var buttons = group.querySelectorAll("[data-showcase-filter]");
+      Array.prototype.forEach.call(buttons, function (button) {
+        button.classList.toggle("is-active", button.getAttribute("data-showcase-filter") === value);
+      });
+    }
+
+    function cardMatches(card) {
+      var searchIndex = normalize(card.getAttribute("data-search-index") || card.textContent);
+      var status = normalize(card.getAttribute("data-status"));
+      var tags = splitTags(card.getAttribute("data-tags"));
+      var statusOk = state.status === "all" || status === state.status;
+      var tagOk = state.tag === "all" || tags.indexOf(state.tag) !== -1;
+      var queryOk = !state.query || searchIndex.indexOf(state.query) !== -1;
+      return statusOk && tagOk && queryOk;
+    }
+
+    function render() {
+      var visibleCount = 0;
+      cards.forEach(function (card) {
+        var visible = cardMatches(card);
+        card.hidden = !visible;
+        card.setAttribute("aria-hidden", visible ? "false" : "true");
+        if (visible) {
+          visibleCount += 1;
+        }
+      });
+
+      if (summary) {
+        summary.textContent = visibleCount
+          ? "当前展示 " + visibleCount + " 个 Feature"
+          : "当前没有匹配的 Feature";
+      }
+
+      if (emptyState) {
+        emptyState.hidden = visibleCount !== 0;
+      }
+    }
+
+    if (searchInput) {
+      searchInput.addEventListener("input", function (event) {
+        state.query = normalize(event.target.value);
+        render();
+      });
+    }
+
+    groups.forEach(function (group) {
+      var groupName = group.getAttribute("data-showcase-filter-group");
+      if (!groupName) {
+        return;
+      }
+
+      var activeButton = group.querySelector('[data-showcase-filter].is-active') || group.querySelector("[data-showcase-filter]");
+      if (activeButton) {
+        setGroupActive(group, normalize(activeButton.getAttribute("data-showcase-filter")));
+      }
+
+      group.addEventListener("click", function (event) {
+        var button = event.target.closest("[data-showcase-filter]");
+        if (!button || !group.contains(button)) {
+          return;
+        }
+
+        var value = normalize(button.getAttribute("data-showcase-filter")) || "all";
+        if (groupName === "status") {
+          state.status = value;
+        } else if (groupName === "tag") {
+          state.tag = value;
+        }
+        setGroupActive(group, value);
+        render();
+      });
+    });
+
+    render();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initShowcase);
+  } else {
+    initShowcase();
+  }
+})();
diff --git a/prototypes/assets/icons/bkflow-logo.svg b/prototypes/assets/icons/bkflow-logo.svg
new file mode 100644
index 0000000000..edaf912d82
--- /dev/null
+++ b/prototypes/assets/icons/bkflow-logo.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24" width="36" height="24" aria-hidden="true">
+  <!-- Stylized flow: three nodes linked in sequence -->
+  <line x1="9" y1="12" x2="14.5" y2="12" stroke="#3a84ff" stroke-width="2" stroke-linecap="round"/>
+  <line x1="21.5" y1="12" x2="27" y2="12" stroke="#3a84ff" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="6" cy="12" r="3.5" fill="#3a84ff"/>
+  <circle cx="18" cy="12" r="3.5" fill="#3a84ff"/>
+  <circle cx="30" cy="12" r="3.5" fill="#3a84ff"/>
+</svg>
diff --git a/prototypes/examples/README.md b/prototypes/examples/README.md
new file mode 100644
index 0000000000..b2cf63fac3
--- /dev/null
+++ b/prototypes/examples/README.md
@@ -0,0 +1,28 @@
+# examples
+
+## Purpose
+
+`prototypes/examples/` is a small reference shelf for the component showcase. It is not for delivery.
+
+## Contract
+
+- `prototypes/examples/` is for reference only and is not for delivery.
+- Keep component demos in `component-showcase.html`.
+- Keep only `README.md` and `component-showcase.html` here.
+- Do not put feature pages or masters here.
+- `docs/specs/` and `docs/plans/` should not depend on examples for implementation trace.
+
+## What goes here
+
+- The component showcase page.
+- Material that helps explain the prototype toolkit itself.
+
+## What should not go here
+
+- Feature delivery pages.
+- Long-lived masters.
+- Content that belongs to a spec/plan-backed feature directory.
+
+## Relationship to `docs/specs` and `docs/plans`
+
+`docs/specs/` and `docs/plans/` should not depend on this directory for delivery. Examples can support understanding, but the implementation trace should live in `masters/` or `features/`, with `features/_legacy/` reserved for migrated history only.
diff --git a/prototypes/examples/component-showcase.html b/prototypes/examples/component-showcase.html
new file mode 100644
index 0000000000..fd17473759
--- /dev/null
+++ b/prototypes/examples/component-showcase.html
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型工具包 — 组件参考</title>
+  <link rel="stylesheet" href="../assets/bkflow-prototype.css">
+  <style>
+    body { background: var(--bk-bg-body); padding: 32px 48px; }
+    .showcase-title {
+      font-size: 24px; font-weight: 700; margin-bottom: 8px;
+      color: var(--bk-text-primary);
+    }
+    .showcase-subtitle {
+      font-size: 14px; color: var(--bk-text-tertiary); margin-bottom: 40px;
+    }
+    .section { margin-bottom: 48px; }
+    .section h2 {
+      font-size: 18px; font-weight: 600; margin-bottom: 20px;
+      padding-bottom: 8px; border-bottom: 1px solid var(--bk-border);
+    }
+    .demo-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
+    .demo-label {
+      font-size: 12px; color: var(--bk-text-tertiary); margin-bottom: 8px;
+    }
+    .demo-block {
+      background: var(--bk-bg-default); border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md); padding: 20px; margin-bottom: 16px;
+    }
+    .demo-inline { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+    .form-demo-container { max-width: 560px; }
+    .select-demo-wrap { width: 240px; display: inline-block; vertical-align: top; margin-right: 24px; }
+    .showcase-note {
+      margin: 16px 0 40px;
+      padding: 14px 16px;
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      background: var(--bk-bg-default);
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.7;
+    }
+    .showcase-note strong { color: var(--bk-text-primary); }
+  </style>
+</head>
+<body>
+
+  <h1 class="showcase-title">BKFlow 原型工具包 — 组件参考</h1>
+  <p class="showcase-subtitle">供 masters/ 与 features/&lt;slug&gt;/ 生成时查阅的样式与交互参考</p>
+  <div class="showcase-note">
+    <strong>使用方式：</strong>先看这里确认组件 class、交互属性和布局原语，再去 <code>masters/</code> 复用页面骨架或在 <code>features/&lt;slug&gt;/</code> 落地需求页。
+    <br>
+    <strong>范围：</strong><code>examples/</code> 只保留参考材料，<code>features/_legacy/</code> 只放迁移历史，不作为新交付入口。
+  </div>
+
+  <!-- ==================== 1. 按钮 Button ==================== -->
+  <div class="section">
+    <h2>1. 按钮 Button</h2>
+
+    <div class="demo-label">类型变体</div>
+    <div class="demo-block">
+      <div class="demo-row">
+        <button class="bk-button">默认按钮</button>
+        <button class="bk-button bk-button-primary">主要按钮</button>
+        <button class="bk-button bk-button-success">成功按钮</button>
+        <button class="bk-button bk-button-warning">警告按钮</button>
+        <button class="bk-button bk-button-danger">危险按钮</button>
+        <button class="bk-button bk-button-text">文字按钮</button>
+      </div>
+    </div>
+
+    <div class="demo-label">尺寸</div>
+    <div class="demo-block">
+      <div class="demo-row">
+        <button class="bk-button bk-button-primary bk-button-small">小尺寸</button>
+        <button class="bk-button bk-button-primary">默认尺寸</button>
+        <button class="bk-button bk-button-primary bk-button-large">大尺寸</button>
+      </div>
+    </div>
+
+    <div class="demo-label">禁用状态</div>
+    <div class="demo-block">
+      <div class="demo-row">
+        <button class="bk-button" disabled>默认禁用</button>
+        <button class="bk-button bk-button-primary" disabled>主要禁用</button>
+        <button class="bk-button bk-button-success" disabled>成功禁用</button>
+        <button class="bk-button bk-button-danger" disabled>危险禁用</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 2. 标签 Tag ==================== -->
+  <div class="section">
+    <h2>2. 标签 Tag</h2>
+    <div class="demo-block">
+      <div class="demo-inline">
+        <span class="bk-tag">默认标签</span>
+        <span class="bk-tag bk-tag-success">成功</span>
+        <span class="bk-tag bk-tag-warning">警告</span>
+        <span class="bk-tag bk-tag-danger">危险</span>
+        <span class="bk-tag bk-tag-info">信息</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 3. 输入框 Input ==================== -->
+  <div class="section">
+    <h2>3. 输入框 Input</h2>
+
+    <div class="demo-label">基本输入框</div>
+    <div class="demo-block" style="max-width:480px;">
+      <input class="bk-input" placeholder="默认输入框" style="margin-bottom:12px;">
+      <input class="bk-input" value="已有内容的输入框" style="margin-bottom:12px;">
+      <input class="bk-input" placeholder="禁用状态" disabled>
+    </div>
+
+    <div class="demo-label">输入框尺寸</div>
+    <div class="demo-block" style="max-width:480px;">
+      <input class="bk-input bk-input-small" placeholder="小尺寸 small" style="margin-bottom:12px;">
+      <input class="bk-input" placeholder="默认尺寸" style="margin-bottom:12px;">
+      <input class="bk-input bk-input-large" placeholder="大尺寸 large">
+    </div>
+
+    <div class="demo-label">文本域 Textarea</div>
+    <div class="demo-block" style="max-width:480px;">
+      <textarea class="bk-textarea" placeholder="请输入内容…" rows="3"></textarea>
+    </div>
+
+    <div class="demo-label">输入框组 Input Group</div>
+    <div class="demo-block" style="max-width:480px;">
+      <div class="bk-input-group">
+        <span class="bk-input-group-addon">https://</span>
+        <input class="bk-input" placeholder="example.com">
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 4. 表单 Form ==================== -->
+  <div class="section">
+    <h2>4. 表单 Form</h2>
+
+    <div class="demo-label">水平表单（默认）</div>
+    <div class="demo-block form-demo-container">
+      <form class="bk-form" onsubmit="return false;">
+        <div class="bk-form-item is-required">
+          <label class="bk-form-label">用户名</label>
+          <div class="bk-form-content">
+            <input class="bk-input" placeholder="请输入用户名" data-required>
+            <div class="bk-form-error">用户名不能为空</div>
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">邮箱</label>
+          <div class="bk-form-content">
+            <input class="bk-input" placeholder="user@example.com">
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">角色</label>
+          <div class="bk-form-content">
+            <div class="bk-select">
+              <div class="bk-select-trigger">
+                <span class="bk-select-placeholder">请选择角色</span>
+              </div>
+              <div class="bk-select-dropdown">
+                <div class="bk-select-option">管理员</div>
+                <div class="bk-select-option">开发者</div>
+                <div class="bk-select-option">访客</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">备注</label>
+          <div class="bk-form-content">
+            <textarea class="bk-textarea" placeholder="可选描述" rows="2"></textarea>
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label"></label>
+          <div class="bk-form-content">
+            <button class="bk-button bk-button-primary">提交</button>
+            <button class="bk-button">取消</button>
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <div class="demo-label">垂直表单</div>
+    <div class="demo-block form-demo-container">
+      <form class="bk-form bk-form-vertical" onsubmit="return false;">
+        <div class="bk-form-item is-required">
+          <label class="bk-form-label">名称</label>
+          <div class="bk-form-content">
+            <input class="bk-input" placeholder="请输入名称" data-required>
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">说明</label>
+          <div class="bk-form-content">
+            <textarea class="bk-textarea" placeholder="请输入说明" rows="2"></textarea>
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label"></label>
+          <div class="bk-form-content">
+            <button class="bk-button bk-button-primary">保存</button>
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <div class="demo-label">校验状态</div>
+    <div class="demo-block form-demo-container">
+      <form class="bk-form" onsubmit="return false;">
+        <div class="bk-form-item is-required is-error">
+          <label class="bk-form-label">必填字段</label>
+          <div class="bk-form-content">
+            <input class="bk-input" placeholder="此字段有错误">
+            <div class="bk-form-error">此字段为必填项</div>
+          </div>
+        </div>
+        <div class="bk-form-item is-required">
+          <label class="bk-form-label">正常必填</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="已填写内容">
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <!-- ==================== 5. 搜索 Search ==================== -->
+  <div class="section">
+    <h2>5. 搜索 Search</h2>
+    <div class="demo-block" style="max-width:400px;">
+      <input class="bk-search-input" placeholder="搜索…">
+    </div>
+  </div>
+
+  <!-- ==================== 6. 开关 Switcher ==================== -->
+  <div class="section">
+    <h2>6. 开关 Switcher</h2>
+    <div class="demo-block">
+      <div class="demo-inline">
+        <span style="font-size:13px;color:var(--bk-text-secondary);">关闭：</span>
+        <button type="button" class="bk-switcher"></button>
+        <span style="font-size:13px;color:var(--bk-text-secondary);margin-left:16px;">开启：</span>
+        <button type="button" class="bk-switcher is-checked"></button>
+        <span style="font-size:13px;color:var(--bk-text-secondary);margin-left:16px;">禁用：</span>
+        <button type="button" class="bk-switcher" disabled></button>
+        <span style="font-size:13px;color:var(--bk-text-secondary);margin-left:16px;">禁用(开)：</span>
+        <button type="button" class="bk-switcher is-checked" disabled></button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 7. 下拉选择 Select ==================== -->
+  <div class="section">
+    <h2>7. 下拉选择 Select</h2>
+
+    <div class="demo-block" style="overflow:visible;">
+      <div style="display:flex;gap:32px;flex-wrap:wrap;">
+        <div class="select-demo-wrap">
+          <div class="demo-label">收起状态</div>
+          <div class="bk-select">
+            <div class="bk-select-trigger">
+              <span class="bk-select-placeholder">请选择</span>
+            </div>
+            <div class="bk-select-dropdown">
+              <div class="bk-select-option">选项一</div>
+              <div class="bk-select-option">选项二</div>
+              <div class="bk-select-option">选项三</div>
+            </div>
+          </div>
+        </div>
+        <div class="select-demo-wrap">
+          <div class="demo-label">展开状态（手动 is-show）</div>
+          <div class="bk-select is-show">
+            <div class="bk-select-trigger">
+              <span class="bk-select-placeholder">请选择</span>
+            </div>
+            <div class="bk-select-dropdown is-show">
+              <div class="bk-select-option">选项 A</div>
+              <div class="bk-select-option is-selected">选项 B（已选）</div>
+              <div class="bk-select-option">选项 C</div>
+              <div class="bk-select-option is-disabled">选项 D（禁用）</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 8. 表格 Table ==================== -->
+  <div class="section">
+    <h2>8. 表格 Table</h2>
+
+    <div class="demo-label">基础表格（带排序、悬浮高亮、操作按钮）</div>
+    <div class="demo-block" style="padding:0;">
+      <table class="bk-table" id="demo-table">
+        <thead>
+          <tr>
+            <th data-sortable>ID</th>
+            <th data-sortable>名称</th>
+            <th data-sortable>类型</th>
+            <th data-sortable>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1001</td>
+            <td>生产部署流程</td>
+            <td><span class="bk-tag bk-tag-info">流程</span></td>
+            <td>2026-03-20 10:00:00</td>
+            <td>
+              <button class="bk-table-action">查看</button>
+              <button class="bk-table-action">编辑</button>
+              <button class="bk-table-action">删除</button>
+            </td>
+          </tr>
+          <tr>
+            <td>1002</td>
+            <td>测试环境回收</td>
+            <td><span class="bk-tag bk-tag-warning">定时</span></td>
+            <td>2026-03-19 15:30:00</td>
+            <td>
+              <button class="bk-table-action">查看</button>
+              <button class="bk-table-action">编辑</button>
+              <button class="bk-table-action">删除</button>
+            </td>
+          </tr>
+          <tr>
+            <td>1003</td>
+            <td>权限审批流程</td>
+            <td><span class="bk-tag bk-tag-success">审批</span></td>
+            <td>2026-03-18 09:15:00</td>
+            <td>
+              <button class="bk-table-action">查看</button>
+              <button class="bk-table-action">编辑</button>
+              <button class="bk-table-action">删除</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="demo-label" style="margin-top:20px;">空状态</div>
+    <div class="demo-block" style="padding:0;">
+      <table class="bk-table">
+        <thead>
+          <tr>
+            <th>名称</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="bk-table-empty">
+            <td colspan="3">暂无数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- ==================== 9. 分页 Pagination ==================== -->
+  <div class="section">
+    <h2>9. 分页 Pagination</h2>
+    <div class="demo-block">
+      <div class="bk-pagination">
+        <span class="bk-pagination-total">共 128 条</span>
+        <span class="bk-pagination-item">&laquo;</span>
+        <span class="bk-pagination-item">1</span>
+        <span class="bk-pagination-item active">2</span>
+        <span class="bk-pagination-item">3</span>
+        <span class="bk-pagination-item">4</span>
+        <span class="bk-pagination-item">5</span>
+        <span class="bk-pagination-item">&raquo;</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 10. 标签页 Tab ==================== -->
+  <div class="section">
+    <h2>10. 标签页 Tab</h2>
+    <div class="demo-block">
+      <div class="bk-tab">
+        <div class="bk-tab-header">
+          <span class="bk-tab-item active" data-tab="showcase-tab1">标签一</span>
+          <span class="bk-tab-item" data-tab="showcase-tab2">标签二</span>
+          <span class="bk-tab-item" data-tab="showcase-tab3">标签三</span>
+        </div>
+        <div class="bk-tab-panel" id="showcase-tab1">
+          <p>这是标签一的内容区域。可以放置任何组件和布局。</p>
+        </div>
+        <div class="bk-tab-panel" id="showcase-tab2" hidden>
+          <p>这是标签二的内容区域。Tab 切换由 data-tab 属性驱动。</p>
+        </div>
+        <div class="bk-tab-panel" id="showcase-tab3" hidden>
+          <p>这是标签三的内容区域。每个面板独立管理自己的内容。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 11. 卡片 Card ==================== -->
+  <div class="section">
+    <h2>11. 卡片 Card</h2>
+    <div style="display:flex;gap:20px;flex-wrap:wrap;">
+      <div class="bk-card" style="width:320px;">
+        <div class="bk-card-header">卡片标题</div>
+        <div class="bk-card-body">
+          <p>卡片内容区域，可以放置文本、表单、列表等各种内容。</p>
+        </div>
+        <div class="bk-card-footer" style="text-align:right;">
+          <button class="bk-button bk-button-small bk-button-text">操作</button>
+        </div>
+      </div>
+      <div class="bk-card" style="width:320px;">
+        <div class="bk-card-header">统计信息</div>
+        <div class="bk-card-body">
+          <div style="font-size:32px;font-weight:700;color:var(--bk-primary);">1,284</div>
+          <div style="font-size:12px;color:var(--bk-text-tertiary);margin-top:4px;">本月执行任务总数</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 12. 对话框 Dialog ==================== -->
+  <div class="section">
+    <h2>12. 对话框 Dialog</h2>
+    <div class="demo-block">
+      <button class="bk-button bk-button-primary" data-open="showcase-dialog">打开对话框</button>
+    </div>
+  </div>
+
+  <div id="showcase-dialog" class="bk-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <span>确认删除</span>
+        <button class="bk-dialog-close" data-close>&times;</button>
+      </div>
+      <div class="bk-dialog-body">
+        确定要删除该条记录吗？此操作不可撤销。
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button" data-close>取消</button>
+        <button class="bk-button bk-button-danger" data-close data-notify="已删除">确认删除</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 13. 侧滑 Sideslider ==================== -->
+  <div class="section">
+    <h2>13. 侧滑 Sideslider</h2>
+    <div class="demo-block">
+      <button class="bk-button bk-button-primary" data-open="showcase-slider">打开侧滑面板</button>
+    </div>
+  </div>
+
+  <div id="showcase-slider" class="bk-sideslider">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <span>侧滑面板标题</span>
+        <button class="bk-sideslider-close" data-close>&times;</button>
+      </div>
+      <div class="bk-sideslider-body">
+        <p>侧滑面板可以放置表单、详情信息、日志等内容。</p>
+        <p style="margin-top:12px;color:var(--bk-text-secondary);">从右侧滑出，宽度 640px，带过渡动画。</p>
+        <form class="bk-form" style="margin-top:24px;" onsubmit="return false;">
+          <div class="bk-form-item is-required">
+            <label class="bk-form-label">名称</label>
+            <div class="bk-form-content">
+              <input class="bk-input" placeholder="请输入名称" data-required>
+            </div>
+          </div>
+          <div class="bk-form-item">
+            <label class="bk-form-label">描述</label>
+            <div class="bk-form-content">
+              <textarea class="bk-textarea" placeholder="请输入描述" rows="3"></textarea>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="bk-sideslider-footer">
+        <button class="bk-button" data-close>取消</button>
+        <button class="bk-button bk-button-primary" data-close data-notify="提交成功">提交</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 14. 面包屑 Breadcrumb ==================== -->
+  <div class="section">
+    <h2>14. 面包屑 Breadcrumb</h2>
+    <div class="demo-block">
+      <div class="bk-breadcrumb" style="margin-bottom:0;">
+        <span class="bk-breadcrumb-item">首页</span>
+        <span class="bk-breadcrumb-item">任务管理</span>
+        <span class="bk-breadcrumb-item">任务详情</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 15. 加载 Loading ==================== -->
+  <div class="section">
+    <h2>15. 加载 Loading</h2>
+    <div class="demo-block">
+      <div class="bk-loading" style="min-height:120px;"></div>
+    </div>
+  </div>
+
+  <!-- ==================== 16. 异常 Exception ==================== -->
+  <div class="section">
+    <h2>16. 异常 Exception</h2>
+    <div class="demo-block">
+      <div class="bk-exception" style="min-height:180px;">
+        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="8" y="16" width="48" height="36" rx="3" stroke="#dcdee5" stroke-width="2" fill="none"/>
+          <line x1="8" y1="26" x2="56" y2="26" stroke="#dcdee5" stroke-width="2"/>
+          <circle cx="15" cy="21" r="2" fill="#dcdee5"/><circle cx="21" cy="21" r="2" fill="#dcdee5"/><circle cx="27" cy="21" r="2" fill="#dcdee5"/>
+          <text x="32" y="42" text-anchor="middle" font-size="10" fill="#c4c6cc">Empty</text>
+        </svg>
+        <span>暂无数据</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== 17. 布局原语 ==================== -->
+  <div class="section">
+    <h2>17. 布局原语</h2>
+
+    <div class="demo-label">操作栏 Toolbar</div>
+    <div class="demo-block">
+      <div class="bk-toolbar" style="margin-bottom:0;">
+        <div class="bk-toolbar-left">
+          <input class="bk-search-input" placeholder="搜索…" style="width:280px;">
+          <div class="bk-select" style="width:160px;">
+            <div class="bk-select-trigger">
+              <span class="bk-select-placeholder">筛选类型</span>
+            </div>
+          </div>
+        </div>
+        <div class="bk-toolbar-right">
+          <button class="bk-button">导出</button>
+          <button class="bk-button bk-button-primary">新建</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-label">信息卡片 Info Card</div>
+    <div class="demo-block">
+      <div class="bk-info-card">
+        <div class="bk-info-card-item">
+          <div class="bk-info-card-label">创建人</div>
+          <div class="bk-info-card-value">admin</div>
+        </div>
+        <div class="bk-info-card-item">
+          <div class="bk-info-card-label">创建时间</div>
+          <div class="bk-info-card-value">2026-03-20 14:30:00</div>
+        </div>
+        <div class="bk-info-card-item">
+          <div class="bk-info-card-label">状态</div>
+          <div class="bk-info-card-value"><span class="bk-tag bk-tag-success">运行中</span></div>
+        </div>
+        <div class="bk-info-card-item">
+          <div class="bk-info-card-label">所属空间</div>
+          <div class="bk-info-card-value">prod-space</div>
+        </div>
+        <div class="bk-info-card-item">
+          <div class="bk-info-card-label">执行时长</div>
+          <div class="bk-info-card-value">12.3s</div>
+        </div>
+        <div class="bk-info-card-item">
+          <div class="bk-info-card-label">关联模板</div>
+          <div class="bk-info-card-value">标准部署流程</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-label">24 列栅格 Grid</div>
+    <div class="demo-block">
+      <div class="bk-grid-row" style="gap:8px 0;">
+        <div class="bk-grid-col-24" style="background:var(--bk-bg-hover);padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-24</div>
+      </div>
+      <div class="bk-grid-row" style="gap:8px 0;margin-top:8px;">
+        <div class="bk-grid-col-12" style="background:var(--bk-bg-hover);padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-12</div>
+        <div class="bk-grid-col-12" style="background:#e1ecff;padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-12</div>
+      </div>
+      <div class="bk-grid-row" style="gap:8px 0;margin-top:8px;">
+        <div class="bk-grid-col-8" style="background:var(--bk-bg-hover);padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-8</div>
+        <div class="bk-grid-col-8" style="background:#e1ecff;padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-8</div>
+        <div class="bk-grid-col-8" style="background:var(--bk-bg-hover);padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-8</div>
+      </div>
+      <div class="bk-grid-row" style="gap:8px 0;margin-top:8px;">
+        <div class="bk-grid-col-6" style="background:var(--bk-bg-hover);padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-6</div>
+        <div class="bk-grid-col-6" style="background:#e1ecff;padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-6</div>
+        <div class="bk-grid-col-6" style="background:var(--bk-bg-hover);padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-6</div>
+        <div class="bk-grid-col-6" style="background:#e1ecff;padding:8px;text-align:center;border:1px dashed var(--bk-border);">col-6</div>
+      </div>
+    </div>
+  </div>
+
+  <script src="../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/features/README.md b/prototypes/features/README.md
new file mode 100644
index 0000000000..3a3568219d
--- /dev/null
+++ b/prototypes/features/README.md
@@ -0,0 +1,55 @@
+# features
+
+## Purpose
+
+`prototypes/features/` holds one directory per feature slug. Each feature directory should bundle the pages needed for a single spec/plan pairing tied to a feature slug.
+
+## Contract
+
+- `prototypes/features/` is organized by feature slug.
+- Each feature slug maps to one spec and one plan.
+- Put delivery pages, feature notes, and change logs here.
+- Do not put long-lived masters or shared shells here.
+- `feature.meta.json` is the homepage showcase contract for each feature slug.
+- `README.md` remains the narrative documentation for the feature directory.
+- When creating a new feature, keep `README.md`, `index.html`, and `feature.meta.json` in sync.
+- Keep `feature.meta.json` up to date so the showcase homepage can auto-discover the feature card, representative pages, and ordering without extra wiring.
+
+## `feature.meta.json` Schema
+
+```json
+{
+  "title": "feature 标题",
+  "summary": "一句话说明这个 feature",
+  "status": "可评审",
+  "tags": ["标签1", "标签2"],
+  "coverTheme": "mixed-admin",
+  "order": 10,
+  "featuredPages": [
+    {
+      "path": "pages/space/flow-edit.html",
+      "title": "流程编辑页",
+      "summary": "展示该页的核心能力",
+      "pageType": "流程编辑"
+    }
+  ]
+}
+```
+
+`featuredPages[*].path` 必须指向当前 feature 目录下真实存在的 HTML 文件，首页会拿它作为代表页入口。
+
+## What goes here
+
+- Feature-specific prototype pages.
+- Lightweight feature notes and change logs.
+- Pages that are meant to answer one concrete requirement.
+
+## What should not go here
+
+- Long-lived master patterns.
+- Shared shell fragments.
+- Miscellaneous examples that are not tied to a feature slug.
+
+## Relationship to `docs/specs` and `docs/plans`
+
+Each feature directory should be traceable back to one `docs/specs/` document and one `docs/plans/` document. That relationship should stay explicit so the prototype work can be reviewed against the requested scope.
diff --git a/prototypes/features/_legacy/README.md b/prototypes/features/_legacy/README.md
new file mode 100644
index 0000000000..9a380de271
--- /dev/null
+++ b/prototypes/features/_legacy/README.md
@@ -0,0 +1,28 @@
+# _legacy
+
+## Purpose
+
+`prototypes/features/_legacy/` is the temporary archive for older feature material that is being phased out of the new structure. It is not the active source of truth.
+
+## Contract
+
+- `prototypes/features/_legacy/` is archive-only and is not the active source of truth.
+- Use it only for migrated historical feature material.
+- New work belongs in `prototypes/features/<feature-slug>/`.
+- Do not put shared masters or delivery pages here.
+
+## What goes here
+
+- Old feature pages during migration.
+- Historical artifacts that still need a place while we clean up the tree.
+- Transition-only content that is no longer the active source of truth.
+
+## What should not go here
+
+- New feature work.
+- Shared masters.
+- Anything that should be treated as a current feature directory.
+
+## Relationship to `docs/specs` and `docs/plans`
+
+Legacy content may point back to old `docs/specs/` or `docs/plans/` entries, but it should not become the place where new work starts. New work belongs in `prototypes/features/<slug>/`.
diff --git a/prototypes/features/_legacy/node-output-viewer/README.md b/prototypes/features/_legacy/node-output-viewer/README.md
new file mode 100644
index 0000000000..94b4779a06
--- /dev/null
+++ b/prototypes/features/_legacy/node-output-viewer/README.md
@@ -0,0 +1,9 @@
+# node-output-viewer
+
+## Purpose
+
+This folder archives the historical node output viewer proposal that previously lived under `prototypes/output/node-output-viewer-proposal-v1.html`.
+
+## Contents
+
+- `index.html` preserves the migrated prototype page.
diff --git a/prototypes/features/_legacy/node-output-viewer/index.html b/prototypes/features/_legacy/node-output-viewer/index.html
new file mode 100644
index 0000000000..caa54fec6f
--- /dev/null
+++ b/prototypes/features/_legacy/node-output-viewer/index.html
@@ -0,0 +1,646 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>节点输出结构化展示方案 v1</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    body {
+      background: #f5f7fa;
+    }
+    .page {
+      padding: 24px;
+    }
+    .hero {
+      background: linear-gradient(135deg, #e8f3ff 0%, #f6fbff 100%);
+      border: 1px solid #d9e8ff;
+      border-radius: 12px;
+      padding: 24px;
+      margin-bottom: 20px;
+    }
+    .hero h1 {
+      font-size: 24px;
+      margin-bottom: 8px;
+      color: #1f2d3d;
+    }
+    .hero p {
+      color: #4d6075;
+      line-height: 1.7;
+      margin-bottom: 12px;
+    }
+    .chip-row {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 10px;
+      height: 28px;
+      border-radius: 14px;
+      font-size: 12px;
+      background: #fff;
+      border: 1px solid #d5dee8;
+      color: #3a4a5f;
+    }
+    .section-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 24px 0 12px;
+    }
+    .section-title h2 {
+      font-size: 18px;
+      color: #1f2d3d;
+    }
+    .section-title p {
+      font-size: 12px;
+      color: #7c8ca5;
+    }
+    .approach-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+    .approach-card {
+      background: #fff;
+      border: 1px solid #dfe6ee;
+      border-radius: 12px;
+      padding: 18px;
+      min-height: 280px;
+      box-shadow: 0 2px 8px rgba(15, 35, 95, 0.04);
+    }
+    .approach-card.recommended {
+      border-color: #3a84ff;
+      box-shadow: 0 8px 24px rgba(58, 132, 255, 0.14);
+      position: relative;
+    }
+    .recommended-flag {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      padding: 2px 8px;
+      font-size: 12px;
+      border-radius: 10px;
+      color: #fff;
+      background: #3a84ff;
+    }
+    .approach-card h3 {
+      font-size: 16px;
+      margin-bottom: 10px;
+      color: #1f2d3d;
+    }
+    .approach-card p {
+      font-size: 13px;
+      line-height: 1.7;
+      color: #516173;
+      margin-bottom: 12px;
+    }
+    .mini-list {
+      margin: 0;
+      padding-left: 16px;
+      color: #516173;
+      line-height: 1.8;
+      font-size: 13px;
+    }
+    .protocol-box {
+      background: #0f1e33;
+      color: #d7e5ff;
+      border-radius: 12px;
+      padding: 18px;
+      overflow: auto;
+      font-size: 12px;
+      line-height: 1.7;
+      white-space: pre;
+      font-family: Menlo, Monaco, Consolas, monospace;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
+    }
+    .viewer-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+    .viewer-card {
+      background: #fff;
+      border: 1px solid #dfe6ee;
+      border-radius: 12px;
+      padding: 18px;
+    }
+    .viewer-card h3 {
+      font-size: 15px;
+      color: #1f2d3d;
+      margin-bottom: 10px;
+    }
+    .viewer-card p {
+      font-size: 13px;
+      color: #516173;
+      margin-bottom: 10px;
+      line-height: 1.7;
+    }
+    .viewer-tags {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .viewer-tag {
+      padding: 4px 10px;
+      border-radius: 999px;
+      font-size: 12px;
+      background: #f0f5ff;
+      color: #3a84ff;
+      border: 1px solid #d8e6ff;
+    }
+    .mock-row {
+      display: grid;
+      grid-template-columns: 1.15fr 1fr 1fr;
+      gap: 16px;
+      margin-top: 16px;
+    }
+    .mock-card {
+      background: #fff;
+      border: 1px solid #dfe6ee;
+      border-radius: 12px;
+      padding: 16px;
+      min-height: 420px;
+      box-shadow: 0 2px 8px rgba(15, 35, 95, 0.04);
+    }
+    .mock-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 14px;
+    }
+    .mock-head h3 {
+      font-size: 16px;
+      color: #1f2d3d;
+    }
+    .muted {
+      color: #8592a6;
+      font-size: 12px;
+    }
+    .output-shell {
+      border: 1px solid #dfe6ee;
+      border-radius: 10px;
+      overflow: hidden;
+      background: #fff;
+    }
+    .output-toolbar {
+      height: 40px;
+      background: #f5f7fa;
+      border-bottom: 1px solid #e6ebf2;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 12px;
+    }
+    .seg-group {
+      display: inline-flex;
+      border: 1px solid #cdd7e3;
+      border-radius: 6px;
+      overflow: hidden;
+      background: #fff;
+    }
+    .seg {
+      padding: 0 10px;
+      height: 28px;
+      display: inline-flex;
+      align-items: center;
+      font-size: 12px;
+      color: #516173;
+      border-right: 1px solid #e6ebf2;
+    }
+    .seg:last-child {
+      border-right: none;
+    }
+    .seg.active {
+      color: #fff;
+      background: #3a84ff;
+    }
+    .output-body {
+      padding: 12px;
+      background: #fff;
+    }
+    .list-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+    }
+    .list-table th,
+    .list-table td {
+      border-bottom: 1px solid #edf1f6;
+      text-align: left;
+      padding: 10px 8px;
+      vertical-align: top;
+    }
+    .list-table th {
+      color: #4d6075;
+      background: #fafbfd;
+      font-weight: 600;
+    }
+    .sample-panel {
+      margin-top: 10px;
+      border: 1px solid #d9e8ff;
+      background: #f8fbff;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    .sample-header {
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 12px;
+      background: #eef5ff;
+      border-bottom: 1px solid #dbe7ff;
+      font-size: 12px;
+      color: #3a4a5f;
+    }
+    .sample-preview {
+      padding: 12px;
+    }
+    .sample-tree {
+      font-size: 12px;
+      line-height: 1.8;
+      color: #2f3f53;
+      background: #fff;
+      border: 1px solid #e6eef8;
+      border-radius: 8px;
+      padding: 10px 12px;
+    }
+    .sample-tree .indent {
+      padding-left: 16px;
+    }
+    .simple-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 8px;
+      height: 22px;
+      border-radius: 11px;
+      font-size: 12px;
+      background: #eaf3ff;
+      color: #3a84ff;
+      margin-right: 6px;
+    }
+    .json-block {
+      background: #0f1e33;
+      color: #d7e5ff;
+      border-radius: 8px;
+      padding: 12px;
+      font-size: 12px;
+      line-height: 1.7;
+      white-space: pre-wrap;
+      font-family: Menlo, Monaco, Consolas, monospace;
+    }
+    .friendly-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+    }
+    .friendly-table th,
+    .friendly-table td {
+      padding: 10px 8px;
+      border-bottom: 1px solid #edf1f6;
+    }
+    .friendly-table th {
+      background: #fafbfd;
+      color: #4d6075;
+    }
+    .api-preview {
+      border: 1px solid #e8edf3;
+      border-radius: 8px;
+      padding: 10px;
+      margin-top: 8px;
+      background: #fafbfd;
+      font-size: 12px;
+      color: #526274;
+    }
+    .footer-note {
+      margin-top: 16px;
+      padding: 14px 16px;
+      background: #fffbe6;
+      border: 1px solid #ffe58f;
+      border-radius: 10px;
+      color: #6b5c00;
+      line-height: 1.7;
+      font-size: 13px;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <div class="hero">
+      <h1>节点输出结构化展示方案 v1</h1>
+      <p>
+        目标是把 BKFlow 的“节点输出”从当前偏字符串/原始 JSON 的阅读体验，升级成
+        <strong>协议驱动的结构化展示</strong>：
+        插件声明输出 schema、viewer 和字段示例数据，平台在模板编辑态、配置快照和执行记录三处统一消费。
+      </p>
+      <div class="chip-row">
+        <span class="chip">第一版覆盖：模板编辑态 + 配置快照 + 执行记录</span>
+        <span class="chip">viewer：平台内置类型</span>
+        <span class="chip">兼容旧插件：默认 auto viewer</span>
+        <span class="chip">示例数据：字段级 example</span>
+        <span class="chip">Raw 视图保留</span>
+      </div>
+    </div>
+
+    <div class="section-title">
+      <h2>方案对比</h2>
+      <p>推荐方案会把“定义协议”和“展示能力”一起补齐</p>
+    </div>
+    <div class="approach-grid">
+      <div class="approach-card">
+        <h3>方案 A：纯前端自动识别</h3>
+        <p>不改插件协议，前端根据 value / type / schema 猜测展示方式。</p>
+        <ul class="mini-list">
+          <li>优点：开发快，改动小</li>
+          <li>缺点：结果不稳定，模板编辑态看不到示例预览</li>
+          <li>适合：临时增强执行记录页</li>
+        </ul>
+      </div>
+      <div class="approach-card recommended">
+        <span class="recommended-flag">推荐</span>
+        <h3>方案 B：Schema 驱动 viewer 协议</h3>
+        <p>插件后端显式声明输出字段的 viewer、schema 和 example，前端统一渲染，旧插件自动兜底。</p>
+        <ul class="mini-list">
+          <li>优点：定义清晰，三处页面体验统一</li>
+          <li>优点：模板编辑态可直接预览示例数据</li>
+          <li>缺点：需要补齐协议和渲染注册表</li>
+        </ul>
+      </div>
+      <div class="approach-card">
+        <h3>方案 C：自定义 renderer</h3>
+        <p>插件声明自己的专属输出渲染器，由平台按 renderer key 动态装配。</p>
+        <ul class="mini-list">
+          <li>优点：扩展性强</li>
+          <li>缺点：第一版复杂度高，平台治理成本重</li>
+          <li>适合：第二阶段以后补充少量特例</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="section-title">
+      <h2>推荐协议</h2>
+      <p>后端主导，前端可少量覆盖；旧插件未声明时回退到 auto</p>
+    </div>
+    <div class="protocol-box">{
+  "key": "data",
+  "name": "响应内容",
+  "type": "object",
+  "schema": {
+    "description": "HTTP 请求响应内容",
+    "properties": {
+      "status": { "type": "string" },
+      "items": { "type": "array" }
+    }
+  },
+  "viewer": {
+    "type": "table",
+    "options": {
+      "columns": [
+        { "key": "id", "label": "ID" },
+        { "key": "name", "label": "名称" },
+        { "key": "status", "label": "状态", "viewer": "badge" }
+      ],
+      "default_mode": "friendly",
+      "raw_enabled": true
+    }
+  },
+  "example": {
+    "items": [
+      { "id": "vm-01", "name": "db-prod-1", "status": "running" },
+      { "id": "vm-02", "name": "db-prod-2", "status": "stopped" }
+    ]
+  }
+}</div>
+
+    <div class="section-title">
+      <h2>第一版内置 viewer</h2>
+      <p>不开放任意自定义 JS，只做平台受控 viewer</p>
+    </div>
+    <div class="viewer-grid">
+      <div class="viewer-card">
+        <h3>基础类</h3>
+        <p>覆盖大部分旧插件和普通字段，未声明时优先走 auto。</p>
+        <div class="viewer-tags">
+          <span class="viewer-tag">auto</span>
+          <span class="viewer-tag">text</span>
+          <span class="viewer-tag">badge</span>
+          <span class="viewer-tag">link</span>
+          <span class="viewer-tag">markdown</span>
+        </div>
+      </div>
+      <div class="viewer-card">
+        <h3>结构化类</h3>
+        <p>面向 object / array / api data，解决“能看见 JSON，但不容易读”的问题。</p>
+        <div class="viewer-tags">
+          <span class="viewer-tag">json-tree</span>
+          <span class="viewer-tag">kv</span>
+          <span class="viewer-tag">table</span>
+          <span class="viewer-tag">log</span>
+        </div>
+      </div>
+      <div class="viewer-card">
+        <h3>媒体类</h3>
+        <p>作为补充，统一支持一些可直接感知的资源类型。</p>
+        <div class="viewer-tags">
+          <span class="viewer-tag">image</span>
+          <span class="viewer-tag">raw</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="section-title">
+      <h2>三处页面落点</h2>
+      <p>模板编辑态看“定义与示例”，配置快照看“定义快照”，执行记录看“真实值 + Raw”</p>
+    </div>
+    <div class="mock-row">
+      <div class="mock-card">
+        <div class="mock-head">
+          <h3>模板编辑态：节点输出定义</h3>
+          <span class="muted">输出列表内联示例预览</span>
+        </div>
+        <div class="output-shell">
+          <div class="output-toolbar">
+            <strong style="font-size:13px;color:#2f3f53;">节点输出</strong>
+            <span class="muted">支持勾选为全局变量</span>
+          </div>
+          <div class="output-body">
+            <table class="list-table">
+              <thead>
+                <tr>
+                  <th style="width:26%;">名称</th>
+                  <th style="width:20%;">KEY</th>
+                  <th style="width:16%;">viewer</th>
+                  <th style="width:20%;">示例</th>
+                  <th>变量</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>响应内容</td>
+                  <td>data</td>
+                  <td><span class="simple-badge">table</span></td>
+                  <td><a href="javascript:void(0)" style="color:#3a84ff;">查看示例</a></td>
+                  <td>未勾选</td>
+                </tr>
+                <tr>
+                  <td>状态码</td>
+                  <td>status_code</td>
+                  <td><span class="simple-badge">badge</span></td>
+                  <td><a href="javascript:void(0)" style="color:#3a84ff;">查看示例</a></td>
+                  <td>${status_code}</td>
+                </tr>
+              </tbody>
+            </table>
+            <div class="sample-panel">
+              <div class="sample-header">
+                <strong>data · 示例预览</strong>
+                <div class="seg-group">
+                  <span class="seg active">Friendly</span>
+                  <span class="seg">Raw</span>
+                </div>
+              </div>
+              <div class="sample-preview">
+                <table class="friendly-table">
+                  <thead>
+                    <tr>
+                      <th>ID</th>
+                      <th>名称</th>
+                      <th>状态</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>vm-01</td>
+                      <td>db-prod-1</td>
+                      <td><span class="simple-badge">running</span></td>
+                    </tr>
+                    <tr>
+                      <td>vm-02</td>
+                      <td>db-prod-2</td>
+                      <td><span class="simple-badge">stopped</span></td>
+                    </tr>
+                  </tbody>
+                </table>
+                <div class="api-preview">编辑器里可直接知道：这个字段运行后会默认按表格展示，而不是只能猜它是 object。</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mock-card">
+        <div class="mock-head">
+          <h3>配置快照：输出协议快照</h3>
+          <span class="muted">重点看定义，不看真实值</span>
+        </div>
+        <div class="output-shell">
+          <div class="output-toolbar">
+            <strong style="font-size:13px;color:#2f3f53;">输出配置快照</strong>
+            <div class="seg-group">
+              <span class="seg active">定义</span>
+              <span class="seg">示例</span>
+            </div>
+          </div>
+          <div class="output-body">
+            <table class="list-table">
+              <thead>
+                <tr>
+                  <th>字段</th>
+                  <th>类型</th>
+                  <th>viewer</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>data</td>
+                  <td>object</td>
+                  <td>table</td>
+                </tr>
+                <tr>
+                  <td>status_code</td>
+                  <td>int</td>
+                  <td>badge</td>
+                </tr>
+              </tbody>
+            </table>
+            <div class="sample-panel">
+              <div class="sample-header">
+                <strong>viewer 配置</strong>
+                <span class="muted">用于解释为什么执行记录这样展示</span>
+              </div>
+              <div class="sample-preview">
+                <div class="json-block">{
+  "data": {
+    "viewer": "table",
+    "columns": ["id", "name", "status"]
+  },
+  "status_code": {
+    "viewer": "badge"
+  }
+}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mock-card">
+        <div class="mock-head">
+          <h3>执行记录：真实输出值</h3>
+          <span class="muted">Friendly / Raw 双视图</span>
+        </div>
+        <div class="output-shell">
+          <div class="output-toolbar">
+            <strong style="font-size:13px;color:#2f3f53;">输出参数</strong>
+            <div class="seg-group">
+              <span class="seg active">Friendly</span>
+              <span class="seg">Raw</span>
+            </div>
+          </div>
+          <div class="output-body">
+            <table class="friendly-table">
+              <thead>
+                <tr>
+                  <th>参数名</th>
+                  <th>Key</th>
+                  <th>值</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>状态码</td>
+                  <td>status_code</td>
+                  <td><span class="simple-badge">200</span></td>
+                </tr>
+                <tr>
+                  <td>响应内容</td>
+                  <td>data</td>
+                  <td>
+                    <div class="sample-tree">
+                      items
+                      <div class="indent">[0] id: vm-01</div>
+                      <div class="indent">[0] name: db-prod-1</div>
+                      <div class="indent">[0] status: running</div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div class="api-preview">
+              旧插件如果没声明 viewer，也能先走 auto：object 用 json-tree，array&lt;object&gt; 尝试表格化，始终保留 Raw 视图。
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer-note">
+      第一版不引入“插件自定义 JS 渲染器”。平台先提供受控 viewer 集合，把协议、示例数据和三处页面体验统一起来；后续如果出现少量强业务场景，再按 renderer key 扩展专用 viewer。
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/_legacy/sops-open-plugin/README.md b/prototypes/features/_legacy/sops-open-plugin/README.md
new file mode 100644
index 0000000000..77b2025e76
--- /dev/null
+++ b/prototypes/features/_legacy/sops-open-plugin/README.md
@@ -0,0 +1,13 @@
+# sops-open-plugin
+
+## Purpose
+
+This folder archives the historical Standard Ops open-plugin prototype pages that used to live under `prototypes/output/`.
+
+## Contents
+
+- `index.html` is the archive landing page.
+- `main-flow.html` preserves the main flow prototype.
+- `space-open-plugin-management.html` preserves the space management prototype.
+- `task-plugin-error-state.html` preserves the task error state prototype.
+- `template-plugin-selection.html` preserves the template plugin selection prototype.
diff --git a/prototypes/features/_legacy/sops-open-plugin/index.html b/prototypes/features/_legacy/sops-open-plugin/index.html
new file mode 100644
index 0000000000..84f7582087
--- /dev/null
+++ b/prototypes/features/_legacy/sops-open-plugin/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>sops-open-plugin archive - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    body {
+      margin: 0;
+      font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
+      background: linear-gradient(180deg, #f6f9ff 0%, #eef3f9 100%);
+      color: var(--bk-text-primary);
+    }
+    .shell {
+      max-width: 1080px;
+      margin: 0 auto;
+      padding: 32px 24px 40px;
+    }
+    .hero {
+      background: rgba(255, 255, 255, 0.92);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 18px;
+      padding: 24px;
+      box-shadow: 0 10px 30px rgba(31, 35, 41, 0.06);
+      margin-bottom: 18px;
+    }
+    .title {
+      margin: 0 0 10px;
+      font-size: 28px;
+      line-height: 1.2;
+    }
+    .desc {
+      margin: 0;
+      color: var(--bk-text-secondary);
+      font-size: 14px;
+      line-height: 1.8;
+      max-width: 900px;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 14px;
+    }
+    .card {
+      display: block;
+      padding: 16px 18px;
+      border-radius: 14px;
+      border: 1px solid var(--bk-border-light);
+      background: var(--bk-bg-default);
+      text-decoration: none;
+      color: inherit;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.04);
+    }
+    .card:hover {
+      border-color: rgba(58, 132, 255, 0.3);
+      transform: translateY(-1px);
+    }
+    .card h2 {
+      margin: 0 0 8px;
+      font-size: 16px;
+    }
+    .card p {
+      margin: 0;
+      font-size: 13px;
+      line-height: 1.7;
+      color: var(--bk-text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <main class="shell">
+    <section class="hero">
+      <h1 class="title">sops-open-plugin archive</h1>
+      <p class="desc">
+        This folder keeps the migrated historical open-plugin prototype pages that used to live in `prototypes/output/`.
+        The original HTML has been preserved under feature-scoped legacy paths so the archive stays understandable.
+      </p>
+    </section>
+
+    <section class="grid">
+      <a class="card" href="main-flow.html">
+        <h2>Main flow</h2>
+        <p>Former `sops-open-plugin-main-flow.html`.</p>
+      </a>
+      <a class="card" href="space-open-plugin-management.html">
+        <h2>Space management</h2>
+        <p>Former `sops-open-plugin-space-open-plugin-management.html`.</p>
+      </a>
+      <a class="card" href="task-plugin-error-state.html">
+        <h2>Task error state</h2>
+        <p>Former `sops-open-plugin-task-plugin-error-state.html`.</p>
+      </a>
+      <a class="card" href="template-plugin-selection.html">
+        <h2>Template plugin selection</h2>
+        <p>Former `sops-open-plugin-template-plugin-selection.html`.</p>
+      </a>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/prototypes/features/_legacy/sops-open-plugin/main-flow.html b/prototypes/features/_legacy/sops-open-plugin/main-flow.html
new file mode 100644
index 0000000000..805326a850
--- /dev/null
+++ b/prototypes/features/_legacy/sops-open-plugin/main-flow.html
@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>标准运维开放插件主流程 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    .flow-hero {
+      background: linear-gradient(135deg, #edf4ff 0%, #f7f9fc 100%);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 16px;
+      padding: 24px 28px;
+      margin-bottom: 20px;
+    }
+    .flow-hero-title {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--bk-text-primary);
+      margin-bottom: 8px;
+    }
+    .flow-hero-desc {
+      font-size: 14px;
+      color: var(--bk-text-secondary);
+      max-width: 920px;
+      line-height: 1.6;
+    }
+    .step-line {
+      display: grid;
+      grid-template-columns: 1fr 72px 1fr 72px 1fr;
+      gap: 0;
+      align-items: stretch;
+      margin: 20px 0 28px;
+    }
+    .step-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      padding: 18px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+    }
+    .step-index {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: var(--bk-primary);
+      color: #fff;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 700;
+      margin-bottom: 12px;
+    }
+    .step-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 6px;
+    }
+    .step-desc {
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      line-height: 1.6;
+      min-height: 62px;
+    }
+    .step-action {
+      margin-top: 14px;
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .step-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #a3adc2;
+      font-size: 30px;
+      font-weight: 300;
+    }
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin: 26px 0 14px;
+    }
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+    .summary-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      padding: 18px;
+    }
+    .summary-label {
+      font-size: 12px;
+      color: var(--bk-text-tertiary);
+      margin-bottom: 8px;
+    }
+    .summary-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--bk-text-primary);
+    }
+    .summary-note {
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      margin-top: 10px;
+      line-height: 1.6;
+    }
+    .lane-grid {
+      display: grid;
+      grid-template-columns: 1.3fr 1fr;
+      gap: 16px;
+    }
+    .mini-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 12px;
+    }
+    .mini-table th,
+    .mini-table td {
+      border-bottom: 1px solid var(--bk-border-light);
+      padding: 10px 8px;
+      text-align: left;
+      font-size: 12px;
+      color: var(--bk-text-secondary);
+    }
+    .mini-table th {
+      color: var(--bk-text-tertiary);
+      font-weight: 500;
+      background: #fafbfd;
+    }
+    .state-panel {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 16px;
+      margin-top: 18px;
+    }
+    .state-card {
+      border-radius: 14px;
+      padding: 18px;
+      border: 1px solid var(--bk-border-light);
+      background: var(--bk-bg-default);
+    }
+    .state-card.is-danger {
+      border-color: rgba(255, 87, 87, 0.3);
+      background: rgba(255, 87, 87, 0.04);
+    }
+    .state-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 8px;
+    }
+    .state-bullet {
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+    }
+    .footer-tip {
+      margin-top: 20px;
+      padding: 14px 16px;
+      border-radius: 10px;
+      background: #fff8e6;
+      border: 1px solid rgba(248, 181, 63, 0.35);
+      color: #8c6a00;
+      font-size: 13px;
+      line-height: 1.7;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation">
+    <header class="bk-navigation-header">
+      <div class="bk-navigation-header-title">
+        <span style="font-size:18px;font-weight:600;color:#fff;">BKFlow</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav">
+          <li class="bk-navigation-header-nav-item active">空间管理</li>
+          <li class="bk-navigation-header-nav-item">系统管理</li>
+          <li class="bk-navigation-header-nav-item">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>space_admin</span>
+        </div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar" aria-label="侧边导航">
+        <div class="bk-navigation-space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-plugin-hub (612)</span>
+          </div>
+        </div>
+        <ul class="bk-navigation-menu">
+          <li class="bk-navigation-menu-item active"><span class="bk-navigation-menu-icon">⇌</span>流程</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">▤</span>任务</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⚙</span>空间配置</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⬡</span>开放插件</li>
+        </ul>
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <div class="bk-breadcrumb">
+          <span class="bk-breadcrumb-item">首页</span>
+          <span class="bk-breadcrumb-item">标准运维开放插件接入</span>
+          <span class="bk-breadcrumb-item">主流程</span>
+        </div>
+
+        <div class="flow-hero">
+          <div class="flow-hero-title">标准运维开放插件在 BKFlow 的主流程</div>
+          <div class="flow-hero-desc">
+            这组原型把治理、配置和任务异常解释串成一条完整路径。主目标不是新增一种插件类型，而是让用户继续以 API 插件心智使用标准运维开放出来的内置插件和第三方插件，同时把空间级治理和版本可用性说清楚。
+          </div>
+
+          <div class="step-line">
+            <div class="step-card">
+              <div class="step-index">1</div>
+              <div class="step-title">空间管理员开放插件</div>
+              <div class="step-desc">在“开放插件管理”里查看来源、搜索插件、对当前已发现插件进行逐个开启或批量开启。</div>
+              <div class="step-action">
+                <button class="bk-button bk-button-primary" data-href="space-open-plugin-management.html">查看管理页</button>
+              </div>
+            </div>
+            <div class="step-arrow">→</div>
+            <div class="step-card">
+              <div class="step-index">2</div>
+              <div class="step-title">模板作者选择插件与版本</div>
+              <div class="step-desc">在模板节点配置里按普通 API 插件方式选择来源、插件和显式版本字段，并感知当前版本是否仍可新用。</div>
+              <div class="step-action">
+                <button class="bk-button bk-button-primary" data-href="template-plugin-selection.html">查看模板页</button>
+              </div>
+            </div>
+            <div class="step-arrow">→</div>
+            <div class="step-card">
+              <div class="step-index">3</div>
+              <div class="step-title">任务页展示执行结果或异常</div>
+              <div class="step-desc">启动任务后统一进入任务页。如果插件未开放、版本失效或来源不可达，任务页通过结构化错误卡片解释原因并给出建议动作。</div>
+              <div class="step-action">
+                <button class="bk-button bk-button-primary" data-href="task-plugin-error-state.html">查看任务页</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="summary-grid">
+          <div class="summary-card">
+            <div class="summary-label">当前空间已接入来源</div>
+            <div class="summary-value">1 个</div>
+            <div class="summary-note">标准运维开放插件来源已完成同步，当前已发现 24 个开放插件，其中 9 个已开启。</div>
+          </div>
+          <div class="summary-card">
+            <div class="summary-label">模板侧新增心智</div>
+            <div class="summary-value">1 个字段</div>
+            <div class="summary-note">模板编辑只新增显式 `plugin_version` 字段，其余仍维持普通 API 插件配置方式。</div>
+          </div>
+          <div class="summary-card">
+            <div class="summary-label">任务异常承载位置</div>
+            <div class="summary-value">任务页</div>
+            <div class="summary-note">启动前不做复杂拦截，所有插件不可用类问题统一沉淀到任务页解释。</div>
+          </div>
+        </div>
+
+        <div class="section-title">治理摘要</div>
+        <div class="lane-grid">
+          <div class="summary-card">
+            <div class="summary-label">开放来源摘要</div>
+            <table class="mini-table">
+              <thead>
+                <tr>
+                  <th>来源</th>
+                  <th>状态</th>
+                  <th>插件数</th>
+                  <th>最近同步</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>标准运维开放插件</td>
+                  <td><span class="bk-tag bk-tag-success">可用</span></td>
+                  <td>24</td>
+                  <td>2026-04-20 11:48</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="summary-card">
+            <div class="summary-label">开放规则</div>
+            <div class="summary-note">
+              1. 新同步进来的插件默认关闭。<br>
+              2. “一键全开”只作用于当前已发现插件。<br>
+              3. 已下线插件保留历史记录，但不可继续新用。<br>
+              4. 来源级紧急停用属于增强态预留。
+            </div>
+          </div>
+        </div>
+
+        <div class="section-title">主线与异常线</div>
+        <div class="state-panel">
+          <div class="state-card">
+            <div class="state-title">
+              <span class="bk-tag bk-tag-success">主线</span>
+              标准接入流程
+            </div>
+            <div class="state-bullet">
+              空间管理员开启“云作业执行脚本”插件 → 模板作者选择版本 `1.4.2` → 用户启动任务 → 任务页展示成功状态与插件版本快照。
+            </div>
+          </div>
+          <div class="state-card is-danger">
+            <div class="state-title">
+              <span class="bk-tag bk-tag-danger">异常线</span>
+              版本失效流程
+            </div>
+            <div class="state-bullet">
+              历史模板仍引用 `1.2.0` → 来源目录已不再提供该版本 → 用户启动任务 → 任务页展示“版本不可用”错误卡片，并引导返回模板切换版本。
+            </div>
+          </div>
+        </div>
+
+        <div class="footer-tip">
+          这份主流程原型只负责把整体路径讲清楚；更细的治理、配置和错误说明分别在独立页面原型里展开。
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/features/_legacy/sops-open-plugin/space-open-plugin-management.html b/prototypes/features/_legacy/sops-open-plugin/space-open-plugin-management.html
new file mode 100644
index 0000000000..13e0768746
--- /dev/null
+++ b/prototypes/features/_legacy/sops-open-plugin/space-open-plugin-management.html
@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>开放插件管理 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    .page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 18px;
+    }
+    .page-title {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--bk-text-primary);
+      margin-bottom: 8px;
+    }
+    .page-desc {
+      font-size: 14px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+      max-width: 840px;
+    }
+    .sync-pill {
+      flex-shrink: 0;
+      padding: 10px 14px;
+      border-radius: 999px;
+      background: #f0f7ff;
+      border: 1px solid rgba(58, 132, 255, 0.2);
+      color: var(--bk-primary);
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .source-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+      margin-bottom: 18px;
+    }
+    .source-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      padding: 18px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+    }
+    .source-card.is-warning {
+      background: rgba(248, 181, 63, 0.05);
+      border-color: rgba(248, 181, 63, 0.35);
+    }
+    .source-card-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+    .source-name {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+    }
+    .source-meta {
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+    }
+    .source-actions {
+      margin-top: 14px;
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .page-alert {
+      margin-bottom: 16px;
+      padding: 12px 16px;
+      border-radius: 10px;
+      background: #f0f7ff;
+      border: 1px solid rgba(58, 132, 255, 0.2);
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.7;
+    }
+    .page-alert.is-warning {
+      background: rgba(248, 181, 63, 0.08);
+      border-color: rgba(248, 181, 63, 0.35);
+      color: #8c6a00;
+    }
+    .status-cell {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #c4c6cc;
+    }
+    .dot.is-success { background: #2dcb56; }
+    .dot.is-warning { background: #f8b53f; }
+    .dot.is-danger { background: #ff5757; }
+    .muted-row {
+      opacity: 0.66;
+      background: #fafbfd;
+    }
+    .switch-wrap {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .helper-panel {
+      margin-top: 16px;
+      display: grid;
+      grid-template-columns: 1.3fr 1fr;
+      gap: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation">
+    <header class="bk-navigation-header">
+      <div class="bk-navigation-header-title">
+        <span style="font-size:18px;font-weight:600;color:#fff;">BKFlow</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav">
+          <li class="bk-navigation-header-nav-item active">空间管理</li>
+          <li class="bk-navigation-header-nav-item">系统管理</li>
+          <li class="bk-navigation-header-nav-item">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>space_admin</span>
+        </div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar" aria-label="侧边导航">
+        <div class="bk-navigation-space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-plugin-hub (612)</span>
+          </div>
+        </div>
+        <ul class="bk-navigation-menu">
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⇌</span>流程</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">▤</span>任务</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⚙</span>空间配置</li>
+          <li class="bk-navigation-menu-item active"><span class="bk-navigation-menu-icon">⬡</span>开放插件</li>
+        </ul>
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <div class="bk-breadcrumb">
+          <span class="bk-breadcrumb-item">首页</span>
+          <span class="bk-breadcrumb-item">空间管理</span>
+          <span class="bk-breadcrumb-item">开放插件</span>
+        </div>
+
+        <div class="page-header">
+          <div>
+            <div class="page-title">开放插件管理</div>
+            <div class="page-desc">
+              空间管理员在这里决定当前空间可以使用哪些开放插件。页面同时展示来源状态、插件启用情况、已下线插件记录以及后续新增插件的默认策略。
+            </div>
+          </div>
+          <div class="sync-pill">最近同步：2026-04-20 11:48</div>
+        </div>
+
+        <div class="source-grid">
+          <div class="source-card">
+            <div class="source-card-title">
+              <div class="source-name">标准运维开放插件</div>
+              <span class="bk-tag bk-tag-success">可用</span>
+            </div>
+            <div class="source-meta">
+              已发现 24 个插件，已开启 9 个。<br>
+              类型同时包含标准运维内置插件与第三方插件。<br>
+              当前空间仍可继续同步该来源的新目录。
+            </div>
+            <div class="source-actions">
+              <button class="bk-button bk-button-primary">同步目录</button>
+              <button class="bk-button">查看来源详情</button>
+            </div>
+          </div>
+          <div class="source-card is-warning">
+            <div class="source-card-title">
+              <div class="source-name">增强态：来源紧急停用</div>
+              <span class="bk-tag bk-tag-warning">预留</span>
+            </div>
+            <div class="source-meta">
+              当开放层整体不可用时，管理员可按来源批量关闭当前来源下的插件，避免模板继续新建任务。
+            </div>
+            <div class="source-actions">
+              <button class="bk-button bk-button-warning" disabled>按来源一键关闭</button>
+            </div>
+          </div>
+          <div class="source-card">
+            <div class="source-card-title">
+              <div class="source-name">规则摘要</div>
+              <span class="bk-tag bk-tag-info">说明</span>
+            </div>
+            <div class="source-meta">
+              1. 新增插件默认关闭。<br>
+              2. 一键全开只作用于当前已发现插件。<br>
+              3. 已下线插件仅保留记录，不可继续新用。
+            </div>
+          </div>
+        </div>
+
+        <div class="page-alert">
+          你可以对单个插件开关，也可以对“当前列表中已发现的插件”执行一键全开。后续同步进来的新插件不会自动继承这次批量动作，仍然默认关闭。
+        </div>
+
+        <div class="bk-toolbar">
+          <div class="bk-toolbar-left">
+            <input class="bk-search-input" placeholder="搜索插件名 / 来源别名…" style="width: 340px;" data-filter="open-plugin-table">
+            <div class="bk-select" style="width: 180px;">
+              <div class="bk-select-trigger">
+                <span>全部来源</span>
+              </div>
+            </div>
+            <div class="bk-select" style="width: 180px;">
+              <div class="bk-select-trigger">
+                <span>全部类型</span>
+              </div>
+            </div>
+          </div>
+          <div class="bk-toolbar-right">
+            <button class="bk-button">仅看已开启</button>
+            <button class="bk-button bk-button-primary" data-notify="已为当前已发现插件执行一键全开（原型演示）">一键全开当前已发现插件</button>
+          </div>
+        </div>
+
+        <table class="bk-table" id="open-plugin-table">
+          <thead>
+            <tr>
+              <th data-sortable>插件名</th>
+              <th>来源别名</th>
+              <th>插件类型</th>
+              <th>当前状态</th>
+              <th>版本概况</th>
+              <th data-sortable>最近同步时间</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>云作业执行脚本</td>
+              <td>[标准运维内置插件]</td>
+              <td><span class="bk-tag bk-tag-info">内置</span></td>
+              <td><span class="status-cell"><span class="dot is-success"></span>已开启</span></td>
+              <td>默认 1.4.2 / 最新 1.5.0</td>
+              <td>2026-04-20 11:48</td>
+              <td>
+                <div class="switch-wrap">
+                  <button type="button" class="bk-switcher is-checked"></button>
+                  <button class="bk-table-action">查看版本</button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>批量更新主机属性</td>
+              <td>[标准运维第三方插件]</td>
+              <td><span class="bk-tag bk-tag-success">第三方</span></td>
+              <td><span class="status-cell"><span class="dot is-success"></span>已开启</span></td>
+              <td>默认 2.1.0 / 最新 2.2.1</td>
+              <td>2026-04-20 11:48</td>
+              <td>
+                <div class="switch-wrap">
+                  <button type="button" class="bk-switcher is-checked"></button>
+                  <button class="bk-table-action">查看版本</button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>节点巡检报告汇总</td>
+              <td>[标准运维第三方插件]</td>
+              <td><span class="bk-tag bk-tag-success">第三方</span></td>
+              <td><span class="status-cell"><span class="dot"></span>未开启</span></td>
+              <td>默认 1.0.3 / 最新 1.1.0</td>
+              <td>2026-04-20 11:48</td>
+              <td>
+                <div class="switch-wrap">
+                  <button type="button" class="bk-switcher"></button>
+                  <button class="bk-table-action">查看版本</button>
+                </div>
+              </td>
+            </tr>
+            <tr class="muted-row">
+              <td>集群扩容预检查</td>
+              <td>[标准运维内置插件]</td>
+              <td><span class="bk-tag bk-tag-info">内置</span></td>
+              <td><span class="status-cell"><span class="dot is-danger"></span>已下线</span></td>
+              <td>历史版本 1.2.0 已不可新用</td>
+              <td>2026-04-18 19:20</td>
+              <td>
+                <div class="switch-wrap">
+                  <button type="button" class="bk-switcher" disabled></button>
+                  <button class="bk-table-action">查看历史</button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>标准运维回调压测</td>
+              <td>[标准运维第三方插件]</td>
+              <td><span class="bk-tag bk-tag-success">第三方</span></td>
+              <td><span class="status-cell"><span class="dot is-warning"></span>来源异常</span></td>
+              <td>目录已同步，执行状态待恢复</td>
+              <td>2026-04-20 11:48</td>
+              <td>
+                <div class="switch-wrap">
+                  <button type="button" class="bk-switcher is-checked" disabled></button>
+                  <button class="bk-table-action">查看来源</button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="helper-panel">
+          <div class="page-alert is-warning">
+            <strong>增强态示意：</strong> 当来源进入“紧急停用”状态时，当前空间下该来源的所有插件会统一转成不可继续新用，但仍保留历史模板与历史任务的回看能力。
+          </div>
+          <div class="page-alert">
+            <strong>页面约束：</strong> 这里控制的是空间级开放状态。模板保存、任务创建和任务启动仍由服务端基于当前状态再次校验，不会只靠前端列表展示拦截。
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/features/_legacy/sops-open-plugin/task-plugin-error-state.html b/prototypes/features/_legacy/sops-open-plugin/task-plugin-error-state.html
new file mode 100644
index 0000000000..74363d0017
--- /dev/null
+++ b/prototypes/features/_legacy/sops-open-plugin/task-plugin-error-state.html
@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>任务页插件异常提示 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    .task-header {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      padding: 18px 20px;
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .task-title {
+      font-size: 22px;
+      font-weight: 700;
+      color: var(--bk-text-primary);
+      margin-bottom: 8px;
+    }
+    .task-subtitle {
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+    }
+    .task-status {
+      flex-shrink: 0;
+      padding: 10px 14px;
+      border-radius: 999px;
+      background: rgba(255, 87, 87, 0.08);
+      border: 1px solid rgba(255, 87, 87, 0.24);
+      color: #c53434;
+      font-size: 13px;
+      font-weight: 700;
+    }
+    .layout {
+      display: grid;
+      grid-template-columns: 1.5fr 1fr;
+      gap: 16px;
+    }
+    .card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+      overflow: hidden;
+      margin-bottom: 16px;
+    }
+    .card-header {
+      padding: 16px 18px;
+      border-bottom: 1px solid var(--bk-border-light);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .card-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+    }
+    .card-body {
+      padding: 18px;
+    }
+    .error-hero {
+      border: 1px solid rgba(255, 87, 87, 0.24);
+      background: rgba(255, 87, 87, 0.04);
+      border-radius: 14px;
+      padding: 18px;
+      margin-bottom: 16px;
+    }
+    .error-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #c53434;
+      margin-bottom: 8px;
+    }
+    .error-desc {
+      font-size: 14px;
+      color: var(--bk-text-secondary);
+      line-height: 1.8;
+    }
+    .meta-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 14px 16px;
+      margin-top: 16px;
+    }
+    .meta-label {
+      font-size: 12px;
+      color: var(--bk-text-tertiary);
+      margin-bottom: 6px;
+    }
+    .meta-value {
+      font-size: 14px;
+      color: var(--bk-text-primary);
+      line-height: 1.7;
+    }
+    .action-card {
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      padding: 14px 16px;
+      margin-bottom: 12px;
+      background: #fafbfd;
+    }
+    .action-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 6px;
+    }
+    .action-desc {
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+      margin-bottom: 10px;
+    }
+    .history-box {
+      padding: 14px 16px;
+      background: #f0f7ff;
+      border: 1px solid rgba(58, 132, 255, 0.2);
+      border-radius: 12px;
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      line-height: 1.8;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation">
+    <header class="bk-navigation-header">
+      <div class="bk-navigation-header-title">
+        <span style="font-size:18px;font-weight:600;color:#fff;">BKFlow</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav">
+          <li class="bk-navigation-header-nav-item active">空间管理</li>
+          <li class="bk-navigation-header-nav-item">系统管理</li>
+          <li class="bk-navigation-header-nav-item">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>task_operator</span>
+        </div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar" aria-label="侧边导航">
+        <div class="bk-navigation-space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-plugin-hub (612)</span>
+          </div>
+        </div>
+        <ul class="bk-navigation-menu">
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⇌</span>流程</li>
+          <li class="bk-navigation-menu-item active"><span class="bk-navigation-menu-icon">▤</span>任务</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⚙</span>空间配置</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⬡</span>开放插件</li>
+        </ul>
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <div class="bk-breadcrumb">
+          <span class="bk-breadcrumb-item">首页</span>
+          <span class="bk-breadcrumb-item">任务</span>
+          <span class="bk-breadcrumb-item">任务详情</span>
+        </div>
+
+        <div class="task-header">
+          <div>
+            <div class="task-title">生产集群执行脚本任务 #20260420-0042</div>
+            <div class="task-subtitle">
+              来源模板：生产环境脚本执行 / 当前节点：云作业执行脚本 / 启动时间：2026-04-20 14:18:03
+            </div>
+          </div>
+          <div class="task-status">执行异常</div>
+        </div>
+
+        <div class="layout">
+          <div>
+            <div class="error-hero">
+              <div class="error-title">插件版本不可用，任务未能继续执行</div>
+              <div class="error-desc">
+                当前任务引用的开放插件版本已不再由来源目录提供。BKFlow 仍保留了历史配置快照用于回看，但该版本不能继续用于新的执行请求，因此任务页展示结构化异常说明，并引导返回模板侧处理。
+              </div>
+              <div class="meta-grid">
+                <div>
+                  <div class="meta-label">当前插件</div>
+                  <div class="meta-value">云作业执行脚本</div>
+                </div>
+                <div>
+                  <div class="meta-label">当前版本</div>
+                  <div class="meta-value">1.2.0</div>
+                </div>
+                <div>
+                  <div class="meta-label">当前来源</div>
+                  <div class="meta-value">标准运维开放插件</div>
+                </div>
+                <div>
+                  <div class="meta-label">当前影响</div>
+                  <div class="meta-value">该任务无法继续执行，但历史节点配置仍可回看</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title">建议动作</div>
+                <span class="bk-tag bk-tag-warning">任务页只解释，不原地修复</span>
+              </div>
+              <div class="card-body">
+                <div class="action-card">
+                  <div class="action-title">返回模板切换到可用版本</div>
+                  <div class="action-desc">模板作者需要将当前节点从 `1.2.0` 切换到目录仍可用的版本，例如 `1.4.2` 或 `1.5.0`，并重新确认参数。</div>
+                  <button class="bk-button bk-button-primary">返回模板查看版本</button>
+                </div>
+                <div class="action-card">
+                  <div class="action-title">检查空间是否仍开放该插件</div>
+                  <div class="action-desc">如果插件本身还在来源目录中，也可能是当前空间关闭了该插件，需回到空间开放插件管理页确认。</div>
+                  <button class="bk-button">去开放插件管理页</button>
+                </div>
+                <div class="action-card">
+                  <div class="action-title">联系来源维护人或空间管理员</div>
+                  <div class="action-desc">若来源目录刚完成版本清理、来源当前不可达，或插件能力本身已下线，需要联系管理员或维护人确认处理路径。</div>
+                  <button class="bk-button">复制异常摘要</button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title">历史快照说明</div>
+                <span class="bk-tag bk-tag-info">只读</span>
+              </div>
+              <div class="card-body">
+                <div class="history-box">
+                  该任务创建时已经固化了插件引用快照和 schema 快照，因此当前页面仍能解释“当时为什么能保存、现在为什么不能继续新建任务”。这里展示的是历史视角，不代表该版本现在仍可用于新任务。
+                </div>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title">异常分类示意</div>
+                <span class="bk-tag bk-tag-info">增强态预留</span>
+              </div>
+              <div class="card-body">
+                <div class="action-card">
+                  <div class="action-title">空间未开放</div>
+                  <div class="action-desc">插件仍可用，但当前空间未开启该插件。</div>
+                </div>
+                <div class="action-card">
+                  <div class="action-title">来源不可达</div>
+                  <div class="action-desc">开放来源当前异常，执行链路无法继续调用标准运维开放层。</div>
+                </div>
+                <div class="action-card">
+                  <div class="action-title">插件已下线</div>
+                  <div class="action-desc">插件或版本已从目录彻底移除，只保留历史记录。</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/features/_legacy/sops-open-plugin/template-plugin-selection.html b/prototypes/features/_legacy/sops-open-plugin/template-plugin-selection.html
new file mode 100644
index 0000000000..b6820e2597
--- /dev/null
+++ b/prototypes/features/_legacy/sops-open-plugin/template-plugin-selection.html
@@ -0,0 +1,362 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>模板插件选择与版本展示 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    .page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 18px;
+    }
+    .page-title {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--bk-text-primary);
+      margin-bottom: 8px;
+    }
+    .page-desc {
+      font-size: 14px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+      max-width: 880px;
+    }
+    .layout {
+      display: grid;
+      grid-template-columns: 1.55fr 1fr;
+      gap: 16px;
+      align-items: start;
+    }
+    .section-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+      margin-bottom: 16px;
+      overflow: hidden;
+    }
+    .section-card-header {
+      padding: 16px 18px;
+      border-bottom: 1px solid var(--bk-border-light);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .section-card-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+    }
+    .section-card-body {
+      padding: 18px;
+    }
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px 16px;
+    }
+    .info-item-label {
+      font-size: 12px;
+      color: var(--bk-text-tertiary);
+      margin-bottom: 6px;
+    }
+    .info-item-value {
+      font-size: 14px;
+      color: var(--bk-text-primary);
+      line-height: 1.6;
+    }
+    .inline-note {
+      margin-top: 12px;
+      padding: 12px 14px;
+      border-radius: 10px;
+      font-size: 13px;
+      line-height: 1.7;
+      background: #f0f7ff;
+      border: 1px solid rgba(58, 132, 255, 0.2);
+      color: var(--bk-text-secondary);
+    }
+    .inline-note.is-danger {
+      background: rgba(255, 87, 87, 0.05);
+      border-color: rgba(255, 87, 87, 0.28);
+      color: #8f3131;
+    }
+    .version-row {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 12px;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--bk-border-light);
+    }
+    .version-row:last-child {
+      border-bottom: none;
+    }
+    .version-meta {
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+    }
+    .field-shell {
+      display: grid;
+      grid-template-columns: 140px 1fr;
+      gap: 16px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--bk-border-light);
+      align-items: start;
+    }
+    .field-shell:last-child {
+      border-bottom: none;
+    }
+    .field-name {
+      font-size: 13px;
+      color: var(--bk-text-primary);
+      font-weight: 600;
+      padding-top: 10px;
+    }
+    .ghost-box {
+      background: #fafbfd;
+      border: 1px dashed var(--bk-border);
+      border-radius: 10px;
+      padding: 12px 14px;
+      font-size: 13px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation">
+    <header class="bk-navigation-header">
+      <div class="bk-navigation-header-title">
+        <span style="font-size:18px;font-weight:600;color:#fff;">BKFlow</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav">
+          <li class="bk-navigation-header-nav-item active">空间管理</li>
+          <li class="bk-navigation-header-nav-item">系统管理</li>
+          <li class="bk-navigation-header-nav-item">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>template_owner</span>
+        </div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar" aria-label="侧边导航">
+        <div class="bk-navigation-space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-plugin-hub (612)</span>
+          </div>
+        </div>
+        <ul class="bk-navigation-menu">
+          <li class="bk-navigation-menu-item active"><span class="bk-navigation-menu-icon">⇌</span>流程</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">▤</span>任务</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⚙</span>空间配置</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⬡</span>开放插件</li>
+        </ul>
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <div class="bk-breadcrumb">
+          <span class="bk-breadcrumb-item">首页</span>
+          <span class="bk-breadcrumb-item">流程</span>
+          <span class="bk-breadcrumb-item">模板编辑</span>
+          <span class="bk-breadcrumb-item">节点插件配置</span>
+        </div>
+
+        <div class="page-header">
+          <div>
+            <div class="page-title">节点插件配置：云作业执行脚本</div>
+            <div class="page-desc">
+              用户继续以普通 API 插件方式选择来源、分类和插件，只增加显式 `plugin_version` 字段。当前版本不可用时，模板仍可回看历史配置，但不能基于失效版本继续新用。
+            </div>
+          </div>
+          <button class="bk-button bk-button-primary">保存节点配置</button>
+        </div>
+
+        <div class="layout">
+          <div>
+            <div class="section-card">
+              <div class="section-card-header">
+                <div class="section-card-title">插件选择</div>
+                <span class="bk-tag bk-tag-info">普通 API 插件体验</span>
+              </div>
+              <div class="section-card-body">
+                <form class="bk-form" onsubmit="return false;">
+                  <div class="bk-form-item">
+                    <label class="bk-form-label">来源</label>
+                    <div class="bk-form-content">
+                      <div class="bk-select">
+                        <div class="bk-select-trigger">
+                          <span>标准运维开放插件</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="bk-form-item">
+                    <label class="bk-form-label">分类</label>
+                    <div class="bk-form-content">
+                      <div class="bk-select">
+                        <div class="bk-select-trigger">
+                          <span>作业执行</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="bk-form-item">
+                    <label class="bk-form-label">插件</label>
+                    <div class="bk-form-content">
+                      <div class="bk-select">
+                        <div class="bk-select-trigger">
+                          <span>云作业执行脚本</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="bk-form-item is-required">
+                    <label class="bk-form-label">plugin_version</label>
+                    <div class="bk-form-content">
+                      <div class="bk-select">
+                        <div class="bk-select-trigger">
+                          <span>1.4.2</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+
+                <div class="inline-note">
+                  当前节点保留普通 API 插件配置方式。版本字段始终显式展示，用来说明模板最终绑定的是哪个开放插件版本。
+                </div>
+              </div>
+            </div>
+
+            <div class="section-card">
+              <div class="section-card-header">
+                <div class="section-card-title">参数配置</div>
+                <span class="bk-tag bk-tag-success">按当前版本 schema 渲染</span>
+              </div>
+              <div class="section-card-body">
+                <div class="field-shell">
+                  <div class="field-name">业务 ID</div>
+                  <div><input class="bk-input" value="200145" placeholder="请输入业务 ID"></div>
+                </div>
+                <div class="field-shell">
+                  <div class="field-name">执行账号</div>
+                  <div><input class="bk-input" value="root" placeholder="请输入执行账号"></div>
+                </div>
+                <div class="field-shell">
+                  <div class="field-name">脚本内容</div>
+                  <div><textarea class="bk-textarea" rows="5">echo \"deploy bkflow open plugin\" && kubectl rollout restart deployment/demo</textarea></div>
+                </div>
+                <div class="field-shell">
+                  <div class="field-name">超时时间</div>
+                  <div><input class="bk-input" value="600" placeholder="秒"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="section-card">
+              <div class="section-card-header">
+                <div class="section-card-title">历史模板回看态</div>
+                <span class="bk-tag bk-tag-warning">只读示意</span>
+              </div>
+              <div class="section-card-body">
+                <div class="ghost-box">
+                  当历史模板引用的版本已经不再开放时，页面仍会展示当时保存下来的插件引用快照和 schema 快照，但对应字段进入只读态，用户需要切换到可用版本后才能继续新建任务。
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div class="section-card">
+              <div class="section-card-header">
+                <div class="section-card-title">插件摘要</div>
+                <span class="bk-tag bk-tag-success">当前可用</span>
+              </div>
+              <div class="section-card-body">
+                <div class="info-grid">
+                  <div>
+                    <div class="info-item-label">来源别名</div>
+                    <div class="info-item-value">[标准运维内置插件]</div>
+                  </div>
+                  <div>
+                    <div class="info-item-label">插件类型</div>
+                    <div class="info-item-value">内置插件</div>
+                  </div>
+                  <div>
+                    <div class="info-item-label">默认版本</div>
+                    <div class="info-item-value">1.4.2</div>
+                  </div>
+                  <div>
+                    <div class="info-item-label">最新版本</div>
+                    <div class="info-item-value">1.5.0</div>
+                  </div>
+                </div>
+                <div class="inline-note">
+                  当前空间已开放该插件，且版本 `1.4.2` 仍可继续新用。若切换到更新版本，需要重新确认参数兼容性。
+                </div>
+              </div>
+            </div>
+
+            <div class="section-card">
+              <div class="section-card-header">
+                <div class="section-card-title">版本列表</div>
+                <span class="bk-tag bk-tag-info">增强态预留</span>
+              </div>
+              <div class="section-card-body">
+                <div class="version-row">
+                  <div class="version-meta">
+                    <strong>1.5.0</strong><br>
+                    新增脚本执行结果归档字段，推荐新模板使用。
+                  </div>
+                  <span class="bk-tag bk-tag-success">可用</span>
+                </div>
+                <div class="version-row">
+                  <div class="version-meta">
+                    <strong>1.4.2</strong><br>
+                    当前模板绑定版本。
+                  </div>
+                  <span class="bk-tag bk-tag-info">当前版本</span>
+                </div>
+                <div class="version-row">
+                  <div class="version-meta">
+                    <strong>1.2.0</strong><br>
+                    历史模板常见版本，目录已不再开放。
+                  </div>
+                  <span class="bk-tag bk-tag-danger">不可用</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="section-card">
+              <div class="section-card-header">
+                <div class="section-card-title">失效版本提示</div>
+                <span class="bk-tag bk-tag-danger">异常态</span>
+              </div>
+              <div class="section-card-body">
+                <div class="inline-note is-danger">
+                  当前模板若仍绑定版本 `1.2.0`，页面应允许查看历史配置，但不能继续直接新建任务。用户需要先切换到可用版本，例如 `1.4.2` 或 `1.5.0`，再重新确认参数。
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/features/_legacy/space-variable-manage/README.md b/prototypes/features/_legacy/space-variable-manage/README.md
new file mode 100644
index 0000000000..927203570b
--- /dev/null
+++ b/prototypes/features/_legacy/space-variable-manage/README.md
@@ -0,0 +1,9 @@
+# space-variable-manage
+
+## Purpose
+
+This folder archives the historical space variable management prototype that previously lived under `prototypes/output/space-variable-manage.html`.
+
+## Contents
+
+- `index.html` preserves the migrated prototype page.
diff --git a/prototypes/features/_legacy/space-variable-manage/index.html b/prototypes/features/_legacy/space-variable-manage/index.html
new file mode 100644
index 0000000000..0999c1d1ab
--- /dev/null
+++ b/prototypes/features/_legacy/space-variable-manage/index.html
@@ -0,0 +1,651 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间变量管理 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    .scope-bar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 16px;
+      padding: 12px 16px;
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+    }
+    .scope-bar-label {
+      color: var(--bk-text-secondary);
+      font-size: var(--bk-font-size);
+      white-space: nowrap;
+    }
+    .scope-chip {
+      display: inline-flex;
+      align-items: center;
+      height: 28px;
+      padding: 0 12px;
+      border-radius: 14px;
+      font-size: var(--bk-font-size-sm);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      border: 1px solid var(--bk-border);
+      background: var(--bk-bg-default);
+      color: var(--bk-text-primary);
+    }
+    .scope-chip:hover { border-color: var(--bk-primary); color: var(--bk-primary); }
+    .scope-chip.active {
+      background: var(--bk-primary);
+      color: #fff;
+      border-color: var(--bk-primary);
+    }
+    .scope-selector {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .var-value-cell {
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 12px;
+      color: var(--bk-text-secondary);
+      max-width: 220px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .var-value-secret {
+      letter-spacing: 2px;
+      color: var(--bk-text-disabled);
+    }
+    .var-type-badge {
+      display: inline-block;
+      padding: 1px 6px;
+      border-radius: var(--bk-radius);
+      font-size: 11px;
+      font-family: 'SFMono-Regular', Consolas, monospace;
+    }
+    .var-type-string { background: #e1ecff; color: #3a84ff; }
+    .var-type-number { background: #e5f8eb; color: #2dcb56; }
+    .var-type-boolean { background: #fef5e6; color: #d98e0b; }
+    .var-type-password { background: #ffeded; color: #ff5757; }
+    .var-type-json { background: #f0f1f5; color: #666666; }
+    .scope-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: var(--bk-radius);
+      font-size: 11px;
+      background: #f0f7ff;
+      color: var(--bk-primary);
+      border: 1px solid #d4e6fd;
+    }
+    .scope-tag-global {
+      background: #f0f1f5;
+      color: var(--bk-text-secondary);
+      border-color: var(--bk-border);
+    }
+    /* Task detail variable panel preview */
+    .task-var-preview {
+      border: 1px solid var(--bk-border);
+      border-radius: var(--bk-radius-md);
+      background: var(--bk-bg-default);
+      overflow: hidden;
+    }
+    .task-var-preview-header {
+      height: 42px;
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      border-bottom: 1px solid var(--bk-border-light);
+      font-size: var(--bk-font-size);
+      font-weight: 600;
+    }
+    .task-var-item {
+      border-bottom: 1px solid var(--bk-border-light);
+    }
+    .task-var-item:last-child { border-bottom: none; }
+    .task-var-key {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px 4px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 13px;
+      color: var(--bk-primary);
+      font-weight: 600;
+    }
+    .task-var-key .var-scope-hint {
+      margin-left: 8px;
+      font-size: 11px;
+      font-weight: normal;
+      color: var(--bk-text-tertiary);
+      font-family: var(--bk-font);
+    }
+    .task-var-val {
+      padding: 0 16px 12px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 12px;
+      color: var(--bk-text-primary);
+      word-break: break-all;
+      white-space: pre-wrap;
+      line-height: 1.6;
+      max-height: 120px;
+      overflow-y: auto;
+    }
+    .task-var-val-secret {
+      color: var(--bk-text-disabled);
+      letter-spacing: 2px;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation">
+    <header class="bk-navigation-header">
+      <div class="bk-navigation-header-title">
+        <span style="font-size:18px;font-weight:600;color:#fff;">BKFlow</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav">
+          <li class="bk-navigation-header-nav-item active">空间管理</li>
+          <li class="bk-navigation-header-nav-item">系统管理</li>
+          <li class="bk-navigation-header-nav-item">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>用户名</span>
+        </div>
+      </div>
+    </header>
+
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar" aria-label="侧边导航">
+        <div class="bk-navigation-space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-eng-svc (237)</span>
+          </div>
+        </div>
+        <ul class="bk-navigation-menu">
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">⇌</span>流程</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">▤</span>任务</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">▢</span>调试任务</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">✦</span>决策表</li>
+          <li class="bk-navigation-menu-item active"><span class="bk-navigation-menu-icon">⚙</span>空间配置</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">▣</span>凭证管理</li>
+          <li class="bk-navigation-menu-item"><span class="bk-navigation-menu-icon">▥</span>标签管理</li>
+        </ul>
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <h2 style="margin-bottom:16px;">空间配置</h2>
+
+        <!-- Tab: 基本信息 / 功能开关 / 变量管理 -->
+        <div class="bk-tab">
+          <div class="bk-tab-header">
+            <span class="bk-tab-item" data-tab="tab-basic">基本信息</span>
+            <span class="bk-tab-item" data-tab="tab-switches">功能开关</span>
+            <span class="bk-tab-item active" data-tab="tab-variables">变量管理</span>
+          </div>
+
+          <!-- ===== Tab: 基本信息 ===== -->
+          <div class="bk-tab-panel" id="tab-basic" hidden>
+            <div class="bk-info-card" style="margin-top:8px;">
+              <div class="bk-info-card-item">
+                <div class="bk-info-card-label">空间名称</div>
+                <div class="bk-info-card-value">bkflow-eng-svc</div>
+              </div>
+              <div class="bk-info-card-item">
+                <div class="bk-info-card-label">空间ID</div>
+                <div class="bk-info-card-value">237</div>
+              </div>
+              <div class="bk-info-card-item">
+                <div class="bk-info-card-label">创建人</div>
+                <div class="bk-info-card-value">admin</div>
+              </div>
+              <div class="bk-info-card-item">
+                <div class="bk-info-card-label">创建时间</div>
+                <div class="bk-info-card-value">2025-12-01 10:00:00</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- ===== Tab: 功能开关 ===== -->
+          <div class="bk-tab-panel" id="tab-switches" hidden>
+            <div class="bk-card" style="margin-top:8px;">
+              <div class="bk-card-body">
+                <div class="bk-form">
+                  <div class="bk-form-item">
+                    <label class="bk-form-label">任务限流</label>
+                    <div class="bk-form-content" style="display:flex;align-items:center;gap:12px;">
+                      <button class="bk-switcher is-checked"></button>
+                      <span style="color:var(--bk-text-tertiary);">开启后将限制并发执行任务数</span>
+                    </div>
+                  </div>
+                  <div class="bk-form-item">
+                    <label class="bk-form-label">Webhook</label>
+                    <div class="bk-form-content" style="display:flex;align-items:center;gap:12px;">
+                      <button class="bk-switcher"></button>
+                      <span style="color:var(--bk-text-tertiary);">启用 Webhook 事件推送</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- ===== Tab: 变量管理 ===== -->
+          <div class="bk-tab-panel" id="tab-variables">
+
+            <!-- 作用域筛选栏 -->
+            <div class="scope-bar">
+              <span class="scope-bar-label">作用域：</span>
+              <span class="scope-chip active" onclick="switchScope(this,'all')">全部</span>
+              <span class="scope-chip" onclick="switchScope(this,'space')">空间级</span>
+              <span class="scope-chip" onclick="switchScope(this,'scope')">Scope 级</span>
+              <div class="scope-selector" id="scope-detail-selector" style="display:none;">
+                <span style="color:var(--bk-text-tertiary);font-size:12px;">│</span>
+                <div class="bk-select" style="width:120px;">
+                  <div class="bk-select-trigger" style="height:28px;font-size:12px;">
+                    <span>biz</span>
+                  </div>
+                  <div class="bk-select-dropdown">
+                    <div class="bk-select-option is-selected">biz</div>
+                    <div class="bk-select-option">set</div>
+                    <div class="bk-select-option">module</div>
+                  </div>
+                </div>
+                <div class="bk-select" style="width:160px;">
+                  <div class="bk-select-trigger" style="height:28px;font-size:12px;">
+                    <span>全部 scope_value</span>
+                  </div>
+                  <div class="bk-select-dropdown">
+                    <div class="bk-select-option is-selected">全部 scope_value</div>
+                    <div class="bk-select-option">2 (王者荣耀)</div>
+                    <div class="bk-select-option">5 (和平精英)</div>
+                    <div class="bk-select-option">18 (天涯明月刀)</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 工具栏 -->
+            <div class="bk-toolbar">
+              <div class="bk-toolbar-left">
+                <input class="bk-search-input" placeholder="搜索变量名 / 描述…" style="width:300px;" data-filter="var-table">
+              </div>
+              <div class="bk-toolbar-right">
+                <button class="bk-button bk-button-primary" data-open="create-var-slider">新建变量</button>
+              </div>
+            </div>
+
+            <!-- 变量列表 -->
+            <table class="bk-table" id="var-table">
+              <thead>
+                <tr>
+                  <th data-sortable>变量名</th>
+                  <th>KEY</th>
+                  <th>类型</th>
+                  <th>变量值</th>
+                  <th>作用域</th>
+                  <th>描述</th>
+                  <th data-sortable>创建人</th>
+                  <th data-sortable>更新时间</th>
+                  <th>操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code style="font-size:12px;background:#f0f1f5;padding:2px 6px;border-radius:2px;">BK_APP_CODE</code></td>
+                  <td><span class="var-value-cell">${_space.BK_APP_CODE}</span></td>
+                  <td><span class="var-type-badge var-type-string">string</span></td>
+                  <td><span class="var-value-cell">bkflow-eng-svc</span></td>
+                  <td><span class="scope-tag scope-tag-global">空间级</span></td>
+                  <td>应用标识，用于 API 鉴权</td>
+                  <td>admin</td>
+                  <td>2026-03-20 14:30</td>
+                  <td>
+                    <button class="bk-table-action" data-open="edit-var-slider">编辑</button>
+                    <button class="bk-table-action" data-open="delete-var-dialog">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td><code style="font-size:12px;background:#f0f1f5;padding:2px 6px;border-radius:2px;">BK_APP_SECRET</code></td>
+                  <td><span class="var-value-cell">${_space.BK_APP_SECRET}</span></td>
+                  <td><span class="var-type-badge var-type-password">password</span></td>
+                  <td><span class="var-value-cell var-value-secret">••••••••</span></td>
+                  <td><span class="scope-tag scope-tag-global">空间级</span></td>
+                  <td>应用密钥，加密存储</td>
+                  <td>admin</td>
+                  <td>2026-03-20 14:30</td>
+                  <td>
+                    <button class="bk-table-action" data-open="edit-var-slider">编辑</button>
+                    <button class="bk-table-action" data-open="delete-var-dialog">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td><code style="font-size:12px;background:#f0f1f5;padding:2px 6px;border-radius:2px;">NOTIFY_RECEIVERS</code></td>
+                  <td><span class="var-value-cell">${_space.NOTIFY_RECEIVERS}</span></td>
+                  <td><span class="var-type-badge var-type-json">json</span></td>
+                  <td><span class="var-value-cell">["admin","devops"]</span></td>
+                  <td><span class="scope-tag scope-tag-global">空间级</span></td>
+                  <td>默认通知接收人列表</td>
+                  <td>admin</td>
+                  <td>2026-03-19 10:15</td>
+                  <td>
+                    <button class="bk-table-action" data-open="edit-var-slider">编辑</button>
+                    <button class="bk-table-action" data-open="delete-var-dialog">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td><code style="font-size:12px;background:#f0f1f5;padding:2px 6px;border-radius:2px;">DEPLOY_ENV</code></td>
+                  <td><span class="var-value-cell">${_scope.DEPLOY_ENV}</span></td>
+                  <td><span class="var-type-badge var-type-string">string</span></td>
+                  <td><span class="var-value-cell">production</span></td>
+                  <td><span class="scope-tag">biz = 2</span></td>
+                  <td>部署环境标识</td>
+                  <td>devops</td>
+                  <td>2026-03-18 16:42</td>
+                  <td>
+                    <button class="bk-table-action" data-open="edit-var-slider">编辑</button>
+                    <button class="bk-table-action" data-open="delete-var-dialog">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td><code style="font-size:12px;background:#f0f1f5;padding:2px 6px;border-radius:2px;">MAX_RETRY</code></td>
+                  <td><span class="var-value-cell">${_scope.MAX_RETRY}</span></td>
+                  <td><span class="var-type-badge var-type-number">number</span></td>
+                  <td><span class="var-value-cell">3</span></td>
+                  <td><span class="scope-tag">biz = 2</span></td>
+                  <td>节点失败最大重试次数</td>
+                  <td>devops</td>
+                  <td>2026-03-18 16:42</td>
+                  <td>
+                    <button class="bk-table-action" data-open="edit-var-slider">编辑</button>
+                    <button class="bk-table-action" data-open="delete-var-dialog">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td><code style="font-size:12px;background:#f0f1f5;padding:2px 6px;border-radius:2px;">ENABLE_APPROVAL</code></td>
+                  <td><span class="var-value-cell">${_scope.ENABLE_APPROVAL}</span></td>
+                  <td><span class="var-type-badge var-type-boolean">boolean</span></td>
+                  <td><span class="var-value-cell">true</span></td>
+                  <td><span class="scope-tag">biz = 5</span></td>
+                  <td>是否启用审批节点</td>
+                  <td>pm_wang</td>
+                  <td>2026-03-17 09:20</td>
+                  <td>
+                    <button class="bk-table-action" data-open="edit-var-slider">编辑</button>
+                    <button class="bk-table-action" data-open="delete-var-dialog">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td><code style="font-size:12px;background:#f0f1f5;padding:2px 6px;border-radius:2px;">CMDB_API_URL</code></td>
+                  <td><span class="var-value-cell">${_space.CMDB_API_URL}</span></td>
+                  <td><span class="var-type-badge var-type-string">string</span></td>
+                  <td><span class="var-value-cell">https://cmdb.example.com/api/v3</span></td>
+                  <td><span class="scope-tag scope-tag-global">空间级</span></td>
+                  <td>CMDB 接口地址</td>
+                  <td>admin</td>
+                  <td>2026-03-15 11:08</td>
+                  <td>
+                    <button class="bk-table-action" data-open="edit-var-slider">编辑</button>
+                    <button class="bk-table-action" data-open="delete-var-dialog">删除</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <div class="bk-pagination">
+              <span class="bk-pagination-total">共 7 条</span>
+              <span class="bk-pagination-item active">1</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 分隔：任务详情中的变量展示预览 -->
+        <div style="margin-top:48px;padding-top:32px;border-top:2px dashed var(--bk-border);">
+          <h3 style="margin-bottom:4px;color:var(--bk-text-tertiary);font-weight:normal;font-size:12px;">▼ 以下为「任务详情」页面中，空间变量在全局变量面板里的展示效果预览（与系统变量、用户变量并列展示）</h3>
+          <div class="task-var-preview" style="margin-top:12px;">
+            <div class="task-var-preview-header">全局变量</div>
+
+            <!-- 系统变量 -->
+            <div class="task-var-item">
+              <div class="task-var-key">${_system}</div>
+              <div class="task-var-val">&lt;SystemObject {task_space_id: 237, task_scope_type: 'biz', task_scope_value: '2', operator: 'admin', task_id: 8821, task_name: '日常巡检任务_2026-03-23 10:00:00', credentials: [{bk_app_code: 'bkflow-eng-svc', bk_app_secret: '******'}]}&gt;</div>
+            </div>
+
+            <!-- 用户输入变量 -->
+            <div class="task-var-item">
+              <div class="task-var-key">${input}</div>
+              <div class="task-var-val">{"target_hosts": ["10.0.1.1", "10.0.1.2"], "check_items": ["cpu", "memory", "disk"]}</div>
+            </div>
+
+            <!-- 空间级变量（${_space.XXX}）-->
+            <div class="task-var-item" style="background: #f8fbff;">
+              <div class="task-var-key">${_space.BK_APP_CODE} <span class="var-scope-hint">空间变量</span></div>
+              <div class="task-var-val">bkflow-eng-svc</div>
+            </div>
+            <div class="task-var-item" style="background: #f8fbff;">
+              <div class="task-var-key">${_space.BK_APP_SECRET} <span class="var-scope-hint">空间变量</span></div>
+              <div class="task-var-val task-var-val-secret">••••••••</div>
+            </div>
+            <div class="task-var-item" style="background: #f8fbff;">
+              <div class="task-var-key">${_space.NOTIFY_RECEIVERS} <span class="var-scope-hint">空间变量</span></div>
+              <div class="task-var-val">["admin","devops"]</div>
+            </div>
+            <div class="task-var-item" style="background: #f8fbff;">
+              <div class="task-var-key">${_space.CMDB_API_URL} <span class="var-scope-hint">空间变量</span></div>
+              <div class="task-var-val">https://cmdb.example.com/api/v3</div>
+            </div>
+            <!-- Scope 级变量（${_scope.XXX}）-->
+            <div class="task-var-item" style="background: #f0f7ff;">
+              <div class="task-var-key">${_scope.DEPLOY_ENV} <span class="var-scope-hint">scope 变量 · biz=2</span></div>
+              <div class="task-var-val">production</div>
+            </div>
+          </div>
+        </div>
+
+      </main>
+    </div>
+  </div>
+
+  <!-- ===== Sideslider: 新建变量 ===== -->
+  <div id="create-var-slider" class="bk-sideslider">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <span>新建变量</span>
+        <button class="bk-sideslider-close" data-close>&times;</button>
+      </div>
+      <div class="bk-sideslider-body">
+        <form class="bk-form" onsubmit="return false;">
+          <div class="bk-form-item is-required">
+            <label class="bk-form-label">变量名</label>
+            <div class="bk-form-content">
+              <input class="bk-input" placeholder="如 BK_APP_CODE，支持大写字母、数字和下划线" data-required>
+              <div class="bk-form-error">变量名不能为空</div>
+            </div>
+          </div>
+          <div class="bk-form-item is-required">
+            <label class="bk-form-label">变量类型</label>
+            <div class="bk-form-content">
+              <div class="bk-select">
+                <div class="bk-select-trigger">
+                  <span class="bk-select-placeholder">请选择类型</span>
+                </div>
+                <div class="bk-select-dropdown">
+                  <div class="bk-select-option">string（字符串）</div>
+                  <div class="bk-select-option">number（数字）</div>
+                  <div class="bk-select-option">boolean（布尔）</div>
+                  <div class="bk-select-option">password（密码）</div>
+                  <div class="bk-select-option">json（JSON 对象）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bk-form-item is-required">
+            <label class="bk-form-label">变量值</label>
+            <div class="bk-form-content">
+              <input class="bk-input" placeholder="请输入变量值" data-required>
+              <div class="bk-form-error">变量值不能为空</div>
+            </div>
+          </div>
+          <div class="bk-form-item is-required">
+            <label class="bk-form-label">作用域</label>
+            <div class="bk-form-content">
+              <div class="bk-select">
+                <div class="bk-select-trigger">
+                  <span class="bk-select-placeholder">请选择作用域</span>
+                </div>
+                <div class="bk-select-dropdown">
+                  <div class="bk-select-option">空间级（所有流程共享）</div>
+                  <div class="bk-select-option">Scope 级（按业务划分）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bk-form-item" id="scope-fields" style="display:none;">
+            <label class="bk-form-label">Scope 配置</label>
+            <div class="bk-form-content" style="display:flex;gap:12px;">
+              <div class="bk-select" style="width:50%;">
+                <div class="bk-select-trigger">
+                  <span class="bk-select-placeholder">scope_type</span>
+                </div>
+                <div class="bk-select-dropdown">
+                  <div class="bk-select-option">biz</div>
+                  <div class="bk-select-option">set</div>
+                  <div class="bk-select-option">module</div>
+                </div>
+              </div>
+              <div style="width:50%;">
+                <input class="bk-input" placeholder="scope_value，如 2">
+              </div>
+            </div>
+          </div>
+          <div class="bk-form-item">
+            <label class="bk-form-label">描述</label>
+            <div class="bk-form-content">
+              <textarea class="bk-textarea" placeholder="请输入变量用途说明" rows="3"></textarea>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="bk-sideslider-footer">
+        <button class="bk-button" data-close>取消</button>
+        <button class="bk-button bk-button-primary" data-close data-notify="变量创建成功">提交</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ===== Sideslider: 编辑变量 ===== -->
+  <div id="edit-var-slider" class="bk-sideslider">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <span>编辑变量</span>
+        <button class="bk-sideslider-close" data-close>&times;</button>
+      </div>
+      <div class="bk-sideslider-body">
+        <form class="bk-form" onsubmit="return false;">
+          <div class="bk-form-item is-required">
+            <label class="bk-form-label">变量名</label>
+            <div class="bk-form-content">
+              <input class="bk-input" value="BK_APP_CODE" disabled>
+              <div style="font-size:12px;color:var(--bk-text-tertiary);margin-top:4px;">变量名创建后不可修改</div>
+            </div>
+          </div>
+          <div class="bk-form-item">
+            <label class="bk-form-label">变量类型</label>
+            <div class="bk-form-content">
+              <div class="bk-select">
+                <div class="bk-select-trigger">
+                  <span>string（字符串）</span>
+                </div>
+                <div class="bk-select-dropdown">
+                  <div class="bk-select-option is-selected">string（字符串）</div>
+                  <div class="bk-select-option">number（数字）</div>
+                  <div class="bk-select-option">boolean（布尔）</div>
+                  <div class="bk-select-option">password（密码）</div>
+                  <div class="bk-select-option">json（JSON 对象）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bk-form-item is-required">
+            <label class="bk-form-label">变量值</label>
+            <div class="bk-form-content">
+              <input class="bk-input" value="bkflow-eng-svc">
+            </div>
+          </div>
+          <div class="bk-form-item">
+            <label class="bk-form-label">作用域</label>
+            <div class="bk-form-content">
+              <input class="bk-input" value="空间级（所有流程共享）" disabled>
+              <div style="font-size:12px;color:var(--bk-text-tertiary);margin-top:4px;">作用域创建后不可修改</div>
+            </div>
+          </div>
+          <div class="bk-form-item">
+            <label class="bk-form-label">描述</label>
+            <div class="bk-form-content">
+              <textarea class="bk-textarea" rows="3">应用标识，用于 API 鉴权</textarea>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="bk-sideslider-footer">
+        <button class="bk-button" data-close>取消</button>
+        <button class="bk-button bk-button-primary" data-close data-notify="变量更新成功">保存</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ===== Dialog: 删除确认 ===== -->
+  <div id="delete-var-dialog" class="bk-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <span>确认删除</span>
+        <button class="bk-dialog-close" data-close>&times;</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>删除后该变量将从所有关联流程中移除，已运行的任务不受影响。</p>
+        <p style="margin-top:8px;color:var(--bk-danger);font-size:12px;">此操作不可撤销，请确认。</p>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button" data-close>取消</button>
+        <button class="bk-button bk-button-danger" data-close data-notify="变量已删除">确认删除</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+  <script>
+    function switchScope(el, scope) {
+      el.parentElement.querySelectorAll('.scope-chip').forEach(function(c) {
+        c.classList.remove('active');
+      });
+      el.classList.add('active');
+      var detail = document.getElementById('scope-detail-selector');
+      detail.style.display = scope === 'scope' ? 'inline-flex' : 'none';
+
+      var rows = document.querySelectorAll('#var-table tbody tr');
+      rows.forEach(function(row) {
+        var scopeCell = row.querySelector('.scope-tag');
+        if (!scopeCell) return;
+        var isGlobal = scopeCell.classList.contains('scope-tag-global');
+        if (scope === 'all') {
+          row.style.display = '';
+        } else if (scope === 'space') {
+          row.style.display = isGlobal ? '' : 'none';
+        } else {
+          row.style.display = isGlobal ? 'none' : '';
+        }
+      });
+    }
+  </script>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/CHANGELOG.md b/prototypes/features/bkflow-engine-admin-prototype-overhaul/CHANGELOG.md
new file mode 100644
index 0000000000..36f810eee0
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/CHANGELOG.md
@@ -0,0 +1,6 @@
+# Changelog
+
+## 2026-04-21
+- Initialized the `bkflow-engine-admin-prototype-overhaul` feature directory.
+- Added the feature README with spec/plan traceability, masters used, and grouped page inventory.
+- Added the feature entry `index.html` for quick preview scanning.
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/README.md b/prototypes/features/bkflow-engine-admin-prototype-overhaul/README.md
new file mode 100644
index 0000000000..0fb6b1207e
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/README.md
@@ -0,0 +1,50 @@
+# BKFlow Engine Admin Prototype Overhaul
+
+## Related Docs
+- Spec: `docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md`
+- Plan: `docs/plans/2026-04-21-bkflow-engine-admin-prototype-overhaul.md`
+
+## Purpose
+This feature bundles the full BKFlow engine admin prototype overhaul into one traceable delivery set. The goal is to rebuild the admin experience as a complete `space / system / plugin` prototype family, with the real navigation, list, editor, detail, and debug states represented in one feature directory.
+
+## Masters Used
+- `prototypes/masters/_shared/space-shell.html`
+- `prototypes/masters/_shared/system-shell.html`
+- `prototypes/masters/_shared/plugin-shell.html`
+- `prototypes/masters/list-page/template.html`
+- `prototypes/masters/config-page/template.html`
+- `prototypes/masters/flow-editor/template.html`
+- `prototypes/masters/task-detail/template.html`
+- `prototypes/masters/decision-editor/template.html`
+- `prototypes/masters/engine-panel/template.html`
+- `prototypes/masters/overlays/dialogs.html`
+- `prototypes/masters/overlays/sidesliders.html`
+
+## Page Entries
+
+### Space
+- `pages/space/template-list.html`
+- `pages/space/flow-view.html`
+- `pages/space/flow-edit.html`
+- `pages/space/flow-debug.html`
+- `pages/space/task-list.html`
+- `pages/space/debug-task-list.html`
+- `pages/space/task-detail-complete.html`
+- `pages/space/task-detail-failed.html`
+- `pages/space/decision-list.html`
+- `pages/space/decision-editor.html`
+- `pages/space/space-config.html`
+- `pages/space/credential-list.html`
+- `pages/space/label-list.html`
+- `pages/space/statistics-exception.html`
+
+### System
+- `pages/system/space-config-list.html`
+- `pages/system/module-config-list.html`
+
+### Plugin
+- `pages/plugin/plugin-list.html`
+
+## Notes
+- `index.html` is the feature entry point for previewing the page inventory.
+- `CHANGELOG.md` keeps only lightweight initialization and follow-up notes.
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json b/prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json
new file mode 100644
index 0000000000..e5c70f9223
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/feature.meta.json
@@ -0,0 +1,22 @@
+{
+  "title": "BKFlow 引擎管理后台原型重构",
+  "summary": "覆盖 Space / System / Plugin 三个入口，包含流程、任务、决策与配置链路。",
+  "status": "可评审",
+  "tags": ["流程编辑", "任务详情", "系统配置"],
+  "coverTheme": "mixed-admin",
+  "order": 10,
+  "featuredPages": [
+    {
+      "path": "pages/space/flow-edit.html",
+      "title": "流程编辑页",
+      "summary": "画布编排、节点抽屉与两段式保存。",
+      "pageType": "流程编辑"
+    },
+    {
+      "path": "pages/space/task-detail-complete.html",
+      "title": "任务详情页",
+      "summary": "执行状态、节点观察与日志查看。",
+      "pageType": "任务详情"
+    }
+  ]
+}
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/index.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/index.html
new file mode 100644
index 0000000000..cb6dfcd55e
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/index.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow Engine Admin Prototype Overhaul</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <script defer src="../../assets/bkflow-prototype.js"></script>
+  <style>
+    :root {
+      color-scheme: light;
+    }
+    body {
+      margin: 0;
+      font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
+      background:
+        radial-gradient(circle at top left, rgba(35, 111, 255, 0.12), transparent 34%),
+        radial-gradient(circle at top right, rgba(26, 185, 255, 0.10), transparent 30%),
+        linear-gradient(180deg, #f6f9ff 0%, #f9fbfe 38%, #eef3f9 100%);
+      color: var(--bk-text-primary);
+    }
+    .feature-hero {
+      padding: 32px 32px 20px;
+      border-bottom: 1px solid rgba(26, 40, 61, 0.08);
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(245, 248, 252, 0.78));
+      backdrop-filter: blur(8px);
+      position: sticky;
+      top: 0;
+      z-index: 5;
+    }
+    .feature-brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 14px;
+      font-size: 14px;
+      color: var(--bk-text-secondary);
+    }
+    .feature-brand img {
+      width: 30px;
+      height: 30px;
+    }
+    .feature-title {
+      font-size: 30px;
+      font-weight: 800;
+      line-height: 1.15;
+      letter-spacing: -0.02em;
+      margin: 0 0 10px;
+    }
+    .feature-summary {
+      max-width: 980px;
+      font-size: 14px;
+      line-height: 1.8;
+      color: var(--bk-text-secondary);
+      margin: 0 0 18px;
+    }
+    .feature-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .meta-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 999px;
+      border: 1px solid rgba(26, 40, 61, 0.08);
+      background: rgba(255, 255, 255, 0.82);
+      color: var(--bk-text-secondary);
+      font-size: 12px;
+    }
+    .meta-pill strong {
+      color: var(--bk-text-primary);
+      font-weight: 600;
+    }
+    .feature-body {
+      padding: 24px 32px 40px;
+      max-width: 1280px;
+    }
+    .group-card {
+      background: rgba(255, 255, 255, 0.88);
+      border: 1px solid rgba(26, 40, 61, 0.08);
+      border-radius: 18px;
+      box-shadow: 0 10px 30px rgba(31, 35, 41, 0.06);
+      overflow: hidden;
+      margin-bottom: 18px;
+    }
+    .group-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 18px 20px;
+      border-bottom: 1px solid rgba(26, 40, 61, 0.08);
+      background: linear-gradient(180deg, rgba(249, 251, 254, 0.92), rgba(255, 255, 255, 0.95));
+    }
+    .group-head h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 700;
+    }
+    .group-count {
+      min-width: 84px;
+      text-align: center;
+      font-size: 12px;
+      font-weight: 700;
+      color: #2652d9;
+      background: rgba(38, 82, 217, 0.10);
+      border-radius: 999px;
+      padding: 7px 12px;
+    }
+    .group-note {
+      margin: 0;
+      padding: 0 20px 16px;
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.7;
+    }
+    .page-list {
+      list-style: none;
+      margin: 0;
+      padding: 0 20px 18px;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 12px;
+    }
+    .page-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 14px 14px 13px;
+      border-radius: 14px;
+      border: 1px solid rgba(26, 40, 61, 0.08);
+      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
+    }
+    .page-item:hover {
+      transform: translateY(-1px);
+      border-color: rgba(38, 82, 217, 0.28);
+      box-shadow: 0 8px 20px rgba(38, 82, 217, 0.08);
+    }
+    .page-index {
+      flex: 0 0 auto;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(38, 82, 217, 0.12);
+      color: #2652d9;
+      font-size: 12px;
+      font-weight: 700;
+      margin-top: 1px;
+    }
+    .page-link {
+      display: block;
+      text-decoration: none;
+      color: inherit;
+      min-width: 0;
+      flex: 1;
+    }
+    .page-link strong {
+      display: block;
+      font-size: 14px;
+      font-weight: 700;
+      margin-bottom: 4px;
+      word-break: break-word;
+    }
+    .page-link code {
+      display: block;
+      font-size: 12px;
+      color: var(--bk-text-secondary);
+      background: transparent;
+      padding: 0;
+      white-space: normal;
+      word-break: break-word;
+      line-height: 1.5;
+    }
+    .footer-note {
+      margin-top: 8px;
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+      line-height: 1.6;
+    }
+    @media (max-width: 768px) {
+      .feature-hero,
+      .feature-body {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+      .feature-title {
+        font-size: 24px;
+      }
+      .group-head {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+      .page-list {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="feature-hero">
+    <div class="feature-brand">
+      <img src="../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+      <span>BKFlow 原型 · Feature 入口</span>
+    </div>
+    <h1 class="feature-title">bkflow-engine-admin-prototype-overhaul</h1>
+    <p class="feature-summary">
+      这一组页面对应 BKFlow engine admin 原型重建的完整交付集，覆盖 <code>space / system / plugin</code> 三个入口域，
+      用于快速检查页面清单、打开单页原型，并保持与 spec、plan、masters 的回链一致。
+    </p>
+    <div class="feature-meta">
+      <div class="meta-pill"><strong>Spec</strong> <code>docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md</code></div>
+      <div class="meta-pill"><strong>Plan</strong> <code>docs/plans/2026-04-21-bkflow-engine-admin-prototype-overhaul.md</code></div>
+      <div class="meta-pill"><strong>Masters</strong> 11 referenced</div>
+      <div class="meta-pill"><strong>Scope</strong> 17 pages</div>
+    </div>
+  </div>
+
+  <main class="feature-body">
+    <section class="group-card">
+      <div class="group-head">
+        <h2>Space</h2>
+        <span class="group-count">14 pages</span>
+      </div>
+      <p class="group-note">空间侧原型覆盖流程、任务、决策、配置、凭证、标签和异常态，适合按页面逐个预览和对照审计结果。</p>
+      <ul class="page-list">
+        <li class="page-item"><span class="page-index">01</span><a class="page-link" href="./pages/space/template-list.html"><strong>template-list</strong><code>pages/space/template-list.html</code></a></li>
+        <li class="page-item"><span class="page-index">02</span><a class="page-link" href="./pages/space/flow-view.html"><strong>flow-view</strong><code>pages/space/flow-view.html</code></a></li>
+        <li class="page-item"><span class="page-index">03</span><a class="page-link" href="./pages/space/flow-edit.html"><strong>flow-edit</strong><code>pages/space/flow-edit.html</code></a></li>
+        <li class="page-item"><span class="page-index">04</span><a class="page-link" href="./pages/space/flow-debug.html"><strong>flow-debug</strong><code>pages/space/flow-debug.html</code></a></li>
+        <li class="page-item"><span class="page-index">05</span><a class="page-link" href="./pages/space/task-list.html"><strong>task-list</strong><code>pages/space/task-list.html</code></a></li>
+        <li class="page-item"><span class="page-index">06</span><a class="page-link" href="./pages/space/debug-task-list.html"><strong>debug-task-list</strong><code>pages/space/debug-task-list.html</code></a></li>
+        <li class="page-item"><span class="page-index">07</span><a class="page-link" href="./pages/space/task-detail-complete.html"><strong>task-detail-complete</strong><code>pages/space/task-detail-complete.html</code></a></li>
+        <li class="page-item"><span class="page-index">08</span><a class="page-link" href="./pages/space/task-detail-failed.html"><strong>task-detail-failed</strong><code>pages/space/task-detail-failed.html</code></a></li>
+        <li class="page-item"><span class="page-index">09</span><a class="page-link" href="./pages/space/decision-list.html"><strong>decision-list</strong><code>pages/space/decision-list.html</code></a></li>
+        <li class="page-item"><span class="page-index">10</span><a class="page-link" href="./pages/space/decision-editor.html"><strong>decision-editor</strong><code>pages/space/decision-editor.html</code></a></li>
+        <li class="page-item"><span class="page-index">11</span><a class="page-link" href="./pages/space/space-config.html"><strong>space-config</strong><code>pages/space/space-config.html</code></a></li>
+        <li class="page-item"><span class="page-index">12</span><a class="page-link" href="./pages/space/credential-list.html"><strong>credential-list</strong><code>pages/space/credential-list.html</code></a></li>
+        <li class="page-item"><span class="page-index">13</span><a class="page-link" href="./pages/space/label-list.html"><strong>label-list</strong><code>pages/space/label-list.html</code></a></li>
+        <li class="page-item"><span class="page-index">14</span><a class="page-link" href="./pages/space/statistics-exception.html"><strong>statistics-exception</strong><code>pages/space/statistics-exception.html</code></a></li>
+      </ul>
+    </section>
+
+    <section class="group-card">
+      <div class="group-head">
+        <h2>System</h2>
+        <span class="group-count">2 pages</span>
+      </div>
+      <p class="group-note">系统侧原型只保留跨空间管理的两个列表入口，适合快速定位配置分发和模块配置的预览页。</p>
+      <ul class="page-list">
+        <li class="page-item"><span class="page-index">01</span><a class="page-link" href="./pages/system/space-config-list.html"><strong>space-config-list</strong><code>pages/system/space-config-list.html</code></a></li>
+        <li class="page-item"><span class="page-index">02</span><a class="page-link" href="./pages/system/module-config-list.html"><strong>module-config-list</strong><code>pages/system/module-config-list.html</code></a></li>
+      </ul>
+    </section>
+
+    <section class="group-card">
+      <div class="group-head">
+        <h2>Plugin</h2>
+        <span class="group-count">1 page</span>
+      </div>
+      <p class="group-note">插件侧原型只保留插件列表入口，便于和空间、系统视图并列查看。</p>
+      <ul class="page-list">
+        <li class="page-item"><span class="page-index">01</span><a class="page-link" href="./pages/plugin/plugin-list.html"><strong>plugin-list</strong><code>pages/plugin/plugin-list.html</code></a></li>
+      </ul>
+    </section>
+
+    <div class="footer-note">
+      所有链接都以 feature 根目录为基准，预览时可直接通过页面列表跳转到各入口页。
+    </div>
+  </main>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/plugin/plugin-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/plugin/plugin-list.html
new file mode 100644
index 0000000000..2565b3ec9e
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/plugin/plugin-list.html
@@ -0,0 +1,452 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型 - 我的插件 / 插件管理列表</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    body {
+      background:
+        radial-gradient(circle at top left, rgba(58, 132, 255, 0.08), transparent 24%),
+        linear-gradient(180deg, #f7faff 0%, #f5f7fa 22%, #f5f7fa 100%);
+    }
+    .page-shell {
+      max-width: 1500px;
+      margin: 0 auto;
+    }
+    .page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 18px;
+    }
+    .page-title {
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+    .page-desc {
+      max-width: 920px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+    }
+    .page-chip {
+      flex-shrink: 0;
+      padding: 10px 14px;
+      border-radius: 999px;
+      background: #edf4ff;
+      border: 1px solid rgba(58, 132, 255, 0.18);
+      color: var(--bk-primary);
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.5;
+    }
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 14px;
+      margin-bottom: 18px;
+    }
+    .summary-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+      padding: 16px 18px;
+    }
+    .summary-label {
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+      margin-bottom: 8px;
+    }
+    .summary-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--bk-text-primary);
+      line-height: 1.1;
+    }
+    .summary-note {
+      margin-top: 8px;
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .panel-layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
+      gap: 16px;
+      align-items: start;
+    }
+    .panel {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 16px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+      overflow: hidden;
+    }
+    .panel-head {
+      padding: 18px 18px 0;
+    }
+    .panel-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 6px;
+    }
+    .panel-desc {
+      color: var(--bk-text-tertiary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .panel-body {
+      padding: 16px 18px 18px;
+    }
+    .filter-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+    .filter-chip {
+      display: inline-flex;
+      align-items: center;
+      height: 32px;
+      padding: 0 12px;
+      border-radius: 16px;
+      border: 1px solid var(--bk-border);
+      color: var(--bk-text-secondary);
+      background: #fafbfd;
+      font-size: 13px;
+    }
+    .filter-chip.is-active {
+      color: var(--bk-primary);
+      border-color: rgba(58, 132, 255, 0.28);
+      background: #edf4ff;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+    }
+    .bk-table {
+      min-width: 1180px;
+    }
+    .audit-list {
+      display: grid;
+      gap: 12px;
+      margin-top: 14px;
+    }
+    .audit-item {
+      padding-left: 12px;
+      border-left: 3px solid var(--bk-primary);
+    }
+    .audit-time {
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+      margin-bottom: 4px;
+    }
+    .audit-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 4px;
+    }
+    .audit-desc {
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .rule-box {
+      margin-top: 16px;
+      padding: 14px 16px;
+      border-radius: 12px;
+      background: #f7f9fc;
+      border: 1px solid var(--bk-border-light);
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+      font-size: 13px;
+    }
+    .status-ok { color: #14a568; }
+    .status-warn { color: #c98e17; }
+    .status-danger { color: #de5c5c; }
+    @media (max-width: 1280px) {
+      .summary-grid,
+      .panel-layout {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="space" data-nav-link="../space/template-list.html">空间管理</li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html">系统管理</li>
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="plugin-list.html">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>plugin_admin</span>
+          <div class="bk-user-dropdown" aria-hidden="true">
+            <span class="bk-user-dropdown-item">插件中心</span>
+            <span class="bk-user-dropdown-item">退出登录</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space" style="display:none;">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-eng-svc</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span>
+          </div>
+        </div>
+
+        <ul class="bk-navigation-menu" data-nav-group="plugin">
+          <li class="bk-navigation-menu-item active" data-page="plugin-list">
+            <span class="bk-navigation-menu-icon">⬡</span>插件管理列表
+          </li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="space" style="display:none;"></ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"></ul>
+
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel" id="plugin-list">
+        <div class="page-shell">
+          <div class="bk-breadcrumb">
+            <span class="bk-breadcrumb-item">首页</span>
+            <span class="bk-breadcrumb-item">我的插件</span>
+            <span class="bk-breadcrumb-item">插件管理列表</span>
+          </div>
+
+          <div class="page-header">
+            <div>
+              <div class="page-title">插件管理列表</div>
+              <div class="page-desc">
+                这里展示当前用户可管理的插件、授权状态、使用范围和状态修改记录。页面重点支持编辑使用范围、授权或取消授权，并保留清晰的审核痕迹，便于平台治理和空间管理员协同处理。
+              </div>
+            </div>
+            <div class="page-chip">最近变更：2026-04-21 09:20 · plugin_bot</div>
+          </div>
+
+          <div class="summary-grid">
+            <div class="summary-card">
+              <div class="summary-label">插件总数</div>
+              <div class="summary-value">24</div>
+              <div class="summary-note">包含内置插件和第三方插件，均在同一列表中管理。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">已授权</div>
+              <div class="summary-value status-ok">9</div>
+              <div class="summary-note">已授权插件可在模板和流程编辑器中直接使用。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">待授权</div>
+              <div class="summary-value status-warn">6</div>
+              <div class="summary-note">待授权项需管理员确认使用范围后才能启用。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">已停用</div>
+              <div class="summary-value status-danger">3</div>
+              <div class="summary-note">停用插件保留历史记录，避免误操作再次启用。</div>
+            </div>
+          </div>
+
+          <div class="panel-layout">
+            <section class="panel">
+              <div class="panel-head">
+                <div class="panel-title">插件清单</div>
+                <div class="panel-desc">按照插件名称、code、授权状态和管理员维度查看管理权限，支持调整使用范围和授权状态。</div>
+              </div>
+              <div class="panel-body">
+                <div class="bk-toolbar">
+                  <div class="bk-toolbar-left">
+                    <input class="bk-search-input" placeholder="搜索插件名称、code、授权状态、管理员" style="width: 340px;">
+                    <div class="bk-select" style="width: 170px;">
+                      <div class="bk-select-trigger"><span class="bk-select-placeholder">全部授权状态</span></div>
+                    </div>
+                    <div class="bk-select" style="width: 170px;">
+                      <div class="bk-select-trigger"><span class="bk-select-placeholder">全部使用范围</span></div>
+                    </div>
+                  </div>
+                  <div class="bk-toolbar-right">
+                    <button class="bk-button">刷新</button>
+                    <button class="bk-button bk-button-primary">批量导出授权单</button>
+                  </div>
+                </div>
+
+                <div class="filter-row">
+                  <span class="filter-chip is-active">全部</span>
+                  <span class="filter-chip">已授权</span>
+                  <span class="filter-chip">待授权</span>
+                  <span class="filter-chip">授权中</span>
+                  <span class="filter-chip">已停用</span>
+                </div>
+
+                <div class="table-wrap">
+                  <table class="bk-table">
+                    <thead>
+                      <tr>
+                        <th style="width: 170px;">插件名称</th>
+                        <th style="width: 170px;">code</th>
+                        <th style="width: 180px;">管理员</th>
+                        <th style="width: 110px;">授权状态</th>
+                        <th style="width: 200px;">使用范围</th>
+                        <th style="width: 160px;">修改时间</th>
+                        <th style="width: 150px;">修改人</th>
+                        <th style="width: 190px;">操作</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>云作业执行脚本</td>
+                        <td>bk-script-runner</td>
+                        <td>platform_ops</td>
+                        <td><span class="bk-tag bk-tag-success">已授权</span></td>
+                        <td>标准运维 / 作业执行</td>
+                        <td>2026-04-20 11:48</td>
+                        <td>admin</td>
+                        <td>
+                          <button class="bk-table-action">编辑使用范围</button>
+                          <button class="bk-table-action">取消授权</button>
+                          <button class="bk-table-action">查看审计</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>定时器增强</td>
+                        <td>bk-cron-extend</td>
+                        <td>flow_center</td>
+                        <td><span class="bk-tag bk-tag-warning">待授权</span></td>
+                        <td>bkflow-eng-svc / bkflow-test</td>
+                        <td>2026-04-19 16:32</td>
+                        <td>karen</td>
+                        <td>
+                          <button class="bk-table-action">编辑使用范围</button>
+                          <button class="bk-table-action">授权</button>
+                          <button class="bk-table-action">查看详情</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>跨空间通知</td>
+                        <td>cross-space-notify</td>
+                        <td>security_audit</td>
+                        <td><span class="bk-tag bk-tag-danger">已停用</span></td>
+                        <td>生产空间</td>
+                        <td>2026-04-18 09:15</td>
+                        <td>liwei</td>
+                        <td>
+                          <button class="bk-table-action">编辑使用范围</button>
+                          <button class="bk-table-action">重新授权</button>
+                          <button class="bk-table-action">查看历史</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>实例参数校验</td>
+                        <td>instance-params-check</td>
+                        <td>platform_governance</td>
+                        <td><span class="bk-tag bk-tag-info">授权中</span></td>
+                        <td>全局</td>
+                        <td>2026-04-21 09:20</td>
+                        <td>system-bot</td>
+                        <td>
+                          <button class="bk-table-action">编辑使用范围</button>
+                          <button class="bk-table-action">撤回申请</button>
+                          <button class="bk-table-action">查看审计</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>三方回调适配器</td>
+                        <td>third-party-webhook</td>
+                        <td>integration_team</td>
+                        <td><span class="bk-tag bk-tag-success">已授权</span></td>
+                        <td>研发 / 灰度</td>
+                        <td>2026-04-17 14:06</td>
+                        <td>anna</td>
+                        <td>
+                          <button class="bk-table-action">编辑使用范围</button>
+                          <button class="bk-table-action">取消授权</button>
+                          <button class="bk-table-action">查看审计</button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <div class="bk-pagination">
+                  <span class="bk-pagination-total">共 24 条</span>
+                  <span class="bk-pagination-item">&laquo;</span>
+                  <span class="bk-pagination-item active">1</span>
+                  <span class="bk-pagination-item">2</span>
+                  <span class="bk-pagination-item">3</span>
+                  <span class="bk-pagination-item">&raquo;</span>
+                </div>
+              </div>
+            </section>
+
+            <aside class="panel">
+              <div class="panel-head">
+                <div class="panel-title">授权说明</div>
+                <div class="panel-desc">插件授权关系会直接影响模板编辑器里能否调用相关能力。</div>
+              </div>
+              <div class="panel-body">
+                <div class="audit-list">
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-21 09:20</div>
+                    <div class="audit-title">instance-params-check 正在授权中</div>
+                    <div class="audit-desc">当前状态表示管理员已提交授权单，但还未完成审计确认。</div>
+                  </div>
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-20 11:48</div>
+                    <div class="audit-title">云作业执行脚本完成范围收缩</div>
+                    <div class="audit-desc">从全局收窄到作业执行场景，避免对不相关模板暴露过宽权限。</div>
+                  </div>
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-18 09:15</div>
+                    <div class="audit-title">跨空间通知已停用</div>
+                    <div class="audit-desc">停用后仍保留审计记录，后续重新授权时可以直接参考历史范围。</div>
+                  </div>
+                </div>
+
+                <div class="rule-box">
+                  <strong>操作约束：</strong><br>
+                  1. 授权中状态仅允许撤回，不允许重复提交。<br>
+                  2. 已停用插件恢复前必须重新校验使用范围。<br>
+                  3. 编辑使用范围后会同步记录修改人和时间戳。
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/credential-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/credential-list.html
new file mode 100644
index 0000000000..bbef0f9551
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/credential-list.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/list-page/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 凭证管理</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 24px 28px 32px; overflow: auto; }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-space-page { display: grid; gap: 20px; }
+    .bk-space-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .bk-space-page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-space-page-title h1 { font-size: 24px; margin-bottom: 6px; }
+    .bk-space-page-title p,
+    .bk-muted { color: var(--bk-text-tertiary); }
+    .bk-table-wrap { overflow-x: auto; }
+    .bk-stack { display: grid; gap: 12px; }
+    .bk-segmented {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .bk-segmented span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 5px 12px;
+      border-radius: 999px;
+      border: 1px solid var(--bk-border);
+      color: var(--bk-text-secondary);
+      font-size: 12px;
+    }
+    .bk-segmented .is-active {
+      border-color: var(--bk-primary);
+      background: #e1ecff;
+      color: var(--bk-primary-active);
+    }
+    .bk-code-mask {
+      border-radius: 10px;
+      background: #101a2b;
+      color: #d8e4f5;
+      padding: 14px;
+      font-family: Menlo, Monaco, Consolas, monospace;
+      font-size: 12px;
+      line-height: 1.7;
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="credential-list.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-space-page">
+            <div class="bk-space-page-header">
+              <div class="bk-space-page-title">
+                <h1>凭证管理</h1>
+                <p>列表页 + 新建侧滑 + 查看内容弹窗，类型切换使用显式选项组而不是普通下拉。</p>
+              </div>
+              <div class="bk-prototype-actions" style="margin-top:0;">
+                <button class="bk-button bk-button-primary" type="button" data-open="credential-create-slider">新建</button>
+              </div>
+            </div>
+
+            <div class="bk-space-card">
+              <div class="bk-toolbar">
+                <div class="bk-toolbar-left">
+                  <input class="bk-search-input" style="width: 300px;" placeholder="名称/类型/创建人">
+                </div>
+              </div>
+              <div class="bk-table-wrap">
+                <table class="bk-table">
+                  <thead>
+                    <tr>
+                      <th>名称</th>
+                      <th style="width: 220px;">类型</th>
+                      <th style="width: 120px;">开放范围</th>
+                      <th style="width: 120px;">创建人</th>
+                      <th style="width: 170px;">更新时间</th>
+                      <th style="width: 180px;">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>bkapp-prod-release</td>
+                      <td>蓝鲸应用认证</td>
+                      <td>空间内可见</td>
+                      <td>admin</td>
+                      <td>2026-04-20 19:32:15</td>
+                      <td>
+                        <button class="bk-table-action" type="button">编辑</button>
+                        <button class="bk-table-action" type="button" data-open="credential-view-dialog">查看内容</button>
+                        <button class="bk-table-action" type="button">删除</button>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>bkapi-access-token</td>
+                      <td>蓝鲸 Access Token 认证</td>
+                      <td>仅管理员</td>
+                      <td>ops_admin</td>
+                      <td>2026-04-19 13:40:22</td>
+                      <td>
+                        <button class="bk-table-action" type="button">编辑</button>
+                        <button class="bk-table-action" type="button" data-open="credential-view-dialog">查看内容</button>
+                        <button class="bk-table-action" type="button">删除</button>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>notify-basic-auth</td>
+                      <td>Basic Auth</td>
+                      <td>全局共享</td>
+                      <td>flow_bot</td>
+                      <td>2026-04-17 08:11:07</td>
+                      <td>
+                        <button class="bk-table-action" type="button">编辑</button>
+                        <button class="bk-table-action" type="button" data-open="credential-view-dialog">查看内容</button>
+                        <button class="bk-table-action" type="button">删除</button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <aside class="bk-sideslider" id="credential-create-slider">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <span>新建凭证</span>
+        <button class="bk-sideslider-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-sideslider-body">
+        <div class="bk-stack">
+          <div>
+            <label class="bk-flow-label">类型</label>
+            <div class="bk-segmented">
+              <span class="is-active">蓝鲸应用认证</span>
+              <span>蓝鲸 Access Token 认证</span>
+              <span>Basic Auth</span>
+              <span>自定义</span>
+            </div>
+          </div>
+          <div>
+            <label class="bk-flow-label">名称</label>
+            <input class="bk-input" value="bkapp-prod-release">
+          </div>
+          <div>
+            <label class="bk-flow-label">描述</label>
+            <textarea class="bk-textarea" rows="3">供生产发布链路调用 蓝盾 / BKAPI 接口。</textarea>
+          </div>
+          <div>
+            <label class="bk-flow-label">开放范围</label>
+            <div class="bk-select"><div class="bk-select-trigger"><span>空间内可见</span></div></div>
+          </div>
+          <div>
+            <label class="bk-flow-label">认证内容</label>
+            <div class="bk-code-mask">{
+  "bk_app_code": "bkflow-eng-svc",
+  "bk_app_secret": "******",
+  "app_tenant_mode": "dedicated"
+}</div>
+          </div>
+        </div>
+      </div>
+      <div class="bk-sideslider-footer">
+        <button class="bk-button" type="button" data-close>取消</button>
+        <button class="bk-button bk-button-primary" type="button" data-close>提交</button>
+      </div>
+    </div>
+  </aside>
+
+  <div class="bk-dialog" id="credential-view-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>查看内容</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <div class="bk-code-mask">{
+  "bk_app_code": "bkflow-eng-svc",
+  "bk_app_secret": "*********",
+  "access_token": "*********",
+  "expires_in": 7200
+}</div>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-primary" type="button" data-close>关闭</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/debug-task-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/debug-task-list.html
new file mode 100644
index 0000000000..9ac037b5fb
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/debug-task-list.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/list-page/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 调试任务</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 24px 28px 32px; overflow: auto; }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-space-page { display: grid; gap: 20px; }
+    .bk-space-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .bk-space-page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-space-page-title h1 { font-size: 24px; margin-bottom: 6px; }
+    .bk-space-page-title p,
+    .bk-muted { color: var(--bk-text-tertiary); }
+    .bk-table-wrap { overflow-x: auto; }
+    .bk-status-cell {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .bk-status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #c4c6cc;
+    }
+    .is-success .bk-status-dot { background: var(--bk-success); }
+    .is-failed .bk-status-dot { background: var(--bk-danger); }
+    .is-neutral .bk-status-dot { background: #8593a5; }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="debug-task-list.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">A</div>
+          <span>admin</span>
+        </div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">S</span>
+            <span>bkflow-eng-svc / space_id=171</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-space-page">
+            <div class="bk-space-page-header">
+              <div class="bk-space-page-title">
+                <h1>调试任务</h1>
+                <p>与任务页共享相似的列表骨架，但按钮、状态和任务详情跳转都指向 mockTask 链路。</p>
+              </div>
+              <div class="bk-prototype-actions" style="margin-top:0;">
+                <a class="bk-button bk-button-primary" href="../../../../masters/engine-panel/template.html">引擎操作</a>
+              </div>
+            </div>
+
+            <div class="bk-space-card">
+              <div class="bk-toolbar">
+                <div class="bk-toolbar-left">
+                  <input class="bk-search-input" style="width: 360px;" placeholder="ID/任务名称/标签/创建人/执行人/所属模板 ID/所属作用域类型/所属作用域值">
+                </div>
+                <div class="bk-toolbar-right">
+                  <span class="bk-muted">当前列表映射 `/taskflow/execute/:spaceId?type=mock` 详情页</span>
+                </div>
+              </div>
+
+              <div class="bk-table-wrap">
+                <table class="bk-table">
+                  <thead>
+                    <tr>
+                      <th style="width: 96px;">任务 ID</th>
+                      <th>任务名称</th>
+                      <th style="width: 120px;">执行状态</th>
+                      <th style="width: 180px;">源流程</th>
+                      <th style="width: 120px;">创建人</th>
+                      <th style="width: 170px;">创建时间</th>
+                      <th style="width: 140px;">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>1192795</td>
+                      <td><a href="task-detail-complete.html">audit-deep-dive-20260420_调试任务_20260420203821</a></td>
+                      <td><span class="bk-status-cell is-success"><span class="bk-status-dot"></span>完成</span></td>
+                      <td>audit-deep-dive-20260420</td>
+                      <td>admin</td>
+                      <td>2026-04-20 20:38:21</td>
+                      <td><button class="bk-table-action" type="button" data-open="debug-task-delete-dialog">删除</button></td>
+                    </tr>
+                    <tr>
+                      <td>1192803</td>
+                      <td><a href="task-detail-failed.html">audit-deep-dive-20260420_调试任务_20260420204106</a></td>
+                      <td><span class="bk-status-cell is-failed"><span class="bk-status-dot"></span>失败</span></td>
+                      <td>audit-deep-dive-20260420</td>
+                      <td>admin</td>
+                      <td>2026-04-20 20:41:06</td>
+                      <td><button class="bk-table-action" type="button" data-open="debug-task-delete-dialog">删除</button></td>
+                    </tr>
+                    <tr>
+                      <td>1192812</td>
+                      <td><a href="task-detail-failed.html">mock-api-regression_调试任务_20260421100219</a></td>
+                      <td><span class="bk-status-cell is-neutral"><span class="bk-status-dot"></span>未执行</span></td>
+                      <td>mock-api-regression</td>
+                      <td>tester</td>
+                      <td>2026-04-21 10:02:19</td>
+                      <td><button class="bk-table-action" type="button" data-open="debug-task-delete-dialog">删除</button></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+
+              <div class="bk-pagination" style="margin-top:18px;">
+                <span class="bk-pagination-total">共 3 条</span>
+                <span class="bk-pagination-item">«</span>
+                <span class="bk-pagination-item active">1</span>
+                <span class="bk-pagination-item">»</span>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="debug-task-delete-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>删除调试任务</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>确认删除任务 "audit-deep-dive-20260420_调试任务_20260420203821"?</p>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-danger" type="button" data-close>删除</button>
+        <button class="bk-button" type="button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-editor.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-editor.html
new file mode 100644
index 0000000000..3573b9bd9c
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-editor.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/decision-editor/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 新建决策表</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content {
+      overflow: auto;
+      padding: 28px 32px 40px;
+      background:
+        radial-gradient(circle at top left, rgba(248, 181, 63, 0.08), transparent 24%),
+        var(--bk-bg-body);
+    }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-page-wrap {
+      max-width: 1160px;
+      margin: 0 auto;
+      display: grid;
+      gap: 18px;
+    }
+    .bk-page-heading {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-page-heading h1 { font-size: 24px; margin-bottom: 6px; }
+    .bk-page-heading p { color: var(--bk-text-tertiary); }
+    .bk-section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+      padding: 22px;
+    }
+    .bk-section-title {
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .bk-rule-empty {
+      min-height: 220px;
+      border-radius: 12px;
+      border: 1px dashed #d8e6ff;
+      background: linear-gradient(180deg, #fafcff, #f5f8ff);
+    }
+    .bk-footer-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 18px;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="decision-editor.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-page-wrap">
+            <div class="bk-page-heading">
+              <div>
+                <a class="bk-flow-editor-back" href="decision-list.html">← 返回决策表列表</a>
+                <h1>新建决策表</h1>
+                <p>独立编辑页，底部动作固定为 `提交 / 取消 / 调试`，不在列表页原地完成编辑。</p>
+              </div>
+            </div>
+
+            <section class="bk-section">
+              <div class="bk-section-title">基础信息</div>
+              <div class="bk-form">
+                <div class="bk-form-item is-required">
+                  <label class="bk-form-label">名称</label>
+                  <div class="bk-form-content"><input class="bk-input" value="deploy-gate-decision"></div>
+                </div>
+                <div class="bk-form-item">
+                  <label class="bk-form-label">关联流程</label>
+                  <div class="bk-form-content"><div class="bk-select"><div class="bk-select-trigger"><span>audit-deep-dive-20260420</span></div></div></div>
+                </div>
+                <div class="bk-form-item">
+                  <label class="bk-form-label">描述</label>
+                  <div class="bk-form-content"><textarea class="bk-textarea" rows="3">根据环境、审批结果和发布窗口决定是否继续执行发布蓝鲸作业节点。</textarea></div>
+                </div>
+              </div>
+            </section>
+
+            <section class="bk-section">
+              <div class="bk-section-title">规则配置</div>
+              <div class="bk-exception bk-rule-empty">
+                <div style="font-size:52px;">◇</div>
+                <strong style="color:var(--bk-text-primary);">暂无规则</strong>
+                <div>先补充条件字段和结果字段，再逐条录入决策规则。</div>
+                <div class="bk-prototype-actions" style="margin-top:4px;">
+                  <button class="bk-button bk-button-primary" type="button">新增规则</button>
+                  <button class="bk-button" type="button">导入模板</button>
+                </div>
+              </div>
+
+              <div class="bk-footer-actions">
+                <button class="bk-button" type="button">调试</button>
+                <a class="bk-button" href="decision-list.html">取消</a>
+                <button class="bk-button bk-button-primary" type="button">提交</button>
+              </div>
+            </section>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-list.html
new file mode 100644
index 0000000000..d29804d085
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/decision-list.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/list-page/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 决策表</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 24px 28px 32px; overflow: auto; }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-space-page { display: grid; gap: 20px; }
+    .bk-space-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .bk-space-page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-space-page-title h1 { font-size: 24px; margin-bottom: 6px; }
+    .bk-space-page-title p,
+    .bk-muted { color: var(--bk-text-tertiary); }
+    .bk-decision-empty {
+      min-height: 340px;
+      border: 1px dashed #c7d6ee;
+      border-radius: 14px;
+      background: linear-gradient(180deg, #fafcff, #f4f8ff);
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="decision-list.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-space-page">
+            <div class="bk-space-page-header">
+              <div class="bk-space-page-title">
+                <h1>决策表</h1>
+                <p>列表页保持空态，主按钮跳转到独立编辑器，而不是在当前页打开简单弹层。</p>
+              </div>
+              <div class="bk-prototype-actions" style="margin-top:0;">
+                <a class="bk-button bk-button-primary" href="decision-editor.html">新建</a>
+              </div>
+            </div>
+            <div class="bk-space-card">
+              <div class="bk-toolbar">
+                <div class="bk-toolbar-left">
+                  <input class="bk-search-input" style="width: 320px;" placeholder="名称/关联流程/创建人">
+                </div>
+                <div class="bk-toolbar-right">
+                  <span class="bk-muted">独立路由语义：/admin_decision/?space_id=171</span>
+                </div>
+              </div>
+              <div class="bk-exception bk-decision-empty">
+                <div style="font-size:56px;">◇</div>
+                <strong style="color:var(--bk-text-primary);">暂无数据</strong>
+                <div>当前空间还没有任何决策表。审计中这里的「新建」直接跳到专用编辑器。</div>
+                <div class="bk-prototype-actions" style="margin-top:4px;">
+                  <a class="bk-button bk-button-primary" href="decision-editor.html">新建决策表</a>
+                  <a class="bk-button" href="flow-edit.html">查看流程中的决策节点上下文</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-debug.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-debug.html
new file mode 100644
index 0000000000..a85b787c80
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-debug.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/flow-editor/template.html (debug route variant) -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 调试流程</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 0; overflow: auto; background: var(--bk-bg-body); }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-flow-editor { min-height: calc(100vh - var(--bk-header-height)); }
+    .bk-flow-editor-shell { min-height: calc(100vh - var(--bk-header-height)); }
+    .bk-debug-note {
+      padding: 14px 16px;
+      border-radius: 12px;
+      background: #f5f7fa;
+      color: var(--bk-text-secondary);
+      font-size: 12px;
+      line-height: 1.7;
+    }
+    .bk-debug-section + .bk-debug-section { margin-top: 16px; }
+    .bk-debug-section h4 {
+      margin-bottom: 8px;
+      font-size: 14px;
+    }
+    .bk-debug-panel-body {
+      display: grid;
+      gap: 12px;
+    }
+    .bk-debug-card {
+      padding: 12px;
+      border-radius: 10px;
+      border: 1px solid var(--bk-border-light);
+      background: #fbfcfe;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="flow-debug.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-flow-editor">
+            <div class="bk-flow-editor-shell">
+              <header class="bk-flow-editor-header">
+                <div class="bk-flow-editor-meta">
+                  <a class="bk-flow-editor-back" href="flow-edit.html">← 退出调试</a>
+                  <div class="bk-flow-editor-title">
+                    <h1>调试流程</h1>
+                    <p>audit-deep-dive-20260420 · `/template/mock/true/2166/`</p>
+                  </div>
+                  <div class="bk-flow-version-area">
+                    <span class="bk-flow-version-label">调试模式</span>
+                    <span class="bk-tag bk-tag-info">Mock</span>
+                    <span class="bk-flow-version-badge">节点点击后进入 Mock 数据配置</span>
+                  </div>
+                </div>
+                <div class="bk-flow-editor-actions">
+                  <a class="bk-button" href="flow-edit.html">退出调试</a>
+                  <button class="bk-button bk-button-primary" type="button">保存</button>
+                  <button class="bk-button bk-button-primary" type="button" data-open="flow-debug-confirm-dialog">执行调试</button>
+                </div>
+              </header>
+
+              <main class="bk-flow-editor-main">
+                <aside class="bk-flow-editor-rail">
+                  <section class="bk-flow-section-card">
+                    <h2>调试路由语义</h2>
+                    <ul>
+                      <li>本页顶栏动作固定为 `退出调试 / 保存 / 执行调试`。</li>
+                      <li>点击节点直接打开 Mock 数据配置，不再出现流程编辑工具条。</li>
+                      <li>执行调试前仍需二次确认，并会跳到独立执行页。</li>
+                    </ul>
+                  </section>
+                  <section class="bk-flow-section-card">
+                    <h3>当前环境提示</h3>
+                    <div class="bk-debug-note">审计里点击调试执行页的「执行」后出现了 `应用出现异常`，因此这里保留确认链路和异常提示，但不伪造成功结果页。</div>
+                  </section>
+                </aside>
+
+                <section class="bk-flow-canvas-shell">
+                  <div class="bk-flow-canvas-header">
+                    <div>
+                      <strong>Mock 调试画布</strong>
+                      <span>单击节点就打开右侧 Mock 数据配置；这里不承载流程编排。</span>
+                    </div>
+                    <div class="bk-flow-canvas-tools">
+                      <span class="bk-flow-tool-chip">历史调试 12 次</span>
+                      <span class="bk-flow-tool-chip">Mock 数据方案1</span>
+                    </div>
+                  </div>
+
+                  <div class="bk-flow-canvas">
+                    <div class="bk-flow-canvas-stage">
+                      <div class="bk-flow-node bk-flow-node-start"><strong>开始</strong></div>
+                      <div class="bk-flow-link"></div>
+                      <button class="bk-flow-node is-selected" type="button" data-node-select="flow-debug-main" data-node-open="#flow-debug-panel" data-node-name="发布蓝鲸作业" data-node-detail-source="job-release">
+                        <strong>发布蓝鲸作业</strong>
+                        <span>点击配置 Mock 数据</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <button class="bk-flow-node" type="button" data-node-select="flow-debug-main" data-node-open="#flow-debug-panel" data-node-name="通知审批结果" data-node-detail-source="notice-send">
+                        <strong>通知审批结果</strong>
+                        <span>点击配置 Mock 数据</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <div class="bk-flow-node bk-flow-node-end"><strong>结束</strong></div>
+                    </div>
+                  </div>
+                </section>
+              </main>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <aside class="bk-right-panel is-open" id="flow-debug-panel">
+    <div class="bk-right-panel-header">
+      <span data-node-panel-title>发布蓝鲸作业</span>
+      <button class="bk-button bk-button-text" type="button" data-right-panel-close="#flow-debug-panel">关闭</button>
+    </div>
+    <div class="bk-right-panel-body bk-debug-panel-body">
+      <div data-detail-source-group="flow-debug-panel" data-detail-source-id="job-release">
+        <section class="bk-debug-section">
+          <h4>Mock 数据</h4>
+          <div class="bk-debug-card">当前方案：Mock 数据方案1<br>job_instance_id = mock-job-20260420-001<br>job_status = FINISHED</div>
+        </section>
+        <section class="bk-debug-section">
+          <h4>插件配置</h4>
+          <div class="bk-debug-card">插件版本：v3.7.2<br>超时控制：开启<br>失败处理：AS / MS / MR / AR</div>
+        </section>
+        <section class="bk-debug-section">
+          <h4>流程控制选项</h4>
+          <div class="bk-debug-card">执行前保存 Mock 数据：是<br>执行页目标：`/template/mock/execute/true/2166/`</div>
+        </section>
+      </div>
+      <div data-detail-source-group="flow-debug-panel" data-detail-source-id="notice-send" hidden>
+        <section class="bk-debug-section">
+          <h4>Mock 数据</h4>
+          <div class="bk-debug-card">当前方案：通知回执成功<br>receiver = admin<br>send_result = success</div>
+        </section>
+        <section class="bk-debug-section">
+          <h4>插件配置</h4>
+          <div class="bk-debug-card">渠道：蓝信 / 邮件<br>重试次数：2 次<br>失败继续：否</div>
+        </section>
+        <section class="bk-debug-section">
+          <h4>流程控制选项</h4>
+          <div class="bk-debug-card">允许跳过通知节点：否<br>失败时终止整条调试链路</div>
+        </section>
+      </div>
+    </div>
+  </aside>
+
+  <div class="bk-dialog" id="flow-debug-confirm-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>执行调试</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>确定保存Mock数据并去执行调试?</p>
+        <p class="bk-flow-confirm-note">真实链路会新开标签页进入 `/template/mock/execute/true/2166/`，当前环境继续执行后可能弹出「应用出现异常」。</p>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-primary" type="button" data-close>保存并执行</button>
+        <button class="bk-button" type="button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-edit.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-edit.html
new file mode 100644
index 0000000000..0b888f9b83
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-edit.html
@@ -0,0 +1,356 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/flow-editor/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 编辑流程</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 0; overflow: auto; background: var(--bk-bg-body); }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-flow-editor { min-height: calc(100vh - var(--bk-header-height)); }
+    .bk-flow-editor-shell { min-height: calc(100vh - var(--bk-header-height)); }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="flow-edit.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-flow-editor">
+            <div class="bk-flow-editor-shell">
+              <header class="bk-flow-editor-header">
+                <div class="bk-flow-editor-meta">
+                  <a class="bk-flow-editor-back" href="template-list.html">← 返回流程列表</a>
+                  <div class="bk-flow-editor-title">
+                    <h1>编辑流程</h1>
+                    <p>audit-deep-dive-20260420 · 发布蓝鲸作业审批链</p>
+                  </div>
+                  <div class="bk-flow-version-area">
+                    <span class="bk-flow-version-label">流程版本</span>
+                    <span class="bk-tag">草稿</span>
+                    <span class="bk-flow-version-badge">最新发布 1.0.0</span>
+                  </div>
+                </div>
+                <div class="bk-flow-editor-actions">
+                  <button
+                    type="button"
+                    class="bk-button bk-button-primary bk-save-button is-disabled"
+                    id="flow-editor-save"
+                    disabled
+                    data-disable-target="#flow-editor-save"
+                    data-enable-target="#flow-editor-publish">保存</button>
+                  <button
+                    type="button"
+                    class="bk-button bk-button-primary is-disabled"
+                    id="flow-editor-publish"
+                    disabled
+                    data-open="flow-publish-dialog">发布</button>
+                  <a class="bk-button" href="flow-debug.html">调试</a>
+                </div>
+              </header>
+
+              <main class="bk-flow-editor-main">
+                <aside class="bk-flow-editor-rail">
+                  <section class="bk-flow-section-card">
+                    <h2>编辑节奏</h2>
+                    <ul>
+                      <li>单击画布节点只做选中。</li>
+                      <li>双击节点才打开 `节点配置`。</li>
+                      <li>抽屉里的 `确定` 仅回写画布并启用顶部保存。</li>
+                      <li>顶部 `保存` 后，发布按钮才进入可操作态。</li>
+                    </ul>
+                  </section>
+
+                  <section class="bk-flow-section-card">
+                    <h3>调试入口</h3>
+                    <p>点击顶部 `调试` 会跳到专用 mock 调试路由，本页不直接执行调试。</p>
+                  </section>
+                </aside>
+
+                <section class="bk-flow-canvas-shell">
+                  <div class="bk-flow-canvas-header">
+                    <div>
+                      <strong>流程画布</strong>
+                      <span>单击查看节点悬浮工具条，双击进入配置抽屉。</span>
+                    </div>
+                    <div class="bk-flow-canvas-tools">
+                      <span class="bk-flow-tool-chip">-</span>
+                      <span class="bk-flow-tool-chip">100%</span>
+                      <span class="bk-flow-tool-chip">+</span>
+                    </div>
+                  </div>
+
+                  <div class="bk-flow-canvas">
+                    <div class="bk-flow-canvas-stage">
+                      <div class="bk-flow-node bk-flow-node-start">
+                        <strong>开始</strong>
+                      </div>
+                      <div class="bk-flow-link"></div>
+                      <button
+                        type="button"
+                        class="bk-flow-node"
+                        data-node-select="flow-editor-main"
+                        data-node-toolbar="#flow-node-toolbar"
+                        data-node-name="发布蓝鲸作业"
+                        data-dblopen="flow-node-config-drawer">
+                        <strong>发布蓝鲸作业</strong>
+                        <span>标准插件 · 蓝盾作业</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <button
+                        type="button"
+                        class="bk-flow-node"
+                        data-node-select="flow-editor-main"
+                        data-node-toolbar="#flow-node-toolbar"
+                        data-node-name="通知审批结果"
+                        data-dblopen="flow-node-config-drawer">
+                        <strong>通知审批结果</strong>
+                        <span>标准插件 · 通知中心</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <div class="bk-flow-node bk-flow-node-end">
+                        <strong>结束</strong>
+                      </div>
+                    </div>
+
+                    <div class="bk-flow-node-toolbar" id="flow-node-toolbar">
+                      <span class="bk-flow-toolbar-title" data-node-toolbar-label>节点悬浮工具条</span>
+                      <button type="button" class="bk-flow-toolbar-button" data-open="flow-node-config-drawer">配置</button>
+                      <button type="button" class="bk-flow-toolbar-button">复制</button>
+                      <button type="button" class="bk-flow-toolbar-button">连线</button>
+                      <button type="button" class="bk-flow-toolbar-button">删除</button>
+                    </div>
+                  </div>
+                </section>
+              </main>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <aside class="bk-sideslider" id="flow-node-config-drawer">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <div class="bk-flow-drawer-header">
+          <div>
+            <h3>节点配置</h3>
+            <p>单击只选中节点，双击才打开抽屉；局部 `确定` 不等于全局保存。</p>
+          </div>
+          <div class="bk-flow-drawer-header-actions">
+            <button type="button" class="bk-button bk-button-text bk-button-small" data-open="flow-global-vars-dialog">全局变量</button>
+            <button class="bk-sideslider-close" type="button" data-close>×</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="bk-sideslider-body">
+        <section class="bk-flow-drawer-group">
+          <h4>基础信息</h4>
+          <div class="bk-flow-two-col">
+            <div>
+              <label class="bk-flow-label">标准插件</label>
+              <div class="bk-flow-input-block">job.execute_task</div>
+            </div>
+            <div>
+              <label class="bk-flow-label">插件版本</label>
+              <div class="bk-flow-input-block">v3.7.2</div>
+            </div>
+            <div>
+              <label class="bk-flow-label">节点名称</label>
+              <div class="bk-flow-input-block">发布蓝鲸作业</div>
+            </div>
+            <div>
+              <label class="bk-flow-label">失败处理</label>
+              <div class="bk-flow-inline-box">
+                <span class="bk-flow-pill">AS</span>
+                <span class="bk-flow-pill">MS</span>
+                <span class="bk-flow-pill">MR</span>
+                <span class="bk-flow-pill">AR</span>
+              </div>
+            </div>
+          </div>
+          <div style="margin-top:12px;">
+            <label class="bk-flow-label">超时控制</label>
+            <div class="bk-flow-inline-box">
+              <span class="bk-flow-pill">开启</span>
+              <span>超时后自动标记为失败并转人工处理。</span>
+            </div>
+          </div>
+        </section>
+
+        <section class="bk-flow-drawer-group">
+          <h4>输入参数</h4>
+          <div class="bk-flow-stack">
+            <div>
+              <label class="bk-flow-label">作业模板 ID</label>
+              <div class="bk-flow-input-block">bk-job-template-prod</div>
+            </div>
+            <div>
+              <label class="bk-flow-label">执行参数</label>
+              <pre class="bk-flow-code-block">{
+  "biz_cc_id": "{{ biz_id }}",
+  "operator": "{{ _system.operator }}",
+  "task_name": "{{ _system.task_name }}"
+}</pre>
+            </div>
+          </div>
+        </section>
+
+        <section class="bk-flow-drawer-group">
+          <h4>输出参数</h4>
+          <table class="bk-flow-io-table">
+            <thead>
+              <tr>
+                <th>字段</th>
+                <th>来源</th>
+                <th>勾选为全局变量</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>job_instance_id</td>
+                <td>插件执行结果</td>
+                <td>是</td>
+              </tr>
+              <tr>
+                <td>job_status</td>
+                <td>插件执行结果</td>
+                <td>否</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+      </div>
+
+      <div class="bk-sideslider-footer">
+        <div class="bk-flow-footer-hint">局部确定只会同步节点配置并启用顶部 `保存`，真正保存仍需点击页面顶栏。</div>
+        <div>
+          <button type="button" class="bk-button" data-close>取消</button>
+          <button type="button" class="bk-button bk-button-primary" data-save-target="#flow-editor-save" data-close>确定</button>
+        </div>
+      </div>
+    </div>
+  </aside>
+
+  <div class="bk-dialog bk-flow-vars-float" id="flow-global-vars-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>全局变量</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <table class="bk-flow-vars-table">
+          <thead>
+            <tr>
+              <th>变量名</th>
+              <th>说明</th>
+              <th>示例值</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>_system.task_name</td>
+              <td>调度时自动注入的任务名称</td>
+              <td>audit-deep-dive-20260420</td>
+            </tr>
+            <tr>
+              <td>_system.task_id</td>
+              <td>系统生成的任务 ID</td>
+              <td>17100002166</td>
+            </tr>
+            <tr>
+              <td>_system.task_start_time</td>
+              <td>任务启动时间</td>
+              <td>2026-04-20 20:31:15</td>
+            </tr>
+            <tr>
+              <td>_system.operator</td>
+              <td>当前操作人</td>
+              <td>admin</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="bk-dialog-footer">
+        <button type="button" class="bk-button bk-button-primary" data-close>关闭</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="flow-publish-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>发布流程</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <div class="bk-flow-stack">
+          <div>
+            <label class="bk-flow-label">版本号</label>
+            <input class="bk-input" value="1.0.1">
+          </div>
+          <div>
+            <label class="bk-flow-label">版本描述</label>
+            <textarea class="bk-textarea" rows="4">补充调试 mock 数据配置与发布蓝鲸作业节点的最新入参约束。</textarea>
+          </div>
+        </div>
+      </div>
+      <div class="bk-dialog-footer">
+        <button type="button" class="bk-button bk-button-primary" data-close>确认发布</button>
+        <button type="button" class="bk-button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-view.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-view.html
new file mode 100644
index 0000000000..2b63a2774c
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/flow-view.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/flow-editor/template.html (read-only view variant) -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 查看流程</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 0; overflow: auto; background: var(--bk-bg-body); }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-flow-editor { min-height: calc(100vh - var(--bk-header-height)); }
+    .bk-flow-editor-shell { min-height: calc(100vh - var(--bk-header-height)); }
+    .bk-flow-view-note {
+      padding: 14px;
+      border-radius: 12px;
+      background: #f5f7fa;
+      color: var(--bk-text-secondary);
+      font-size: 12px;
+      line-height: 1.7;
+    }
+    .bk-right-panel-body .bk-flow-input-block + .bk-flow-input-block {
+      margin-top: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="flow-view.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-flow-editor">
+            <div class="bk-flow-editor-shell">
+              <header class="bk-flow-editor-header">
+                <div class="bk-flow-editor-meta">
+                  <a class="bk-flow-editor-back" href="template-list.html">← 返回流程列表</a>
+                  <div class="bk-flow-editor-title">
+                    <h1>查看流程</h1>
+                    <p>audit-deep-dive-20260420 · 已发布版本只读观察页</p>
+                  </div>
+                  <div class="bk-flow-version-area">
+                    <span class="bk-flow-version-label">流程版本</span>
+                    <span class="bk-tag bk-tag-success">已发布</span>
+                    <span class="bk-flow-version-badge">1.0.0 最新</span>
+                  </div>
+                </div>
+                <div class="bk-flow-editor-actions">
+                  <button class="bk-button" type="button" data-right-panel-open="#flow-view-panel">查看发布说明</button>
+                  <a class="bk-button bk-button-primary" href="flow-edit.html">编辑</a>
+                </div>
+              </header>
+
+              <main class="bk-flow-editor-main">
+                <aside class="bk-flow-editor-rail">
+                  <section class="bk-flow-section-card">
+                    <h2>只读语义</h2>
+                    <ul>
+                      <li>当前页不提供保存、发布和调试按钮。</li>
+                      <li>版本徽标固定展示已发布版本及“最新”状态。</li>
+                      <li>点击节点仅查看发布时的配置快照，不出现编辑抽屉。</li>
+                    </ul>
+                  </section>
+                  <section class="bk-flow-section-card">
+                    <h3>发布信息</h3>
+                    <div class="bk-flow-view-note">版本 `1.0.0` 于 2026-04-20 20:35:41 由 admin 发布，版本描述：补齐发布蓝鲸作业审批链和 mock 调试链路。</div>
+                  </section>
+                </aside>
+
+                <section class="bk-flow-canvas-shell">
+                  <div class="bk-flow-canvas-header">
+                    <div>
+                      <strong>流程画布</strong>
+                      <span>查看页保留版本上下文和节点关系，但不出现编辑工具条。</span>
+                    </div>
+                    <div class="bk-flow-canvas-tools">
+                      <span class="bk-flow-tool-chip">只读</span>
+                      <span class="bk-flow-tool-chip">1.0.0</span>
+                    </div>
+                  </div>
+
+                  <div class="bk-flow-canvas">
+                    <div class="bk-flow-canvas-stage">
+                      <div class="bk-flow-node bk-flow-node-start"><strong>开始</strong></div>
+                      <div class="bk-flow-link"></div>
+                      <button class="bk-flow-node is-selected" type="button" data-node-select="flow-view-main" data-node-open="#flow-view-panel" data-node-name="发布蓝鲸作业" data-node-detail-source="job-release">
+                        <strong>发布蓝鲸作业</strong>
+                        <span>标准插件 · 蓝盾作业</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <button class="bk-flow-node" type="button" data-node-select="flow-view-main" data-node-open="#flow-view-panel" data-node-name="通知审批结果" data-node-detail-source="notice-send">
+                        <strong>通知审批结果</strong>
+                        <span>标准插件 · 通知中心</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <div class="bk-flow-node bk-flow-node-end"><strong>结束</strong></div>
+                    </div>
+                  </div>
+                </section>
+              </main>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <aside class="bk-right-panel is-open" id="flow-view-panel">
+    <div class="bk-right-panel-header">
+      <span data-node-panel-title>发布蓝鲸作业</span>
+      <button class="bk-button bk-button-text" type="button" data-right-panel-close="#flow-view-panel">关闭</button>
+    </div>
+    <div class="bk-right-panel-body">
+      <div data-detail-source-group="flow-view-panel" data-detail-source-id="job-release">
+        <div class="bk-flow-input-block">标准插件：job.execute_task</div>
+        <div class="bk-flow-input-block">插件版本：v3.7.2</div>
+        <div class="bk-flow-input-block">失败处理：AS / MS / MR / AR</div>
+        <div class="bk-flow-input-block">发布快照：引用生产作业模板 `bk-job-template-prod`</div>
+      </div>
+      <div data-detail-source-group="flow-view-panel" data-detail-source-id="notice-send" hidden>
+        <div class="bk-flow-input-block">标准插件：notify.send_message</div>
+        <div class="bk-flow-input-block">插件版本：v2.1.0</div>
+        <div class="bk-flow-input-block">通知渠道：蓝信 / 邮件 / 蓝盾消息</div>
+        <div class="bk-flow-input-block">发布快照：审批结束后发送回执给任务发起人</div>
+      </div>
+    </div>
+  </aside>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/label-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/label-list.html
new file mode 100644
index 0000000000..2964d1bf79
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/label-list.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/list-page/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 标签管理</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 24px 28px 32px; overflow: auto; }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-space-page { display: grid; gap: 20px; }
+    .bk-space-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .bk-space-page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-space-page-title h1 { font-size: 24px; margin-bottom: 6px; }
+    .bk-space-page-title p,
+    .bk-muted { color: var(--bk-text-tertiary); }
+    .bk-table-wrap { overflow-x: auto; }
+    .bk-stack { display: grid; gap: 12px; }
+    .bk-label-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      background: #f5f7fa;
+    }
+    .bk-color-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      display: inline-block;
+    }
+    .bk-color-grid {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .bk-color-grid span {
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      border: 2px solid #fff;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+      display: inline-block;
+    }
+    .bk-scope-choice {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .bk-scope-choice span {
+      padding: 5px 12px;
+      border-radius: 999px;
+      border: 1px solid var(--bk-border);
+      font-size: 12px;
+    }
+    .bk-scope-choice .is-active {
+      border-color: var(--bk-primary);
+      background: #e1ecff;
+      color: var(--bk-primary-active);
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="label-list.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-space-page">
+            <div class="bk-space-page-header">
+              <div class="bk-space-page-title">
+                <h1>标签管理</h1>
+                <p>列表页保留层级标签语义和异步加载后的数据态，而不是只做一个纯空页面。</p>
+              </div>
+              <div class="bk-prototype-actions" style="margin-top:0;">
+                <button class="bk-button bk-button-primary" type="button" data-open="label-create-dialog">新增标签</button>
+              </div>
+            </div>
+
+            <div class="bk-space-card">
+              <div class="bk-toolbar">
+                <div class="bk-toolbar-left">
+                  <input class="bk-search-input" style="width: 280px;" placeholder="标签名称/范围/引用对象">
+                </div>
+                <div class="bk-toolbar-right">
+                  <span class="bk-muted">首次快照可能短暂出现空态，随后异步加载层级标签数据</span>
+                </div>
+              </div>
+              <div class="bk-table-wrap">
+                <table class="bk-table">
+                  <thead>
+                    <tr>
+                      <th>标签名称</th>
+                      <th>标签描述</th>
+                      <th style="width: 120px;">标签范围</th>
+                      <th style="width: 120px;">标签引用</th>
+                      <th style="width: 120px;">系统默认标签</th>
+                      <th style="width: 140px;">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td><span class="bk-label-chip"><span class="bk-color-dot" style="background:#3a84ff;"></span>发布/生产</span></td>
+                      <td>生产发布链路通用标签</td>
+                      <td>流程</td>
+                      <td>12 次</td>
+                      <td>是</td>
+                      <td><button class="bk-table-action" type="button">编辑</button><button class="bk-table-action" type="button">删除</button></td>
+                    </tr>
+                    <tr>
+                      <td><span class="bk-label-chip"><span class="bk-color-dot" style="background:#2dcb56;"></span>任务/回归巡检</span></td>
+                      <td>回归场景和巡检任务共用</td>
+                      <td>任务</td>
+                      <td>7 次</td>
+                      <td>否</td>
+                      <td><button class="bk-table-action" type="button">编辑</button><button class="bk-table-action" type="button">删除</button></td>
+                    </tr>
+                    <tr>
+                      <td><span class="bk-label-chip"><span class="bk-color-dot" style="background:#f8b53f;"></span>新标签/第三个二级标签</span></td>
+                      <td>用于演示层级名称与颜色选择器</td>
+                      <td>任务, 流程</td>
+                      <td>4 次</td>
+                      <td>否</td>
+                      <td><button class="bk-table-action" type="button">编辑</button><button class="bk-table-action" type="button">删除</button></td>
+                    </tr>
+                    <tr>
+                      <td><span class="bk-label-chip"><span class="bk-color-dot" style="background:#9d7cff;"></span>mock/debug</span></td>
+                      <td>专用于 mockTask 与调试链路</td>
+                      <td>任务</td>
+                      <td>9 次</td>
+                      <td>否</td>
+                      <td><button class="bk-table-action" type="button">编辑</button><button class="bk-table-action" type="button">删除</button></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="label-create-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>新增标签</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <div class="bk-stack">
+          <div>
+            <label class="bk-flow-label">标签名称</label>
+            <input class="bk-input" value="新标签/第三个二级标签">
+          </div>
+          <div>
+            <label class="bk-flow-label">标签颜色</label>
+            <div class="bk-color-grid">
+              <span style="background:#3a84ff;"></span>
+              <span style="background:#2dcb56;"></span>
+              <span style="background:#f8b53f;"></span>
+              <span style="background:#ff5757;"></span>
+              <span style="background:#9d7cff;"></span>
+            </div>
+          </div>
+          <div>
+            <label class="bk-flow-label">标签描述</label>
+            <textarea class="bk-textarea" rows="3">用于标记第二层业务分类。</textarea>
+          </div>
+          <div>
+            <label class="bk-flow-label">标签范围</label>
+            <div class="bk-scope-choice">
+              <span class="is-active">任务</span>
+              <span class="is-active">流程</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-primary" type="button" data-close>提交</button>
+        <button class="bk-button" type="button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/space-config.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/space-config.html
new file mode 100644
index 0000000000..15a5f74f0a
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/space-config.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/config-page/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 空间配置</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 24px 28px 32px; overflow: auto; }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-space-page { display: grid; gap: 20px; }
+    .bk-space-page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-space-page-title h1 { font-size: 24px; margin-bottom: 6px; }
+    .bk-space-page-title p,
+    .bk-muted { color: var(--bk-text-tertiary); }
+    .bk-space-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+      padding: 22px;
+    }
+    .bk-space-card + .bk-space-card { margin-top: 18px; }
+    .bk-section-title {
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .bk-code-editor {
+      border-radius: 12px;
+      background: #101a2b;
+      color: #c7d2e5;
+      padding: 16px;
+      font-family: Menlo, Monaco, Consolas, monospace;
+      font-size: 12px;
+      line-height: 1.7;
+      white-space: pre-wrap;
+    }
+    .bk-config-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px 20px;
+    }
+    .bk-config-note {
+      padding: 14px 16px;
+      border-radius: 10px;
+      background: #f5f7fa;
+      color: var(--bk-text-secondary);
+      font-size: 12px;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="space-config.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-space-page">
+            <div class="bk-space-page-header">
+              <div class="bk-space-page-title">
+                <h1>空间配置</h1>
+                <p>使用配置页母版表达长表单、代码编辑器和「保存默认禁用 / 恢复默认值需确认」的状态机。</p>
+              </div>
+              <div class="bk-prototype-actions" style="margin-top:0;">
+                <button class="bk-button" type="button" data-open="space-config-reset-dialog">恢复默认值</button>
+                <button class="bk-button" type="button" data-save-target="#space-config-save">模拟修改后启用保存</button>
+                <button class="bk-button bk-button-primary bk-save-button is-disabled" id="space-config-save" type="button" disabled>保存</button>
+              </div>
+            </div>
+
+            <div class="bk-space-card">
+              <div class="bk-section-title">基础配置</div>
+              <div class="bk-form">
+                <div class="bk-config-grid">
+                  <div class="bk-form-item is-required">
+                    <label class="bk-form-label">空间管理员</label>
+                    <div class="bk-form-content"><input class="bk-input" value="admin, flow_bot, ops_admin"></div>
+                  </div>
+                  <div class="bk-form-item">
+                    <label class="bk-form-label">流程版本控制</label>
+                    <div class="bk-form-content"><button class="bk-switcher is-checked" type="button"></button></div>
+                  </div>
+                  <div class="bk-form-item">
+                    <label class="bk-form-label">Token 过期时间</label>
+                    <div class="bk-form-content"><input class="bk-input" value="7200"></div>
+                  </div>
+                  <div class="bk-form-item">
+                    <label class="bk-form-label">画布模式</label>
+                    <div class="bk-form-content"><div class="bk-select"><div class="bk-select-trigger"><span>高级编排模式</span></div></div></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="bk-space-card">
+              <div class="bk-section-title">API 插件配置</div>
+              <div class="bk-config-note">真实页面使用 Monaco 风格代码编辑器。这里保留多段代码块和字段密度，方便后续与真实配置清单一一映射。</div>
+              <div class="bk-code-editor" style="margin-top:14px;">{
+  "plugin_base_url": "https://bkapi.example.com/bkflow/plugins",
+  "request_timeout": 30,
+  "allowed_scopes": ["biz", "project"],
+  "credential_types": [
+    "bk_app",
+    "bk_access_token",
+    "basic_auth",
+    "custom"
+  ]
+}</div>
+            </div>
+
+            <div class="bk-space-card">
+              <div class="bk-section-title">网关表达式</div>
+              <div class="bk-code-editor">expression:
+  match: "space_id == 171"
+  allow:
+    - "template.view"
+    - "template.edit"
+    - "task.execute"
+fallback:
+  policy: "deny"
+  message: "space gateway rule blocked"</div>
+            </div>
+
+            <div class="bk-space-card">
+              <div class="bk-section-title">默认 Mock / 调试配置</div>
+              <div class="bk-code-editor">{
+  "mock_history_limit": 20,
+  "allow_debug_execute": true,
+  "default_task_name_rule": "{{ template_name }}_调试任务_{{ timestamp }}",
+  "global_vars": [
+    "_system.task_name",
+    "_system.task_id",
+    "_system.operator"
+  ]
+}</div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="space-config-reset-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>恢复默认值</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>确认将所有配置项恢复为默认值？</p>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-danger" type="button" data-close>恢复默认值</button>
+        <button class="bk-button" type="button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/statistics-exception.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/statistics-exception.html
new file mode 100644
index 0000000000..73a69f2845
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/statistics-exception.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + exception state guidance from the audit -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 运营统计异常</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 24px 28px 32px; overflow: auto; }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-space-page { display: grid; gap: 20px; }
+    .bk-space-page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-space-page-title h1 { font-size: 24px; margin-bottom: 6px; }
+    .bk-space-page-title p,
+    .bk-muted { color: var(--bk-text-tertiary); }
+    .bk-metric-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+    .bk-metric-card,
+    .bk-failed-panel {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+    }
+    .bk-metric-card {
+      padding: 18px;
+      opacity: 0.48;
+      filter: grayscale(0.2);
+    }
+    .bk-metric-card strong {
+      display: block;
+      margin-top: 8px;
+      font-size: 24px;
+    }
+    .bk-failed-panel {
+      display: grid;
+      grid-template-columns: 1.1fr 0.9fr;
+      overflow: hidden;
+    }
+    .bk-failed-main {
+      padding: 30px;
+      background: linear-gradient(180deg, #fff, #fff8f8);
+      border-right: 1px solid #f1d6d6;
+    }
+    .bk-failed-side {
+      padding: 24px;
+      background: #101a2b;
+      color: #d2def0;
+      font-family: Menlo, Monaco, Consolas, monospace;
+      font-size: 12px;
+      line-height: 1.7;
+      white-space: pre-wrap;
+    }
+    .bk-inline-alert {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 999px;
+      background: #fff1f1;
+      color: #b53b3b;
+      font-size: 12px;
+      margin-bottom: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="statistics-exception.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-space-page">
+            <div class="bk-space-page-header">
+              <div class="bk-space-page-title">
+                <h1>运营统计</h1>
+                <p>审计结论是：路由能进入，但当前环境主体未稳定渲染。这里刻意做成显式异常页，而不是伪造一套正常统计图。</p>
+              </div>
+              <div class="bk-prototype-actions" style="margin-top:0;">
+                <button class="bk-button" type="button">刷新页面</button>
+                <a class="bk-button" href="debug-task-list.html">查看调试任务</a>
+              </div>
+            </div>
+
+            <div class="bk-metric-grid">
+              <div class="bk-metric-card">
+                <div class="bk-muted">近 7 日执行量</div>
+                <strong>1,284</strong>
+              </div>
+              <div class="bk-metric-card">
+                <div class="bk-muted">失败率</div>
+                <strong>2.3%</strong>
+              </div>
+              <div class="bk-metric-card">
+                <div class="bk-muted">平均耗时</div>
+                <strong>46s</strong>
+              </div>
+            </div>
+
+            <div class="bk-failed-panel">
+              <div class="bk-failed-main">
+                <div class="bk-inline-alert">● 统计应用异常</div>
+                <h2 style="margin-bottom:8px;">运营统计主体加载失败</h2>
+                <p class="bk-muted" style="line-height:1.7;">`activeTab=statistics` 已切换成功，但主内容区在 stag 环境里几乎为空。审计时 console 持续出现外部可视化资源日志，因此该页需要单独建模为“入口存在但内容异常”的失败态。</p>
+                <div class="bk-prototype-actions">
+                  <button class="bk-button bk-button-primary" type="button">重新加载统计资源</button>
+                  <button class="bk-button" type="button">切回空间配置</button>
+                </div>
+              </div>
+              <div class="bk-failed-side">[statistics-loader]
+route: /bkflow_engine_admin/?space_id=171&amp;activeTab=statistics
+status: PARTIAL_RENDER
+message: external dashboard bundle did not mount
+
+console:
+[info] trying to bootstrap chart app
+[warn] missing runtime chunk for dashboard vendor
+[error] chart root remains empty after hydration timeout</div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-complete.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-complete.html
new file mode 100644
index 0000000000..5894c6cb2b
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-complete.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/task-detail/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 调试任务详情（完成）</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 0; overflow: auto; background: var(--bk-bg-body); }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-task-detail { min-height: calc(100vh - var(--bk-header-height)); }
+    .bk-task-detail-shell { min-height: calc(100vh - var(--bk-header-height)); }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="task-detail-complete.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-task-detail">
+            <div class="bk-task-detail-shell">
+              <header class="bk-task-detail-header">
+                <div class="bk-task-detail-meta">
+                  <a class="bk-task-detail-back" href="debug-task-list.html">← 返回调试任务列表</a>
+                  <div class="bk-task-detail-title">
+                    <span class="bk-task-detail-label">任务执行</span>
+                    <div class="bk-task-detail-heading">
+                      <h1>audit-deep-dive-20260420_调试任务_20260420203821</h1>
+                      <span class="bk-task-status is-success">完成</span>
+                    </div>
+                    <p>源调试模板 <a href="flow-debug.html">/template/mock/true/2166/</a> · 执行实例 #1192795 · 2026-04-20 20:38:21</p>
+                  </div>
+                </div>
+                <div class="bk-task-detail-summary">
+                  <div class="bk-task-detail-chip">
+                    <span class="bk-task-detail-chip-label">观察模式</span>
+                    <strong>只读观察</strong>
+                  </div>
+                  <div class="bk-task-detail-chip">
+                    <span class="bk-task-detail-chip-label">耗时</span>
+                    <strong>小于 1 秒</strong>
+                  </div>
+                </div>
+              </header>
+
+              <main class="bk-task-detail-main">
+                <section class="bk-task-detail-canvas-shell">
+                  <div class="bk-task-detail-canvas-header">
+                    <div>
+                      <strong>执行画布</strong>
+                      <span>节点单击后直接打开 `节点详情`，用于只读观察，不提供编辑控件。</span>
+                    </div>
+                    <div class="bk-flow-canvas-tools">
+                      <span class="bk-flow-tool-chip">只读观察</span>
+                      <span class="bk-flow-tool-chip">100%</span>
+                    </div>
+                  </div>
+
+                  <div class="bk-flow-canvas bk-task-detail-canvas">
+                    <div class="bk-flow-canvas-stage">
+                      <div class="bk-flow-node bk-flow-node-start">
+                        <strong>开始</strong>
+                      </div>
+                      <div class="bk-flow-link"></div>
+                      <button
+                        type="button"
+                        class="bk-flow-node is-selected"
+                        data-node-select="task-detail-main"
+                        data-node-open="#task-detail-panel"
+                        data-node-name="消息展示"
+                        data-node-status="完成"
+                        data-node-trail="开始节点 / 消息展示 / 结束节点"
+                        data-node-detail-source="message-display">
+                        <strong>消息展示</strong>
+                        <span>标准插件 · 文本展示</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <button
+                        type="button"
+                        class="bk-flow-node"
+                        data-node-select="task-detail-main"
+                        data-node-open="#task-detail-panel"
+                        data-node-name="人工复核"
+                        data-node-status="未执行"
+                        data-node-trail="开始节点 / 消息展示 / 人工复核 / 结束节点"
+                        data-node-detail-source="manual-review">
+                        <strong>人工复核</strong>
+                        <span>人工节点 · 等待处理</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <div class="bk-flow-node bk-flow-node-end">
+                        <strong>结束</strong>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+
+                <aside class="bk-task-detail-panel is-open" id="task-detail-panel" data-tab-root>
+                  <div class="bk-task-detail-panel-header">
+                    <div>
+                      <h2 data-node-panel-title>节点详情</h2>
+                      <div class="bk-task-detail-node-trail" data-node-panel-trail>开始节点 / 消息展示 / 结束节点</div>
+                    </div>
+                    <span class="bk-task-status is-success" data-node-panel-status>完成</span>
+                  </div>
+
+                  <div class="bk-task-detail-panel-summary">
+                    <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                      <div class="bk-task-detail-summary-card">
+                        <span class="bk-task-detail-summary-label">观测变量</span>
+                        <strong>展示内容 = audit message 20260420</strong>
+                      </div>
+                      <div class="bk-task-detail-summary-card">
+                        <span class="bk-task-detail-summary-label">运行结论</span>
+                        <strong>插件执行成功，无需人工接管</strong>
+                      </div>
+                    </div>
+                    <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                      <div class="bk-task-detail-summary-card">
+                        <span class="bk-task-detail-summary-label">当前状态</span>
+                        <strong><span class="bk-task-status is-neutral">未执行</span></strong>
+                      </div>
+                      <div class="bk-task-detail-summary-card">
+                        <span class="bk-task-detail-summary-label">待办说明</span>
+                        <strong>等待消息展示节点完成后进入人工复核。</strong>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="bk-tab">
+                    <div class="bk-tab-header">
+                      <button type="button" class="bk-tab-item active" data-tab-group="task-detail-panel" data-tab-target="task-detail-records">执行记录</button>
+                      <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-snapshot">配置快照</button>
+                      <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-history">操作历史</button>
+                      <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-call-log">调用日志</button>
+                    </div>
+
+                    <div class="bk-task-detail-panel-body">
+                      <section class="bk-tab-panel bk-task-detail-section" id="task-detail-records" data-tab-panel-group="task-detail-panel">
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                          <article class="bk-task-detail-block">
+                            <h3>异常信息</h3>
+                            <div class="bk-task-detail-note">暂无异常</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>执行信息</h3>
+                            <dl class="bk-task-detail-kv">
+                              <div><dt>开始时间</dt><dd>2026-04-20 20:38:21</dd></div>
+                              <div><dt>结束时间</dt><dd>2026-04-20 20:38:22</dd></div>
+                              <div><dt>耗时</dt><dd>小于 1 秒</dd></div>
+                              <div><dt>执行人</dt><dd>admin</dd></div>
+                            </dl>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输入参数</h3>
+                            <div class="bk-task-detail-code">展示内容 = audit message 20260420</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输出参数</h3>
+                            <div class="bk-task-detail-code">_result = true
+_loop = 0
+_inner_loop = 0</div>
+                          </article>
+                        </div>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                          <article class="bk-task-detail-block">
+                            <h3>异常信息</h3>
+                            <div class="bk-task-detail-note">暂无异常</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>执行信息</h3>
+                            <dl class="bk-task-detail-kv">
+                              <div><dt>开始时间</dt><dd>尚未开始</dd></div>
+                              <div><dt>结束时间</dt><dd>尚未开始</dd></div>
+                              <div><dt>排队状态</dt><dd>等待上游节点完成</dd></div>
+                              <div><dt>责任角色</dt><dd>空间管理员</dd></div>
+                            </dl>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输入参数</h3>
+                            <div class="bk-task-detail-code">approval_context = 来自消息展示节点的输出</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输出参数</h3>
+                            <div class="bk-task-detail-code">尚未生成输出参数</div>
+                          </article>
+                        </div>
+                      </section>
+
+                      <section class="bk-tab-panel bk-task-detail-section" id="task-detail-snapshot" data-tab-panel-group="task-detail-panel" hidden>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                          <article class="bk-task-detail-block">
+                            <h3>配置快照</h3>
+                            <dl class="bk-task-detail-kv">
+                              <div><dt>标准插件</dt><dd>message.display_text</dd></div>
+                              <div><dt>插件版本</dt><dd>v1.2.0</dd></div>
+                              <div><dt>节点名称</dt><dd>消息展示</dd></div>
+                              <div><dt>失败处理</dt><dd>AS / MS</dd></div>
+                            </dl>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输入参数</h3>
+                            <div class="bk-task-detail-code">{
+  "message": "audit message 20260420",
+  "operator": "{{ _system.operator }}"
+}</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输出参数</h3>
+                            <div class="bk-task-detail-code">[
+  "_result",
+  "_loop",
+  "_inner_loop"
+]</div>
+                          </article>
+                        </div>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                          <article class="bk-task-detail-block">
+                            <h3>配置快照</h3>
+                            <dl class="bk-task-detail-kv">
+                              <div><dt>标准插件</dt><dd>manual.review</dd></div>
+                              <div><dt>插件版本</dt><dd>v1.0.0</dd></div>
+                              <div><dt>节点名称</dt><dd>人工复核</dd></div>
+                              <div><dt>失败处理</dt><dd>人工接管</dd></div>
+                            </dl>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输入参数</h3>
+                            <div class="bk-task-detail-code">{
+  "approver_group": "space_admin",
+  "title": "请确认消息展示结果"
+}</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输出参数</h3>
+                            <div class="bk-task-detail-code">[
+  "approve_result",
+  "approve_comment"
+]</div>
+                          </article>
+                        </div>
+                      </section>
+
+                      <section class="bk-tab-panel bk-task-detail-section" id="task-detail-history" data-tab-panel-group="task-detail-panel" hidden>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                          <article class="bk-task-detail-block">
+                            <h3>操作历史</h3>
+                            <table class="bk-flow-io-table">
+                              <thead>
+                                <tr>
+                                  <th>时间</th>
+                                  <th>动作</th>
+                                  <th>执行人</th>
+                                  <th>说明</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td colspan="4" class="bk-task-detail-empty-cell">暂无数据</td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </article>
+                        </div>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                          <article class="bk-task-detail-block">
+                            <h3>操作历史</h3>
+                            <table class="bk-flow-io-table">
+                              <thead>
+                                <tr>
+                                  <th>时间</th>
+                                  <th>动作</th>
+                                  <th>执行人</th>
+                                  <th>说明</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td>2026-04-20 20:38:22</td>
+                                  <td>排队</td>
+                                  <td>system</td>
+                                  <td>等待上游节点完成后唤起人工复核。</td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </article>
+                        </div>
+                      </section>
+
+                      <section class="bk-tab-panel bk-task-detail-section" id="task-detail-call-log" data-tab-panel-group="task-detail-panel" hidden>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                          <article class="bk-task-detail-block">
+                            <h3>调用日志</h3>
+                            <div class="bk-log-viewer" aria-label="日志查看器">
+                              <div class="line-numbers">1
+2
+3
+4</div>
+                              <pre>pipeline trace
+[INFO] node=message.display_text status=FINISHED
+[DEBUG] render message=audit message 20260420
+[INFO] outputs={"_result": true, "_loop": 0, "_inner_loop": 0}</pre>
+                            </div>
+                          </article>
+                        </div>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                          <article class="bk-task-detail-block">
+                            <h3>调用日志</h3>
+                            <div class="bk-log-viewer bk-log-empty" aria-label="日志查看器">
+                              <div class="line-numbers">1</div>
+                              <div class="bk-log-empty-copy">暂无调用日志，节点尚未进入执行阶段。</div>
+                            </div>
+                          </article>
+                        </div>
+                      </section>
+                    </div>
+                  </div>
+                </aside>
+              </main>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-failed.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-failed.html
new file mode 100644
index 0000000000..d9b038b546
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-detail-failed.html
@@ -0,0 +1,389 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/task-detail/template.html (failed state variant) -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 调试任务详情（失败）</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 0; overflow: auto; background: var(--bk-bg-body); }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-task-detail { min-height: calc(100vh - var(--bk-header-height)); }
+    .bk-task-detail-shell { min-height: calc(100vh - var(--bk-header-height)); }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="task-detail-failed.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user"><div class="bk-navigation-header-user-avatar">A</div><span>admin</span></div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space"><div class="bk-navigation-space-select"><span class="bk-navigation-space-icon">S</span><span>bkflow-eng-svc / space_id=171</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-task-detail">
+            <div class="bk-task-detail-shell">
+              <header class="bk-task-detail-header">
+                <div class="bk-task-detail-meta">
+                  <a class="bk-task-detail-back" href="debug-task-list.html">← 返回调试任务列表</a>
+                  <div class="bk-task-detail-title">
+                    <span class="bk-task-detail-label">任务执行</span>
+                    <div class="bk-task-detail-heading">
+                      <h1>audit-deep-dive-20260420_调试任务_20260420204106</h1>
+                      <span class="bk-task-status is-failed">失败</span>
+                    </div>
+                    <p>源调试模板 <a href="flow-debug.html">/template/mock/true/2166/</a> · 执行实例 #1192803 · 2026-04-20 20:41:06</p>
+                  </div>
+                </div>
+                <div class="bk-task-detail-summary">
+                  <div class="bk-task-detail-chip">
+                    <span class="bk-task-detail-chip-label">观察模式</span>
+                    <strong>失败取证</strong>
+                  </div>
+                  <div class="bk-task-detail-chip">
+                    <span class="bk-task-detail-chip-label">终止节点</span>
+                    <strong>发布蓝鲸作业</strong>
+                  </div>
+                </div>
+              </header>
+
+              <main class="bk-task-detail-main">
+                <section class="bk-task-detail-canvas-shell">
+                  <div class="bk-task-detail-canvas-header">
+                    <div>
+                      <strong>执行画布</strong>
+                      <span>失败态仍是只读观察页，单击节点直接切换节点详情与日志，不出现编辑控件。</span>
+                    </div>
+                    <div class="bk-flow-canvas-tools">
+                      <span class="bk-flow-tool-chip">失败链路</span>
+                      <span class="bk-flow-tool-chip">100%</span>
+                    </div>
+                  </div>
+
+                  <div class="bk-flow-canvas bk-task-detail-canvas">
+                    <div class="bk-flow-canvas-stage">
+                      <div class="bk-flow-node bk-flow-node-start">
+                        <strong>开始</strong>
+                      </div>
+                      <div class="bk-flow-link"></div>
+                      <button
+                        type="button"
+                        class="bk-flow-node is-selected"
+                        data-node-select="task-detail-main-failed"
+                        data-node-open="#task-detail-panel-failed"
+                        data-node-name="发布蓝鲸作业"
+                        data-node-status="失败"
+                        data-node-trail="开始节点 / 发布蓝鲸作业"
+                        data-node-detail-source="job-release-failed">
+                        <strong>发布蓝鲸作业</strong>
+                        <span>标准插件 · 蓝盾作业</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <button
+                        type="button"
+                        class="bk-flow-node"
+                        data-node-select="task-detail-main-failed"
+                        data-node-open="#task-detail-panel-failed"
+                        data-node-name="通知审批结果"
+                        data-node-status="未执行"
+                        data-node-trail="开始节点 / 发布蓝鲸作业 / 通知审批结果"
+                        data-node-detail-source="notice-pending">
+                        <strong>通知审批结果</strong>
+                        <span>标准插件 · 通知中心</span>
+                      </button>
+                      <div class="bk-flow-link"></div>
+                      <div class="bk-flow-node bk-flow-node-end">
+                        <strong>结束</strong>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+
+                <aside class="bk-task-detail-panel is-open" id="task-detail-panel-failed" data-tab-root>
+                  <div class="bk-task-detail-panel-header">
+                    <div>
+                      <h2 data-node-panel-title>节点详情</h2>
+                      <div class="bk-task-detail-node-trail" data-node-panel-trail>开始节点 / 发布蓝鲸作业</div>
+                    </div>
+                    <span class="bk-task-status is-failed" data-node-panel-status>失败</span>
+                  </div>
+
+                  <div class="bk-task-detail-panel-summary">
+                    <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="job-release-failed">
+                      <div class="bk-task-detail-summary-card">
+                        <span class="bk-task-detail-summary-label">失败结论</span>
+                        <strong>调试执行请求返回全局异常，未生成下游节点可用输出。</strong>
+                      </div>
+                      <div class="bk-task-detail-summary-card">
+                        <span class="bk-task-detail-summary-label">关联现象</span>
+                        <strong>与审计中的「应用出现异常」路径一致。</strong>
+                      </div>
+                    </div>
+                    <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="notice-pending" hidden>
+                      <div class="bk-task-detail-summary-card">
+                        <span class="bk-task-detail-summary-label">当前状态</span>
+                        <strong><span class="bk-task-status is-neutral">未执行</span></strong>
+                      </div>
+                      <div class="bk-task-detail-summary-card">
+                        <span class="bk-task-detail-summary-label">阻塞原因</span>
+                        <strong>上游「发布蓝鲸作业」节点失败，通知节点未被调度。</strong>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="bk-tab">
+                    <div class="bk-tab-header">
+                      <button type="button" class="bk-tab-item active" data-tab-group="task-detail-panel-failed" data-tab-target="task-detail-failed-records">执行记录</button>
+                      <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel-failed" data-tab-target="task-detail-failed-snapshot">配置快照</button>
+                      <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel-failed" data-tab-target="task-detail-failed-history">操作历史</button>
+                      <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel-failed" data-tab-target="task-detail-failed-call-log">调用日志</button>
+                    </div>
+
+                    <div class="bk-task-detail-panel-body">
+                      <section class="bk-tab-panel bk-task-detail-section" id="task-detail-failed-records" data-tab-panel-group="task-detail-panel-failed">
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="job-release-failed">
+                          <article class="bk-task-detail-block is-danger">
+                            <h3>异常信息</h3>
+                            <div class="bk-task-detail-note is-danger">应用出现异常：mock execute 请求返回 500，未进入成功执行态。</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>执行信息</h3>
+                            <dl class="bk-task-detail-kv">
+                              <div><dt>开始时间</dt><dd>2026-04-20 20:41:06</dd></div>
+                              <div><dt>结束时间</dt><dd>2026-04-20 20:41:08</dd></div>
+                              <div><dt>耗时</dt><dd>2 秒</dd></div>
+                              <div><dt>执行人</dt><dd>admin</dd></div>
+                            </dl>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输入参数</h3>
+                            <div class="bk-task-detail-code">{
+  "biz_cc_id": "20050001",
+  "operator": "admin",
+  "task_name": "audit-deep-dive-20260420_调试任务_20260420204106"
+}</div>
+                          </article>
+                          <article class="bk-task-detail-block is-danger">
+                            <h3>输出参数</h3>
+                            <div class="bk-task-detail-code">{
+  "code": 500,
+  "message": "应用出现异常",
+  "data": null
+}</div>
+                          </article>
+                        </div>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="notice-pending" hidden>
+                          <article class="bk-task-detail-block">
+                            <h3>异常信息</h3>
+                            <div class="bk-task-detail-note">暂无异常，节点未被调度。</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>执行信息</h3>
+                            <dl class="bk-task-detail-kv">
+                              <div><dt>开始时间</dt><dd>尚未开始</dd></div>
+                              <div><dt>结束时间</dt><dd>尚未开始</dd></div>
+                              <div><dt>排队状态</dt><dd>等待上游节点成功后调度</dd></div>
+                              <div><dt>阻塞来源</dt><dd>发布蓝鲸作业</dd></div>
+                            </dl>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输入参数</h3>
+                            <div class="bk-task-detail-code">来自上游节点的执行结果尚未产出，通知节点未获得入参。</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输出参数</h3>
+                            <div class="bk-task-detail-code">暂无输出参数</div>
+                          </article>
+                        </div>
+                      </section>
+
+                      <section class="bk-tab-panel bk-task-detail-section" id="task-detail-failed-snapshot" data-tab-panel-group="task-detail-panel-failed" hidden>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="job-release-failed">
+                          <article class="bk-task-detail-block">
+                            <h3>配置快照</h3>
+                            <dl class="bk-task-detail-kv">
+                              <div><dt>标准插件</dt><dd>job.execute_task</dd></div>
+                              <div><dt>插件版本</dt><dd>v3.7.2</dd></div>
+                              <div><dt>节点名称</dt><dd>发布蓝鲸作业</dd></div>
+                              <div><dt>失败处理</dt><dd>AS / MS / MR / AR</dd></div>
+                            </dl>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输入参数</h3>
+                            <div class="bk-task-detail-code">{
+  "template_id": "bk-job-template-prod",
+  "operator": "{{ _system.operator }}",
+  "biz_cc_id": "{{ biz_id }}"
+}</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输出参数</h3>
+                            <div class="bk-task-detail-code">[
+  "job_instance_id",
+  "job_status",
+  "job_url"
+]</div>
+                          </article>
+                        </div>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="notice-pending" hidden>
+                          <article class="bk-task-detail-block">
+                            <h3>配置快照</h3>
+                            <dl class="bk-task-detail-kv">
+                              <div><dt>标准插件</dt><dd>notify.send_message</dd></div>
+                              <div><dt>插件版本</dt><dd>v2.1.0</dd></div>
+                              <div><dt>节点名称</dt><dd>通知审批结果</dd></div>
+                              <div><dt>失败处理</dt><dd>失败即终止</dd></div>
+                            </dl>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输入参数</h3>
+                            <div class="bk-task-detail-code">{
+  "receiver": "{{ operator }}",
+  "content": "发布结果通知"
+}</div>
+                          </article>
+                          <article class="bk-task-detail-block">
+                            <h3>输出参数</h3>
+                            <div class="bk-task-detail-code">[
+  "send_result",
+  "message_id"
+]</div>
+                          </article>
+                        </div>
+                      </section>
+
+                      <section class="bk-tab-panel bk-task-detail-section" id="task-detail-failed-history" data-tab-panel-group="task-detail-panel-failed" hidden>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="job-release-failed">
+                          <article class="bk-task-detail-block">
+                            <h3>操作历史</h3>
+                            <table class="bk-flow-io-table">
+                              <thead>
+                                <tr>
+                                  <th>时间</th>
+                                  <th>动作</th>
+                                  <th>执行人</th>
+                                  <th>说明</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td>2026-04-20 20:41:06</td>
+                                  <td>调试执行</td>
+                                  <td>admin</td>
+                                  <td>从 `/template/mock/execute/true/2166/` 发起执行。</td>
+                                </tr>
+                                <tr>
+                                  <td>2026-04-20 20:41:08</td>
+                                  <td>执行失败</td>
+                                  <td>system</td>
+                                  <td>捕获到「应用出现异常」，终止后续节点调度。</td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </article>
+                        </div>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="notice-pending" hidden>
+                          <article class="bk-task-detail-block">
+                            <h3>操作历史</h3>
+                            <table class="bk-flow-io-table">
+                              <thead>
+                                <tr>
+                                  <th>时间</th>
+                                  <th>动作</th>
+                                  <th>执行人</th>
+                                  <th>说明</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td colspan="4" class="bk-task-detail-empty-cell">暂无数据</td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </article>
+                        </div>
+                      </section>
+
+                      <section class="bk-tab-panel bk-task-detail-section" id="task-detail-failed-call-log" data-tab-panel-group="task-detail-panel-failed" hidden>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="job-release-failed">
+                          <article class="bk-task-detail-block">
+                            <h3>调用日志</h3>
+                            <div class="bk-log-viewer" aria-label="日志查看器">
+                              <div class="line-numbers">1
+2
+3
+4
+5
+6</div>
+                              <pre>pipeline trace
+[INFO] node=job.execute_task status=RUNNING
+[DEBUG] mock execution url=/template/mock/execute/true/2166/
+[ERROR] response status=500 message=应用出现异常
+[WARN] abort downstream scheduling
+[INFO] finish status=FAILED</pre>
+                            </div>
+                          </article>
+                        </div>
+                        <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel-failed" data-detail-source-id="notice-pending" hidden>
+                          <article class="bk-task-detail-block">
+                            <h3>调用日志</h3>
+                            <div class="bk-log-viewer bk-log-empty" aria-label="日志查看器">
+                              <div class="line-numbers">1</div>
+                              <div class="bk-log-empty-copy">暂无调用日志，上游失败后当前节点未进入执行阶段。</div>
+                            </div>
+                          </article>
+                        </div>
+                      </section>
+                    </div>
+                  </div>
+                </aside>
+              </main>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-list.html
new file mode 100644
index 0000000000..555f8f151b
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/task-list.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/list-page/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 任务</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content { padding: 24px 28px 32px; overflow: auto; }
+    .bk-page-panel { display: block; }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover { color: inherit; }
+    .bk-space-page { display: grid; gap: 20px; }
+    .bk-space-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .bk-space-page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-space-page-title h1 { font-size: 24px; margin-bottom: 6px; }
+    .bk-space-page-title p,
+    .bk-muted { color: var(--bk-text-tertiary); }
+    .bk-table-wrap { overflow-x: auto; }
+    .bk-engine-jump {
+      display: grid;
+      grid-template-columns: 1.4fr 1fr;
+      gap: 16px;
+    }
+    .bk-engine-panel-note {
+      padding: 16px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, #edf4ff, #f8fbff);
+      border: 1px solid #d8e6ff;
+    }
+    .bk-engine-panel-note strong {
+      display: block;
+      margin-bottom: 6px;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="task-list.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">A</div>
+          <span>admin</span>
+        </div>
+      </div>
+    </header>
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">S</span>
+            <span>bkflow-eng-svc / space_id=171</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span></div></div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;"><div class="bk-navigation-space-select" style="background:transparent;cursor:default;"><span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span></div></div>
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"><li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li></ul>
+        <div class="bk-navigation-footer"><button class="bk-navigation-collapse" title="收起导航">⟨</button></div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-space-page">
+            <div class="bk-space-page-header">
+              <div class="bk-space-page-title">
+                <h1>任务</h1>
+                <p>延续列表页母版，但主动作不是弹层而是跳到独立的引擎操作页 `/enginePanel/171/?type=task`。</p>
+              </div>
+              <div class="bk-prototype-actions" style="margin-top:0;">
+                <a class="bk-button bk-button-primary" href="../../../../masters/engine-panel/template.html">引擎操作</a>
+              </div>
+            </div>
+
+            <div class="bk-engine-jump">
+              <div class="bk-space-card">
+                <div class="bk-toolbar">
+                  <div class="bk-toolbar-left">
+                    <input class="bk-search-input" style="width: 420px;" placeholder="ID/任务名称/标签/创建人/执行人/所属模板 ID/所属作用域类型/所属作用域值">
+                  </div>
+                  <div class="bk-toolbar-right">
+                    <span class="bk-muted">当前空间暂无正式任务实例</span>
+                  </div>
+                </div>
+                <div class="bk-table-wrap">
+                  <table class="bk-table">
+                    <thead>
+                      <tr>
+                        <th style="width: 100px;">任务 ID</th>
+                        <th>任务名称</th>
+                        <th style="width: 120px;">执行状态</th>
+                        <th style="width: 120px;">所属模板 ID</th>
+                        <th style="width: 120px;">执行人</th>
+                        <th style="width: 180px;">开始时间</th>
+                        <th style="width: 180px;">更新时间</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr class="bk-table-empty">
+                        <td colspan="7">
+                          <div class="bk-exception" style="min-height: 240px;">
+                            <div style="font-size:48px;">⌁</div>
+                            <strong style="color:var(--bk-text-primary);">暂无数据</strong>
+                            <div>当前空间没有正式任务记录，可通过「引擎操作」跳转到 task 类型请求面板发起排查。</div>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              <aside class="bk-engine-panel-note">
+                <strong>真实路由语义</strong>
+                <p class="bk-muted">任务页顶部按钮不会在当前页开弹窗，而是跨模块跳到 `enginePanel`。这个页面故意保持和调试任务列表相同的表格骨架，但内容态是审计里看到的空列表。</p>
+                <div class="bk-prototype-actions">
+                  <a class="bk-button" href="../../../../masters/engine-panel/template.html">查看请求区母版</a>
+                </div>
+              </aside>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/template-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/template-list.html
new file mode 100644
index 0000000000..f59aaa1824
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/space/template-list.html
@@ -0,0 +1,433 @@
+<!DOCTYPE html>
+<!-- Composed from prototypes/masters/_shared/space-shell.html + prototypes/masters/list-page/template.html -->
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>空间管理 - 流程</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    .bk-content {
+      overflow: auto;
+      padding: 24px 28px 32px;
+    }
+    .bk-space-nav-link,
+    .bk-space-menu-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      color: inherit;
+    }
+    .bk-space-nav-link:hover,
+    .bk-space-menu-link:hover {
+      color: inherit;
+    }
+    .bk-page-panel {
+      display: block;
+    }
+    .bk-space-page {
+      display: grid;
+      gap: 20px;
+    }
+    .bk-space-page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .bk-space-page-title h1 {
+      font-size: 24px;
+      margin-bottom: 6px;
+    }
+    .bk-space-page-title p {
+      color: var(--bk-text-tertiary);
+    }
+    .bk-space-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .bk-table-wrap {
+      overflow-x: auto;
+    }
+    .bk-name-cell {
+      display: grid;
+      gap: 4px;
+    }
+    .bk-name-cell small,
+    .bk-muted {
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+    }
+    .bk-version-cell {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .bk-scope-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: #f0f5ff;
+      color: var(--bk-primary-active);
+      font-size: 12px;
+    }
+    .bk-stack {
+      display: grid;
+      gap: 12px;
+    }
+    .bk-mode-switch {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 10px;
+    }
+    .bk-mode-switch span {
+      padding: 4px 12px;
+      border: 1px solid var(--bk-border);
+      border-radius: 999px;
+      color: var(--bk-text-secondary);
+      font-size: 12px;
+    }
+    .bk-mode-switch .is-active {
+      border-color: var(--bk-primary);
+      background: #e1ecff;
+      color: var(--bk-primary-active);
+    }
+    .bk-danger-note {
+      margin-top: 10px;
+      padding: 12px;
+      border-radius: 8px;
+      background: #fff5f5;
+      color: #b53b3b;
+      font-size: 12px;
+      line-height: 1.6;
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space" data-nav-link="template-list.html"><a class="bk-space-nav-link" href="template-list.html">空间管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system" data-nav-link="../system/space-config-list.html"><a class="bk-space-nav-link" href="../system/space-config-list.html">系统管理</a></li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html"><a class="bk-space-nav-link" href="../plugin/plugin-list.html">我的插件</a></li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">A</div>
+          <span>admin</span>
+        </div>
+      </div>
+    </header>
+
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">S</span>
+            <span>bkflow-eng-svc / space_id=171</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span>
+          </div>
+        </div>
+
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item active"><a class="bk-space-menu-link" href="template-list.html"><span class="bk-navigation-menu-icon">≣</span>流程</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="task-list.html"><span class="bk-navigation-menu-icon">✓</span>任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="debug-task-list.html"><span class="bk-navigation-menu-icon">◎</span>调试任务</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="decision-list.html"><span class="bk-navigation-menu-icon">◇</span>决策表</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="space-config.html"><span class="bk-navigation-menu-icon">⚙</span>空间配置</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="credential-list.html"><span class="bk-navigation-menu-icon">⌘</span>凭证管理</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="statistics-exception.html"><span class="bk-navigation-menu-icon">∆</span>运营统计</a></li>
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="label-list.html"><span class="bk-navigation-menu-icon">#</span>标签管理</a></li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../system/space-config-list.html"><span class="bk-navigation-menu-icon">◈</span>空间配置</a></li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;">
+          <li class="bk-navigation-menu-item"><a class="bk-space-menu-link" href="../plugin/plugin-list.html"><span class="bk-navigation-menu-icon">⬡</span>蓝鲸插件</a></li>
+        </ul>
+
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel">
+          <div class="bk-space-page">
+            <div class="bk-space-page-header">
+              <div class="bk-space-page-title">
+                <h1>流程</h1>
+                <p>组合自空间管理壳子与列表页母版，保留真实审计中的「创建流程 / 新建任务 / 复制 / 删除」语义。</p>
+              </div>
+              <div class="bk-prototype-actions" style="margin-top:0;">
+                <button class="bk-button" type="button">刷新</button>
+                <button class="bk-button bk-button-primary" type="button" data-open="template-create-flow-dialog">创建流程</button>
+              </div>
+            </div>
+
+            <div class="bk-space-card">
+              <div class="bk-toolbar">
+                <div class="bk-toolbar-left">
+                  <input class="bk-search-input" style="width: 440px;" placeholder="ID/流程名称/标签/创建人/更新人/启用/所属作用域类型/所属作用域值">
+                </div>
+                <div class="bk-toolbar-right">
+                  <span class="bk-muted">共 58 条，当前空间开启流程版本控制</span>
+                </div>
+              </div>
+
+              <div class="bk-table-wrap">
+                <table class="bk-table">
+                  <thead>
+                    <tr>
+                      <th style="width: 88px;">流程 ID</th>
+                      <th>流程名称</th>
+                      <th style="width: 110px;">状态</th>
+                      <th style="width: 160px;">当前版本</th>
+                      <th style="width: 140px;">所属作用域</th>
+                      <th style="width: 100px;">创建人</th>
+                      <th style="width: 100px;">更新人</th>
+                      <th style="width: 170px;">更新时间</th>
+                      <th style="width: 210px;">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>2166</td>
+                      <td>
+                        <div class="bk-name-cell">
+                          <a href="flow-view.html">audit-deep-dive-20260420</a>
+                          <small>最新创建后直接插回列表顶部，用于发布与调试链路审计</small>
+                        </div>
+                      </td>
+                      <td><span class="bk-tag bk-tag-success">已发布</span></td>
+                      <td>
+                        <span class="bk-version-cell">
+                          <strong>1.0.0</strong>
+                          <span class="bk-tag bk-tag-info">最新</span>
+                        </span>
+                      </td>
+                      <td><span class="bk-scope-chip">biz · 20050001</span></td>
+                      <td>admin</td>
+                      <td>admin</td>
+                      <td>2026-04-20 20:31:15</td>
+                      <td>
+                        <button class="bk-table-action" type="button" data-open="template-create-task-slider">新建任务</button>
+                        <button class="bk-table-action" type="button" data-open="template-copy-dialog">复制</button>
+                        <button class="bk-table-action" type="button" data-open="template-delete-dialog">删除</button>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>2147</td>
+                      <td>
+                        <div class="bk-name-cell">
+                          <a href="flow-view.html">blueking-release-prod</a>
+                          <small>生产环境应用发布与回滚编排</small>
+                        </div>
+                      </td>
+                      <td><span class="bk-tag bk-tag-warning">草稿</span></td>
+                      <td>
+                        <span class="bk-version-cell">
+                          <strong>1.3.2</strong>
+                          <span class="bk-tag">待发布</span>
+                        </span>
+                      </td>
+                      <td><span class="bk-scope-chip">cmdb_biz · 42</span></td>
+                      <td>ops_admin</td>
+                      <td>flow_bot</td>
+                      <td>2026-04-21 09:42:08</td>
+                      <td>
+                        <button class="bk-table-action" type="button" data-open="template-create-task-slider">新建任务</button>
+                        <button class="bk-table-action" type="button" data-open="template-copy-dialog">复制</button>
+                        <button class="bk-table-action" type="button" data-open="template-delete-dialog">删除</button>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>2119</td>
+                      <td>
+                        <div class="bk-name-cell">
+                          <a href="flow-view.html">mock-api-regression</a>
+                          <small>用于联调 mockTask / decisionTable 能力的回归流</small>
+                        </div>
+                      </td>
+                      <td><span class="bk-tag bk-tag-danger">停用</span></td>
+                      <td>
+                        <span class="bk-version-cell">
+                          <strong>0.9.4</strong>
+                          <span class="bk-tag">历史</span>
+                        </span>
+                      </td>
+                      <td><span class="bk-scope-chip">project · bkflow-engine-admin</span></td>
+                      <td>tester</td>
+                      <td>tester</td>
+                      <td>2026-04-18 16:10:55</td>
+                      <td>
+                        <button class="bk-table-action" type="button" data-open="template-create-task-slider">新建任务</button>
+                        <button class="bk-table-action" type="button" data-open="template-copy-dialog">复制</button>
+                        <button class="bk-table-action" type="button" data-open="template-delete-dialog">删除</button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+
+              <div class="bk-pagination" style="margin-top: 18px;">
+                <span class="bk-pagination-total">共 58 条</span>
+                <span class="bk-pagination-item">«</span>
+                <span class="bk-pagination-item active">1</span>
+                <span class="bk-pagination-item">2</span>
+                <span class="bk-pagination-item">3</span>
+                <span class="bk-pagination-item">»</span>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="template-create-flow-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>创建流程</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <div class="bk-stack">
+          <div class="bk-form-item is-required" style="margin-bottom:0;">
+            <label class="bk-form-label">流程名称</label>
+            <div class="bk-form-content">
+              <input class="bk-input" value="audit-deep-dive-20260420">
+            </div>
+          </div>
+          <div class="bk-form-item" style="margin-bottom:0;">
+            <label class="bk-form-label">所属作用域类型</label>
+            <div class="bk-form-content">
+              <div class="bk-select">
+                <div class="bk-select-trigger"><span>biz</span></div>
+              </div>
+            </div>
+          </div>
+          <div class="bk-form-item" style="margin-bottom:0;">
+            <label class="bk-form-label">所属作用域值</label>
+            <div class="bk-form-content">
+              <input class="bk-input" value="20050001">
+            </div>
+          </div>
+          <div class="bk-form-item" style="margin-bottom:0;">
+            <label class="bk-form-label">标签</label>
+            <div class="bk-form-content">
+              <input class="bk-input" value="audit, mock, release">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-primary" type="button" data-close>提交</button>
+        <button class="bk-button" type="button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+
+  <aside class="bk-sideslider" id="template-create-task-slider">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <span>新建任务</span>
+        <button class="bk-sideslider-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-sideslider-body">
+        <div class="bk-mode-switch">
+          <span class="is-active">表单模式</span>
+          <span>JSON 模式</span>
+        </div>
+        <div class="bk-stack">
+          <div>
+            <label class="bk-flow-label">任务名称</label>
+            <div class="bk-flow-input-block">audit-deep-dive-20260420_20260421201852</div>
+          </div>
+          <div>
+            <label class="bk-flow-label">执行人</label>
+            <div class="bk-flow-input-block">admin</div>
+          </div>
+          <div>
+            <label class="bk-flow-label">执行入参</label>
+            <pre class="bk-flow-code-block">{
+  "biz_cc_id": "20050001",
+  "operator": "admin",
+  "notify_group": ["bkflow-ops"]
+}</pre>
+          </div>
+        </div>
+      </div>
+      <div class="bk-sideslider-footer">
+        <button class="bk-button" type="button" data-close>取消</button>
+        <button class="bk-button bk-button-primary" type="button" data-close>提交</button>
+      </div>
+    </div>
+  </aside>
+
+  <div class="bk-dialog" id="template-copy-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>复制流程</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>是否复制该流程？</p>
+        <div class="bk-danger-note">
+          关联 mock 数据不会同步复制，带决策表节点的流程暂不支持复制。<br>
+          当前页保留“复制包含的子流程”这一真实审计中的额外选项。
+        </div>
+        <label style="display:block;margin-top:12px;color:var(--bk-text-secondary);">
+          <input type="checkbox" checked> 复制包含的子流程
+        </label>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-primary" type="button" data-close>确认复制</button>
+        <button class="bk-button" type="button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="template-delete-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>删除流程</h3>
+        <button class="bk-dialog-close" type="button" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>确认删除流程 "audit-deep-dive-20260420"?</p>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-danger" type="button" data-close>删除</button>
+        <button class="bk-button" type="button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/module-config-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/module-config-list.html
new file mode 100644
index 0000000000..a47c516aa0
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/module-config-list.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型 - 系统管理 / 模块配置列表</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    body {
+      background:
+        radial-gradient(circle at top right, rgba(45, 203, 86, 0.08), transparent 24%),
+        linear-gradient(180deg, #f7fdf8 0%, #f5f7fa 22%, #f5f7fa 100%);
+    }
+    .page-shell {
+      max-width: 1500px;
+      margin: 0 auto;
+    }
+    .page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 18px;
+    }
+    .page-title {
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+    .page-desc {
+      max-width: 920px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+    }
+    .page-chip {
+      flex-shrink: 0;
+      padding: 10px 14px;
+      border-radius: 999px;
+      background: #e9fbef;
+      border: 1px solid rgba(45, 203, 86, 0.18);
+      color: #1c8a45;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.5;
+    }
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 14px;
+      margin-bottom: 18px;
+    }
+    .summary-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+      padding: 16px 18px;
+    }
+    .summary-label {
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+      margin-bottom: 8px;
+    }
+    .summary-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--bk-text-primary);
+      line-height: 1.1;
+    }
+    .summary-note {
+      margin-top: 8px;
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .panel-layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
+      gap: 16px;
+      align-items: start;
+    }
+    .panel {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 16px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+      overflow: hidden;
+    }
+    .panel-head {
+      padding: 18px 18px 0;
+    }
+    .panel-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 6px;
+    }
+    .panel-desc {
+      color: var(--bk-text-tertiary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .panel-body {
+      padding: 16px 18px 18px;
+    }
+    .filter-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+    .filter-chip {
+      display: inline-flex;
+      align-items: center;
+      height: 32px;
+      padding: 0 12px;
+      border-radius: 16px;
+      border: 1px solid var(--bk-border);
+      color: var(--bk-text-secondary);
+      background: #fafbfd;
+      font-size: 13px;
+    }
+    .filter-chip.is-active {
+      color: #1c8a45;
+      border-color: rgba(45, 203, 86, 0.28);
+      background: #e9fbef;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+    }
+    .bk-table {
+      min-width: 1160px;
+    }
+    .audit-list {
+      display: grid;
+      gap: 12px;
+      margin-top: 14px;
+    }
+    .audit-item {
+      padding-left: 12px;
+      border-left: 3px solid #2dcb56;
+    }
+    .audit-time {
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+      margin-bottom: 4px;
+    }
+    .audit-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 4px;
+    }
+    .audit-desc {
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .rule-box {
+      margin-top: 16px;
+      padding: 14px 16px;
+      border-radius: 12px;
+      background: #f7f9fc;
+      border: 1px solid var(--bk-border-light);
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+      font-size: 13px;
+    }
+    .status-ok { color: #14a568; }
+    .status-warn { color: #c98e17; }
+    .status-danger { color: #de5c5c; }
+    @media (max-width: 1280px) {
+      .summary-grid,
+      .panel-layout {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="space" data-nav-link="../space/template-list.html">空间管理</li>
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="system" data-nav-link="space-config-list.html">系统管理</li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>admin_ops</span>
+          <div class="bk-user-dropdown" aria-hidden="true">
+            <span class="bk-user-dropdown-item">配置中心</span>
+            <span class="bk-user-dropdown-item">退出登录</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space" style="display:none;">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-eng-svc</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span>
+          </div>
+        </div>
+
+        <ul class="bk-navigation-menu" data-nav-group="system">
+          <li class="bk-navigation-menu-item active" data-page="system-module-config-list">
+            <span class="bk-navigation-menu-icon">◈</span>模块配置列表
+          </li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="space" style="display:none;"></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"></ul>
+
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel" id="system-module-config-list">
+        <div class="page-shell">
+          <div class="bk-breadcrumb">
+            <span class="bk-breadcrumb-item">首页</span>
+            <span class="bk-breadcrumb-item">系统管理</span>
+            <span class="bk-breadcrumb-item">模块配置列表</span>
+          </div>
+
+          <div class="page-header">
+            <div>
+              <div class="page-title">模块配置列表</div>
+              <div class="page-desc">
+                这里集中管理模块级配置项、同步状态和冲突处理结果。相比空间配置，这个页面更强调模块版本、依赖关系和跨空间发布一致性，适合审计和平台运维共同查看。
+              </div>
+            </div>
+            <div class="page-chip">最近同步：2026-04-21 08:12 · 发布机器人</div>
+          </div>
+
+          <div class="summary-grid">
+            <div class="summary-card">
+              <div class="summary-label">受管模块</div>
+              <div class="summary-value">36</div>
+              <div class="summary-note">涵盖核心流程、通知、调度、审计等模块。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">待同步项</div>
+              <div class="summary-value status-warn">8</div>
+              <div class="summary-note">模块版本升级后尚未完成空间级分发。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">冲突项</div>
+              <div class="summary-value status-danger">4</div>
+              <div class="summary-note">包含字段覆盖、版本不一致和权限不匹配。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">只读基线</div>
+              <div class="summary-value status-ok">12</div>
+              <div class="summary-note">基线项只能查看，发布动作由平台审计统一控制。</div>
+            </div>
+          </div>
+
+          <div class="panel-layout">
+            <section class="panel">
+              <div class="panel-head">
+                <div class="panel-title">模块配置清单</div>
+                <div class="panel-desc">按模块追踪配置版本、同步状态、审核状态和最后一次发布结果，方便快速发布或回滚。</div>
+              </div>
+              <div class="panel-body">
+                <div class="bk-toolbar">
+                  <div class="bk-toolbar-left">
+                    <input class="bk-search-input" placeholder="搜索模块名称、编码、负责人" style="width: 280px;">
+                    <div class="bk-select" style="width: 170px;">
+                      <div class="bk-select-trigger"><span class="bk-select-placeholder">全部同步状态</span></div>
+                    </div>
+                    <div class="bk-select" style="width: 170px;">
+                      <div class="bk-select-trigger"><span class="bk-select-placeholder">全部审核状态</span></div>
+                    </div>
+                  </div>
+                  <div class="bk-toolbar-right">
+                    <button class="bk-button">刷新</button>
+                    <button class="bk-button bk-button-primary">发起批量发布</button>
+                  </div>
+                </div>
+
+                <div class="filter-row">
+                  <span class="filter-chip is-active">全部</span>
+                  <span class="filter-chip">已同步</span>
+                  <span class="filter-chip">待同步</span>
+                  <span class="filter-chip">冲突</span>
+                  <span class="filter-chip">已回滚</span>
+                </div>
+
+                <div class="table-wrap">
+                  <table class="bk-table">
+                    <thead>
+                      <tr>
+                        <th style="width: 180px;">模块名称</th>
+                        <th style="width: 170px;">模块编码</th>
+                        <th style="width: 110px;">配置版本</th>
+                        <th style="width: 150px;">适用范围</th>
+                        <th style="width: 110px;">同步状态</th>
+                        <th style="width: 110px;">审核状态</th>
+                        <th style="width: 130px;">最近更新时间</th>
+                        <th style="width: 120px;">负责人</th>
+                        <th style="width: 180px;">操作</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>审批引擎</td>
+                        <td>approval-engine</td>
+                        <td>v2.8.4</td>
+                        <td><span class="bk-tag bk-tag-info">系统级</span></td>
+                        <td><span class="bk-tag bk-tag-success">已同步</span></td>
+                        <td><span class="bk-tag bk-tag-success">已审批</span></td>
+                        <td>2026-04-20 18:40</td>
+                        <td>platform_ops</td>
+                        <td>
+                          <button class="bk-table-action">编辑</button>
+                          <button class="bk-table-action">发布</button>
+                          <button class="bk-table-action">查看依赖</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>调度器</td>
+                        <td>scheduler-core</td>
+                        <td>v1.12.0</td>
+                        <td><span class="bk-tag bk-tag-info">全空间</span></td>
+                        <td><span class="bk-tag bk-tag-warning">待同步</span></td>
+                        <td><span class="bk-tag bk-tag-warning">待审批</span></td>
+                        <td>2026-04-21 08:12</td>
+                        <td>scheduler_bot</td>
+                        <td>
+                          <button class="bk-table-action">编辑</button>
+                          <button class="bk-table-action">发起审批</button>
+                          <button class="bk-table-action">生成同步单</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>插件中心</td>
+                        <td>plugin-center</td>
+                        <td>v3.1.2</td>
+                        <td><span class="bk-tag bk-tag-info">指定空间 8 个</span></td>
+                        <td><span class="bk-tag bk-tag-danger">冲突</span></td>
+                        <td><span class="bk-tag bk-tag-warning">待处理</span></td>
+                        <td>2026-04-19 16:21</td>
+                        <td>integrate_team</td>
+                        <td>
+                          <button class="bk-table-action">查看冲突</button>
+                          <button class="bk-table-action">回滚</button>
+                          <button class="bk-table-action">对比版本</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>审计中心</td>
+                        <td>audit-hub</td>
+                        <td>v1.4.6</td>
+                        <td><span class="bk-tag bk-tag-info">系统级</span></td>
+                        <td><span class="bk-tag bk-tag-info">已回滚</span></td>
+                        <td><span class="bk-tag bk-tag-success">已审批</span></td>
+                        <td>2026-04-18 13:07</td>
+                        <td>audit_admin</td>
+                        <td>
+                          <button class="bk-table-action">编辑</button>
+                          <button class="bk-table-action">查看历史</button>
+                          <button class="bk-table-action">重新发布</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>模板引擎</td>
+                        <td>template-runtime</td>
+                        <td>v2.0.1</td>
+                        <td><span class="bk-tag bk-tag-info">全空间</span></td>
+                        <td><span class="bk-tag bk-tag-success">已同步</span></td>
+                        <td><span class="bk-tag bk-tag-success">已审批</span></td>
+                        <td>2026-04-17 20:16</td>
+                        <td>template_bot</td>
+                        <td>
+                          <button class="bk-table-action">编辑</button>
+                          <button class="bk-table-action">发布</button>
+                          <button class="bk-table-action">查看依赖</button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <div class="bk-pagination">
+                  <span class="bk-pagination-total">共 36 条</span>
+                  <span class="bk-pagination-item">&laquo;</span>
+                  <span class="bk-pagination-item active">1</span>
+                  <span class="bk-pagination-item">2</span>
+                  <span class="bk-pagination-item">3</span>
+                  <span class="bk-pagination-item">&raquo;</span>
+                </div>
+              </div>
+            </section>
+
+            <aside class="panel">
+              <div class="panel-head">
+                <div class="panel-title">发布守则</div>
+                <div class="panel-desc">模块配置变更要先通过审计，再分发到空间范围内的实际运行环境。</div>
+              </div>
+              <div class="panel-body">
+                <div class="audit-list">
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-21 08:12</div>
+                    <div class="audit-title">scheduler-core 待同步</div>
+                    <div class="audit-desc">调度器版本已更新，但尚未完成空间分发，需要先解决下游依赖检查。</div>
+                  </div>
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-19 16:21</div>
+                    <div class="audit-title">plugin-center 出现版本冲突</div>
+                    <div class="audit-desc">同名模块在两个基线空间中存在不一致的字段定义，暂时不能直接发布。</div>
+                  </div>
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-18 13:07</div>
+                    <div class="audit-title">audit-hub 已完成回滚</div>
+                    <div class="audit-desc">回滚成功后，历史版本保留可查看，新的发布请求会重新走审批链路。</div>
+                  </div>
+                </div>
+
+                <div class="rule-box">
+                  <strong>发布约束：</strong><br>
+                  1. 冲突项必须先对比版本再允许发布。<br>
+                  2. 待同步项只能批量发起，不允许直接跳过审计。<br>
+                  3. 回滚动作会记录模块负责人和对应发布单号。
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/space-config-list.html b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/space-config-list.html
new file mode 100644
index 0000000000..c9182c6a7b
--- /dev/null
+++ b/prototypes/features/bkflow-engine-admin-prototype-overhaul/pages/system/space-config-list.html
@@ -0,0 +1,451 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型 - 系统管理 / 空间配置列表</title>
+  <link rel="stylesheet" href="../../../../assets/bkflow-prototype.css">
+  <script defer src="../../../../assets/bkflow-prototype.js"></script>
+  <style>
+    body {
+      background:
+        radial-gradient(circle at top left, rgba(58, 132, 255, 0.08), transparent 24%),
+        linear-gradient(180deg, #f7faff 0%, #f5f7fa 22%, #f5f7fa 100%);
+    }
+    .page-shell {
+      max-width: 1500px;
+      margin: 0 auto;
+    }
+    .page-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 18px;
+    }
+    .page-title {
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+    .page-desc {
+      max-width: 920px;
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+    }
+    .page-chip {
+      flex-shrink: 0;
+      padding: 10px 14px;
+      border-radius: 999px;
+      background: #edf4ff;
+      border: 1px solid rgba(58, 132, 255, 0.18);
+      color: var(--bk-primary);
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.5;
+    }
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 14px;
+      margin-bottom: 18px;
+    }
+    .summary-card {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 14px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+      padding: 16px 18px;
+    }
+    .summary-label {
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+      margin-bottom: 8px;
+    }
+    .summary-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--bk-text-primary);
+      line-height: 1.1;
+    }
+    .summary-note {
+      margin-top: 8px;
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .panel-layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
+      gap: 16px;
+      align-items: start;
+    }
+    .panel {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: 16px;
+      box-shadow: 0 8px 24px rgba(31, 35, 41, 0.05);
+      overflow: hidden;
+    }
+    .panel-head {
+      padding: 18px 18px 0;
+    }
+    .panel-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 6px;
+    }
+    .panel-desc {
+      color: var(--bk-text-tertiary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .panel-body {
+      padding: 16px 18px 18px;
+    }
+    .filter-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+    .filter-chip {
+      display: inline-flex;
+      align-items: center;
+      height: 32px;
+      padding: 0 12px;
+      border-radius: 16px;
+      border: 1px solid var(--bk-border);
+      color: var(--bk-text-secondary);
+      background: #fafbfd;
+      font-size: 13px;
+    }
+    .filter-chip.is-active {
+      color: var(--bk-primary);
+      border-color: rgba(58, 132, 255, 0.28);
+      background: #edf4ff;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--bk-border-light);
+      border-radius: 12px;
+    }
+    .bk-table {
+      min-width: 1120px;
+    }
+    .audit-list {
+      display: grid;
+      gap: 12px;
+      margin-top: 14px;
+    }
+    .audit-item {
+      padding-left: 12px;
+      border-left: 3px solid var(--bk-primary);
+    }
+    .audit-time {
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+      margin-bottom: 4px;
+    }
+    .audit-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--bk-text-primary);
+      margin-bottom: 4px;
+    }
+    .audit-desc {
+      color: var(--bk-text-secondary);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .rule-box {
+      margin-top: 16px;
+      padding: 14px 16px;
+      border-radius: 12px;
+      background: #f7f9fc;
+      border: 1px solid var(--bk-border-light);
+      color: var(--bk-text-secondary);
+      line-height: 1.7;
+      font-size: 13px;
+    }
+    .status-ok { color: #14a568; }
+    .status-warn { color: #c98e17; }
+    .status-danger { color: #de5c5c; }
+    @media (max-width: 1280px) {
+      .summary-grid,
+      .panel-layout {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="space" data-nav-link="../space/template-list.html">空间管理</li>
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="system" data-nav-link="space-config-list.html">系统管理</li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin" data-nav-link="../plugin/plugin-list.html">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>admin_audit</span>
+          <div class="bk-user-dropdown" aria-hidden="true">
+            <span class="bk-user-dropdown-item">审计中心</span>
+            <span class="bk-user-dropdown-item">退出登录</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space" style="display:none;">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-eng-svc</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span>
+          </div>
+        </div>
+
+        <ul class="bk-navigation-menu" data-nav-group="system">
+          <li class="bk-navigation-menu-item active" data-page="system-space-config-list">
+            <span class="bk-navigation-menu-icon">⚙</span>空间配置列表
+          </li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="space" style="display:none;"></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"></ul>
+
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel" id="system-space-config-list">
+        <div class="page-shell">
+          <div class="bk-breadcrumb">
+            <span class="bk-breadcrumb-item">首页</span>
+            <span class="bk-breadcrumb-item">系统管理</span>
+            <span class="bk-breadcrumb-item">空间配置列表</span>
+          </div>
+
+          <div class="page-header">
+            <div>
+              <div class="page-title">空间配置列表</div>
+              <div class="page-desc">
+                这里统一管理各空间的配置项、默认值和最近一次审计结果。列表侧重展示当前值与默认值的差异，方便审核人员快速定位待审批变更、恢复默认值和查看历史记录。
+              </div>
+            </div>
+            <div class="page-chip">最近审计：2026-04-21 09:30 · 审计管理员</div>
+          </div>
+
+          <div class="summary-grid">
+            <div class="summary-card">
+              <div class="summary-label">受管空间</div>
+              <div class="summary-value">128</div>
+              <div class="summary-note">覆盖生产、灰度和演练空间，均可单独查看配置差异。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">待审批变更</div>
+              <div class="summary-value status-warn">19</div>
+              <div class="summary-note">包含新建、修改和恢复默认值三类审计动作。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">默认值保护项</div>
+              <div class="summary-value status-ok">42</div>
+              <div class="summary-note">默认值条目只读展示，恢复默认值后会回到保护态。</div>
+            </div>
+            <div class="summary-card">
+              <div class="summary-label">已冻结项</div>
+              <div class="summary-value status-danger">6</div>
+              <div class="summary-note">冻结项仅允许审计负责人解锁并重新发起审批。</div>
+            </div>
+          </div>
+
+          <div class="panel-layout">
+            <section class="panel">
+              <div class="panel-head">
+                <div class="panel-title">空间配置清单</div>
+                <div class="panel-desc">按空间查看配置项、当前值、默认值和审计状态，支持编辑、审批和恢复默认值。</div>
+              </div>
+              <div class="panel-body">
+                <div class="bk-toolbar">
+                  <div class="bk-toolbar-left">
+                    <input class="bk-search-input" placeholder="搜索配置名、空间名、负责人" style="width: 280px;">
+                    <div class="bk-select" style="width: 170px;">
+                      <div class="bk-select-trigger"><span class="bk-select-placeholder">全部审批状态</span></div>
+                    </div>
+                    <div class="bk-select" style="width: 170px;">
+                      <div class="bk-select-trigger"><span class="bk-select-placeholder">全部配置来源</span></div>
+                    </div>
+                  </div>
+                  <div class="bk-toolbar-right">
+                    <button class="bk-button">刷新</button>
+                    <button class="bk-button bk-button-primary">导出审计快照</button>
+                  </div>
+                </div>
+
+                <div class="filter-row">
+                  <span class="filter-chip is-active">全部</span>
+                  <span class="filter-chip">已生效</span>
+                  <span class="filter-chip">待审批</span>
+                  <span class="filter-chip">默认值</span>
+                  <span class="filter-chip">已冻结</span>
+                </div>
+
+                <div class="table-wrap">
+                  <table class="bk-table">
+                    <thead>
+                      <tr>
+                        <th style="width: 230px;">配置名称</th>
+                        <th style="width: 180px;">所属空间</th>
+                        <th style="width: 120px;">值类型</th>
+                        <th style="width: 180px;">当前值 / 默认值</th>
+                        <th style="width: 110px;">审计状态</th>
+                        <th style="width: 130px;">更新时间</th>
+                        <th style="width: 120px;">更新人</th>
+                        <th style="width: 200px;">操作</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>task_timeout_seconds</td>
+                        <td>bkflow-eng-svc-prod</td>
+                        <td><span class="bk-tag bk-tag-info">整数</span></td>
+                        <td>30 / 30</td>
+                        <td><span class="bk-tag bk-tag-success">已生效</span></td>
+                        <td>2026-04-20 18:24</td>
+                        <td>platform_ops</td>
+                        <td>
+                          <button class="bk-table-action">编辑</button>
+                          <button class="bk-table-action">查看历史</button>
+                          <button class="bk-table-action">恢复默认值</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>notify_webhook</td>
+                        <td>bkflow-finance</td>
+                        <td><span class="bk-tag bk-tag-info">URL</span></td>
+                        <td>https://hooks.example.com/bkflow / https://hooks.example.com/bkflow</td>
+                        <td><span class="bk-tag bk-tag-warning">待审批</span></td>
+                        <td>2026-04-21 09:08</td>
+                        <td>audit_admin</td>
+                        <td>
+                          <button class="bk-table-action">编辑</button>
+                          <button class="bk-table-action">发起审批</button>
+                          <button class="bk-table-action">撤销变更</button>
+                        </td>
+                      </tr>
+                      <tr class="muted-row">
+                        <td>daily_publish_window</td>
+                        <td>bkflow-ops-qa</td>
+                        <td><span class="bk-tag bk-tag-info">时间段</span></td>
+                        <td>02:00-04:00 / 01:00-05:00</td>
+                        <td><span class="bk-tag bk-tag-danger">已冻结</span></td>
+                        <td>2026-04-19 15:42</td>
+                        <td>release_bot</td>
+                        <td>
+                          <button class="bk-table-action">查看详情</button>
+                          <button class="bk-table-action">申请解冻</button>
+                          <button class="bk-table-action">恢复默认值</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>debug_mode</td>
+                        <td>bkflow-test</td>
+                        <td><span class="bk-tag bk-tag-info">布尔</span></td>
+                        <td>关闭 / 关闭</td>
+                        <td><span class="bk-tag bk-tag-info">默认值</span></td>
+                        <td>2026-04-18 11:05</td>
+                        <td>system_bot</td>
+                        <td>
+                          <button class="bk-table-action">编辑</button>
+                          <button class="bk-table-action">复制到空间</button>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>max_retry_count</td>
+                        <td>bkflow-shared</td>
+                        <td><span class="bk-tag bk-tag-info">整数</span></td>
+                        <td>5 / 3</td>
+                        <td><span class="bk-tag bk-tag-success">已生效</span></td>
+                        <td>2026-04-17 20:16</td>
+                        <td>admin_ops</td>
+                        <td>
+                          <button class="bk-table-action">编辑</button>
+                          <button class="bk-table-action">查看历史</button>
+                          <button class="bk-table-action">恢复默认值</button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <div class="bk-pagination">
+                  <span class="bk-pagination-total">共 128 条</span>
+                  <span class="bk-pagination-item">&laquo;</span>
+                  <span class="bk-pagination-item active">1</span>
+                  <span class="bk-pagination-item">2</span>
+                  <span class="bk-pagination-item">3</span>
+                  <span class="bk-pagination-item">&raquo;</span>
+                </div>
+              </div>
+            </section>
+
+            <aside class="panel">
+              <div class="panel-head">
+                <div class="panel-title">审计说明</div>
+                <div class="panel-desc">这一区域用于解释当前列表的治理规则，辅助审核人员理解变更风险。</div>
+              </div>
+              <div class="panel-body">
+                <div class="audit-list">
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-21 09:30</div>
+                    <div class="audit-title">notify_webhook 进入待审批</div>
+                    <div class="audit-desc">新增回调地址后，需要审计管理员确认来源和目标空间是否匹配。</div>
+                  </div>
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-20 18:24</div>
+                    <div class="audit-title">task_timeout_seconds 恢复为默认值</div>
+                    <div class="audit-desc">恢复默认值后重新回到保护态，不再展示可编辑输入框。</div>
+                  </div>
+                  <div class="audit-item">
+                    <div class="audit-time">2026-04-19 15:42</div>
+                    <div class="audit-title">daily_publish_window 被冻结</div>
+                    <div class="audit-desc">冻结项仅供查看，必须先申请解冻才能再次编辑或发起审批。</div>
+                  </div>
+                </div>
+
+                <div class="rule-box">
+                  <strong>操作约束：</strong><br>
+                  1. 默认值项只读展示，不直接允许改写。<br>
+                  2. 恢复默认值需要二次确认，并写入审计记录。<br>
+                  3. 待审批变更会同步到审计中心，审批通过后才显示为已生效。
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/README.md b/prototypes/masters/README.md
new file mode 100644
index 0000000000..2a7a6514bc
--- /dev/null
+++ b/prototypes/masters/README.md
@@ -0,0 +1,28 @@
+# masters
+
+## Purpose
+
+`prototypes/masters/` is the long-lived source of truth for page-type masters and state templates. Put full page-type masters, reusable interaction shells, and stable state templates here.
+
+## Contract
+
+- `prototypes/masters/` is the source of truth for complete page-type masters and state templates.
+- Use this directory for reusable full pages, interaction shells, and stable states.
+- Do not put `_shared/` pages here.
+- See `docs/specs/` and `docs/plans/` for feature scope; this tree stays reusable.
+
+## What goes here
+
+- Page-type masters that can be reused by multiple features.
+- Shared shell fragments that are stable enough to become defaults.
+- Reference states that help future feature pages stay consistent.
+
+## What should not go here
+
+- One-off feature pages tied to a single spec or plan.
+- Historical snapshots that only exist for archive purposes.
+- Temporary experiments that are not ready to be treated as a master.
+
+## Relationship to `docs/specs` and `docs/plans`
+
+`docs/specs/` defines the target behavior and `docs/plans/` tracks implementation steps for a single change. This directory holds the reusable master material that those documents can point to, but it should remain independent from any one spec or plan slug.
diff --git a/prototypes/masters/_shared/README.md b/prototypes/masters/_shared/README.md
new file mode 100644
index 0000000000..5a1d7ae1bc
--- /dev/null
+++ b/prototypes/masters/_shared/README.md
@@ -0,0 +1,28 @@
+# _shared
+
+## Purpose
+
+`prototypes/masters/_shared/` stores shared shells and navigation scaffolding that multiple masters can reuse. It is not a page-type master and does not preview independently.
+
+## Contract
+
+- `prototypes/masters/_shared/` is shared scaffolding only and is not a page-type master.
+- It does not preview independently.
+- Keep navigation shells, structural fragments, and other reuse-only pieces here.
+- Do not put delivery pages or feature-specific masters here.
+
+## What goes here
+
+- Shared layout shells.
+- Cross-master navigation structure.
+- Common structural fragments that are not business-specific.
+
+## What should not go here
+
+- Feature-specific pages.
+- Archived examples.
+- Anything that only makes sense for a single spec or plan.
+
+## Relationship to `docs/specs` and `docs/plans`
+
+`docs/specs/` and `docs/plans/` define the work that consumes these shared shells. The shared directory should stay generic so it can support many specs and plans without being rewritten each time.
diff --git a/prototypes/masters/_shared/plugin-shell.html b/prototypes/masters/_shared/plugin-shell.html
new file mode 100644
index 0000000000..54bb71acca
--- /dev/null
+++ b/prototypes/masters/_shared/plugin-shell.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型 - 插件管理壳子</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <script defer src="../../assets/bkflow-prototype.js"></script>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="space">空间管理</li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system">系统管理</li>
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="plugin">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>用户名</span>
+          <div class="bk-user-dropdown" aria-hidden="true">
+            <span class="bk-user-dropdown-item">个人中心</span>
+            <span class="bk-user-dropdown-item">退出登录</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space" style="display:none;">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-eng-svc</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span>
+          </div>
+        </div>
+
+        <ul class="bk-navigation-menu" data-nav-group="plugin">
+          <li class="bk-navigation-menu-item active" data-page="plugin-shell-home"><span class="bk-navigation-menu-icon">⬡</span>插件侧栏</li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="space" style="display:none;"></ul>
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;"></ul>
+
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel" id="plugin-shell-home">
+          <h1 class="bk-prototype-page-title">插件侧栏</h1>
+          <div class="bk-prototype-card">
+            <h2>共享壳子占位</h2>
+            <p class="bk-prototype-card-meta">插件管理壳子只保留顶栏、侧栏和占位内容。</p>
+            <div class="bk-prototype-actions">
+              <button class="bk-button bk-button-primary" data-toggle-target="#plugin-shell-note" data-toggle-class="bk-toggle-hidden">切换说明</button>
+              <button class="bk-button bk-save-button is-disabled" id="plugin-shell-save">保存</button>
+              <button class="bk-button" data-save-target="#plugin-shell-save">模拟修改后启用保存</button>
+            </div>
+            <p id="plugin-shell-note" class="bk-prototype-card-meta bk-toggle-hidden">插件管理壳子同样只包含通用结构与占位内容。</p>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/_shared/space-shell.html b/prototypes/masters/_shared/space-shell.html
new file mode 100644
index 0000000000..7c3f2f9256
--- /dev/null
+++ b/prototypes/masters/_shared/space-shell.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型 - 空间管理壳子</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <script defer src="../../assets/bkflow-prototype.js"></script>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="space">空间管理</li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="system">系统管理</li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>用户名</span>
+          <div class="bk-user-dropdown" aria-hidden="true">
+            <span class="bk-user-dropdown-item">个人中心</span>
+            <span class="bk-user-dropdown-item">退出登录</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-eng-svc (空间选择区)</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span>
+          </div>
+        </div>
+
+        <ul class="bk-navigation-menu" data-nav-group="space">
+          <li class="bk-navigation-menu-item active" data-page="space-shell-home"><span class="bk-navigation-menu-icon">⇌</span>空间侧栏</li>
+          <li class="bk-navigation-menu-item" data-page="space-shell-config"><span class="bk-navigation-menu-icon">⚙</span>侧栏占位</li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="system" style="display:none;">
+          <li class="bk-navigation-menu-item" data-page="system-shell-home"><span class="bk-navigation-menu-icon">◈</span>系统侧栏</li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;">
+          <li class="bk-navigation-menu-item" data-page="plugin-shell-home"><span class="bk-navigation-menu-icon">⬡</span>插件侧栏</li>
+        </ul>
+
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel" id="space-shell-home">
+          <h1 class="bk-prototype-page-title">空间选择区</h1>
+          <div class="bk-prototype-card">
+            <h2>共享壳子占位</h2>
+            <p class="bk-prototype-card-meta">这里只保留壳子结构与可复用的通用交互，不放业务表格。</p>
+            <div class="bk-prototype-actions">
+              <button class="bk-button bk-button-primary" data-toggle-target="#space-shell-note" data-toggle-class="bk-toggle-hidden">切换说明</button>
+              <button class="bk-button" data-right-panel-open="#space-shell-panel">打开右侧面板</button>
+              <button class="bk-button bk-save-button is-disabled" id="space-shell-save">保存</button>
+              <button class="bk-button" data-save-target="#space-shell-save">模拟修改后启用保存</button>
+            </div>
+            <p id="space-shell-note" class="bk-prototype-card-meta bk-toggle-hidden">页面只承载共享壳子、一级导航状态和占位内容。</p>
+          </div>
+        </section>
+
+        <section class="bk-page-panel" id="space-shell-config" hidden>
+          <div class="bk-prototype-card">
+            <h2>空间侧栏</h2>
+            <p class="bk-prototype-card-meta">这里是空间管理壳子内的侧栏占位，不包含业务表格或真实配置。</p>
+          </div>
+        </section>
+
+        <section class="bk-page-panel" id="system-shell-home" hidden>
+          <div class="bk-prototype-card">
+            <h2>系统管理占位</h2>
+            <p class="bk-prototype-card-meta">空间壳子内保留同文件的系统管理最小面板，供通用导航切换演示。</p>
+          </div>
+        </section>
+
+        <section class="bk-page-panel" id="plugin-shell-home" hidden>
+          <div class="bk-prototype-card">
+            <h2>插件管理占位</h2>
+            <p class="bk-prototype-card-meta">空间壳子内保留同文件的插件管理最小面板，供通用导航切换演示。</p>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <aside class="bk-right-panel" id="space-shell-panel">
+    <div class="bk-right-panel-header">
+      <span>右侧面板占位</span>
+      <button class="bk-button bk-button-text" data-right-panel-close="#space-shell-panel">关闭</button>
+    </div>
+    <div class="bk-right-panel-body">
+      用于演示右侧面板开合的通用能力。
+    </div>
+  </aside>
+</body>
+</html>
diff --git a/prototypes/masters/_shared/system-shell.html b/prototypes/masters/_shared/system-shell.html
new file mode 100644
index 0000000000..ee1412aa78
--- /dev/null
+++ b/prototypes/masters/_shared/system-shell.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型 - 系统管理壳子</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <script defer src="../../assets/bkflow-prototype.js"></script>
+</head>
+<body>
+  <div class="bk-navigation bk-prototype-shell">
+    <header class="bk-navigation-header bk-prototype-topbar">
+      <div class="bk-navigation-header-title">
+        <img src="../../assets/icons/bkflow-logo.svg" alt="BKFlow">
+        <span>BKFlow 原型</span>
+      </div>
+      <div class="bk-navigation-header-right">
+        <ul class="bk-navigation-header-nav bk-prototype-nav">
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="space">空间管理</li>
+          <li class="bk-navigation-header-nav-item active bk-prototype-nav-item" data-nav-group="system">系统管理</li>
+          <li class="bk-navigation-header-nav-item bk-prototype-nav-item" data-nav-group="plugin">我的插件</li>
+        </ul>
+        <div class="bk-navigation-header-user">
+          <div class="bk-navigation-header-user-avatar">U</div>
+          <span>用户名</span>
+          <div class="bk-user-dropdown" aria-hidden="true">
+            <span class="bk-user-dropdown-item">个人中心</span>
+            <span class="bk-user-dropdown-item">退出登录</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="bk-navigation-wrapper">
+      <nav class="bk-navigation-sidebar">
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="space" style="display:none;">
+          <div class="bk-navigation-space-select">
+            <span class="bk-navigation-space-icon">B</span>
+            <span>bkflow-eng-svc</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="system">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">系统管理</span>
+          </div>
+        </div>
+        <div class="bk-navigation-space bk-prototype-space" data-nav-group="plugin" style="display:none;">
+          <div class="bk-navigation-space-select" style="background:transparent;cursor:default;">
+            <span style="color:var(--bk-nav-space-color);font-size:13px;">我的插件</span>
+          </div>
+        </div>
+
+        <ul class="bk-navigation-menu" data-nav-group="system">
+          <li class="bk-navigation-menu-item active" data-page="system-shell-home"><span class="bk-navigation-menu-icon">◈</span>系统管理侧栏</li>
+          <li class="bk-navigation-menu-item" data-page="system-shell-detail"><span class="bk-navigation-menu-icon">★</span>侧栏占位</li>
+        </ul>
+
+        <ul class="bk-navigation-menu" data-nav-group="space" style="display:none;"></ul>
+        <ul class="bk-navigation-menu" data-nav-group="plugin" style="display:none;"></ul>
+
+        <div class="bk-navigation-footer">
+          <button class="bk-navigation-collapse" title="收起导航">⟨</button>
+        </div>
+      </nav>
+
+      <main class="bk-content">
+        <section class="bk-page-panel" id="system-shell-home">
+          <h1 class="bk-prototype-page-title">系统管理侧栏</h1>
+          <div class="bk-prototype-card">
+            <h2>共享壳子占位</h2>
+            <p class="bk-prototype-card-meta">系统管理壳子只展示顶栏、侧栏和占位内容。</p>
+            <div class="bk-prototype-actions">
+              <button class="bk-button bk-button-primary" data-toggle-target="#system-shell-note" data-toggle-class="bk-toggle-hidden">切换说明</button>
+              <button class="bk-button bk-save-button is-disabled" id="system-shell-save">保存</button>
+              <button class="bk-button" data-save-target="#system-shell-save">模拟修改后启用保存</button>
+            </div>
+            <p id="system-shell-note" class="bk-prototype-card-meta bk-toggle-hidden">系统管理壳子也只保留共享结构与占位内容。</p>
+          </div>
+        </section>
+
+        <section class="bk-page-panel" id="system-shell-detail" hidden>
+          <div class="bk-prototype-card">
+            <h2>只读内容位</h2>
+            <p class="bk-prototype-card-meta">这里可以承接系统管理下的通用说明，但不放具体业务表格。</p>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/config-page/README.md b/prototypes/masters/config-page/README.md
new file mode 100644
index 0000000000..4e027a7f7f
--- /dev/null
+++ b/prototypes/masters/config-page/README.md
@@ -0,0 +1,12 @@
+# config-page
+
+## Purpose
+
+`prototypes/masters/config-page/` is the reusable master for long configuration forms. It emphasizes a multi-section form, a code or editor block, a disabled save state in the baseline template, and a dirty state for unsaved changes.
+
+## What it covers
+
+- Long-running admin forms with several field groups.
+- A code block or editor-style area for structured configuration.
+- Disabled save behavior in the default template.
+- Dirty-state treatment when the form has unsaved changes.
diff --git a/prototypes/masters/config-page/states/dirty.html b/prototypes/masters/config-page/states/dirty.html
new file mode 100644
index 0000000000..e68264005d
--- /dev/null
+++ b/prototypes/masters/config-page/states/dirty.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>配置页 - 脏状态</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    body { background: var(--bk-bg-body); }
+    .page {
+      max-width: 1120px;
+      margin: 0 auto;
+      padding: 36px;
+    }
+    .section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .banner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 16px;
+      margin-bottom: 16px;
+      background: #fef5e6;
+      border: 1px solid #fce0a8;
+      border-radius: var(--bk-radius-md);
+      color: #d98e0b;
+    }
+    .code-editor {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      border-radius: var(--bk-radius-md);
+      padding: 16px;
+      font-family: Consolas, Monaco, monospace;
+      font-size: 13px;
+      line-height: 1.7;
+      overflow-x: auto;
+    }
+    .footer-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body class="bk-prototype-shell">
+  <main class="page">
+    <div class="banner">
+      <div>未保存修改</div>
+      <div>修改后保存后再继续发布，避免丢失当前变更。</div>
+    </div>
+
+    <section class="section">
+      <div class="section-title">基础配置</div>
+      <form class="bk-form" onsubmit="return false;">
+        <div class="bk-form-item is-required">
+          <label class="bk-form-label">配置名称</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="engine-default-config-v2">
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">所属空间</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="bkflow-eng-svc">
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">启用状态</label>
+          <div class="bk-form-content">
+            <button type="button" class="bk-switcher is-checked"></button>
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">描述</label>
+          <div class="bk-form-content">
+            <textarea class="bk-textarea" rows="3">已调整超时、重试和资源限制。</textarea>
+          </div>
+        </div>
+      </form>
+
+      <div class="section-title">代码配置</div>
+      <div class="bk-form" style="margin-bottom:16px;">
+        <div class="bk-form-item">
+          <label class="bk-form-label">配置片段</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="runtime.yaml">
+          </div>
+        </div>
+      </div>
+      <div class="code-editor" aria-label="editor">
+<pre><code>runtime:
+  retries: 5
+  timeout_seconds: 45
+  env:
+    - name: BKFLOW_DEBUG
+      value: "true"</code></pre>
+      </div>
+
+      <div class="footer-actions">
+        <button class="bk-button">撤销修改</button>
+        <button class="bk-save-button is-enabled bk-button bk-button-primary">保存</button>
+      </div>
+    </section>
+  </main>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/masters/config-page/template.html b/prototypes/masters/config-page/template.html
new file mode 100644
index 0000000000..9f4d167fb7
--- /dev/null
+++ b/prototypes/masters/config-page/template.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>配置页 Master - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <style>
+    body {
+      background:
+        radial-gradient(circle at top right, rgba(45, 203, 86, 0.08), transparent 24%),
+        var(--bk-bg-body);
+    }
+    .page {
+      max-width: 1120px;
+      margin: 0 auto;
+      padding: 32px 36px 48px;
+    }
+    .page-title {
+      margin-bottom: 8px;
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .page-subtitle {
+      color: var(--bk-text-tertiary);
+      margin-bottom: 20px;
+    }
+    .section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .section + .section { margin-top: 18px; }
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+    .code-editor {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      border-radius: var(--bk-radius-md);
+      padding: 16px;
+      font-family: Consolas, Monaco, monospace;
+      font-size: 13px;
+      line-height: 1.7;
+      overflow-x: auto;
+    }
+    .footer-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body class="bk-prototype-shell">
+  <main class="page">
+    <h1 class="page-title">配置页 Master</h1>
+    <p class="page-subtitle">用于多字段配置、结构化代码编辑和保存状态控制的长表单模板。</p>
+
+    <section class="section">
+      <div class="section-title">基础配置</div>
+      <form class="bk-form" onsubmit="return false;">
+        <div class="bk-form-item is-required">
+          <label class="bk-form-label">配置名称</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="engine-default-config">
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">所属空间</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="bkflow-eng-svc">
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">启用状态</label>
+          <div class="bk-form-content">
+            <button type="button" class="bk-switcher is-checked"></button>
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">描述</label>
+          <div class="bk-form-content">
+            <textarea class="bk-textarea" rows="3" placeholder="请输入配置说明">基础配置项、资源限制和执行策略的说明。</textarea>
+          </div>
+        </div>
+      </form>
+    </section>
+
+    <section class="section">
+      <div class="section-title">代码配置</div>
+      <div class="bk-form" style="margin-bottom:16px;">
+        <div class="bk-form-item">
+          <label class="bk-form-label">配置片段</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="runtime.yaml">
+          </div>
+        </div>
+      </div>
+      <div class="code-editor" aria-label="editor">
+<pre><code>runtime:
+  retries: 3
+  timeout_seconds: 30
+  env:
+    - name: BKFLOW_DEBUG
+      value: "false"
+  resources:
+    cpu: "500m"
+    memory: "512Mi"</code></pre>
+      </div>
+
+      <div class="footer-actions">
+        <button class="bk-button">取消</button>
+        <button class="bk-save-button is-disabled bk-button bk-button-primary" disabled>保存</button>
+      </div>
+    </section>
+  </main>
+
+  <script src="../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/masters/decision-editor/README.md b/prototypes/masters/decision-editor/README.md
new file mode 100644
index 0000000000..a0bf404601
--- /dev/null
+++ b/prototypes/masters/decision-editor/README.md
@@ -0,0 +1,12 @@
+# decision-editor
+
+## Purpose
+
+`prototypes/masters/decision-editor/` is the reusable master for decision rule editing flows. It combines basic information, a rule configuration area, an empty-state treatment for rules, and the bottom action bar.
+
+## What it covers
+
+- Basic metadata and naming fields.
+- Rule configuration and rule list layout.
+- Empty-state presentation when no rules exist yet.
+- Save and cancel actions anchored at the bottom.
diff --git a/prototypes/masters/decision-editor/template.html b/prototypes/masters/decision-editor/template.html
new file mode 100644
index 0000000000..f57f433e61
--- /dev/null
+++ b/prototypes/masters/decision-editor/template.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>决策编辑器 Master - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <style>
+    body {
+      background:
+        radial-gradient(circle at top left, rgba(248, 181, 63, 0.08), transparent 24%),
+        var(--bk-bg-body);
+    }
+    .page {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 32px 36px 48px;
+    }
+    .page-title {
+      margin-bottom: 8px;
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .page-subtitle {
+      color: var(--bk-text-tertiary);
+      margin-bottom: 20px;
+    }
+    .section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .section + .section {
+      margin-top: 18px;
+    }
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 14px;
+    }
+    .rule-list {
+      display: grid;
+      gap: 12px;
+    }
+    .rule-card {
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      padding: 16px;
+      background: #fafbfc;
+    }
+    .rule-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 12px;
+      font-weight: 600;
+    }
+    .footer-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 20px;
+      padding-top: 16px;
+      border-top: 1px solid var(--bk-border-light);
+    }
+  </style>
+</head>
+<body class="bk-prototype-shell">
+  <main class="page">
+    <h1 class="page-title">决策编辑器 Master</h1>
+    <p class="page-subtitle">用于配置决策表的基础信息、规则和底部动作区。</p>
+
+    <section class="section">
+      <div class="section-title">基础信息</div>
+      <form class="bk-form" onsubmit="return false;">
+        <div class="bk-form-item is-required">
+          <label class="bk-form-label">规则名称</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="deploy-decision">
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">规则编码</label>
+          <div class="bk-form-content">
+            <input class="bk-input" value="decision.deploy">
+          </div>
+        </div>
+        <div class="bk-form-item">
+          <label class="bk-form-label">说明</label>
+          <div class="bk-form-content">
+            <textarea class="bk-textarea" rows="3">根据环境和审批结果决定是否继续执行。</textarea>
+          </div>
+        </div>
+      </form>
+    </section>
+
+    <section class="section">
+      <div class="section-title">规则配置</div>
+      <div class="bk-exception rule-empty-state" style="min-height:220px;">
+        <div style="font-size:48px;">◇</div>
+        <strong>暂无规则</strong>
+        <div>当前还没有任何规则，先创建第一条规则开始配置。</div>
+        <div class="bk-prototype-actions" style="margin-top:4px;">
+          <button class="bk-button bk-button-primary">新增规则</button>
+          <button class="bk-button">导入模板</button>
+        </div>
+      </div>
+
+      <div class="section-title" style="margin-top:20px;">底部操作</div>
+      <div class="footer-actions">
+        <button class="bk-button">取消</button>
+        <button class="bk-button bk-button-primary">保存</button>
+      </div>
+    </section>
+  </main>
+
+  <script src="../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/masters/engine-panel/README.md b/prototypes/masters/engine-panel/README.md
new file mode 100644
index 0000000000..ba407c2002
--- /dev/null
+++ b/prototypes/masters/engine-panel/README.md
@@ -0,0 +1,12 @@
+# engine-panel
+
+## Purpose
+
+`prototypes/masters/engine-panel/` is the reusable master for request/response debugging panels. It groups the request area, parameter area, response area, and the send/reset action bar into one static reference.
+
+## What it covers
+
+- Request body or request preview areas.
+- Parameter and variable configuration sections.
+- Response output presentation.
+- Primary send action and reset action with a disabled send baseline.
diff --git a/prototypes/masters/engine-panel/template.html b/prototypes/masters/engine-panel/template.html
new file mode 100644
index 0000000000..72f2e3a245
--- /dev/null
+++ b/prototypes/masters/engine-panel/template.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>调试面板 Master - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <style>
+    body {
+      background:
+        radial-gradient(circle at top right, rgba(58, 132, 255, 0.07), transparent 24%),
+        var(--bk-bg-body);
+    }
+    .page {
+      max-width: 1240px;
+      margin: 0 auto;
+      padding: 32px 36px 48px;
+    }
+    .page-title {
+      margin-bottom: 8px;
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .page-subtitle {
+      color: var(--bk-text-tertiary);
+      margin-bottom: 20px;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: 1.1fr 0.9fr;
+      gap: 18px;
+    }
+    .section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .section + .section {
+      margin-top: 18px;
+    }
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 14px;
+    }
+    .code-panel {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      border-radius: var(--bk-radius-md);
+      padding: 16px;
+      font-family: Consolas, Monaco, monospace;
+      font-size: 13px;
+      line-height: 1.7;
+      overflow-x: auto;
+      min-height: 240px;
+    }
+    .response-box {
+      background: #0f172a;
+      color: #dbeafe;
+      border-radius: var(--bk-radius-md);
+      padding: 16px;
+      min-height: 320px;
+      font-family: Consolas, Monaco, monospace;
+      font-size: 13px;
+      line-height: 1.7;
+      overflow-x: auto;
+    }
+    .footer-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body class="bk-prototype-shell">
+  <main class="page">
+    <h1 class="page-title">调试面板 Master</h1>
+    <p class="page-subtitle">用于查看请求、调整参数、发送调用并阅读响应结果。</p>
+
+    <div class="grid">
+      <div>
+        <section class="section">
+          <div class="section-title">请求区</div>
+          <div class="bk-form">
+            <div class="bk-form-item">
+              <label class="bk-form-label">请求地址</label>
+              <div class="bk-form-content">
+                <input class="bk-input" value="https://api.example.com/v1/decision/run">
+              </div>
+            </div>
+            <div class="bk-form-item">
+              <label class="bk-form-label">请求体</label>
+              <div class="bk-form-content">
+                <textarea class="bk-textarea" rows="8">{"flow_id": "deploy", "env": "prod"}</textarea>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="section">
+          <div class="section-title">参数区</div>
+          <div class="bk-form">
+            <div class="bk-form-item">
+              <label class="bk-form-label">token</label>
+              <div class="bk-form-content">
+                <input class="bk-input" value="bkflow-token-001">
+              </div>
+            </div>
+            <div class="bk-form-item">
+              <label class="bk-form-label">trace_id</label>
+              <div class="bk-form-content">
+                <input class="bk-input" value="trace-20260421-001">
+              </div>
+            </div>
+            <div class="bk-form-item">
+              <label class="bk-form-label">超时</label>
+              <div class="bk-form-content">
+                <input class="bk-input" value="30s">
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="footer-actions">
+          <button class="bk-button">重置</button>
+          <button class="bk-button bk-button-primary" disabled>发送</button>
+        </div>
+      </div>
+
+      <section class="section">
+        <div class="section-title">响应区</div>
+        <div class="response-box">
+HTTP/1.1 200 OK
+Content-Type: application/json
+
+{
+  "code": 0,
+  "message": "success",
+  "data": {
+    "task_id": "task-1024",
+    "status": "running"
+  }
+}
+        </div>
+
+        <div style="margin-top:16px;" class="code-panel">
+<pre><code>headers:
+  x-request-id: req-9f4f
+  x-env: prod
+  x-cost-ms: 42</code></pre>
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <script src="../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/masters/flow-editor/README.md b/prototypes/masters/flow-editor/README.md
new file mode 100644
index 0000000000..0dc8935b54
--- /dev/null
+++ b/prototypes/masters/flow-editor/README.md
@@ -0,0 +1,13 @@
+# flow-editor
+
+## Purpose
+
+`prototypes/masters/flow-editor/` is the reusable master for graph-style flow editing pages. It mirrors the audited BKFlow interaction split between the canvas, a double-click node configuration drawer, floating overlays, and the save / publish / debug header actions.
+
+## What it covers
+
+- A header with back entry, flow title, and version context.
+- Canvas-first editing with single-click selection and a nearby floating toolbar.
+- A double-click node configuration drawer grouped into `基础信息 / 输入参数 / 输出参数`.
+- A global variables floating layer opened from the drawer instead of a full-page switch.
+- Separate local drawer confirm and global save / publish / debug header actions.
diff --git a/prototypes/masters/flow-editor/states/mock-debug-confirm.html b/prototypes/masters/flow-editor/states/mock-debug-confirm.html
new file mode 100644
index 0000000000..51a2511d8c
--- /dev/null
+++ b/prototypes/masters/flow-editor/states/mock-debug-confirm.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>流程编辑状态 - 调试确认</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <script defer src="../../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-flow-editor">
+  <div class="bk-flow-editor-shell">
+    <header class="bk-flow-editor-header">
+      <div class="bk-flow-editor-meta">
+        <a class="bk-flow-editor-back" href="#">← 返回流程列表</a>
+        <div class="bk-flow-editor-title">
+          <h1>编辑流程</h1>
+          <p>audit-deep-dive-20260420 · 调试前确认保存 Mock 数据</p>
+        </div>
+        <div class="bk-flow-version-area">
+          <span class="bk-flow-version-label">流程版本</span>
+          <span class="bk-tag">草稿</span>
+          <span class="bk-flow-version-badge">最新发布 1.0.0</span>
+        </div>
+      </div>
+      <div class="bk-flow-editor-actions">
+        <button type="button" class="bk-button bk-button-primary bk-save-button is-disabled" id="flow-editor-save" disabled>保存</button>
+        <button
+          type="button"
+          class="bk-button bk-button-primary is-disabled"
+          id="flow-editor-publish"
+          disabled
+          data-open="flow-publish-dialog">发布</button>
+        <button type="button" class="bk-button" data-open="flow-mock-debug-dialog">调试</button>
+      </div>
+    </header>
+
+    <main class="bk-flow-editor-main">
+      <aside class="bk-flow-editor-rail">
+        <section class="bk-flow-section-card">
+          <h2>状态说明</h2>
+          <p>这个状态用确认层代表真实产品从编辑器切到 mock 执行页前的确认动作。</p>
+        </section>
+      </aside>
+
+      <section class="bk-flow-canvas-shell">
+        <div class="bk-flow-canvas-header">
+          <div>
+            <strong>流程画布</strong>
+            <span>调试会进入独立链路，这里先表达前置确认。</span>
+          </div>
+        </div>
+        <div class="bk-flow-canvas"></div>
+      </section>
+    </main>
+  </div>
+
+  <div class="bk-dialog is-show" id="flow-mock-debug-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>执行调试</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>确定保存Mock数据并去执行调试?</p>
+        <p class="bk-flow-confirm-note">确认后会进入独立 mock 路由，并在新的执行环境里继续填写入参与查看历史调试。</p>
+      </div>
+      <div class="bk-dialog-footer">
+        <button type="button" class="bk-button bk-button-primary">保存并执行</button>
+        <button type="button" class="bk-button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="flow-publish-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>发布流程</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/flow-editor/states/node-selected.html b/prototypes/masters/flow-editor/states/node-selected.html
new file mode 100644
index 0000000000..1573afee6c
--- /dev/null
+++ b/prototypes/masters/flow-editor/states/node-selected.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>流程编辑状态 - 节点已选中</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <script defer src="../../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-flow-editor">
+  <div class="bk-flow-editor-shell">
+    <header class="bk-flow-editor-header">
+      <div class="bk-flow-editor-meta">
+        <a class="bk-flow-editor-back" href="#">← 返回流程列表</a>
+        <div class="bk-flow-editor-title">
+          <h1>编辑流程</h1>
+          <p>audit-deep-dive-20260420 · 单击节点后的悬浮工具条</p>
+        </div>
+        <div class="bk-flow-version-area">
+          <span class="bk-flow-version-label">流程版本</span>
+          <span class="bk-tag">草稿</span>
+          <span class="bk-flow-version-badge">最新发布 1.0.0</span>
+        </div>
+      </div>
+      <div class="bk-flow-editor-actions">
+        <button
+          type="button"
+          class="bk-button bk-button-primary bk-save-button is-disabled"
+          id="flow-editor-save"
+          disabled
+          data-disable-target="#flow-editor-save"
+          data-enable-target="#flow-editor-publish">保存</button>
+        <button
+          type="button"
+          class="bk-button bk-button-primary is-disabled"
+          id="flow-editor-publish"
+          disabled
+          data-open="flow-publish-dialog">发布</button>
+        <button type="button" class="bk-button" data-open="flow-mock-debug-dialog">调试</button>
+      </div>
+    </header>
+
+    <main class="bk-flow-editor-main">
+      <aside class="bk-flow-editor-rail">
+        <section class="bk-flow-section-card">
+          <h2>状态说明</h2>
+          <p>单击只改变节点选中态，抽屉仍保持关闭。</p>
+        </section>
+      </aside>
+
+      <section class="bk-flow-canvas-shell">
+        <div class="bk-flow-canvas-header">
+          <div>
+            <strong>流程画布</strong>
+            <span>选中节点后展示节点悬浮工具条。</span>
+          </div>
+        </div>
+        <div class="bk-flow-canvas">
+          <div class="bk-flow-canvas-stage">
+            <div class="bk-flow-node bk-flow-node-start"><strong>开始</strong></div>
+            <div class="bk-flow-link"></div>
+            <button type="button" class="bk-flow-node is-selected" data-node-select="flow-editor-main" data-node-toolbar="#flow-node-toolbar" data-node-name="发布蓝鲸作业" data-dblopen="flow-node-config-drawer">
+              <strong>发布蓝鲸作业</strong>
+              <span>标准插件 · 蓝盾作业</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <button type="button" class="bk-flow-node" data-node-select="flow-editor-main" data-node-toolbar="#flow-node-toolbar" data-node-name="通知审批结果" data-dblopen="flow-node-config-drawer">
+              <strong>通知审批结果</strong>
+              <span>标准插件 · 通知中心</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <div class="bk-flow-node bk-flow-node-end"><strong>结束</strong></div>
+          </div>
+
+          <div class="bk-flow-node-toolbar is-visible" id="flow-node-toolbar">
+            <span class="bk-flow-toolbar-title" data-node-toolbar-label>发布蓝鲸作业</span>
+            <button type="button" class="bk-flow-toolbar-button" data-open="flow-node-config-drawer">配置</button>
+            <button type="button" class="bk-flow-toolbar-button">复制</button>
+            <button type="button" class="bk-flow-toolbar-button">连线</button>
+            <button type="button" class="bk-flow-toolbar-button">删除</button>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <aside class="bk-sideslider" id="flow-node-config-drawer">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <h3>节点配置</h3>
+        <button class="bk-sideslider-close" data-close>×</button>
+      </div>
+    </div>
+  </aside>
+
+  <div class="bk-dialog" id="flow-publish-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>发布流程</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="flow-mock-debug-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>执行调试</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/flow-editor/states/publish-confirm.html b/prototypes/masters/flow-editor/states/publish-confirm.html
new file mode 100644
index 0000000000..dcce3f2f71
--- /dev/null
+++ b/prototypes/masters/flow-editor/states/publish-confirm.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>流程编辑状态 - 发布确认</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <script defer src="../../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-flow-editor">
+  <div class="bk-flow-editor-shell">
+    <header class="bk-flow-editor-header">
+      <div class="bk-flow-editor-meta">
+        <a class="bk-flow-editor-back" href="#">← 返回流程列表</a>
+        <div class="bk-flow-editor-title">
+          <h1>编辑流程</h1>
+          <p>audit-deep-dive-20260420 · 全局保存完成后进入发布确认</p>
+        </div>
+        <div class="bk-flow-version-area">
+          <span class="bk-flow-version-label">流程版本</span>
+          <span class="bk-tag">草稿</span>
+          <span class="bk-flow-version-badge">最新发布 1.0.0</span>
+        </div>
+      </div>
+      <div class="bk-flow-editor-actions">
+        <button type="button" class="bk-button bk-button-primary bk-save-button is-disabled" id="flow-editor-save" disabled>保存</button>
+        <button type="button" class="bk-button bk-button-primary" id="flow-editor-publish" data-open="flow-publish-dialog">发布</button>
+        <button type="button" class="bk-button" data-open="flow-mock-debug-dialog">调试</button>
+      </div>
+    </header>
+
+    <main class="bk-flow-editor-main">
+      <aside class="bk-flow-editor-rail">
+        <section class="bk-flow-section-card">
+          <h2>状态说明</h2>
+          <p>真实交互里点击 `发布` 会先打开版本确认层，而不是直接提交。</p>
+        </section>
+      </aside>
+
+      <section class="bk-flow-canvas-shell">
+        <div class="bk-flow-canvas-header">
+          <div>
+            <strong>流程画布</strong>
+            <span>画布已保存，发布按钮进入可操作态。</span>
+          </div>
+        </div>
+        <div class="bk-flow-canvas"></div>
+      </section>
+    </main>
+  </div>
+
+  <div class="bk-dialog is-show" id="flow-publish-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>发布流程</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <div class="bk-flow-stack">
+          <div>
+            <label class="bk-flow-label">版本号</label>
+            <input class="bk-input" value="1.0.0">
+          </div>
+          <div>
+            <label class="bk-flow-label">版本描述</label>
+            <textarea class="bk-textarea" rows="4">准备发布主流程编排调整与节点参数映射变更。</textarea>
+          </div>
+        </div>
+      </div>
+      <div class="bk-dialog-footer">
+        <button type="button" class="bk-button bk-button-primary">确认发布</button>
+        <button type="button" class="bk-button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="flow-mock-debug-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>执行调试</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/flow-editor/states/save-ready.html b/prototypes/masters/flow-editor/states/save-ready.html
new file mode 100644
index 0000000000..b03ba516f3
--- /dev/null
+++ b/prototypes/masters/flow-editor/states/save-ready.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>流程编辑状态 - 可保存</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <script defer src="../../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-flow-editor">
+  <div class="bk-flow-editor-shell">
+    <header class="bk-flow-editor-header">
+      <div class="bk-flow-editor-meta">
+        <a class="bk-flow-editor-back" href="#">← 返回流程列表</a>
+        <div class="bk-flow-editor-title">
+          <h1>编辑流程</h1>
+          <p>audit-deep-dive-20260420 · 抽屉局部确定后启用顶部保存</p>
+        </div>
+        <div class="bk-flow-version-area">
+          <span class="bk-flow-version-label">流程版本</span>
+          <span class="bk-tag">草稿</span>
+          <span class="bk-flow-version-badge">最新发布 1.0.0</span>
+        </div>
+      </div>
+      <div class="bk-flow-editor-actions">
+        <button type="button" class="bk-button bk-button-primary bk-save-button is-enabled" id="flow-editor-save" data-disable-target="#flow-editor-save" data-enable-target="#flow-editor-publish">保存</button>
+        <button type="button" class="bk-button bk-button-primary is-disabled" id="flow-editor-publish" disabled data-open="flow-publish-dialog">发布</button>
+        <button type="button" class="bk-button" data-open="flow-mock-debug-dialog">调试</button>
+      </div>
+    </header>
+
+    <main class="bk-flow-editor-main">
+      <aside class="bk-flow-editor-rail">
+        <section class="bk-flow-section-card">
+          <h2>状态说明</h2>
+          <p>节点配置已回写画布，顶部全局保存变为可点，但尚未真正持久化流程定义。</p>
+        </section>
+      </aside>
+
+      <section class="bk-flow-canvas-shell">
+        <div class="bk-flow-canvas-header">
+          <div>
+            <strong>流程画布</strong>
+            <span>局部确认完成后，继续点击页面顶栏执行真正保存。</span>
+          </div>
+        </div>
+        <div class="bk-flow-canvas">
+          <div class="bk-flow-canvas-stage">
+            <div class="bk-flow-node bk-flow-node-start"><strong>开始</strong></div>
+            <div class="bk-flow-link"></div>
+            <button type="button" class="bk-flow-node is-selected" data-node-select="flow-editor-main" data-node-toolbar="#flow-node-toolbar" data-node-name="发布蓝鲸作业" data-dblopen="flow-node-config-drawer">
+              <strong>发布蓝鲸作业</strong>
+              <span>标准插件 · 蓝盾作业</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <button type="button" class="bk-flow-node" data-node-select="flow-editor-main" data-node-toolbar="#flow-node-toolbar" data-node-name="通知审批结果" data-dblopen="flow-node-config-drawer">
+              <strong>通知审批结果</strong>
+              <span>标准插件 · 通知中心</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <div class="bk-flow-node bk-flow-node-end"><strong>结束</strong></div>
+          </div>
+
+          <div class="bk-flow-node-toolbar is-visible" id="flow-node-toolbar">
+            <span class="bk-flow-toolbar-title" data-node-toolbar-label>发布蓝鲸作业</span>
+            <button type="button" class="bk-flow-toolbar-button" data-open="flow-node-config-drawer">配置</button>
+            <button type="button" class="bk-flow-toolbar-button">复制</button>
+            <button type="button" class="bk-flow-toolbar-button">连线</button>
+            <button type="button" class="bk-flow-toolbar-button">删除</button>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <div class="bk-dialog" id="flow-publish-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>发布流程</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="flow-mock-debug-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>执行调试</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/flow-editor/template.html b/prototypes/masters/flow-editor/template.html
new file mode 100644
index 0000000000..0e7b88a075
--- /dev/null
+++ b/prototypes/masters/flow-editor/template.html
@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>流程编辑 Master - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <script defer src="../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-flow-editor">
+  <div class="bk-flow-editor-shell">
+    <header class="bk-flow-editor-header">
+      <div class="bk-flow-editor-meta">
+        <a class="bk-flow-editor-back" href="#">← 返回流程列表</a>
+        <div class="bk-flow-editor-title">
+          <h1>编辑流程</h1>
+          <p>audit-deep-dive-20260420 · 发布蓝鲸作业审批链</p>
+        </div>
+        <div class="bk-flow-version-area">
+          <span class="bk-flow-version-label">流程版本</span>
+          <span class="bk-tag">草稿</span>
+          <span class="bk-flow-version-badge">最新发布 1.0.0</span>
+        </div>
+      </div>
+      <div class="bk-flow-editor-actions">
+        <button
+          type="button"
+          class="bk-button bk-button-primary bk-save-button is-disabled"
+          id="flow-editor-save"
+          disabled
+          data-disable-target="#flow-editor-save"
+          data-enable-target="#flow-editor-publish">保存</button>
+        <button
+          type="button"
+          class="bk-button bk-button-primary is-disabled"
+          id="flow-editor-publish"
+          disabled
+          data-open="flow-publish-dialog">发布</button>
+        <button type="button" class="bk-button" data-open="flow-mock-debug-dialog">调试</button>
+      </div>
+    </header>
+
+    <main class="bk-flow-editor-main">
+      <aside class="bk-flow-editor-rail">
+        <section class="bk-flow-section-card">
+          <h2>编辑节奏</h2>
+          <ul>
+            <li>单击画布节点只做选中。</li>
+            <li>双击节点才打开 `节点配置`。</li>
+            <li>抽屉里的 `确定` 仅回写画布并启用顶部保存。</li>
+            <li>顶部 `保存` 后，发布按钮才进入可操作态。</li>
+          </ul>
+        </section>
+
+        <section class="bk-flow-section-card">
+          <h3>调试入口</h3>
+          <p>真实产品会跳到独立 mock 调试路由，这个 master 用确认层表达“保存 Mock 数据后去执行”的前置检查。</p>
+        </section>
+      </aside>
+
+      <section class="bk-flow-canvas-shell">
+        <div class="bk-flow-canvas-header">
+          <div>
+            <strong>流程画布</strong>
+            <span>单击查看节点悬浮工具条，双击进入配置抽屉。</span>
+          </div>
+          <div class="bk-flow-canvas-tools">
+            <span class="bk-flow-tool-chip">-</span>
+            <span class="bk-flow-tool-chip">100%</span>
+            <span class="bk-flow-tool-chip">+</span>
+          </div>
+        </div>
+
+        <div class="bk-flow-canvas">
+          <div class="bk-flow-canvas-stage">
+            <div class="bk-flow-node bk-flow-node-start">
+              <strong>开始</strong>
+            </div>
+            <div class="bk-flow-link"></div>
+            <button
+              type="button"
+              class="bk-flow-node"
+              data-node-select="flow-editor-main"
+              data-node-toolbar="#flow-node-toolbar"
+              data-node-name="发布蓝鲸作业"
+              data-dblopen="flow-node-config-drawer">
+              <strong>发布蓝鲸作业</strong>
+              <span>标准插件 · 蓝盾作业</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <button
+              type="button"
+              class="bk-flow-node"
+              data-node-select="flow-editor-main"
+              data-node-toolbar="#flow-node-toolbar"
+              data-node-name="通知审批结果"
+              data-dblopen="flow-node-config-drawer">
+              <strong>通知审批结果</strong>
+              <span>标准插件 · 通知中心</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <div class="bk-flow-node bk-flow-node-end">
+              <strong>结束</strong>
+            </div>
+          </div>
+
+          <div class="bk-flow-node-toolbar" id="flow-node-toolbar">
+            <span class="bk-flow-toolbar-title" data-node-toolbar-label>节点悬浮工具条</span>
+            <button type="button" class="bk-flow-toolbar-button" data-open="flow-node-config-drawer">配置</button>
+            <button type="button" class="bk-flow-toolbar-button">复制</button>
+            <button type="button" class="bk-flow-toolbar-button">连线</button>
+            <button type="button" class="bk-flow-toolbar-button">删除</button>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <aside class="bk-sideslider" id="flow-node-config-drawer">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <div class="bk-flow-drawer-header">
+          <div>
+            <h3>节点配置</h3>
+            <p>单击只选中节点，双击才打开抽屉；局部 `确定` 不等于全局保存。</p>
+          </div>
+          <div class="bk-flow-drawer-header-actions">
+            <button type="button" class="bk-button bk-button-text bk-button-small" data-open="flow-global-vars-dialog">全局变量</button>
+            <button class="bk-sideslider-close" data-close>×</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="bk-sideslider-body">
+        <section class="bk-flow-drawer-group">
+          <h4>基础信息</h4>
+          <div class="bk-flow-two-col">
+            <div>
+              <label class="bk-flow-label">标准插件</label>
+              <div class="bk-flow-input-block">job.execute_task</div>
+            </div>
+            <div>
+              <label class="bk-flow-label">插件版本</label>
+              <div class="bk-flow-input-block">v3.7.2</div>
+            </div>
+            <div>
+              <label class="bk-flow-label">节点名称</label>
+              <div class="bk-flow-input-block">发布蓝鲸作业</div>
+            </div>
+            <div>
+              <label class="bk-flow-label">失败处理</label>
+              <div class="bk-flow-inline-box">
+                <span class="bk-flow-pill">AS</span>
+                <span class="bk-flow-pill">MS</span>
+                <span class="bk-flow-pill">MR</span>
+                <span class="bk-flow-pill">AR</span>
+              </div>
+            </div>
+          </div>
+          <div style="margin-top:12px;">
+            <label class="bk-flow-label">超时控制</label>
+            <div class="bk-flow-inline-box">
+              <span class="bk-flow-pill">开启</span>
+              <span>超时后自动标记为失败并转人工处理。</span>
+            </div>
+          </div>
+        </section>
+
+        <section class="bk-flow-drawer-group">
+          <h4>输入参数</h4>
+          <div class="bk-flow-stack">
+            <div>
+              <label class="bk-flow-label">作业模板 ID</label>
+              <div class="bk-flow-input-block">bk-job-template-prod</div>
+            </div>
+            <div>
+              <label class="bk-flow-label">执行参数</label>
+              <pre class="bk-flow-code-block">{
+  "biz_cc_id": "{{ biz_id }}",
+  "operator": "{{ _system.operator }}",
+  "task_name": "{{ _system.task_name }}"
+}</pre>
+            </div>
+          </div>
+        </section>
+
+        <section class="bk-flow-drawer-group">
+          <h4>输出参数</h4>
+          <table class="bk-flow-io-table">
+            <thead>
+              <tr>
+                <th>字段</th>
+                <th>来源</th>
+                <th>勾选为全局变量</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>job_instance_id</td>
+                <td>插件执行结果</td>
+                <td>是</td>
+              </tr>
+              <tr>
+                <td>job_status</td>
+                <td>插件执行结果</td>
+                <td>否</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+      </div>
+
+      <div class="bk-sideslider-footer">
+        <div class="bk-flow-footer-hint">局部确定只会同步节点配置并启用顶部 `保存`，真正保存仍需点击页面顶栏。</div>
+        <div>
+          <button type="button" class="bk-button" data-close>取消</button>
+          <button type="button" class="bk-button bk-button-primary" data-save-target="#flow-editor-save" data-close>确定</button>
+        </div>
+      </div>
+    </div>
+  </aside>
+
+  <div class="bk-dialog bk-flow-vars-float" id="flow-global-vars-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>全局变量</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <table class="bk-flow-vars-table">
+          <thead>
+            <tr>
+              <th>变量名</th>
+              <th>说明</th>
+              <th>示例值</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>_system.task_name</td>
+              <td>调度时自动注入的任务名称</td>
+              <td>audit-deep-dive-20260420</td>
+            </tr>
+            <tr>
+              <td>_system.task_id</td>
+              <td>系统生成的任务 ID</td>
+              <td>17100002166</td>
+            </tr>
+            <tr>
+              <td>_system.task_start_time</td>
+              <td>任务启动时间</td>
+              <td>2026-04-20 20:31:15</td>
+            </tr>
+            <tr>
+              <td>_system.operator</td>
+              <td>当前操作人</td>
+              <td>admin</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="bk-dialog-footer">
+        <button type="button" class="bk-button bk-button-primary" data-close>关闭</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="flow-publish-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>发布流程</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <div class="bk-flow-stack">
+          <div>
+            <label class="bk-flow-label">版本号</label>
+            <input class="bk-input" value="1.0.0">
+          </div>
+          <div>
+            <label class="bk-flow-label">版本描述</label>
+            <textarea class="bk-textarea" rows="4">补充发布说明、影响范围和升级注意事项。</textarea>
+          </div>
+        </div>
+      </div>
+      <div class="bk-dialog-footer">
+        <button type="button" class="bk-button bk-button-primary">确认发布</button>
+        <button type="button" class="bk-button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="flow-mock-debug-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>执行调试</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>确定保存Mock数据并去执行调试?</p>
+        <p class="bk-flow-confirm-note">该 master 用确认层表达真实产品跳转到 `/template/mock/...` 前的最后一步校验。</p>
+      </div>
+      <div class="bk-dialog-footer">
+        <button type="button" class="bk-button bk-button-primary">保存并执行</button>
+        <button type="button" class="bk-button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/list-page/README.md b/prototypes/masters/list-page/README.md
new file mode 100644
index 0000000000..bf1604458a
--- /dev/null
+++ b/prototypes/masters/list-page/README.md
@@ -0,0 +1,13 @@
+# list-page
+
+## Purpose
+
+`prototypes/masters/list-page/` is the reusable master for list-oriented admin pages. It covers the standard toolbar, search and filter controls, status and operation columns, pagination, and the common empty, error, and bulk-action states.
+
+## What it covers
+
+- Table-based list pages with a clear toolbar.
+- Search and filter placement near the table header.
+- Status and operation columns for row-level actions.
+- Pagination and selection-heavy bulk-action variants.
+- Separate static states for empty results and loading failures.
diff --git a/prototypes/masters/list-page/states/bulk-actions.html b/prototypes/masters/list-page/states/bulk-actions.html
new file mode 100644
index 0000000000..fed060dc53
--- /dev/null
+++ b/prototypes/masters/list-page/states/bulk-actions.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>列表页 - 批量操作状态</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    body { background: var(--bk-bg-body); }
+    .page {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 36px;
+    }
+    .section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .bulk-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 14px 16px;
+      margin-bottom: 16px;
+      background: #f0f7ff;
+      border: 1px solid #a3c5fd;
+      border-radius: var(--bk-radius-md);
+      color: var(--bk-primary-active);
+    }
+    .table-wrap { overflow-x: auto; }
+  </style>
+</head>
+<body class="bk-prototype-shell">
+  <main class="page">
+    <div class="bulk-bar">
+      <div>已选 3 条，可执行批量操作。</div>
+      <div>
+        <button class="bk-button">批量启用</button>
+        <button class="bk-button">批量停用</button>
+        <button class="bk-button bk-button-danger">批量删除</button>
+      </div>
+    </div>
+
+    <section class="section">
+      <div class="bk-toolbar">
+        <div class="bk-toolbar-left">
+          <input class="bk-search-input" placeholder="搜索名称、编码或负责人" style="width:280px;">
+          <div class="bk-select" style="width:180px;">
+            <div class="bk-select-trigger">
+              <span class="bk-select-placeholder">筛选状态</span>
+            </div>
+          </div>
+        </div>
+        <div class="bk-toolbar-right">
+          <button class="bk-button">取消选择</button>
+        </div>
+      </div>
+
+      <div class="table-wrap">
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th style="width:48px;">选择</th>
+              <th>名称</th>
+              <th>类型</th>
+              <th>状态</th>
+              <th>更新时间</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><input type="checkbox" checked></td>
+              <td>prod-api-key</td>
+              <td>凭证</td>
+              <td><span class="bk-tag bk-tag-success">启用</span></td>
+              <td>2026-04-18 10:12</td>
+              <td><button class="bk-table-action">编辑</button></td>
+            </tr>
+            <tr>
+              <td><input type="checkbox" checked></td>
+              <td>staging-webhook</td>
+              <td>回调</td>
+              <td><span class="bk-tag bk-tag-warning">待审核</span></td>
+              <td>2026-04-17 17:40</td>
+              <td><button class="bk-table-action">审核</button></td>
+            </tr>
+            <tr>
+              <td><input type="checkbox" checked></td>
+              <td>backup-rule</td>
+              <td>规则</td>
+              <td><span class="bk-tag bk-tag-danger">禁用</span></td>
+              <td>2026-04-15 09:08</td>
+              <td><button class="bk-table-action">恢复</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="bk-pagination" style="margin-top:18px;">
+        <span class="bk-pagination-total">共 38 条</span>
+        <span class="bk-pagination-item">&laquo;</span>
+        <span class="bk-pagination-item active">1</span>
+        <span class="bk-pagination-item">2</span>
+        <span class="bk-pagination-item">&raquo;</span>
+      </div>
+    </section>
+  </main>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/masters/list-page/states/empty.html b/prototypes/masters/list-page/states/empty.html
new file mode 100644
index 0000000000..f94bebb40f
--- /dev/null
+++ b/prototypes/masters/list-page/states/empty.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>列表页 - 空状态</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    body { background: var(--bk-bg-body); }
+    .page {
+      max-width: 1080px;
+      margin: 0 auto;
+      padding: 40px 36px;
+    }
+    .section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+  </style>
+</head>
+<body class="bk-prototype-shell">
+  <main class="page">
+    <div class="bk-toolbar">
+      <div class="bk-toolbar-left">
+        <input class="bk-search-input" placeholder="搜索名称、编码或负责人" style="width:280px;">
+        <div class="bk-select" style="width:180px;">
+          <div class="bk-select-trigger">
+            <span class="bk-select-placeholder">筛选状态</span>
+          </div>
+        </div>
+      </div>
+      <div class="bk-toolbar-right">
+        <button class="bk-button bk-button-primary">新建条目</button>
+      </div>
+    </div>
+
+    <section class="section">
+      <div class="bk-exception">
+        <div style="font-size:48px;">◎</div>
+        <strong>暂无数据</strong>
+        <div>当前筛选条件下没有匹配结果。</div>
+        <div>
+          <button class="bk-button">清空筛选</button>
+          <button class="bk-button bk-button-primary">新建条目</button>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/masters/list-page/states/error.html b/prototypes/masters/list-page/states/error.html
new file mode 100644
index 0000000000..fba369560a
--- /dev/null
+++ b/prototypes/masters/list-page/states/error.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>列表页 - 错误状态</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <style>
+    body { background: var(--bk-bg-body); }
+    .page {
+      max-width: 1080px;
+      margin: 0 auto;
+      padding: 40px 36px;
+    }
+    .section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+  </style>
+</head>
+<body class="bk-prototype-shell">
+  <main class="page">
+    <div class="bk-toolbar">
+      <div class="bk-toolbar-left">
+        <input class="bk-search-input" placeholder="搜索名称、编码或负责人" style="width:280px;">
+        <div class="bk-select" style="width:180px;">
+          <div class="bk-select-trigger">
+            <span class="bk-select-placeholder">筛选状态</span>
+          </div>
+        </div>
+      </div>
+      <div class="bk-toolbar-right">
+        <button class="bk-button">重试加载</button>
+      </div>
+    </div>
+
+    <section class="section">
+      <div class="bk-exception">
+        <div style="font-size:48px;color:var(--bk-danger);">!</div>
+        <strong>加载失败</strong>
+        <div>列表数据获取失败，请稍后重试或检查网络。</div>
+        <div>
+          <button class="bk-button">返回</button>
+          <button class="bk-button bk-button-primary">重新加载</button>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script src="../../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/masters/list-page/template.html b/prototypes/masters/list-page/template.html
new file mode 100644
index 0000000000..3aff875bfb
--- /dev/null
+++ b/prototypes/masters/list-page/template.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>列表页 Master - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <style>
+    body {
+      background:
+        radial-gradient(circle at top left, rgba(58, 132, 255, 0.08), transparent 28%),
+        var(--bk-bg-body);
+    }
+    .page {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 32px 36px 48px;
+    }
+    .page-title {
+      margin-bottom: 8px;
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .page-subtitle {
+      color: var(--bk-text-tertiary);
+      margin-bottom: 20px;
+    }
+    .section {
+      background: var(--bk-bg-default);
+      border: 1px solid var(--bk-border-light);
+      border-radius: var(--bk-radius-md);
+      box-shadow: var(--bk-shadow);
+      padding: 20px;
+    }
+    .table-wrap {
+      overflow-x: auto;
+    }
+    .hint {
+      margin-top: 12px;
+      color: var(--bk-text-tertiary);
+      font-size: 12px;
+    }
+  </style>
+</head>
+<body class="bk-prototype-shell">
+  <main class="page">
+    <h1 class="page-title">列表页 Master</h1>
+    <p class="page-subtitle">适合管理台中的列表、检索和批量操作场景。</p>
+
+    <section class="section">
+      <div class="bk-toolbar">
+        <div class="bk-toolbar-left">
+          <input class="bk-search-input" placeholder="搜索名称、编码或负责人" style="width:280px;">
+          <div class="bk-select" style="width:180px;">
+            <div class="bk-select-trigger">
+              <span class="bk-select-placeholder">筛选状态</span>
+            </div>
+          </div>
+        </div>
+        <div class="bk-toolbar-right">
+          <button class="bk-button">刷新</button>
+          <button class="bk-button bk-button-primary">新建条目</button>
+        </div>
+      </div>
+
+      <div class="table-wrap">
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th style="width:48px;">选择</th>
+              <th>名称</th>
+              <th>类型</th>
+              <th>状态</th>
+              <th>更新时间</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><input type="checkbox"></td>
+              <td>prod-api-key</td>
+              <td>凭证</td>
+              <td><span class="bk-tag bk-tag-success">启用</span></td>
+              <td>2026-04-18 10:12</td>
+              <td>
+                <button class="bk-table-action">编辑</button>
+                <button class="bk-table-action">停用</button>
+              </td>
+            </tr>
+            <tr>
+              <td><input type="checkbox"></td>
+              <td>staging-webhook</td>
+              <td>回调</td>
+              <td><span class="bk-tag bk-tag-warning">待审核</span></td>
+              <td>2026-04-17 17:40</td>
+              <td>
+                <button class="bk-table-action">查看</button>
+                <button class="bk-table-action">审核</button>
+              </td>
+            </tr>
+            <tr>
+              <td><input type="checkbox"></td>
+              <td>backup-rule</td>
+              <td>规则</td>
+              <td><span class="bk-tag bk-tag-danger">禁用</span></td>
+              <td>2026-04-15 09:08</td>
+              <td>
+                <button class="bk-table-action">编辑</button>
+                <button class="bk-table-action">恢复</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="bk-pagination" style="margin-top:18px;">
+        <span class="bk-pagination-total">共 38 条</span>
+        <span class="bk-pagination-item">&laquo;</span>
+        <span class="bk-pagination-item active">1</span>
+        <span class="bk-pagination-item">2</span>
+        <span class="bk-pagination-item">3</span>
+        <span class="bk-pagination-item">&raquo;</span>
+      </div>
+
+      <div class="hint">上方 toolbar 适合放搜索和筛选，表格固定展示状态列与操作列。</div>
+    </section>
+  </main>
+
+  <script src="../../assets/bkflow-prototype.js"></script>
+</body>
+</html>
diff --git a/prototypes/masters/overlays/README.md b/prototypes/masters/overlays/README.md
new file mode 100644
index 0000000000..12b6ff3b97
--- /dev/null
+++ b/prototypes/masters/overlays/README.md
@@ -0,0 +1,26 @@
+# overlays
+
+## Purpose
+
+`prototypes/masters/overlays/` collects reusable floating-layer masters for confirmations, error prompts, and side panels.
+
+## Contract
+
+- `dialogs.html` covers confirm and exception dialogs that can be reused by multiple features.
+- `sidesliders.html` covers edit and detail side sliders.
+- Keep this directory focused on floating-layer patterns only.
+
+## What goes here
+
+- Delete confirmations.
+- Publish confirmations.
+- Exception or warning prompts.
+- Form edit side sliders.
+- Read-only detail side sliders.
+
+## What should not go here
+
+- Page shells.
+- Table/list content.
+- Feature-specific business flow pages.
+
diff --git a/prototypes/masters/overlays/dialogs.html b/prototypes/masters/overlays/dialogs.html
new file mode 100644
index 0000000000..c5bc842392
--- /dev/null
+++ b/prototypes/masters/overlays/dialogs.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型 - dialogs 母版</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <script defer src="../../assets/bkflow-prototype.js"></script>
+</head>
+<body>
+  <main style="padding:32px 40px;">
+    <h1 class="bk-prototype-page-title">Dialogs 母版</h1>
+
+    <section class="bk-prototype-card">
+      <h2>删除确认</h2>
+      <p class="bk-prototype-card-meta">用于危险删除动作的标准确认弹窗。</p>
+      <button class="bk-button bk-button-danger" data-open="delete-dialog">打开删除确认</button>
+    </section>
+
+    <section class="bk-prototype-card">
+      <h2>发布确认</h2>
+      <p class="bk-prototype-card-meta">用于发布前的版本确认与描述补充。</p>
+      <button class="bk-button bk-button-primary" data-open="publish-dialog">打开发布确认</button>
+    </section>
+
+    <section class="bk-prototype-card">
+      <h2>异常提示</h2>
+      <p class="bk-prototype-card-meta">用于执行或保存失败时的全局异常提示。</p>
+      <button class="bk-button" data-open="exception-dialog">打开异常提示</button>
+    </section>
+  </main>
+
+  <div class="bk-dialog" id="delete-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>删除确认</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        确认删除该流程吗？删除后无法恢复。
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-danger">确认删除</button>
+        <button class="bk-button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="publish-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>发布确认</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        <p>确认发布当前版本吗？</p>
+        <p class="bk-prototype-card-meta">可在这里补充版本号、描述和校验信息。</p>
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-primary">确认发布</button>
+        <button class="bk-button" data-close>取消</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bk-dialog" id="exception-dialog">
+    <div class="bk-dialog-mask" data-close></div>
+    <div class="bk-dialog-content">
+      <div class="bk-dialog-header">
+        <h3>异常提示</h3>
+        <button class="bk-dialog-close" data-close>×</button>
+      </div>
+      <div class="bk-dialog-body">
+        应用出现异常，请稍后重试或联系管理员。
+      </div>
+      <div class="bk-dialog-footer">
+        <button class="bk-button bk-button-primary" data-close>我知道了</button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/overlays/sidesliders.html b/prototypes/masters/overlays/sidesliders.html
new file mode 100644
index 0000000000..1a201a62ce
--- /dev/null
+++ b/prototypes/masters/overlays/sidesliders.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BKFlow 原型 - sidesliders 母版</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <script defer src="../../assets/bkflow-prototype.js"></script>
+</head>
+<body>
+  <main style="padding:32px 40px;">
+    <h1 class="bk-prototype-page-title">Sidesliders 母版</h1>
+
+    <section class="bk-prototype-card">
+      <h2>表单编辑侧滑</h2>
+      <p class="bk-prototype-card-meta">用于右侧编辑表单，支持提交、取消和局部状态反馈。</p>
+      <button class="bk-button bk-button-primary" data-open="edit-sideslider">打开表单编辑侧滑</button>
+    </section>
+
+    <section class="bk-prototype-card">
+      <h2>只读详情侧滑</h2>
+      <p class="bk-prototype-card-meta">用于展示只读详情、日志快照或执行记录。</p>
+      <button class="bk-button" data-open="detail-sideslider">打开只读详情侧滑</button>
+    </section>
+  </main>
+
+  <aside class="bk-sideslider" id="edit-sideslider">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <h3>表单编辑侧滑</h3>
+        <button class="bk-sideslider-close" data-close>×</button>
+      </div>
+      <div class="bk-sideslider-body">
+        <form class="bk-form" onsubmit="return false;">
+          <div class="bk-form-item is-required">
+            <label class="bk-form-label">名称</label>
+            <div class="bk-form-content">
+              <input class="bk-input" data-required placeholder="请输入名称">
+            </div>
+          </div>
+          <div class="bk-form-item">
+            <label class="bk-form-label">说明</label>
+            <div class="bk-form-content">
+              <textarea class="bk-textarea" rows="4" placeholder="请输入说明"></textarea>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="bk-sideslider-footer">
+        <button class="bk-button bk-button-primary">保存</button>
+        <button class="bk-button" data-close>取消</button>
+      </div>
+    </div>
+  </aside>
+
+  <aside class="bk-sideslider" id="detail-sideslider">
+    <div class="bk-sideslider-mask" data-close></div>
+    <div class="bk-sideslider-content">
+      <div class="bk-sideslider-header">
+        <h3>只读详情侧滑</h3>
+        <button class="bk-sideslider-close" data-close>×</button>
+      </div>
+      <div class="bk-sideslider-body">
+        <div class="bk-prototype-card">
+          <h4>执行概要</h4>
+          <p class="bk-prototype-card-meta">这里展示节点详情、日志快照或执行记录的只读信息。</p>
+        </div>
+      </div>
+      <div class="bk-sideslider-footer">
+        <button class="bk-button bk-button-primary" data-close>关闭</button>
+      </div>
+    </div>
+  </aside>
+</body>
+</html>
diff --git a/prototypes/masters/task-detail/README.md b/prototypes/masters/task-detail/README.md
new file mode 100644
index 0000000000..d9db6ea587
--- /dev/null
+++ b/prototypes/masters/task-detail/README.md
@@ -0,0 +1,14 @@
+# task-detail
+
+## Purpose
+
+`prototypes/masters/task-detail/` is the reusable master for the audited BKFlow execution detail route. It represents a read-only execution canvas with single-click node detail opening, a right-side audit surface, and configuration snapshot captured at execution time.
+
+## What it covers
+
+- An execution detail route header with `任务执行`, task name, status, and source-template backlink.
+- A read-only execution canvas that stays distinct from `flow-editor/`.
+- Single-click node detail opening for analysis instead of double-click editing.
+- Observation tabs for `执行记录 / 配置快照 / 操作历史 / 调用日志`.
+- A code-style log viewer and empty states for audit trails.
+- Explicit separation from editing semantics: no save / publish / debug header actions.
diff --git a/prototypes/masters/task-detail/states/complete.html b/prototypes/masters/task-detail/states/complete.html
new file mode 100644
index 0000000000..256f2d700e
--- /dev/null
+++ b/prototypes/masters/task-detail/states/complete.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>任务详情完成态 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <script defer src="../../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-task-detail">
+  <div class="bk-task-detail-shell">
+    <header class="bk-task-detail-header">
+      <div class="bk-task-detail-meta">
+        <a class="bk-task-detail-back" href="/template/view/2166/">← 返回源模板</a>
+        <div class="bk-task-detail-title">
+          <span class="bk-task-detail-label">任务执行</span>
+          <div class="bk-task-detail-heading">
+            <h1>audit-deep-dive-20260420_调试任务_20260420203821</h1>
+            <span class="bk-task-status is-success">完成</span>
+          </div>
+          <p>源模板 <a href="/template/view/2166/">/template/view/2166/</a> · 执行实例 #1192795</p>
+        </div>
+      </div>
+      <div class="bk-task-detail-summary">
+        <div class="bk-task-detail-chip">
+          <span class="bk-task-detail-chip-label">观察模式</span>
+          <strong>只读观察</strong>
+        </div>
+      </div>
+    </header>
+
+    <main class="bk-task-detail-main">
+      <section class="bk-task-detail-canvas-shell">
+        <div class="bk-task-detail-canvas-header">
+          <div>
+            <strong>执行画布</strong>
+            <span>成功态展示已完成的节点运行轨迹。</span>
+          </div>
+          <div class="bk-flow-canvas-tools">
+            <span class="bk-flow-tool-chip">完成</span>
+            <span class="bk-flow-tool-chip">100%</span>
+          </div>
+        </div>
+
+        <div class="bk-flow-canvas bk-task-detail-canvas">
+          <div class="bk-flow-canvas-stage">
+            <div class="bk-flow-node bk-flow-node-start">
+              <strong>开始</strong>
+            </div>
+            <div class="bk-flow-link"></div>
+            <button
+              type="button"
+              class="bk-flow-node is-selected"
+              data-node-select="task-detail-main"
+              data-node-open="#task-detail-panel"
+              data-node-name="消息展示"
+              data-node-status="完成"
+              data-node-trail="开始节点 / 消息展示 / 结束节点">
+              <strong>消息展示</strong>
+              <span>标准插件 · 文本展示</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <div class="bk-flow-node bk-flow-node-end">
+              <strong>结束</strong>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <aside class="bk-task-detail-panel is-open" id="task-detail-panel" data-tab-root>
+        <div class="bk-task-detail-panel-header">
+          <div>
+            <h2 data-node-panel-title>节点详情</h2>
+            <div class="bk-task-detail-node-trail" data-node-panel-trail>开始节点 / 消息展示 / 结束节点</div>
+          </div>
+          <span class="bk-task-status is-success" data-node-panel-status>完成</span>
+        </div>
+
+        <div class="bk-tab">
+          <div class="bk-tab-header">
+            <button type="button" class="bk-tab-item active" data-tab-group="task-detail-panel" data-tab-target="task-detail-records">执行记录</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-snapshot">配置快照</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-history">操作历史</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-call-log">调用日志</button>
+          </div>
+
+          <div class="bk-task-detail-panel-body">
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-records" data-tab-panel-group="task-detail-panel">
+              <article class="bk-task-detail-block">
+                <h3>异常信息</h3>
+                <div class="bk-task-detail-note">暂无异常</div>
+              </article>
+              <article class="bk-task-detail-block">
+                <h3>执行信息</h3>
+                <dl class="bk-task-detail-kv">
+                  <div><dt>开始时间</dt><dd>2026-04-20 20:38:21</dd></div>
+                  <div><dt>结束时间</dt><dd>2026-04-20 20:38:22</dd></div>
+                  <div><dt>耗时</dt><dd>小于 1 秒</dd></div>
+                </dl>
+              </article>
+              <article class="bk-task-detail-block">
+                <h3>输入参数</h3>
+                <div class="bk-task-detail-code">展示内容 = audit message 20260420</div>
+              </article>
+              <article class="bk-task-detail-block">
+                <h3>输出参数</h3>
+                <div class="bk-task-detail-code">_result = true</div>
+              </article>
+            </section>
+
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-snapshot" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block"><h3>配置快照</h3><div class="bk-task-detail-note">标准插件 message.display_text</div></article>
+            </section>
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-history" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block"><h3>操作历史</h3><div class="bk-task-detail-note">暂无数据</div></article>
+            </section>
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-call-log" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block">
+                <h3>调用日志</h3>
+                <div class="bk-log-viewer" aria-label="日志查看器">
+                  <div class="line-numbers">1
+2
+3</div>
+                  <pre>pipeline trace
+[INFO] execution finished
+[INFO] outputs={"_result": true}</pre>
+                </div>
+              </article>
+            </section>
+          </div>
+        </div>
+      </aside>
+    </main>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/task-detail/states/empty-log.html b/prototypes/masters/task-detail/states/empty-log.html
new file mode 100644
index 0000000000..c292ecde2d
--- /dev/null
+++ b/prototypes/masters/task-detail/states/empty-log.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>任务详情空日志态 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <script defer src="../../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-task-detail">
+  <div class="bk-task-detail-shell">
+    <header class="bk-task-detail-header">
+      <div class="bk-task-detail-meta">
+        <a class="bk-task-detail-back" href="/template/view/2166/">← 返回源模板</a>
+        <div class="bk-task-detail-title">
+          <span class="bk-task-detail-label">任务执行</span>
+          <div class="bk-task-detail-heading">
+            <h1>audit-deep-dive-20260420_调试任务_20260420203821</h1>
+            <span class="bk-task-status is-success">完成</span>
+          </div>
+          <p>源模板 <a href="/template/view/2166/">/template/view/2166/</a> · 执行实例 #1192795</p>
+        </div>
+      </div>
+      <div class="bk-task-detail-summary">
+        <div class="bk-task-detail-chip">
+          <span class="bk-task-detail-chip-label">日志状态</span>
+          <strong>采集为空</strong>
+        </div>
+      </div>
+    </header>
+
+    <main class="bk-task-detail-main">
+      <section class="bk-task-detail-canvas-shell">
+        <div class="bk-task-detail-canvas-header">
+          <div>
+            <strong>执行画布</strong>
+            <span>调用日志为空时，仍保留代码查看器风格的阅读区域。</span>
+          </div>
+        </div>
+
+        <div class="bk-flow-canvas bk-task-detail-canvas">
+          <div class="bk-flow-canvas-stage">
+            <div class="bk-flow-node bk-flow-node-start">
+              <strong>开始</strong>
+            </div>
+            <div class="bk-flow-link"></div>
+            <button
+              type="button"
+              class="bk-flow-node is-selected"
+              data-node-select="task-detail-main"
+              data-node-open="#task-detail-panel"
+              data-node-name="消息展示"
+              data-node-status="完成"
+              data-node-trail="开始节点 / 消息展示 / 结束节点">
+              <strong>消息展示</strong>
+              <span>标准插件 · 文本展示</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <div class="bk-flow-node bk-flow-node-end">
+              <strong>结束</strong>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <aside class="bk-task-detail-panel is-open" id="task-detail-panel" data-tab-root>
+        <div class="bk-task-detail-panel-header">
+          <div>
+            <h2 data-node-panel-title>节点详情</h2>
+            <div class="bk-task-detail-node-trail" data-node-panel-trail>开始节点 / 消息展示 / 结束节点</div>
+          </div>
+          <span class="bk-task-status is-success" data-node-panel-status>完成</span>
+        </div>
+
+        <div class="bk-tab">
+          <div class="bk-tab-header">
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-records">执行记录</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-snapshot">配置快照</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-history">操作历史</button>
+            <button type="button" class="bk-tab-item active" data-tab-group="task-detail-panel" data-tab-target="task-detail-call-log">调用日志</button>
+          </div>
+
+          <div class="bk-task-detail-panel-body">
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-records" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block"><h3>执行记录</h3><div class="bk-task-detail-note">切换页签查看。</div></article>
+            </section>
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-snapshot" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block"><h3>配置快照</h3><div class="bk-task-detail-note">切换页签查看。</div></article>
+            </section>
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-history" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block"><h3>操作历史</h3><div class="bk-task-detail-note">暂无数据</div></article>
+            </section>
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-call-log" data-tab-panel-group="task-detail-panel">
+              <article class="bk-task-detail-block">
+                <h3>调用日志</h3>
+                <div class="bk-log-viewer bk-log-empty" aria-label="日志查看器">
+                  <div class="line-numbers">1</div>
+                  <div class="bk-log-empty-copy">暂无调用日志</div>
+                </div>
+              </article>
+            </section>
+          </div>
+        </div>
+      </aside>
+    </main>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/task-detail/states/failed.html b/prototypes/masters/task-detail/states/failed.html
new file mode 100644
index 0000000000..eed2355c92
--- /dev/null
+++ b/prototypes/masters/task-detail/states/failed.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>任务详情失败态 - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../../assets/bkflow-prototype.css">
+  <script defer src="../../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-task-detail">
+  <div class="bk-task-detail-shell">
+    <header class="bk-task-detail-header">
+      <div class="bk-task-detail-meta">
+        <a class="bk-task-detail-back" href="/template/view/2166/">← 返回源模板</a>
+        <div class="bk-task-detail-title">
+          <span class="bk-task-detail-label">任务执行</span>
+          <div class="bk-task-detail-heading">
+            <h1>audit-deep-dive-20260420_调试任务_20260420204109</h1>
+            <span class="bk-task-status is-failed">失败</span>
+          </div>
+          <p>源模板 <a href="/template/view/2166/">/template/view/2166/</a> · 执行实例 #1192801</p>
+        </div>
+      </div>
+      <div class="bk-task-detail-summary">
+        <div class="bk-task-detail-chip">
+          <span class="bk-task-detail-chip-label">失败原因</span>
+          <strong>参数渲染异常</strong>
+        </div>
+      </div>
+    </header>
+
+    <main class="bk-task-detail-main">
+      <section class="bk-task-detail-canvas-shell">
+        <div class="bk-task-detail-canvas-header">
+          <div>
+            <strong>执行画布</strong>
+            <span>失败态强调异常节点与调用痕迹。</span>
+          </div>
+          <div class="bk-flow-canvas-tools">
+            <span class="bk-flow-tool-chip">失败</span>
+            <span class="bk-flow-tool-chip">100%</span>
+          </div>
+        </div>
+
+        <div class="bk-flow-canvas bk-task-detail-canvas">
+          <div class="bk-flow-canvas-stage">
+            <div class="bk-flow-node bk-flow-node-start">
+              <strong>开始</strong>
+            </div>
+            <div class="bk-flow-link"></div>
+            <button
+              type="button"
+              class="bk-flow-node is-selected"
+              data-node-select="task-detail-main"
+              data-node-open="#task-detail-panel"
+              data-node-name="消息展示"
+              data-node-status="失败"
+              data-node-trail="开始节点 / 消息展示 / 结束节点">
+              <strong>消息展示</strong>
+              <span>标准插件 · 文本展示</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <div class="bk-flow-node bk-flow-node-end">
+              <strong>结束</strong>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <aside class="bk-task-detail-panel is-open" id="task-detail-panel" data-tab-root>
+        <div class="bk-task-detail-panel-header">
+          <div>
+            <h2 data-node-panel-title>节点详情</h2>
+            <div class="bk-task-detail-node-trail" data-node-panel-trail>开始节点 / 消息展示 / 结束节点</div>
+          </div>
+          <span class="bk-task-status is-failed" data-node-panel-status>失败</span>
+        </div>
+
+        <div class="bk-tab">
+          <div class="bk-tab-header">
+            <button type="button" class="bk-tab-item active" data-tab-group="task-detail-panel" data-tab-target="task-detail-records">执行记录</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-snapshot">配置快照</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-history">操作历史</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-call-log">调用日志</button>
+          </div>
+
+          <div class="bk-task-detail-panel-body">
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-records" data-tab-panel-group="task-detail-panel">
+              <article class="bk-task-detail-block is-danger">
+                <h3>异常信息</h3>
+                <div class="bk-task-detail-note is-danger">ValueError: message field is required</div>
+                <div class="bk-task-detail-code">Traceback
+ValueError: message field is required
+render_message(message=None)</div>
+              </article>
+              <article class="bk-task-detail-block">
+                <h3>失败原因</h3>
+                <div class="bk-task-detail-note">模板渲染阶段缺失 message 输入，节点执行被中断。</div>
+              </article>
+              <article class="bk-task-detail-block">
+                <h3>输入参数</h3>
+                <div class="bk-task-detail-code">message = null</div>
+              </article>
+              <article class="bk-task-detail-block">
+                <h3>输出参数</h3>
+                <div class="bk-task-detail-code">未产出结果</div>
+              </article>
+            </section>
+
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-snapshot" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block"><h3>配置快照</h3><div class="bk-task-detail-note">记录失败发生时的配置快照。</div></article>
+            </section>
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-history" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block"><h3>操作历史</h3><div class="bk-task-detail-note">暂无数据</div></article>
+            </section>
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-call-log" data-tab-panel-group="task-detail-panel" hidden>
+              <article class="bk-task-detail-block">
+                <h3>调用日志</h3>
+                <div class="bk-log-viewer" aria-label="日志查看器">
+                  <div class="line-numbers">1
+2
+3
+4
+5</div>
+                  <pre>pipeline trace
+[INFO] node=message.display_text status=FAILED
+[ERROR] render message failed
+Traceback
+ValueError: message field is required</pre>
+                </div>
+              </article>
+            </section>
+          </div>
+        </div>
+      </aside>
+    </main>
+  </div>
+</body>
+</html>
diff --git a/prototypes/masters/task-detail/template.html b/prototypes/masters/task-detail/template.html
new file mode 100644
index 0000000000..fe51504e1b
--- /dev/null
+++ b/prototypes/masters/task-detail/template.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>任务详情 Master - BKFlow 原型</title>
+  <link rel="stylesheet" href="../../assets/bkflow-prototype.css">
+  <script defer src="../../assets/bkflow-prototype.js"></script>
+</head>
+<body class="bk-task-detail">
+  <div class="bk-task-detail-shell">
+    <header class="bk-task-detail-header">
+      <div class="bk-task-detail-meta">
+        <a class="bk-task-detail-back" href="/template/view/2166/">← 返回源模板</a>
+        <div class="bk-task-detail-title">
+          <span class="bk-task-detail-label">任务执行</span>
+          <div class="bk-task-detail-heading">
+            <h1>audit-deep-dive-20260420_调试任务_20260420203821</h1>
+            <span class="bk-task-status is-success">完成</span>
+          </div>
+          <p>源模板 <a href="/template/view/2166/">/template/view/2166/</a> · 执行实例 #1192795 · 2026-04-20 20:38:21</p>
+        </div>
+      </div>
+      <div class="bk-task-detail-summary">
+        <div class="bk-task-detail-chip">
+          <span class="bk-task-detail-chip-label">观察模式</span>
+          <strong>只读观察</strong>
+        </div>
+        <div class="bk-task-detail-chip">
+          <span class="bk-task-detail-chip-label">耗时</span>
+          <strong>小于 1 秒</strong>
+        </div>
+      </div>
+    </header>
+
+    <main class="bk-task-detail-main">
+      <section class="bk-task-detail-canvas-shell">
+        <div class="bk-task-detail-canvas-header">
+          <div>
+            <strong>执行画布</strong>
+            <span>节点单击后直接打开 `节点详情`，用于只读观察，不提供编辑控件。</span>
+          </div>
+          <div class="bk-flow-canvas-tools">
+            <span class="bk-flow-tool-chip">只读观察</span>
+            <span class="bk-flow-tool-chip">100%</span>
+          </div>
+        </div>
+
+        <div class="bk-flow-canvas bk-task-detail-canvas">
+          <div class="bk-flow-canvas-stage">
+            <div class="bk-flow-node bk-flow-node-start">
+              <strong>开始</strong>
+            </div>
+            <div class="bk-flow-link"></div>
+            <button
+              type="button"
+              class="bk-flow-node is-selected"
+              data-node-select="task-detail-main"
+              data-node-open="#task-detail-panel"
+              data-node-name="消息展示"
+              data-node-status="完成"
+              data-node-trail="开始节点 / 消息展示 / 结束节点"
+              data-node-detail-source="message-display">
+              <strong>消息展示</strong>
+              <span>标准插件 · 文本展示</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <button
+              type="button"
+              class="bk-flow-node"
+              data-node-select="task-detail-main"
+              data-node-open="#task-detail-panel"
+              data-node-name="人工复核"
+              data-node-status="未执行"
+              data-node-trail="开始节点 / 消息展示 / 人工复核 / 结束节点"
+              data-node-detail-source="manual-review">
+              <strong>人工复核</strong>
+              <span>人工节点 · 等待处理</span>
+            </button>
+            <div class="bk-flow-link"></div>
+            <div class="bk-flow-node bk-flow-node-end">
+              <strong>结束</strong>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <aside class="bk-task-detail-panel is-open" id="task-detail-panel" data-tab-root>
+        <div class="bk-task-detail-panel-header">
+          <div>
+            <h2 data-node-panel-title>节点详情</h2>
+            <div class="bk-task-detail-node-trail" data-node-panel-trail>开始节点 / 消息展示 / 结束节点</div>
+          </div>
+          <span class="bk-task-status is-success" data-node-panel-status>完成</span>
+        </div>
+
+        <div class="bk-task-detail-panel-summary">
+          <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+            <div class="bk-task-detail-summary-card">
+              <span class="bk-task-detail-summary-label">观测变量</span>
+              <strong>展示内容 = audit message 20260420</strong>
+            </div>
+            <div class="bk-task-detail-summary-card">
+              <span class="bk-task-detail-summary-label">运行结论</span>
+              <strong>插件执行成功，无需人工接管</strong>
+            </div>
+          </div>
+          <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+            <div class="bk-task-detail-summary-card">
+              <span class="bk-task-detail-summary-label">当前状态</span>
+              <strong><span class="bk-task-status is-neutral">未执行</span></strong>
+            </div>
+            <div class="bk-task-detail-summary-card">
+              <span class="bk-task-detail-summary-label">待办说明</span>
+              <strong>等待消息展示节点完成后进入人工复核。</strong>
+            </div>
+          </div>
+        </div>
+
+        <div class="bk-tab">
+          <div class="bk-tab-header">
+            <button type="button" class="bk-tab-item active" data-tab-group="task-detail-panel" data-tab-target="task-detail-records">执行记录</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-snapshot">配置快照</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-history">操作历史</button>
+            <button type="button" class="bk-tab-item" data-tab-group="task-detail-panel" data-tab-target="task-detail-call-log">调用日志</button>
+          </div>
+
+          <div class="bk-task-detail-panel-body">
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-records" data-tab-panel-group="task-detail-panel">
+              <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                <article class="bk-task-detail-block">
+                  <h3>异常信息</h3>
+                  <div class="bk-task-detail-note">暂无异常</div>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>执行信息</h3>
+                  <dl class="bk-task-detail-kv">
+                    <div><dt>开始时间</dt><dd>2026-04-20 20:38:21</dd></div>
+                    <div><dt>结束时间</dt><dd>2026-04-20 20:38:22</dd></div>
+                    <div><dt>耗时</dt><dd>小于 1 秒</dd></div>
+                    <div><dt>执行人</dt><dd>admin</dd></div>
+                  </dl>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>输入参数</h3>
+                  <div class="bk-task-detail-code">展示内容 = audit message 20260420</div>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>输出参数</h3>
+                  <div class="bk-task-detail-code">_result = true
+_loop = 0
+_inner_loop = 0</div>
+                </article>
+              </div>
+              <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                <article class="bk-task-detail-block">
+                  <h3>异常信息</h3>
+                  <div class="bk-task-detail-note">暂无异常</div>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>执行信息</h3>
+                  <dl class="bk-task-detail-kv">
+                    <div><dt>开始时间</dt><dd>尚未开始</dd></div>
+                    <div><dt>结束时间</dt><dd>尚未开始</dd></div>
+                    <div><dt>排队状态</dt><dd>等待上游节点完成</dd></div>
+                    <div><dt>责任角色</dt><dd>空间管理员</dd></div>
+                  </dl>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>输入参数</h3>
+                  <div class="bk-task-detail-code">approval_context = 来自消息展示节点的输出</div>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>输出参数</h3>
+                  <div class="bk-task-detail-code">尚未生成输出参数</div>
+                </article>
+              </div>
+            </section>
+
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-snapshot" data-tab-panel-group="task-detail-panel" hidden>
+              <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                <article class="bk-task-detail-block">
+                  <h3>配置快照</h3>
+                  <dl class="bk-task-detail-kv">
+                    <div><dt>标准插件</dt><dd>message.display_text</dd></div>
+                    <div><dt>插件版本</dt><dd>v1.2.0</dd></div>
+                    <div><dt>节点名称</dt><dd>消息展示</dd></div>
+                    <div><dt>失败处理</dt><dd>AS / MS</dd></div>
+                  </dl>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>输入参数</h3>
+                  <div class="bk-task-detail-code">{
+  "message": "audit message 20260420",
+  "operator": "{{ _system.operator }}"
+}</div>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>输出参数</h3>
+                  <div class="bk-task-detail-code">[
+  "_result",
+  "_loop",
+  "_inner_loop"
+]</div>
+                </article>
+              </div>
+              <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                <article class="bk-task-detail-block">
+                  <h3>配置快照</h3>
+                  <dl class="bk-task-detail-kv">
+                    <div><dt>标准插件</dt><dd>manual.review</dd></div>
+                    <div><dt>插件版本</dt><dd>v1.0.0</dd></div>
+                    <div><dt>节点名称</dt><dd>人工复核</dd></div>
+                    <div><dt>失败处理</dt><dd>人工接管</dd></div>
+                  </dl>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>输入参数</h3>
+                  <div class="bk-task-detail-code">{
+  "approver_group": "space_admin",
+  "title": "请确认消息展示结果"
+}</div>
+                </article>
+                <article class="bk-task-detail-block">
+                  <h3>输出参数</h3>
+                  <div class="bk-task-detail-code">[
+  "approve_result",
+  "approve_comment"
+]</div>
+                </article>
+              </div>
+            </section>
+
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-history" data-tab-panel-group="task-detail-panel" hidden>
+              <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                <article class="bk-task-detail-block">
+                  <h3>操作历史</h3>
+                  <table class="bk-flow-io-table">
+                    <thead>
+                      <tr>
+                        <th>时间</th>
+                        <th>动作</th>
+                        <th>执行人</th>
+                        <th>说明</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td colspan="4" class="bk-task-detail-empty-cell">暂无数据</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </article>
+              </div>
+              <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                <article class="bk-task-detail-block">
+                  <h3>操作历史</h3>
+                  <table class="bk-flow-io-table">
+                    <thead>
+                      <tr>
+                        <th>时间</th>
+                        <th>动作</th>
+                        <th>执行人</th>
+                        <th>说明</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>2026-04-20 20:38:22</td>
+                        <td>排队</td>
+                        <td>system</td>
+                        <td>等待上游节点完成后唤起人工复核。</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </article>
+              </div>
+            </section>
+
+            <section class="bk-tab-panel bk-task-detail-section" id="task-detail-call-log" data-tab-panel-group="task-detail-panel" hidden>
+              <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="message-display">
+                <article class="bk-task-detail-block">
+                  <h3>调用日志</h3>
+                  <div class="bk-log-viewer" aria-label="日志查看器">
+                    <div class="line-numbers">1
+2
+3
+4</div>
+                    <pre>pipeline trace
+[INFO] node=message.display_text status=FINISHED
+[DEBUG] render message=audit message 20260420
+[INFO] outputs={"_result": true, "_loop": 0, "_inner_loop": 0}</pre>
+                  </div>
+                </article>
+              </div>
+              <div class="bk-task-detail-source-block" data-detail-source-group="task-detail-panel" data-detail-source-id="manual-review" hidden>
+                <article class="bk-task-detail-block">
+                  <h3>调用日志</h3>
+                  <div class="bk-log-viewer bk-log-empty" aria-label="日志查看器">
+                    <div class="line-numbers">1</div>
+                    <div class="bk-log-empty-copy">暂无调用日志，节点尚未进入执行阶段。</div>
+                  </div>
+                </article>
+              </div>
+            </section>
+          </div>
+        </div>
+      </aside>
+    </main>
+  </div>
+</body>
+</html>
diff --git a/prototypes/serve.py b/prototypes/serve.py
new file mode 100644
index 0000000000..c606926fc5
--- /dev/null
+++ b/prototypes/serve.py
@@ -0,0 +1,578 @@
+#!/usr/bin/env python3
+"""Zero-dependency static preview server for BKFlow prototypes (stdlib only)."""
+
+from __future__ import annotations
+
+import argparse
+from datetime import datetime
+import json
+from html import escape
+import os
+import sys
+from http import HTTPStatus
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+from typing import Union
+from urllib.parse import unquote, urlparse
+
+try:
+    from prototypes.showcase_catalog import collect_feature_catalog, collect_showcase_stats
+except ImportError:  # pragma: no cover - fallback for direct `cd prototypes && python serve.py`
+    from showcase_catalog import collect_feature_catalog, collect_showcase_stats
+
+PROTOTYPES_ROOT = os.path.dirname(os.path.abspath(__file__))
+ASSETS_DIR = os.path.join(PROTOTYPES_ROOT, "assets")
+MASTERS_DIR = os.path.join(PROTOTYPES_ROOT, "masters")
+FEATURES_DIR = os.path.join(PROTOTYPES_ROOT, "features")
+EXAMPLES_DIR = os.path.join(PROTOTYPES_ROOT, "examples")
+DEFAULT_COVER_THEME = "mixed-admin"
+SUPPORTED_COVER_THEMES = {
+    "flow-editor": "Flow Editor",
+    "task-detail": "Task Detail",
+    "list-management": "List Management",
+    "config-panel": "Config Panel",
+    "mixed-admin": "Mixed Admin",
+}
+
+# Injected before </body> or </html>; polls /api/mtime every 1s and reloads on change.
+_RELOAD_SCRIPT = (
+    b"<script>"
+    b"(function(){"
+    b"var last=null;"
+    b"function tick(){"
+    b"fetch('/api/mtime').then(function(r){return r.json();}).then(function(d){"
+    b"var m=Number(d.mtime)||0;"
+    b"if(last!==null&&m>last){location.reload();return;}"
+    b"last=m;"
+    b"});"
+    b"}"
+    b"fetch('/api/mtime').then(function(r){return r.json();}).then(function(d){"
+    b"last=Number(d.mtime)||0;"
+    b"setInterval(tick,1000);"
+    b"});"
+    b"})();"
+    b"</script>"
+)
+
+
+def _is_safe_relpath(rel: str) -> bool:
+    if not rel or rel.startswith("/"):
+        return False
+    parts = rel.replace("\\", "/").split("/")
+    return ".." not in parts
+
+
+def _under_root(full: str, root: str) -> bool:
+    full_abs = os.path.abspath(full)
+    root_abs = os.path.abspath(root)
+    try:
+        os.path.commonpath([full_abs, root_abs])
+    except ValueError:
+        return False
+    return full_abs == root_abs or full_abs.startswith(root_abs + os.sep)
+
+
+def latest_mtime_under(bases: tuple[str, ...]) -> float:
+    """Latest mtime among non-hidden files under given directories."""
+    latest = 0.0
+    for base in bases:
+        if not os.path.isdir(base):
+            continue
+        for dirpath, dirnames, filenames in os.walk(base):
+            dirnames[:] = [d for d in dirnames if not d.startswith(".")]
+            try:
+                dir_mtime = os.path.getmtime(dirpath)
+            except OSError:
+                dir_mtime = None
+            if dir_mtime is not None and dir_mtime > latest:
+                latest = dir_mtime
+            for name in filenames:
+                if name.startswith("."):
+                    continue
+                path = os.path.join(dirpath, name)
+                try:
+                    m = os.path.getmtime(path)
+                except OSError:
+                    continue
+                if m > latest:
+                    latest = m
+    return latest
+
+
+def list_html_files() -> list[tuple[str, str]]:
+    """Return [(section, url_path), ...] for *.html under masters/features/examples."""
+    found: list[tuple[str, str]] = []
+    mapping = (("masters", MASTERS_DIR), ("features", FEATURES_DIR), ("examples", EXAMPLES_DIR))
+    for section, base in mapping:
+        if not os.path.isdir(base):
+            continue
+        for dirpath, dirnames, filenames in os.walk(base):
+            dirnames[:] = [d for d in dirnames if not d.startswith(".")]
+            for name in sorted(filenames):
+                if not name.lower().endswith(".html"):
+                    continue
+                full = os.path.join(dirpath, name)
+                rel = os.path.relpath(full, PROTOTYPES_ROOT)
+                url_path = rel.replace(os.sep, "/")
+                found.append((section, url_path))
+    found.sort(key=lambda x: (x[0], x[1]))
+    return found
+
+
+def inject_reload_script(html: bytes) -> bytes:
+    low = html.lower()
+    idx = low.rfind(b"</body>")
+    if idx != -1:
+        return html[:idx] + _RELOAD_SCRIPT + html[idx:]
+    idx = low.rfind(b"</html>")
+    if idx != -1:
+        return html[:idx] + _RELOAD_SCRIPT + html[idx:]
+    return html + _RELOAD_SCRIPT
+
+
+def _format_timestamp(value: float) -> str:
+    if not value:
+        return "暂无更新"
+    return datetime.fromtimestamp(value).strftime("%Y-%m-%d %H:%M")
+
+
+def _format_stat_value(value: object) -> str:
+    if value is None:
+        return "-"
+    if isinstance(value, float) and value.is_integer():
+        return str(int(value))
+    return str(value)
+
+
+def _normalize_cover_theme(theme: object) -> str:
+    value = str(theme or DEFAULT_COVER_THEME).strip().lower().replace("_", "-")
+    return value if value in SUPPORTED_COVER_THEMES else DEFAULT_COVER_THEME
+
+
+def _collect_filter_options(features: list[dict]) -> tuple[list[str], list[str]]:
+    statuses: list[str] = []
+    tags: list[str] = []
+    for feature in features:
+        status = str(feature.get("status") or "").strip()
+        if status and status not in statuses:
+            statuses.append(status)
+        feature_tags = feature.get("tags", [])
+        if not isinstance(feature_tags, list):
+            continue
+        for tag in feature_tags:
+            tag_value = str(tag).strip()
+            if tag_value and tag_value not in tags:
+                tags.append(tag_value)
+    return statuses, tags[:6]
+
+
+def _render_cover_theme_preview(theme: str) -> str:
+    normalized = _normalize_cover_theme(theme)
+    if normalized == "flow-editor":
+        return (
+            '<div class="cover-preview cover-preview--flow-editor">'
+            '<div class="cover-window">'
+            '<span class="cover-window-bar"></span>'
+            '<div class="cover-flow-canvas">'
+            '<span class="cover-flow-node cover-flow-node--input">表单</span>'
+            '<span class="cover-flow-link"></span>'
+            '<span class="cover-flow-node cover-flow-node--action">生成</span>'
+            '<span class="cover-flow-link"></span>'
+            '<span class="cover-flow-node cover-flow-node--review">审核</span>'
+            "</div>"
+            "</div>"
+            f'<span class="cover-theme-label">{SUPPORTED_COVER_THEMES[normalized]}</span>'
+            "</div>"
+        )
+    if normalized == "task-detail":
+        return (
+            '<div class="cover-preview cover-preview--task-detail">'
+            '<div class="cover-detail-shell">'
+            '<div class="cover-detail-sidebar">'
+            '<span></span><span></span><span></span>'
+            "</div>"
+            '<div class="cover-detail-main">'
+            '<span class="cover-detail-title"></span>'
+            '<span class="cover-detail-panel"></span>'
+            '<span class="cover-detail-panel cover-detail-panel--wide"></span>'
+            "</div>"
+            "</div>"
+            f'<span class="cover-theme-label">{SUPPORTED_COVER_THEMES[normalized]}</span>'
+            "</div>"
+        )
+    if normalized == "list-management":
+        return (
+            '<div class="cover-preview cover-preview--list-management">'
+            '<div class="cover-list-board">'
+            '<div class="cover-list-toolbar">'
+            '<span></span><span></span>'
+            "</div>"
+            '<div class="cover-list-table">'
+            '<span class="cover-list-row cover-list-row--head"></span>'
+            '<span class="cover-list-row"></span>'
+            '<span class="cover-list-row"></span>'
+            '<span class="cover-list-row"></span>'
+            "</div>"
+            f'<span class="cover-theme-label">{SUPPORTED_COVER_THEMES[normalized]}</span>'
+            "</div>"
+        )
+    if normalized == "config-panel":
+        return (
+            '<div class="cover-preview cover-preview--config-panel">'
+            '<div class="cover-config-form">'
+            '<span class="cover-config-field cover-config-field--label"></span>'
+            '<span class="cover-config-field"></span>'
+            '<span class="cover-config-field cover-config-field--label"></span>'
+            '<span class="cover-config-field"></span>'
+            '<span class="cover-config-field cover-config-field--wide"></span>'
+            "</div>"
+            f'<span class="cover-theme-label">{SUPPORTED_COVER_THEMES[normalized]}</span>'
+            "</div>"
+        )
+    return (
+        '<div class="cover-preview cover-preview--mixed-admin">'
+        '<div class="cover-mixed-grid">'
+        '<span class="cover-mixed-card"></span>'
+        '<span class="cover-mixed-card"></span>'
+        '<span class="cover-mixed-card cover-mixed-card--wide"></span>'
+        "</div>"
+        f'<span class="cover-theme-label">{SUPPORTED_COVER_THEMES[normalized]}</span>'
+        "</div>"
+    )
+
+
+def _render_filter_buttons(label: str, options: list[str], group: str) -> str:
+    buttons = [
+        f'<button type="button" class="showcase-filter-pill is-active" data-showcase-filter="all">{escape(label)}</button>'
+    ]
+    for option in options:
+        buttons.append(
+            f'<button type="button" class="showcase-filter-pill" data-showcase-filter="{escape(option)}">{escape(option)}</button>'
+        )
+    return "".join(buttons)
+
+
+def _render_feature_pages(feature: dict) -> str:
+    slug = escape(str(feature.get("slug") or ""))
+    pages = feature.get("featured_pages", [])
+    if not pages:
+        return "<p class=\"empty\">暂无代表页面。</p>"
+    items = []
+    for page in pages:
+        title = escape(str(page.get("title") or page.get("path") or ""))
+        summary = escape(str(page.get("summary") or ""))
+        path = escape(str(page.get("path") or ""))
+        items.append(
+            "<li class=\"showcase-page\">"
+            f'<a href="/features/{slug}/{path}"><strong>{title}</strong></a>'
+            f'<span>{summary or path}</span>'
+            "</li>"
+        )
+    return "<ul class=\"showcase-page-list\">" + "".join(items) + "</ul>"
+
+
+def _render_feature_card(feature: dict) -> str:
+    slug = escape(str(feature.get("slug") or ""))
+    title = escape(str(feature.get("title") or slug))
+    summary = escape(str(feature.get("summary") or ""))
+    status = escape(str(feature.get("status") or ""))
+    cover_theme = _normalize_cover_theme(feature.get("cover_theme") or feature.get("coverTheme"))
+    cover_label = escape(cover_theme.replace("-", " ").title())
+    updated_at = _format_timestamp(float(feature.get("updated_at") or 0))
+    page_count = _format_stat_value(feature.get("page_count"))
+    tags = feature.get("tags", [])
+    tag_values: list[str] = []
+    search_terms = [title, summary, status, slug]
+    tag_html = ""
+    if isinstance(tags, list) and tags:
+        tag_values = [str(tag).strip() for tag in tags if str(tag).strip()]
+        search_terms.extend(tag_values)
+        tag_html = "<div class=\"showcase-tags\">" + "".join(
+            f'<span class="showcase-tag">{escape(tag)}</span>' for tag in tag_values
+        ) + "</div>"
+    featured_pages = feature.get("featured_pages", [])
+    if isinstance(featured_pages, list):
+        for page in featured_pages:
+            if not isinstance(page, dict):
+                continue
+            page_title = str(page.get("title") or page.get("path") or "").strip()
+            page_summary = str(page.get("summary") or "").strip()
+            page_type = str(page.get("page_type") or "").strip()
+            if page_title:
+                search_terms.append(page_title)
+            if page_summary:
+                search_terms.append(page_summary)
+            if page_type:
+                search_terms.append(page_type)
+    return (
+        f'<article class="showcase-card" data-feature-card data-status="{status}" data-tags="{escape(",".join(tag_values))}" data-cover-theme="{escape(cover_theme)}" data-search-index="{escape(" ".join(search_terms))}">'
+        f"{_render_cover_theme_preview(cover_theme)}"
+        f'<div class="showcase-card-head"><h3>{title}</h3><span class="showcase-badge">{status}</span></div>'
+        f'<p class="showcase-cover-meta">{cover_label}</p>'
+        f"<p>{summary}</p>"
+        f"<dl class=\"showcase-meta\">"
+        f"<div><dt>Slug</dt><dd>{slug}</dd></div>"
+        f"<div><dt>页面数</dt><dd>{page_count}</dd></div>"
+        f"<div><dt>最近更新</dt><dd>{updated_at}</dd></div>"
+        f"</dl>"
+        f"{tag_html}"
+        f'<div class="showcase-actions"><a class="bk-button bk-button-primary" href="/features/{slug}/">查看这组原型</a></div>'
+        f"{_render_feature_pages(feature)}"
+        "</article>"
+    )
+
+
+def _render_recent_updates(features: list[dict]) -> str:
+    if not features:
+        return '<p class="empty">暂无最近更新的原型。</p>'
+    items = []
+    for feature in sorted(features, key=lambda item: (item.get("updated_at") or 0, str(item.get("slug") or "")), reverse=True)[:3]:
+        title = escape(str(feature.get("title") or feature.get("slug") or ""))
+        summary = escape(str(feature.get("summary") or ""))
+        updated_at = _format_timestamp(float(feature.get("updated_at") or 0))
+        items.append(
+            "<li>"
+            f'<strong>{title}</strong>'
+            f"<span>{summary}</span>"
+            f"<small>{updated_at}</small>"
+            "</li>"
+        )
+    return "<ul class=\"showcase-updates\">" + "".join(items) + "</ul>"
+
+
+def _render_representative_pages(features: list[dict]) -> str:
+    groups = []
+    for feature in features:
+        feature_title = escape(str(feature.get("title") or feature.get("slug") or ""))
+        feature_summary = escape(str(feature.get("summary") or ""))
+        page_items = []
+        for page in feature.get("featured_pages", [])[:2]:
+            if not isinstance(page, dict):
+                continue
+            page_title = escape(str(page.get("title") or page.get("path") or ""))
+            page_summary = escape(str(page.get("summary") or ""))
+            page_type = escape(str(page.get("page_type") or ""))
+            page_path = escape(str(page.get("path") or ""))
+            meta_bits = [f'<span class="showcase-page-feature">所属 Feature：{feature_title}</span>']
+            if page_type:
+                meta_bits.append(f'<span class="showcase-page-type">{page_type}</span>')
+            if page_summary:
+                meta_bits.append(f'<span class="showcase-page-summary">{page_summary}</span>')
+            page_items.append(
+                "<li class=\"showcase-page-item\">"
+                f'<a href="/features/{escape(str(feature.get("slug") or ""))}/{page_path}"><strong>{page_title}</strong></a>'
+                f'<div class="showcase-page-meta">{"".join(meta_bits)}</div>'
+                "</li>"
+            )
+        if not page_items:
+            continue
+        groups.append(
+            "<article class=\"showcase-feature-pages\">"
+            '<div class="showcase-feature-pages-head">'
+            '<p class="showcase-feature-pages-kicker">所属 Feature</p>'
+            f"<h3>{feature_title}</h3>"
+            f'<p class="showcase-feature-pages-summary">{feature_summary}</p>'
+            "</div>"
+            '<ul class="showcase-page-list">'
+            + "".join(page_items)
+            + "</ul>"
+            "</article>"
+        )
+    if not groups:
+        return '<p class="empty">暂无代表页面。</p>'
+    return "<div class=\"showcase-feature-pages-grid\">" + "".join(groups) + "</div>"
+
+
+def _render_tool_resources() -> str:
+    resources = [
+        ("masters/", "长期母版入口"),
+        ("features/", "需求原型目录"),
+        ("examples/component-showcase.html", "组件参考样例"),
+        ("serve.py", "本地预览服务器"),
+        ("showcase_catalog.py", "展厅数据聚合"),
+    ]
+    items = "".join(
+        f'<li><a href="/{escape(path)}">{escape(path)}</a><span>{escape(label)}</span></li>'
+        for path, label in resources
+    )
+    return f'<ul class="showcase-resources">{items}</ul>'
+
+
+def _render_homepage() -> bytes:
+    features = collect_feature_catalog(FEATURES_DIR)
+    stats = collect_showcase_stats(FEATURES_DIR, MASTERS_DIR)
+    statuses, tags = _collect_filter_options(features)
+    stat_items = [
+        ("Feature 目录", stats.get("feature_count")),
+        ("Feature 页面", stats.get("feature_page_count")),
+        ("母版页面", stats.get("master_page_count")),
+        ("HTML 总数", stats.get("html_page_count")),
+    ]
+    stat_html = "".join(
+        f'<div class="showcase-stat"><strong>{escape(label)}</strong><span>{escape(_format_stat_value(value))}</span></div>'
+        for label, value in stat_items
+    )
+    featured_cards = "".join(_render_feature_card(feature) for feature in features) or ""
+    feature_empty = '<p class="showcase-empty" data-showcase-empty hidden>暂无匹配的 Feature，试试搜索关键词或切换筛选条件。</p>'
+    feature_summary = f'<p class="showcase-summary" data-showcase-summary>当前展示 {len(features)} 个 Feature</p>'
+    status_filters = _render_filter_buttons("全部状态", statuses, "status")
+    tag_filters = _render_filter_buttons("全部标签", tags, "tag")
+    recent_updates = _render_recent_updates(features)
+    representative_pages = _render_representative_pages(features)
+
+    lines = [
+        "<!DOCTYPE html>",
+        '<html lang="zh-CN">',
+        "<head>",
+        '<meta charset="utf-8">',
+        "<title>BKFlow 原型展厅</title>",
+        '<link rel="stylesheet" href="/assets/bkflow-showcase.css">',
+        '<script defer src="/assets/bkflow-showcase.js"></script>',
+        "</head>",
+        "<body>",
+        '<main class="showcase-shell" data-showcase-root>',
+        '<section class="showcase-hero">',
+        '<p class="showcase-kicker">Prototype Showcase</p>',
+        "<h1>BKFlow 原型展厅</h1>",
+        "<p>features 是首页主角，masters 和 examples 则作为次级资源区。你可以先看最近更新，再进入具体 Feature，最后打开代表页面或工具资源继续搭建。</p>",
+        '<div class="showcase-actions"><a class="bk-button bk-button-primary" href="#feature-showcase">查看 Feature 展区</a><a class="bk-button" href="/masters/">浏览母版</a><a class="bk-button" href="/examples/component-showcase.html">打开组件参考</a></div>',
+        f'<div class="showcase-stats">{stat_html}</div>',
+        "</section>",
+        '<section class="showcase-section">',
+        "<h2>最近更新</h2>",
+        recent_updates,
+        "</section>",
+        '<section class="showcase-section" id="feature-showcase">',
+        "<h2>Feature 展区</h2>",
+        '<div class="showcase-toolbar">',
+        '<label class="showcase-search" for="showcase-search">',
+        '<span>搜索</span>',
+        '<input id="showcase-search" type="search" placeholder="搜索 Feature、标签或关键字" data-showcase-search>',
+        "</label>",
+        '<div class="showcase-filter-cluster">',
+        '<div class="showcase-filter-group">',
+        '<span class="showcase-filter-label">状态</span>',
+        f'<div class="showcase-filter-pills" data-showcase-filter-group="status">{status_filters}</div>',
+        "</div>",
+        '<div class="showcase-filter-group">',
+        '<span class="showcase-filter-label">标签</span>',
+        f'<div class="showcase-filter-pills" data-showcase-filter-group="tag">{tag_filters}</div>',
+        "</div>",
+        "</div>",
+        "</div>",
+        feature_summary,
+        '<div class="showcase-grid" data-showcase-grid>',
+        featured_cards,
+        "</div>",
+        feature_empty,
+        "</section>",
+        '<section class="showcase-section">',
+        "<h2>代表页面</h2>",
+        representative_pages,
+        "</section>",
+        '<section class="showcase-section">',
+        "<h2>工具资源</h2>",
+        _render_tool_resources(),
+        "</section>",
+        "</main>",
+        "</body>",
+        "</html>",
+    ]
+    return inject_reload_script("\n".join(lines).encode("utf-8"))
+
+
+def _json_mtime_value(m: float) -> Union[int, float]:
+    """Encode mtime: integer 0 for no files, else preserve sub-second if needed."""
+    if m == 0.0:
+        return 0
+    return int(m) if m == int(m) else m
+
+
+class PrototypeRequestHandler(SimpleHTTPRequestHandler):
+    """Serves prototypes/, index at /, mtime API, HTML auto-reload injection."""
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory=PROTOTYPES_ROOT, **kwargs)
+
+    def log_message(self, format: str, *args) -> None:  # noqa: A003
+        sys.stderr.write("{} - - [{}] {}\n".format(self.address_string(), self.log_date_time_string(), format % args))
+
+    def do_GET(self) -> None:  # noqa: N802
+        parsed = urlparse(self.path)
+        path = unquote(parsed.path)
+        norm = path if path.endswith("/") or path == "" else path.rstrip("/")
+        if path == "/" or path == "":
+            self._send_index()
+            return
+        if norm == "/api/mtime":
+            self._send_mtime_json()
+            return
+
+        rel = path.lstrip("/")
+        if not _is_safe_relpath(rel):
+            self.send_error(HTTPStatus.FORBIDDEN)
+            return
+        full = os.path.normpath(os.path.join(PROTOTYPES_ROOT, rel))
+        if os.path.isdir(full):
+            index_html = os.path.join(full, "index.html")
+            if os.path.isfile(index_html):
+                self._send_html_with_reload(index_html)
+                return
+        if not _under_root(full, PROTOTYPES_ROOT) or not os.path.isfile(full):
+            super().do_GET()
+            return
+        if full.lower().endswith(".html"):
+            self._send_html_with_reload(full)
+            return
+        super().do_GET()
+
+    def _send_index(self) -> None:
+        body = _render_homepage()
+        self.send_response(HTTPStatus.OK)
+        self.send_header("Content-Type", "text/html; charset=utf-8")
+        self.send_header("Content-Length", str(len(body)))
+        self.end_headers()
+        self.wfile.write(body)
+
+    def _send_mtime_json(self) -> None:
+        m = latest_mtime_under((MASTERS_DIR, FEATURES_DIR, EXAMPLES_DIR, ASSETS_DIR))
+        payload = json.dumps({"mtime": _json_mtime_value(m)}).encode("utf-8")
+        self.send_response(HTTPStatus.OK)
+        self.send_header("Content-Type", "application/json; charset=utf-8")
+        self.send_header("Content-Length", str(len(payload)))
+        self.end_headers()
+        self.wfile.write(payload)
+
+    def _send_html_with_reload(self, full_path: str) -> None:
+        try:
+            with open(full_path, "rb") as f:
+                raw = f.read()
+        except OSError:
+            self.send_error(HTTPStatus.NOT_FOUND)
+            return
+        body = inject_reload_script(raw)
+        self.send_response(HTTPStatus.OK)
+        self.send_header("Content-Type", "text/html; charset=utf-8")
+        self.send_header("Content-Length", str(len(body)))
+        self.end_headers()
+        self.wfile.write(body)
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(description="Serve BKFlow prototypes with live reload.")
+    parser.add_argument("--host", default="0.0.0.0", help="Bind address (default: 0.0.0.0)")
+    parser.add_argument("--port", type=int, default=9080, help="Port (default: 9080)")
+    args = parser.parse_args()
+    server = HTTPServer((args.host, args.port), PrototypeRequestHandler)
+    print(
+        f"Serving prototypes from {PROTOTYPES_ROOT} at http://{args.host}:{args.port}/",
+        file=sys.stderr,
+    )
+    try:
+        server.serve_forever()
+    except KeyboardInterrupt:
+        print("\nShutting down.", file=sys.stderr)
+        server.server_close()
+
+
+if __name__ == "__main__":
+    main()
diff --git a/prototypes/showcase_catalog.py b/prototypes/showcase_catalog.py
new file mode 100644
index 0000000000..bbb51a6524
--- /dev/null
+++ b/prototypes/showcase_catalog.py
@@ -0,0 +1,167 @@
+"""Catalog helpers for the BKFlow prototypes showcase homepage."""
+
+from __future__ import annotations
+
+import json
+import os
+from pathlib import Path
+from typing import Any
+
+DEFAULT_STATUS = "待补充"
+DEFAULT_SUMMARY = "尚未补充首页摘要"
+DEFAULT_THEME = "mixed-admin"
+
+_DEFAULT_ORDER = 10**9
+_REPRESENTATIVE_PAGE_LIMIT = 2
+
+
+def _safe_read_json(path: Path) -> dict[str, Any]:
+    try:
+        data = json.loads(path.read_text(encoding="utf-8"))
+    except (OSError, json.JSONDecodeError, UnicodeDecodeError):
+        return {}
+    return data if isinstance(data, dict) else {}
+
+
+def _humanize_slug(slug: str) -> str:
+    return slug.replace("-", " ").replace("_", " ").strip().title() or slug
+
+
+def _iter_feature_dirs(features_dir: Path) -> list[Path]:
+    if not features_dir.is_dir():
+        return []
+    return [
+        item
+        for item in sorted(features_dir.iterdir(), key=lambda path: path.name)
+        if item.is_dir() and not item.name.startswith("_") and not item.name.startswith(".")
+    ]
+
+
+def _iter_html_pages(root: Path) -> list[Path]:
+    if not root.is_dir():
+        return []
+    pages = [path for path in root.rglob("*.html") if path.is_file()]
+    pages.sort(key=lambda path: str(path.relative_to(root)).replace(os.sep, "/"))
+    return pages
+
+
+def _latest_mtime(paths: list[Path]) -> float:
+    latest = 0.0
+    for path in paths:
+        try:
+            mtime = path.stat().st_mtime
+        except OSError:
+            continue
+        if mtime > latest:
+            latest = mtime
+    return latest
+
+
+def _resolve_feature_page(feature_dir: Path, rel_path: str) -> Path | None:
+    candidate = (feature_dir / rel_path).resolve()
+    try:
+        feature_root = feature_dir.resolve()
+    except OSError:
+        return None
+    try:
+        candidate.relative_to(feature_root)
+    except ValueError:
+        return None
+    if not candidate.is_file():
+        return None
+    return candidate
+
+
+def _normalize_feature_page(feature_dir: Path, page: dict[str, Any]) -> dict[str, Any] | None:
+    rel_path = str(page.get("path") or "").strip()
+    if not rel_path:
+        return None
+    resolved = _resolve_feature_page(feature_dir, rel_path)
+    if resolved is None:
+        return None
+    title = str(page.get("title") or resolved.stem).strip() or resolved.stem
+    summary = str(page.get("summary") or "").strip()
+    page_type = str(page.get("pageType") or page.get("page_type") or "").strip()
+    normalized = {
+        "path": rel_path.replace("\\", "/"),
+        "title": title,
+        "summary": summary,
+        "page_type": page_type,
+    }
+    return normalized
+
+
+def _default_feature_pages(feature_dir: Path) -> list[dict[str, Any]]:
+    pages = []
+    for path in _iter_html_pages(feature_dir)[:_REPRESENTATIVE_PAGE_LIMIT]:
+        rel_path = path.relative_to(feature_dir).as_posix()
+        pages.append(
+            {
+                "path": rel_path,
+                "title": path.stem,
+                "summary": "",
+                "page_type": "",
+            }
+        )
+    return pages
+
+
+def collect_feature_catalog(features_dir: str) -> list[dict]:
+    """Collect normalized showcase data for feature directories."""
+
+    base_dir = Path(features_dir)
+    catalog: list[dict[str, Any]] = []
+
+    for feature_dir in _iter_feature_dirs(base_dir):
+        meta_path = feature_dir / "feature.meta.json"
+        meta = _safe_read_json(meta_path) if meta_path.is_file() else {}
+        html_pages = _iter_html_pages(feature_dir)
+        valid_featured_pages: list[dict[str, Any]] = []
+
+        featured_pages = meta.get("featuredPages", [])
+        for page in featured_pages if isinstance(featured_pages, list) else []:
+            if not isinstance(page, dict):
+                continue
+            normalized_page = _normalize_feature_page(feature_dir, page)
+            if normalized_page is not None:
+                valid_featured_pages.append(normalized_page)
+
+        if not valid_featured_pages:
+            valid_featured_pages = _default_feature_pages(feature_dir)
+
+        catalog.append(
+            {
+                "slug": feature_dir.name,
+                "title": str(meta.get("title") or _humanize_slug(feature_dir.name)).strip() or feature_dir.name,
+                "summary": str(meta.get("summary") or DEFAULT_SUMMARY).strip() or DEFAULT_SUMMARY,
+                "status": str(meta.get("status") or DEFAULT_STATUS).strip() or DEFAULT_STATUS,
+                "cover_theme": str(meta.get("coverTheme") or DEFAULT_THEME).strip() or DEFAULT_THEME,
+                "order": meta.get("order") if isinstance(meta.get("order"), int) else _DEFAULT_ORDER,
+                "tags": list(meta.get("tags")) if isinstance(meta.get("tags"), list) else [],
+                "page_count": len(html_pages),
+                "updated_at": _latest_mtime(html_pages + [meta_path] if meta_path.is_file() else html_pages),
+                "featured_pages": valid_featured_pages,
+            }
+        )
+
+    catalog.sort(key=lambda item: (item["order"], -item["updated_at"], item["slug"]))
+    return catalog
+
+
+def collect_showcase_stats(features_dir: str, masters_dir: str) -> dict:
+    """Collect lightweight showcase summary metrics."""
+
+    features_root = Path(features_dir)
+    masters_root = Path(masters_dir)
+    feature_dirs = _iter_feature_dirs(features_root)
+    feature_pages = [path for feature_dir in feature_dirs for path in _iter_html_pages(feature_dir)]
+    meta_files = [feature_dir / "feature.meta.json" for feature_dir in feature_dirs if (feature_dir / "feature.meta.json").is_file()]
+    master_pages = _iter_html_pages(masters_root)
+
+    return {
+        "feature_count": len(feature_dirs),
+        "feature_page_count": len(feature_pages),
+        "master_page_count": len(master_pages),
+        "html_page_count": len(feature_pages) + len(master_pages),
+        "updated_at": max(_latest_mtime(feature_pages), _latest_mtime(meta_files), _latest_mtime(master_pages)),
+    }
diff --git a/tests/interface/prototypes/__init__.py b/tests/interface/prototypes/__init__.py
new file mode 100644
index 0000000000..242f53f75c
--- /dev/null
+++ b/tests/interface/prototypes/__init__.py
@@ -0,0 +1 @@
+"""Prototype interface tests."""
diff --git a/tests/interface/prototypes/test_bkflow_engine_admin_feature.py b/tests/interface/prototypes/test_bkflow_engine_admin_feature.py
new file mode 100644
index 0000000000..911df99cee
--- /dev/null
+++ b/tests/interface/prototypes/test_bkflow_engine_admin_feature.py
@@ -0,0 +1,206 @@
+import re
+from pathlib import Path
+from typing import Dict, Optional, Tuple
+
+ROOT = Path("prototypes/features/bkflow-engine-admin-prototype-overhaul")
+README = ROOT / "README.md"
+INDEX = ROOT / "index.html"
+ASSET_JS = Path("prototypes/assets/bkflow-prototype.js")
+
+SPACE_PAGES = [
+    "template-list.html",
+    "flow-view.html",
+    "flow-edit.html",
+    "flow-debug.html",
+    "task-list.html",
+    "debug-task-list.html",
+    "task-detail-complete.html",
+    "task-detail-failed.html",
+    "decision-list.html",
+    "decision-editor.html",
+    "space-config.html",
+    "credential-list.html",
+    "label-list.html",
+    "statistics-exception.html",
+]
+SYSTEM_PAGES = [
+    "space-config-list.html",
+    "module-config-list.html",
+]
+PLUGIN_PAGES = [
+    "plugin-list.html",
+]
+
+EXPECTED_PAGE_FILES = {
+    "Space": [ROOT / "pages" / "space" / name for name in SPACE_PAGES],
+    "System": [ROOT / "pages" / "system" / name for name in SYSTEM_PAGES],
+    "Plugin": [ROOT / "pages" / "plugin" / name for name in PLUGIN_PAGES],
+}
+
+EXPECTED_SECTION_LINKS = {
+    "Space": [f"./pages/space/{name}" for name in SPACE_PAGES],
+    "System": [f"./pages/system/{name}" for name in SYSTEM_PAGES],
+    "Plugin": [f"./pages/plugin/{name}" for name in PLUGIN_PAGES],
+}
+
+CRITICAL_INDEX_LINKS = [
+    "./pages/space/flow-edit.html",
+    "./pages/space/task-detail-complete.html",
+    "./pages/system/module-config-list.html",
+    "./pages/plugin/plugin-list.html",
+]
+
+REPRESENTATIVE_PAGES = [
+    ROOT / "pages" / "space" / "flow-edit.html",
+    ROOT / "pages" / "space" / "task-detail-complete.html",
+    ROOT / "pages" / "system" / "module-config-list.html",
+    ROOT / "pages" / "plugin" / "plugin-list.html",
+]
+
+TOP_NAV_LANDING_LINKS = {
+    "space": {
+        "space": "template-list.html",
+        "system": "../system/space-config-list.html",
+        "plugin": "../plugin/plugin-list.html",
+    },
+    "system": {
+        "space": "../space/template-list.html",
+        "system": "space-config-list.html",
+        "plugin": "../plugin/plugin-list.html",
+    },
+    "plugin": {
+        "space": "../space/template-list.html",
+        "system": "../system/space-config-list.html",
+        "plugin": "plugin-list.html",
+    },
+}
+
+
+def read_text(path: Path) -> str:
+    return path.read_text(encoding="utf-8")
+
+
+def extract_sections(index_text: str) -> dict[str, str]:
+    pattern = re.compile(
+        r'<section class="group-card">.*?<h2>(Space|System|Plugin)</h2>.*?<ul class="page-list">(.*?)</ul>',
+        re.S,
+    )
+    return {title: body for title, body in pattern.findall(index_text)}
+
+
+def extract_top_nav_links(page_text: str) -> Dict[str, Tuple[Optional[str], bool]]:
+    items: Dict[str, Tuple[Optional[str], bool]] = {}
+    pattern = re.compile(
+        r'<li(?P<attrs>[^>]*)class="[^"]*bk-navigation-header-nav-item[^"]*"(?P<rest>[^>]*)>(?P<body>.*?)</li>',
+        re.S,
+    )
+    for match in pattern.finditer(page_text):
+        attrs = match.group(0)
+        group_match = re.search(r'data-nav-group="([^"]+)"', attrs)
+        if not group_match:
+            continue
+        nav_link_match = re.search(r'data-nav-link="([^"]+)"', attrs)
+        items[group_match.group(1)] = (
+            nav_link_match.group(1) if nav_link_match else None,
+            re.search(r'class="[^"]*\bactive\b', attrs) is not None,
+        )
+    return items
+
+
+def count_readme_masters(readme_text: str) -> int:
+    match = re.search(r"## Masters Used\n(.*?)\n## Page Entries", readme_text, re.S)
+    assert match, "Masters Used section missing"
+    return len(re.findall(r"^- `", match.group(1), re.M))
+
+
+def test_feature_readme_links_spec_and_plan():
+    text = read_text(README)
+
+    assert "Spec: `docs/specs/2026-04-21-bkflow-engine-admin-prototype-overhaul-design.md`" in text
+    assert "Plan: `docs/plans/2026-04-21-bkflow-engine-admin-prototype-overhaul.md`" in text
+
+
+def test_feature_index_groups_pages_by_space_system_and_plugin():
+    text = read_text(INDEX)
+    sections = extract_sections(text)
+
+    assert set(sections) == {"Space", "System", "Plugin"}
+
+    for group, expected_links in EXPECTED_SECTION_LINKS.items():
+        section = sections[group]
+        for link in expected_links:
+            assert link in section, (group, link)
+
+
+def test_expected_feature_pages_exist():
+    for group, paths in EXPECTED_PAGE_FILES.items():
+        for path in paths:
+            assert path.is_file(), (group, path)
+
+
+def test_index_links_to_critical_representative_pages():
+    text = read_text(INDEX)
+
+    for href in CRITICAL_INDEX_LINKS:
+        assert href in text, href
+
+
+def test_representative_pages_define_cross_page_top_nav_targets_and_shared_js_supports_them():
+    js = read_text(ASSET_JS)
+
+    for token in [
+        'getAttribute("data-nav-link")',
+        "window.location.href = navLink",
+        'navItem.classList.contains("active")',
+    ]:
+        assert token in js
+
+    for path in REPRESENTATIVE_PAGES:
+        page_text = read_text(path)
+        nav_items = extract_top_nav_links(page_text)
+        group_name = path.parent.name
+
+        assert set(nav_items) == {"space", "system", "plugin"}, path
+        assert sum(1 for _, is_active in nav_items.values() if is_active) == 1, path
+
+        for group, expected_link in TOP_NAV_LANDING_LINKS[group_name].items():
+            actual_link, _ = nav_items[group]
+            assert actual_link == expected_link, (path, group, actual_link, expected_link)
+
+
+def test_debug_task_detail_pages_preserve_debug_route_backlink_and_source_template_context():
+    expected_tokens = [
+        'class="bk-task-detail-back" href="debug-task-list.html">← 返回调试任务列表</a>',
+        '源调试模板 <a href="flow-debug.html">/template/mock/true/2166/</a>',
+    ]
+
+    for path in [
+        ROOT / "pages" / "space" / "task-detail-complete.html",
+        ROOT / "pages" / "space" / "task-detail-failed.html",
+    ]:
+        text = read_text(path)
+        for token in expected_tokens:
+            assert token in text, (path, token)
+
+
+def test_index_hero_master_count_matches_feature_readme_inventory():
+    readme_text = read_text(README)
+    index_text = read_text(INDEX)
+
+    master_count = count_readme_masters(readme_text)
+
+    assert master_count == 11
+    assert f"<strong>Masters</strong> {master_count} referenced" in index_text
+
+
+def test_representative_pages_use_nested_asset_paths():
+    expected_tokens = [
+        'href="../../../../assets/bkflow-prototype.css"',
+        'src="../../../../assets/bkflow-prototype.js"',
+        'src="../../../../assets/icons/bkflow-logo.svg"',
+    ]
+
+    for path in REPRESENTATIVE_PAGES:
+        text = read_text(path)
+        for token in expected_tokens:
+            assert token in text, (path, token)
diff --git a/tests/interface/prototypes/test_flow_editor_contract.py b/tests/interface/prototypes/test_flow_editor_contract.py
new file mode 100644
index 0000000000..64a9b4a5d5
--- /dev/null
+++ b/tests/interface/prototypes/test_flow_editor_contract.py
@@ -0,0 +1,149 @@
+from pathlib import Path
+import re
+
+
+ROOT = Path("prototypes")
+FLOW_EDITOR = ROOT / "masters" / "flow-editor"
+STATES = FLOW_EDITOR / "states"
+ASSETS = ROOT / "assets"
+
+
+def read_text(path: Path) -> str:
+    return path.read_text(encoding="utf-8")
+
+
+def test_flow_editor_master_files_exist():
+    required = [
+        FLOW_EDITOR / "README.md",
+        FLOW_EDITOR / "template.html",
+        STATES / "node-selected.html",
+        STATES / "save-ready.html",
+        STATES / "publish-confirm.html",
+        STATES / "mock-debug-confirm.html",
+    ]
+
+    for path in required:
+        assert path.is_file(), path
+
+
+def test_flow_editor_readme_describes_canvas_drawer_and_release_flow():
+    text = read_text(FLOW_EDITOR / "README.md")
+
+    for token in [
+        "graph-style flow editing pages",
+        "single-click selection",
+        "double-click node configuration drawer",
+        "global variables floating layer",
+        "save / publish / debug header actions",
+    ]:
+        assert token in text
+
+
+def test_flow_editor_template_covers_header_canvas_toolbar_drawer_and_confirm_layers():
+    template = read_text(FLOW_EDITOR / "template.html")
+
+    for token in [
+        "编辑流程",
+        "返回流程列表",
+        "流程版本",
+        "草稿",
+        "1.0.0",
+        "保存",
+        "发布",
+        "调试",
+        "流程画布",
+        "节点悬浮工具条",
+        "节点配置",
+        "基础信息",
+        "输入参数",
+        "输出参数",
+        "全局变量",
+        "_system.task_name",
+        "_system.task_id",
+        "版本描述",
+        "确定保存Mock数据并去执行调试?",
+        'data-node-select="flow-editor-main"',
+        'data-node-toolbar="#flow-node-toolbar"',
+        'data-dblopen="flow-node-config-drawer"',
+        'data-save-target="#flow-editor-save"',
+        'data-disable-target="#flow-editor-save"',
+        'data-enable-target="#flow-editor-publish"',
+        'data-open="flow-publish-dialog"',
+        'data-open="flow-mock-debug-dialog"',
+        'data-open="flow-global-vars-dialog"',
+    ]:
+        assert token in template
+
+
+def test_flow_editor_state_pages_capture_selected_save_ready_publish_and_mock_debug_steps():
+    node_selected = read_text(STATES / "node-selected.html")
+    save_ready = read_text(STATES / "save-ready.html")
+    publish_confirm = read_text(STATES / "publish-confirm.html")
+    mock_debug_confirm = read_text(STATES / "mock-debug-confirm.html")
+
+    assert "bk-flow-node is-selected" in node_selected
+    assert "bk-flow-node-toolbar is-visible" in node_selected
+    assert "flow-node-config-drawer" in node_selected
+    assert "bk-sideslider is-show" not in node_selected
+    assert 'data-open="flow-mock-debug-dialog"' in node_selected
+    assert ">发布蓝鲸作业</span>" in node_selected
+    assert ">节点悬浮工具条</span>" not in node_selected
+
+    assert "bk-save-button is-enabled" in save_ready
+    assert 'id="flow-editor-publish"' in save_ready
+    assert "is-disabled" in save_ready
+
+    assert 'id="flow-publish-dialog"' in publish_confirm
+    assert "bk-dialog is-show" in publish_confirm
+    assert "1.0.0" in publish_confirm
+    assert "版本描述" in publish_confirm
+
+    assert 'id="flow-mock-debug-dialog"' in mock_debug_confirm
+    assert "bk-dialog is-show" in mock_debug_confirm
+    assert "确定保存Mock数据并去执行调试?" in mock_debug_confirm
+    assert 'data-open="flow-mock-debug-dialog"' in mock_debug_confirm
+
+    publish_button = re.search(
+        r'<button[^>]*id="flow-editor-publish"[^>]*>',
+        mock_debug_confirm,
+        re.DOTALL,
+    )
+    assert publish_button, mock_debug_confirm
+    assert "is-disabled" in publish_button.group(0)
+    assert "disabled" in publish_button.group(0)
+
+
+def test_shared_assets_expose_minimal_flow_editor_hooks():
+    css = read_text(ASSETS / "bkflow-prototype.css")
+    js = read_text(ASSETS / "bkflow-prototype.js")
+
+    for token in [
+        ".bk-flow-editor",
+        ".bk-flow-editor-header",
+        ".bk-flow-canvas",
+        ".bk-flow-node",
+        ".bk-flow-node-toolbar",
+        ".bk-flow-node-toolbar.is-visible",
+        ".bk-flow-vars-float",
+    ]:
+        assert token in css
+
+    for token in [
+        "data-node-select",
+        "data-node-toolbar",
+        "data-dblopen",
+        "data-enable-target",
+        "data-disable-target",
+        'removeAttribute("disabled")',
+        'setAttribute("disabled", "disabled")',
+    ]:
+        assert token in js
+
+    assert "node.closest(" in js
+    assert ".bk-flow-editor" in js
+    assert ".bk-flow-editor-shell" in js
+    assert "root.querySelectorAll(" in js
+    assert '[data-node-select="' in js
+    assert "toolbarSelector" in js
+    assert "document.querySelectorAll('[data-node-select=\"" not in js
+    assert "document.querySelectorAll(toolbarSelector)" not in js
diff --git a/tests/interface/prototypes/test_master_contract.py b/tests/interface/prototypes/test_master_contract.py
new file mode 100644
index 0000000000..def54a5a16
--- /dev/null
+++ b/tests/interface/prototypes/test_master_contract.py
@@ -0,0 +1,269 @@
+from pathlib import Path
+import re
+
+
+ROOT = Path("prototypes")
+SHARED = ROOT / "masters" / "_shared"
+OVERLAYS = ROOT / "masters" / "overlays"
+MASTERS = ROOT / "masters"
+ASSETS = ROOT / "assets"
+LIST_MASTER = MASTERS / "list-page"
+CONFIG_MASTER = MASTERS / "config-page"
+ENGINE_MASTER = MASTERS / "engine-panel"
+DECISION_MASTER = MASTERS / "decision-editor"
+
+
+def read_text(path: Path) -> str:
+    return path.read_text(encoding="utf-8")
+
+
+def test_shared_shells_and_overlay_files_exist():
+    required = [
+        SHARED / "space-shell.html",
+        SHARED / "system-shell.html",
+        SHARED / "plugin-shell.html",
+        OVERLAYS / "README.md",
+        OVERLAYS / "dialogs.html",
+        OVERLAYS / "sidesliders.html",
+    ]
+
+    for path in required:
+        assert path.is_file(), path
+
+
+def test_shared_shells_keep_common_header_and_distinct_sidebars():
+    shells = {
+        "space": SHARED / "space-shell.html",
+        "system": SHARED / "system-shell.html",
+        "plugin": SHARED / "plugin-shell.html",
+    }
+
+    for name, path in shells.items():
+        text = read_text(path)
+        assert "<header" in text
+        assert "bk-prototype-shell" in text
+        assert "bk-prototype-topbar" in text
+        assert f'data-nav-group="{name}"' in text
+        assert "data-toggle-target" in text
+        assert "data-toggle-class" in text
+
+    assert "空间选择区" in read_text(shells["space"])
+    assert "空间侧栏" in read_text(shells["space"])
+    assert "系统管理侧栏" in read_text(shells["system"])
+    assert "插件侧栏" in read_text(shells["plugin"])
+
+
+def test_shared_shell_data_page_items_map_to_real_panels():
+    shells = {
+        "space-shell": read_text(SHARED / "space-shell.html"),
+        "system-shell": read_text(SHARED / "system-shell.html"),
+        "plugin-shell": read_text(SHARED / "plugin-shell.html"),
+    }
+
+    for shell_name, text in shells.items():
+        data_pages = set(re.findall(r'data-page="([^"]+)"', text))
+        panel_ids = set(re.findall(r'<section class="bk-page-panel" id="([^"]+)"', text))
+        panel_ids.update(re.findall(r'<div class="bk-page-panel" id="([^"]+)"', text))
+
+        assert data_pages, shell_name
+        assert data_pages <= panel_ids, (shell_name, data_pages - panel_ids)
+
+
+def test_overlay_masters_cover_required_dialog_and_sideslider_patterns():
+    dialogs = read_text(OVERLAYS / "dialogs.html")
+    sidesliders = read_text(OVERLAYS / "sidesliders.html")
+
+    assert "删除确认" in dialogs
+    assert "发布确认" in dialogs
+    assert "异常提示" in dialogs
+    assert "表单编辑侧滑" in sidesliders
+    assert "只读详情侧滑" in sidesliders
+
+
+def test_shared_assets_expose_generic_interaction_hooks():
+    css = read_text(ASSETS / "bkflow-prototype.css")
+    js = read_text(ASSETS / "bkflow-prototype.js")
+
+    for token in [
+        ".bk-prototype-shell",
+        ".bk-right-panel",
+        ".bk-save-button.is-disabled",
+        ".bk-save-button.is-enabled",
+    ]:
+        assert token in css
+
+    for token in [
+        "data-nav-group",
+        "data-toggle-target",
+        "data-toggle-class",
+        "data-right-panel-open",
+        "data-right-panel-close",
+        "data-save-target",
+        "data-open",
+        "data-close",
+        "data-page",
+        ".bk-page-panel",
+    ]:
+        assert token in js
+
+
+def test_shared_assets_do_not_expose_old_toolkit_only_behaviors():
+    js = read_text(ASSETS / "bkflow-prototype.js")
+
+    forbidden_tokens = [
+        "data-sortable",
+        "data-filter",
+        "data-dropdown",
+        "data-required",
+        "data-pattern",
+        "data-notify",
+        "data-href",
+        "data-step",
+        ".bk-switcher",
+        ".bk-select-trigger",
+        "data-sortable",
+        "data-filter",
+        "data-dropdown",
+    ]
+
+    for token in forbidden_tokens:
+        assert token not in js
+
+
+def test_shared_assets_include_minimal_data_page_switching_logic():
+    js = read_text(ASSETS / "bkflow-prototype.js")
+
+    assert "data-page" in js
+    assert ".bk-page-panel" in js
+    assert "hidden = panel.id !== pageId" in js
+
+
+def test_shared_shell_user_menus_do_not_use_old_interactions():
+    shell_texts = [
+        read_text(SHARED / "space-shell.html"),
+        read_text(SHARED / "system-shell.html"),
+        read_text(SHARED / "plugin-shell.html"),
+    ]
+
+    for text in shell_texts:
+        assert "data-notify" not in text
+
+
+def test_task4_master_files_exist_and_have_readmes():
+    required = [
+        LIST_MASTER / "README.md",
+        LIST_MASTER / "template.html",
+        LIST_MASTER / "states" / "empty.html",
+        LIST_MASTER / "states" / "error.html",
+        LIST_MASTER / "states" / "bulk-actions.html",
+        CONFIG_MASTER / "README.md",
+        CONFIG_MASTER / "template.html",
+        CONFIG_MASTER / "states" / "dirty.html",
+        ENGINE_MASTER / "README.md",
+        ENGINE_MASTER / "template.html",
+        DECISION_MASTER / "README.md",
+        DECISION_MASTER / "template.html",
+    ]
+
+    for path in required:
+        assert path.is_file(), path
+
+    assert "list-oriented admin pages" in read_text(LIST_MASTER / "README.md")
+    assert "long configuration forms" in read_text(CONFIG_MASTER / "README.md")
+    assert "request/response debugging panels" in read_text(ENGINE_MASTER / "README.md")
+    assert "decision rule editing flows" in read_text(DECISION_MASTER / "README.md")
+
+
+def test_list_page_master_contract_covers_table_toolbar_states_and_pagination():
+    template = read_text(LIST_MASTER / "template.html")
+    empty_state = read_text(LIST_MASTER / "states" / "empty.html")
+    error_state = read_text(LIST_MASTER / "states" / "error.html")
+    bulk_actions = read_text(LIST_MASTER / "states" / "bulk-actions.html")
+
+    for token in [
+        '<div class="bk-toolbar">',
+        "搜索",
+        "筛选",
+        "<th>状态</th>",
+        "<th>操作</th>",
+        'class="bk-pagination"',
+    ]:
+        assert token in template
+
+    assert "暂无数据" in empty_state
+    assert "加载失败" in error_state
+    for state_text in [empty_state, error_state]:
+        for token in [
+            '<div class="bk-toolbar">',
+            '<input class="bk-search-input"',
+            '<div class="bk-select"',
+            "筛选状态",
+        ]:
+            assert token in state_text
+    assert "批量" in bulk_actions
+    assert "已选" in bulk_actions
+
+
+def test_config_page_master_contract_covers_long_form_code_area_and_dirty_state():
+    template = read_text(CONFIG_MASTER / "template.html")
+    dirty_state = read_text(CONFIG_MASTER / "states" / "dirty.html")
+
+    template_titles = re.findall(r'<div class="section-title">(.*?)</div>', template)
+    dirty_titles = re.findall(r'<div class="section-title">(.*?)</div>', dirty_state)
+    template_labels = re.findall(r'<label class="bk-form-label">(.*?)</label>', template)
+    dirty_labels = re.findall(r'<label class="bk-form-label">(.*?)</label>', dirty_state)
+
+    for token in [
+        "基础配置",
+        "代码配置",
+        "<pre",
+        "<code",
+        "bk-save-button is-disabled",
+    ]:
+        assert token in template
+
+    for token in [
+        "未保存",
+        "修改后保存",
+        "bk-save-button is-enabled",
+    ]:
+        assert token in dirty_state
+
+    assert dirty_titles == template_titles
+    assert dirty_labels == template_labels
+
+
+def test_engine_panel_master_contract_covers_request_parameter_response_and_actions():
+    template = read_text(ENGINE_MASTER / "template.html")
+
+    for token in [
+        "请求区",
+        "参数区",
+        "响应区",
+        "发送",
+        "重置",
+        'class="bk-button bk-button-primary" disabled',
+    ]:
+        assert token in template
+
+
+def test_decision_editor_master_contract_covers_basic_info_rules_empty_state_and_footer_actions():
+    template = read_text(DECISION_MASTER / "template.html")
+
+    for token in [
+        "基础信息",
+        "规则配置",
+        "暂无规则",
+        "底部操作",
+        "保存",
+        "取消",
+        "bk-exception",
+    ]:
+        assert token in template
+
+    for token in [
+        "规则 1：",
+        "规则 2：",
+        'class="rule-card"',
+    ]:
+        assert token not in template
diff --git a/tests/interface/prototypes/test_serve.py b/tests/interface/prototypes/test_serve.py
new file mode 100644
index 0000000000..8fcd845317
--- /dev/null
+++ b/tests/interface/prototypes/test_serve.py
@@ -0,0 +1,167 @@
+from __future__ import annotations
+
+import importlib.util
+import json
+from io import BytesIO
+from pathlib import Path
+
+
+def _load_serve():
+    path = Path("prototypes/serve.py")
+    spec = importlib.util.spec_from_file_location("prototype_serve", path)
+    module = importlib.util.module_from_spec(spec)
+    assert spec.loader is not None
+    spec.loader.exec_module(module)
+    return module
+
+
+def _make_handler(serve):
+    handler = object.__new__(serve.PrototypeRequestHandler)
+    handler.wfile = BytesIO()
+    handler.send_response = lambda *args, **kwargs: None
+    handler.send_header = lambda *args, **kwargs: None
+    handler.end_headers = lambda *args, **kwargs: None
+    handler.send_error = lambda *args, **kwargs: None
+    return handler
+
+
+def test_list_html_files_groups_new_sections(tmp_path, monkeypatch):
+    serve = _load_serve()
+    for section in ["masters", "features", "examples"]:
+        root = tmp_path / section
+        root.mkdir()
+        (root / "index.html").write_text("<!doctype html>", encoding="utf-8")
+        monkeypatch.setattr(serve, f"{section.upper()}_DIR", str(root))
+
+    items = serve.list_html_files()
+    sections = {section for section, _ in items}
+
+    assert sections == {"masters", "features", "examples"}
+
+
+def test_latest_mtime_scans_new_roots(tmp_path, monkeypatch):
+    serve = _load_serve()
+    for section in ["masters", "features", "examples", "assets"]:
+        root = tmp_path / section
+        root.mkdir()
+        (root / "index.html").write_text("<!doctype html>", encoding="utf-8")
+        monkeypatch.setattr(serve, f"{section.upper()}_DIR", str(root))
+
+    mtime = serve.latest_mtime_under((serve.MASTERS_DIR, serve.FEATURES_DIR, serve.EXAMPLES_DIR, serve.ASSETS_DIR))
+
+    assert isinstance(mtime, float)
+
+
+def test_directory_url_injects_reload(tmp_path, monkeypatch):
+    serve = _load_serve()
+    root = tmp_path / "prototypes"
+    foo = root / "masters" / "foo"
+    foo.mkdir(parents=True)
+    (foo / "index.html").write_text("<html><body>foo</body></html>", encoding="utf-8")
+    monkeypatch.setattr(serve, "PROTOTYPES_ROOT", str(root))
+    monkeypatch.setattr(serve, "MASTERS_DIR", str(root / "masters"))
+    monkeypatch.setattr(serve, "FEATURES_DIR", str(root / "features"))
+    monkeypatch.setattr(serve, "EXAMPLES_DIR", str(root / "examples"))
+    monkeypatch.setattr(serve, "ASSETS_DIR", str(root / "assets"))
+
+    captured = {}
+
+    def fake_send_html_with_reload(self, full_path):
+        captured["path"] = full_path
+        self.wfile.write(serve.inject_reload_script(b"<html><body>foo</body></html>"))
+
+    monkeypatch.setattr(serve.PrototypeRequestHandler, "_send_html_with_reload", fake_send_html_with_reload)
+
+    handler = _make_handler(serve)
+    handler.path = "/masters/foo/"
+    serve.PrototypeRequestHandler.do_GET(handler)
+    body = handler.wfile.getvalue().decode("utf-8")
+
+    assert "foo" in body
+    assert "fetch('/api/mtime')" in body
+    assert captured["path"].endswith("masters/foo/index.html")
+
+
+def test_root_index_only_lists_active_sections_even_if_output_exists(tmp_path, monkeypatch):
+    serve = _load_serve()
+    root = tmp_path / "prototypes"
+    masters = root / "masters"
+    features = root / "features"
+    examples = root / "examples"
+    output = root / "output"
+    assets = root / "assets"
+    for directory in [masters, features, examples, output, assets]:
+        directory.mkdir(parents=True)
+    (output / "legacy.html").write_text("<html><body>retired output</body></html>", encoding="utf-8")
+
+    monkeypatch.setattr(serve, "PROTOTYPES_ROOT", str(root))
+    monkeypatch.setattr(serve, "MASTERS_DIR", str(masters))
+    monkeypatch.setattr(serve, "FEATURES_DIR", str(features))
+    monkeypatch.setattr(serve, "EXAMPLES_DIR", str(examples))
+    monkeypatch.setattr(serve, "ASSETS_DIR", str(assets))
+
+    handler = _make_handler(serve)
+    serve.PrototypeRequestHandler._send_index(handler)
+    body = handler.wfile.getvalue().decode("utf-8")
+
+    assert body.startswith("<!DOCTYPE html>")
+    assert "BKFlow 原型展厅" in body
+    assert "Feature 展区" in body
+    assert "代表页面" in body
+    assert "工具资源" in body
+    assert "masters/" in body
+    assert "features/" in body
+    assert "examples/component-showcase.html" in body
+    assert "fetch('/api/mtime')" in body
+    assert "retired output" not in body
+    assert "/output/legacy.html" not in body
+
+
+def test_api_mtime_ignores_retired_output_directory(tmp_path, monkeypatch):
+    serve = _load_serve()
+    root = tmp_path / "prototypes"
+    masters = root / "masters"
+    features = root / "features"
+    examples = root / "examples"
+    output = root / "output"
+    assets = root / "assets"
+    for directory in [masters, features, examples, output, assets]:
+        directory.mkdir(parents=True)
+    (masters / "foo.html").write_text("<html></html>", encoding="utf-8")
+    (output / "legacy.html").write_text("<html></html>", encoding="utf-8")
+    (assets / "style.css").write_text("body{}", encoding="utf-8")
+
+    monkeypatch.setattr(serve, "PROTOTYPES_ROOT", str(root))
+    monkeypatch.setattr(serve, "MASTERS_DIR", str(masters))
+    monkeypatch.setattr(serve, "FEATURES_DIR", str(features))
+    monkeypatch.setattr(serve, "EXAMPLES_DIR", str(examples))
+    monkeypatch.setattr(serve, "ASSETS_DIR", str(assets))
+
+    mtimes = {
+        str(masters): 10.0,
+        str(features): 11.0,
+        str(examples): 12.0,
+        str(output): 13.0,
+        str(assets): 14.0,
+        str(masters / "foo.html"): 20.0,
+        str(output / "legacy.html"): 50.0,
+        str(assets / "style.css"): 40.0,
+    }
+
+    def fake_getmtime(path):
+        return mtimes[str(path)]
+
+    monkeypatch.setattr(serve.os.path, "getmtime", fake_getmtime)
+
+    handler = _make_handler(serve)
+    serve.PrototypeRequestHandler._send_mtime_json(handler)
+    first = json.loads(handler.wfile.getvalue().decode("utf-8"))
+    (output / "legacy.html").unlink()
+    del mtimes[str(output / "legacy.html")]
+    mtimes[str(output)] = 99.0
+    handler = _make_handler(serve)
+    serve.PrototypeRequestHandler._send_mtime_json(handler)
+    second = json.loads(handler.wfile.getvalue().decode("utf-8"))
+
+    assert first["mtime"] == 40
+    assert second["mtime"] == 40
diff --git a/tests/interface/prototypes/test_showcase_catalog.py b/tests/interface/prototypes/test_showcase_catalog.py
new file mode 100644
index 0000000000..b49f044a4f
--- /dev/null
+++ b/tests/interface/prototypes/test_showcase_catalog.py
@@ -0,0 +1,176 @@
+import importlib.util
+import json
+from pathlib import Path
+
+
+def _load_catalog():
+    path = Path("prototypes/showcase_catalog.py")
+    spec = importlib.util.spec_from_file_location("prototype_showcase_catalog", path)
+    module = importlib.util.module_from_spec(spec)
+    assert spec.loader is not None
+    spec.loader.exec_module(module)
+    return module
+
+
+def _touch_html(path: Path, content: str = "<html></html>") -> None:
+    path.parent.mkdir(parents=True, exist_ok=True)
+    path.write_text(content, encoding="utf-8")
+
+
+def test_collect_feature_catalog_reads_meta_and_featured_pages(tmp_path):
+    """有元数据时应读取首页展示字段并跳过无效代表页。"""
+    catalog = _load_catalog()
+    feature_dir = tmp_path / "features" / "demo-feature"
+    _touch_html(feature_dir / "pages" / "flow-edit.html")
+    _touch_html(feature_dir / "pages" / "task-detail-complete.html")
+    _touch_html(feature_dir / "pages" / "unused.html")
+    (feature_dir / "feature.meta.json").write_text(
+        json.dumps(
+            {
+                "title": "示例原型",
+                "summary": "覆盖流程编辑与任务详情。",
+                "status": "可评审",
+                "tags": ["流程编辑", "任务详情"],
+                "coverTheme": "mixed-admin",
+                "order": 7,
+                "featuredPages": [
+                    {
+                        "path": "pages/flow-edit.html",
+                        "title": "流程编辑页",
+                        "summary": "画布与节点抽屉。",
+                        "pageType": "流程编辑",
+                    },
+                    {
+                        "path": "pages/task-detail-complete.html",
+                        "title": "任务详情页",
+                        "summary": "执行状态与日志。",
+                        "pageType": "任务详情",
+                    },
+                    {
+                        "path": "pages/missing.html",
+                        "title": "应被跳过",
+                        "summary": "不存在的页面。",
+                        "pageType": "流程编辑",
+                    },
+                ],
+            },
+            ensure_ascii=False,
+        ),
+        encoding="utf-8",
+    )
+
+    items = catalog.collect_feature_catalog(str(tmp_path / "features"))
+
+    assert items[0]["title"] == "示例原型"
+    assert items[0]["status"] == "可评审"
+    assert items[0]["cover_theme"] == "mixed-admin"
+    assert items[0]["page_count"] == 3
+    assert [page["title"] for page in items[0]["featured_pages"]] == ["流程编辑页", "任务详情页"]
+    assert items[0]["featured_pages"][0]["page_type"] == "流程编辑"
+
+
+def test_collect_feature_catalog_falls_back_when_meta_missing(tmp_path):
+    """缺少元数据时应使用默认展示信息与代表页。"""
+    catalog = _load_catalog()
+    feature_dir = tmp_path / "features" / "demo-fallback"
+    _touch_html(feature_dir / "pages" / "alpha.html")
+    _touch_html(feature_dir / "pages" / "beta.html")
+    _touch_html(feature_dir / "pages" / "gamma.html")
+
+    items = catalog.collect_feature_catalog(str(tmp_path / "features"))
+
+    assert items[0]["slug"] == "demo-fallback"
+    assert items[0]["status"] == "待补充"
+    assert items[0]["summary"] == "尚未补充首页摘要"
+    assert items[0]["cover_theme"] == "mixed-admin"
+    assert items[0]["page_count"] == 3
+    assert [page["path"] for page in items[0]["featured_pages"]] == ["pages/alpha.html", "pages/beta.html"]
+
+
+def test_collect_feature_catalog_sorts_by_order_then_updated_at_desc_and_skips_legacy(tmp_path):
+    """应按 order 升序、更新时间降序排序，并跳过 _legacy。"""
+    catalog = _load_catalog()
+    features_dir = tmp_path / "features"
+
+    older = features_dir / "alpha"
+    newer = features_dir / "beta"
+    legacy = features_dir / "_legacy" / "old"
+
+    _touch_html(older / "pages" / "index.html")
+    _touch_html(newer / "pages" / "index.html")
+    _touch_html(legacy / "pages" / "index.html")
+
+    (older / "feature.meta.json").write_text(
+        json.dumps({"title": "Alpha", "order": 1}, ensure_ascii=False), encoding="utf-8"
+    )
+    (newer / "feature.meta.json").write_text(
+        json.dumps({"title": "Beta", "order": 1}, ensure_ascii=False), encoding="utf-8"
+    )
+    (legacy / "feature.meta.json").write_text(
+        json.dumps({"title": "Legacy", "order": 0}, ensure_ascii=False), encoding="utf-8"
+    )
+
+    old_time = 1_700_000_000
+    new_time = 1_700_000_100
+    Path(older / "pages" / "index.html").touch()
+    Path(newer / "pages" / "index.html").touch()
+    import os
+
+    os.utime(older, (old_time, old_time))
+    os.utime(older / "pages" / "index.html", (old_time, old_time))
+    os.utime(older / "feature.meta.json", (old_time, old_time))
+    os.utime(newer, (new_time, new_time))
+    os.utime(newer / "pages" / "index.html", (new_time, new_time))
+    os.utime(newer / "feature.meta.json", (new_time, new_time))
+
+    items = catalog.collect_feature_catalog(str(features_dir))
+
+    assert [item["slug"] for item in items] == ["beta", "alpha"]
+    assert all(item["slug"] != "_legacy" for item in items)
+
+
+def test_collect_feature_catalog_falls_back_when_meta_is_not_object(tmp_path):
+    """元数据不是 JSON object 时应回退到默认展示信息。"""
+    catalog = _load_catalog()
+    feature_dir = tmp_path / "features" / "demo-bad-meta"
+    _touch_html(feature_dir / "pages" / "alpha.html")
+    _touch_html(feature_dir / "pages" / "beta.html")
+    feature_dir.mkdir(parents=True, exist_ok=True)
+    (feature_dir / "feature.meta.json").write_text(json.dumps(["not", "an", "object"]), encoding="utf-8")
+
+    items = catalog.collect_feature_catalog(str(tmp_path / "features"))
+
+    assert items[0]["slug"] == "demo-bad-meta"
+    assert items[0]["status"] == "待补充"
+    assert items[0]["summary"] == "尚未补充首页摘要"
+    assert [page["path"] for page in items[0]["featured_pages"]] == ["pages/alpha.html", "pages/beta.html"]
+
+
+def test_collect_showcase_stats_counts_meta_updates(tmp_path):
+    """首页统计的更新时间应纳入 feature.meta.json 的变更。"""
+    catalog = _load_catalog()
+    features_dir = tmp_path / "features"
+    masters_dir = tmp_path / "masters"
+    feature_dir = features_dir / "demo-feature"
+
+    _touch_html(feature_dir / "pages" / "alpha.html")
+    feature_dir.mkdir(parents=True, exist_ok=True)
+    meta_path = feature_dir / "feature.meta.json"
+    meta_path.write_text(json.dumps({"title": "Demo"}, ensure_ascii=False), encoding="utf-8")
+    _touch_html(masters_dir / "template.html")
+
+    html_time = 1_700_000_000
+    meta_time = 1_700_000_200
+    import os
+
+    os.utime(feature_dir / "pages" / "alpha.html", (html_time, html_time))
+    os.utime(meta_path, (meta_time, meta_time))
+    os.utime(masters_dir / "template.html", (html_time, html_time))
+
+    stats = catalog.collect_showcase_stats(str(features_dir), str(masters_dir))
+
+    assert stats["feature_count"] == 1
+    assert stats["feature_page_count"] == 1
+    assert stats["master_page_count"] == 1
+    assert stats["html_page_count"] == 2
+    assert stats["updated_at"] == meta_time
diff --git a/tests/interface/prototypes/test_showcase_homepage.py b/tests/interface/prototypes/test_showcase_homepage.py
new file mode 100644
index 0000000000..72ba6095ca
--- /dev/null
+++ b/tests/interface/prototypes/test_showcase_homepage.py
@@ -0,0 +1,446 @@
+from __future__ import annotations
+
+import importlib.util
+import subprocess
+from textwrap import dedent
+from io import BytesIO
+from pathlib import Path
+
+
+def _load_serve():
+    path = Path("prototypes/serve.py")
+    spec = importlib.util.spec_from_file_location("prototype_serve", path)
+    module = importlib.util.module_from_spec(spec)
+    assert spec.loader is not None
+    spec.loader.exec_module(module)
+    return module
+
+
+def _make_handler(serve):
+    handler = object.__new__(serve.PrototypeRequestHandler)
+    handler.wfile = BytesIO()
+    handler.send_response = lambda *args, **kwargs: None
+    handler.send_header = lambda *args, **kwargs: None
+    handler.end_headers = lambda *args, **kwargs: None
+    return handler
+
+
+def _write_feature(root, slug, meta, pages):
+    feature_dir = root / slug
+    feature_dir.mkdir()
+    (feature_dir / "feature.meta.json").write_text(meta, encoding="utf-8")
+    for rel_path, content in pages.items():
+        page_path = feature_dir / rel_path
+        page_path.parent.mkdir(parents=True, exist_ok=True)
+        page_path.write_text(content, encoding="utf-8")
+    return feature_dir
+
+
+def _run_showcase_js_behavior() -> dict:
+    script = dedent(
+        r"""
+        const fs = require('fs');
+        const vm = require('vm');
+
+        function makeClassList(initial) {
+          const tokens = new Set((initial || '').split(/\s+/).filter(Boolean));
+          return {
+            toggle(token, force) {
+              const shouldHave = force === undefined ? !tokens.has(token) : !!force;
+              if (shouldHave) tokens.add(token); else tokens.delete(token);
+            },
+            contains(token) { return tokens.has(token); },
+            toString() { return Array.from(tokens).join(' '); },
+          };
+        }
+
+        function createElement(tag, attrs = {}, text = '') {
+          const el = {
+            tagName: tag.toUpperCase(),
+            attrs: { ...attrs },
+            children: [],
+            parentNode: null,
+            textContent: text,
+            hidden: false,
+            value: attrs.value || '',
+            classList: makeClassList(attrs.class || ''),
+            listeners: {},
+            setAttribute(name, value) { this.attrs[name] = String(value); },
+            getAttribute(name) { return this.attrs[name]; },
+            addEventListener(type, cb) {
+              (this.listeners[type] = this.listeners[type] || []).push(cb);
+            },
+            dispatchEvent(event) {
+              (this.listeners[event.type] || []).forEach((cb) => cb(event));
+            },
+            contains(node) {
+              if (node === this) return true;
+              return this.children.some((child) => child.contains && child.contains(node));
+            },
+            closest(selector) {
+              return matches(this, selector) ? this : null;
+            },
+            querySelector(selector) {
+              return queryAll(this, selector)[0] || null;
+            },
+            querySelectorAll(selector) {
+              return queryAll(this, selector);
+            },
+          };
+          el.className = attrs.class || '';
+          return el;
+        }
+
+        function matches(el, selector) {
+          const active = selector.includes('.is-active');
+          if (active && !el.classList.contains('is-active')) return false;
+          const attrMatch = selector.match(/\[([^\]=]+)(?:="([^"]*)")?\]/);
+          if (!attrMatch) return false;
+          const name = attrMatch[1];
+          const expected = attrMatch[2];
+          if (!(name in el.attrs)) return false;
+          return expected === undefined || String(el.attrs[name]) === expected;
+        }
+
+        function queryAll(root, selector) {
+          const results = [];
+          (function walk(node) {
+            if (matches(node, selector)) results.push(node);
+            node.children.forEach(walk);
+          })(root);
+          return results;
+        }
+
+        const search = createElement('input', { 'data-showcase-search': '', type: 'search' });
+        const summary = createElement('p', { 'data-showcase-summary': '' }, '');
+        const emptyState = createElement('p', { 'data-showcase-empty': '' }, '');
+        const cardOne = createElement('article', {
+          'data-feature-card': '',
+          'data-status': '进行中',
+          'data-tags': '代码生成,流程编排',
+          'data-search-index': '流程总览 overview 总览页 详情页',
+        });
+        const cardTwo = createElement('article', {
+          'data-feature-card': '',
+          'data-status': '已完成',
+          'data-tags': '资源库',
+          'data-search-index': '资源中心 resource',
+        });
+        const statusGroup = createElement('div', { 'data-showcase-filter-group': 'status' });
+        const statusAll = createElement('button', { 'data-showcase-filter': 'all', class: 'is-active' });
+        const statusLive = createElement('button', { 'data-showcase-filter': '进行中' });
+        statusGroup.children = [statusAll, statusLive];
+        statusAll.parentNode = statusGroup;
+        statusLive.parentNode = statusGroup;
+        const tagGroup = createElement('div', { 'data-showcase-filter-group': 'tag' });
+        const tagAll = createElement('button', { 'data-showcase-filter': 'all', class: 'is-active' });
+        const tagCode = createElement('button', { 'data-showcase-filter': '代码生成' });
+        tagGroup.children = [tagAll, tagCode];
+        tagAll.parentNode = tagGroup;
+        tagCode.parentNode = tagGroup;
+        const root = createElement('main', { 'data-showcase-root': '' });
+        root.children = [search, summary, emptyState, cardOne, cardTwo, statusGroup, tagGroup];
+        [search, summary, emptyState, cardOne, cardTwo, statusGroup, tagGroup].forEach((child) => { child.parentNode = root; });
+
+        const document = {
+          readyState: 'complete',
+          querySelector(selector) {
+            return selector === '[data-showcase-root]' ? root : null;
+          },
+          addEventListener() {},
+        };
+
+        const context = {
+          document,
+          console,
+          setInterval,
+          clearInterval,
+          location: { reload() {} },
+          fetch() { return Promise.resolve({ json() { return Promise.resolve({ mtime: 1 }); } }); },
+        };
+
+        vm.runInNewContext(fs.readFileSync('prototypes/assets/bkflow-showcase.js', 'utf8'), context);
+
+        const initial = {
+          summary: summary.textContent,
+          cardOneHidden: cardOne.hidden,
+          cardTwoHidden: cardTwo.hidden,
+          emptyHidden: emptyState.hidden,
+        };
+
+        search.value = '资源';
+        search.dispatchEvent({ type: 'input', target: search });
+        const afterSearch = {
+          summary: summary.textContent,
+          cardOneHidden: cardOne.hidden,
+          cardTwoHidden: cardTwo.hidden,
+          emptyHidden: emptyState.hidden,
+        };
+
+        statusGroup.dispatchEvent({ type: 'click', target: statusLive });
+        const afterFilter = {
+          summary: summary.textContent,
+          cardOneHidden: cardOne.hidden,
+          cardTwoHidden: cardTwo.hidden,
+          emptyHidden: emptyState.hidden,
+        };
+
+        process.stdout.write(JSON.stringify({ initial, afterSearch, afterFilter }));
+        """
+    )
+    completed = subprocess.run(["node", "-e", script], check=True, capture_output=True, text=True)
+    return __import__("json").loads(completed.stdout)
+
+
+def test_root_showcase_homepage_renders_chinese_hero_sections_and_cta(tmp_path, monkeypatch):
+    """Root homepage should render the showcase layout and consume catalog data."""
+
+    serve = _load_serve()
+    root = tmp_path / "prototypes"
+    masters = root / "masters"
+    features = root / "features"
+    examples = root / "examples"
+    assets = root / "assets"
+    for directory in [masters, features, examples, assets]:
+        directory.mkdir(parents=True)
+
+    _write_feature(
+        features,
+        "demo-feature",
+        """
+        {
+          "title": "流程总览",
+          "summary": "首页主角 feature",
+          "status": "进行中",
+          "coverTheme": "flow-editor",
+          "tags": ["代码生成", "流程编排"],
+          "order": 1,
+          "featuredPages": [
+            {"path": "overview.html", "title": "总览页", "pageType": "流程编辑"},
+            {"path": "details.html", "title": "详情页", "pageType": "任务详情"},
+            {"path": "card-only.html", "title": "卡片页", "pageType": "列表管理"}
+          ]
+        }
+        """.strip(),
+        {
+            "overview.html": "<html><body>overview</body></html>",
+            "details.html": "<html><body>details</body></html>",
+            "card-only.html": "<html><body>card</body></html>",
+        },
+    )
+
+    (masters / "list-page.html").write_text("<html><body>master</body></html>", encoding="utf-8")
+    (examples / "component-showcase.html").write_text("<html><body>showcase</body></html>", encoding="utf-8")
+    (assets / "bkflow-prototype.css").write_text("body{}", encoding="utf-8")
+
+    monkeypatch.setattr(serve, "PROTOTYPES_ROOT", str(root))
+    monkeypatch.setattr(serve, "MASTERS_DIR", str(masters))
+    monkeypatch.setattr(serve, "FEATURES_DIR", str(features))
+    monkeypatch.setattr(serve, "EXAMPLES_DIR", str(examples))
+    monkeypatch.setattr(serve, "ASSETS_DIR", str(assets))
+
+    handler = object.__new__(serve.PrototypeRequestHandler)
+    handler.wfile = BytesIO()
+    handler.send_response = lambda *args, **kwargs: None
+    handler.send_header = lambda *args, **kwargs: None
+    handler.end_headers = lambda *args, **kwargs: None
+
+    serve.PrototypeRequestHandler._send_index(handler)
+    body = handler.wfile.getvalue().decode("utf-8")
+
+    assert "BKFlow 原型展厅" in body
+    assert "最近更新" in body
+    assert "流程总览" in body
+    assert 'href="/assets/bkflow-showcase.css"' in body
+    assert 'src="/assets/bkflow-showcase.js"' in body
+    assert 'data-showcase-search' in body
+    assert 'data-showcase-filter="all"' in body
+    assert 'data-feature-card' in body
+    assert 'data-status="进行中"' in body
+    assert 'data-tags="代码生成,流程编排"' in body
+    assert 'data-cover-theme="flow-editor"' in body
+    assert 'href="/features/demo-feature/card-only.html"' in body
+    assert "代表页面" in body
+    assert "流程编辑" in body
+    assert "任务详情" in body
+    assert "列表管理" in body
+    assert "工具资源" in body
+    assert 'href="#feature-showcase"' in body
+    assert "查看 Feature 展区" in body
+    assert 'data-showcase-empty' in body
+
+
+def test_root_showcase_homepage_falls_back_to_default_cover_theme_when_missing(tmp_path, monkeypatch):
+    """Missing coverTheme metadata should fall back to the default showcase theme."""
+
+    serve = _load_serve()
+    root = tmp_path / "prototypes"
+    masters = root / "masters"
+    features = root / "features"
+    examples = root / "examples"
+    assets = root / "assets"
+    for directory in [masters, features, examples, assets]:
+        directory.mkdir(parents=True)
+
+    feature_dir = features / "demo-feature"
+    feature_dir.mkdir()
+    (feature_dir / "feature.meta.json").write_text(
+        """
+        {
+          "title": "流程总览",
+          "summary": "缺省主题回退",
+          "status": "进行中",
+          "tags": ["代码生成"],
+          "featuredPages": [{"path": "overview.html", "title": "总览页"}]
+        }
+        """.strip(),
+        encoding="utf-8",
+    )
+    (feature_dir / "overview.html").write_text("<html><body>overview</body></html>", encoding="utf-8")
+
+    monkeypatch.setattr(serve, "PROTOTYPES_ROOT", str(root))
+    monkeypatch.setattr(serve, "MASTERS_DIR", str(masters))
+    monkeypatch.setattr(serve, "FEATURES_DIR", str(features))
+    monkeypatch.setattr(serve, "EXAMPLES_DIR", str(examples))
+    monkeypatch.setattr(serve, "ASSETS_DIR", str(assets))
+
+    handler = _make_handler(serve)
+    serve.PrototypeRequestHandler._send_index(handler)
+    body = handler.wfile.getvalue().decode("utf-8")
+
+    assert 'data-cover-theme="mixed-admin"' in body
+    assert "Mixed Admin" in body
+
+
+def test_root_showcase_homepage_keeps_spec_cover_theme_variants_and_labels(tmp_path, monkeypatch):
+    """Spec coverTheme variants should render distinct previews instead of collapsing to the default theme."""
+
+    serve = _load_serve()
+    root = tmp_path / "prototypes"
+    masters = root / "masters"
+    features = root / "features"
+    examples = root / "examples"
+    assets = root / "assets"
+    for directory in [masters, features, examples, assets]:
+        directory.mkdir(parents=True)
+
+    for order, (slug, theme, title) in enumerate(
+        [
+            ("task-detail-feature", "task-detail", "任务详情"),
+            ("list-management-feature", "list-management", "列表管理"),
+            ("config-panel-feature", "config-panel", "配置面板"),
+        ],
+        start=1,
+    ):
+        _write_feature(
+            features,
+            slug,
+            f"""
+            {{
+              "title": "{title}",
+              "summary": "{theme} 主题校验",
+              "status": "进行中",
+              "coverTheme": "{theme}",
+              "order": {order},
+              "featuredPages": [
+                {{"path": "page.html", "title": "页面", "pageType": "{title}"}}
+              ]
+            }}
+            """.strip(),
+            {"page.html": "<html><body>page</body></html>"},
+        )
+
+    monkeypatch.setattr(serve, "PROTOTYPES_ROOT", str(root))
+    monkeypatch.setattr(serve, "MASTERS_DIR", str(masters))
+    monkeypatch.setattr(serve, "FEATURES_DIR", str(features))
+    monkeypatch.setattr(serve, "EXAMPLES_DIR", str(examples))
+    monkeypatch.setattr(serve, "ASSETS_DIR", str(assets))
+
+    handler = _make_handler(serve)
+    serve.PrototypeRequestHandler._send_index(handler)
+    body = handler.wfile.getvalue().decode("utf-8")
+
+    assert 'data-cover-theme="task-detail"' in body
+    assert 'data-cover-theme="list-management"' in body
+    assert 'data-cover-theme="config-panel"' in body
+    assert 'cover-preview--task-detail' in body
+    assert 'cover-preview--list-management' in body
+    assert 'cover-preview--config-panel' in body
+    assert "Task Detail" in body
+    assert "List Management" in body
+    assert "Config Panel" in body
+    assert "code-console" not in body
+    assert "dashboard" not in body
+    assert "mobile-first" not in body
+
+
+def test_root_showcase_homepage_representative_pages_show_page_type_and_feature(tmp_path, monkeypatch):
+    """Representative pages should stay grouped by feature and expose page type context."""
+
+    serve = _load_serve()
+    root = tmp_path / "prototypes"
+    masters = root / "masters"
+    features = root / "features"
+    examples = root / "examples"
+    assets = root / "assets"
+    for directory in [masters, features, examples, assets]:
+        directory.mkdir(parents=True)
+
+    _write_feature(
+        features,
+        "flow-feature",
+        """
+        {
+          "title": "流程总览",
+          "summary": "代表页面要带上下文",
+          "status": "进行中",
+          "coverTheme": "flow-editor",
+          "order": 1,
+          "featuredPages": [
+            {"path": "overview.html", "title": "总览页", "pageType": "流程编辑"},
+            {"path": "detail.html", "title": "详情页", "pageType": "任务详情"}
+          ]
+        }
+        """.strip(),
+        {
+            "overview.html": "<html><body>overview</body></html>",
+            "detail.html": "<html><body>detail</body></html>",
+        },
+    )
+
+    monkeypatch.setattr(serve, "PROTOTYPES_ROOT", str(root))
+    monkeypatch.setattr(serve, "MASTERS_DIR", str(masters))
+    monkeypatch.setattr(serve, "FEATURES_DIR", str(features))
+    monkeypatch.setattr(serve, "EXAMPLES_DIR", str(examples))
+    monkeypatch.setattr(serve, "ASSETS_DIR", str(assets))
+
+    handler = _make_handler(serve)
+    serve.PrototypeRequestHandler._send_index(handler)
+    body = handler.wfile.getvalue().decode("utf-8")
+
+    assert "代表页面" in body
+    assert "流程总览" in body
+    assert "流程编辑" in body
+    assert "任务详情" in body
+    assert "所属 Feature" in body
+    assert 'href="/features/flow-feature/overview.html"' in body
+    assert 'href="/features/flow-feature/detail.html"' in body
+
+
+def test_bkflow_showcase_js_updates_hidden_summary_and_empty_state(tmp_path):
+    """Search and filter interactions should update the lightweight showcase state."""
+
+    result = _run_showcase_js_behavior()
+
+    assert result["initial"]["summary"] == "当前展示 2 个 Feature"
+    assert result["initial"]["cardOneHidden"] is False
+    assert result["initial"]["cardTwoHidden"] is False
+    assert result["initial"]["emptyHidden"] is True
+    assert result["afterSearch"]["summary"] == "当前展示 1 个 Feature"
+    assert result["afterSearch"]["cardOneHidden"] is True
+    assert result["afterSearch"]["cardTwoHidden"] is False
+    assert result["afterSearch"]["emptyHidden"] is True
+    assert result["afterFilter"]["summary"] == "当前没有匹配的 Feature"
+    assert result["afterFilter"]["cardOneHidden"] is True
+    assert result["afterFilter"]["cardTwoHidden"] is True
+    assert result["afterFilter"]["emptyHidden"] is False
diff --git a/tests/interface/prototypes/test_structure_contract.py b/tests/interface/prototypes/test_structure_contract.py
new file mode 100644
index 0000000000..d338a40f3d
--- /dev/null
+++ b/tests/interface/prototypes/test_structure_contract.py
@@ -0,0 +1,219 @@
+import json
+from pathlib import Path
+import re
+
+
+def test_required_root_directories_exist():
+    required = [
+        Path("prototypes/masters"),
+        Path("prototypes/masters/_shared"),
+        Path("prototypes/features"),
+        Path("prototypes/features/_legacy"),
+        Path("prototypes/examples"),
+    ]
+
+    for path in required:
+        assert path.exists(), path
+
+
+def test_required_readmes_exist():
+    required = [
+        Path("prototypes/masters/README.md"),
+        Path("prototypes/masters/_shared/README.md"),
+        Path("prototypes/features/README.md"),
+        Path("prototypes/features/_legacy/README.md"),
+        Path("prototypes/examples/README.md"),
+        Path("prototypes/features/_legacy/sops-open-plugin/README.md"),
+        Path("prototypes/features/_legacy/space-variable-manage/README.md"),
+        Path("prototypes/features/_legacy/node-output-viewer/README.md"),
+    ]
+
+    for path in required:
+        assert path.is_file(), path
+
+
+def test_showcase_homepage_contract_resources_and_meta_shape():
+    required = [
+        Path("prototypes/assets/bkflow-showcase.css"),
+        Path("prototypes/assets/bkflow-showcase.js"),
+    ]
+
+    for path in required:
+        assert path.is_file(), path
+
+    features_root = Path("prototypes/features")
+    feature_dirs = [
+        path
+        for path in sorted(features_root.iterdir(), key=lambda item: item.name)
+        if path.is_dir() and not path.name.startswith("_") and not path.name.startswith(".")
+    ]
+
+    assert feature_dirs, "expected at least one active feature directory"
+
+    for feature_dir in feature_dirs:
+        meta_path = feature_dir / "feature.meta.json"
+        assert meta_path.is_file(), meta_path
+
+        meta = json.loads(meta_path.read_text(encoding="utf-8"))
+        expected_keys = {"title", "summary", "status", "tags", "coverTheme", "order", "featuredPages"}
+
+        assert isinstance(meta, dict), feature_dir
+        for key in expected_keys:
+            assert key in meta, (feature_dir, key)
+
+        assert isinstance(meta["title"], str) and meta["title"].strip(), feature_dir
+        assert isinstance(meta["summary"], str) and meta["summary"].strip(), feature_dir
+        assert isinstance(meta["status"], str) and meta["status"].strip(), feature_dir
+        assert isinstance(meta["tags"], list) and meta["tags"], feature_dir
+        assert all(isinstance(tag, str) and tag.strip() for tag in meta["tags"]), feature_dir
+        assert isinstance(meta["coverTheme"], str) and meta["coverTheme"].strip(), feature_dir
+        assert isinstance(meta["order"], int), feature_dir
+        assert isinstance(meta["featuredPages"], list) and meta["featuredPages"], feature_dir
+
+        for page in meta["featuredPages"]:
+            assert isinstance(page, dict), (feature_dir, page)
+            for key in ["path", "title", "summary", "pageType"]:
+                assert key in page, (feature_dir, key)
+                assert isinstance(page[key], str) and page[key].strip(), (feature_dir, key)
+            feature_root = feature_dir.resolve()
+            resolved = (feature_dir / page["path"]).resolve()
+            assert feature_root in resolved.parents or resolved == feature_root, (feature_dir, page["path"])
+            assert resolved.is_file(), (feature_dir, page["path"])
+            assert resolved.suffix == ".html", (feature_dir, page["path"])
+
+
+def test_examples_only_keep_reference_pages():
+    example_dir = Path("prototypes/examples")
+    files = sorted(path.name for path in example_dir.iterdir() if path.is_file())
+    assert files == ["README.md", "component-showcase.html"], files
+
+
+def test_legacy_archive_contains_migrated_pages():
+    expected = [
+        Path("prototypes/features/_legacy/sops-open-plugin/index.html"),
+        Path("prototypes/features/_legacy/sops-open-plugin/main-flow.html"),
+        Path("prototypes/features/_legacy/sops-open-plugin/space-open-plugin-management.html"),
+        Path("prototypes/features/_legacy/sops-open-plugin/task-plugin-error-state.html"),
+        Path("prototypes/features/_legacy/sops-open-plugin/template-plugin-selection.html"),
+        Path("prototypes/features/_legacy/space-variable-manage/README.md"),
+        Path("prototypes/features/_legacy/space-variable-manage/index.html"),
+        Path("prototypes/features/_legacy/node-output-viewer/README.md"),
+        Path("prototypes/features/_legacy/node-output-viewer/index.html"),
+    ]
+
+    for path in expected:
+        assert path.is_file(), path
+
+
+def test_legacy_archive_relative_links_resolve():
+    archive_root = Path("prototypes/features/_legacy")
+    pattern = re.compile(r'(?:href|data-href)="([^"#][^"]*)"')
+
+    for html_path in archive_root.rglob("*.html"):
+        text = html_path.read_text(encoding="utf-8")
+        for target in pattern.findall(text):
+            if target.startswith(("http://", "https://", "mailto:", "javascript:")):
+                continue
+            resolved = (html_path.parent / target).resolve()
+            assert resolved.exists(), (html_path, target)
+
+
+def test_obsolete_flat_pages_are_removed():
+    removed = [
+        Path("prototypes/base.html"),
+        Path("prototypes/output/.gitkeep"),
+        Path("prototypes/output/sops-open-plugin-main-flow.html"),
+        Path("prototypes/output/sops-open-plugin-space-open-plugin-management.html"),
+        Path("prototypes/output/sops-open-plugin-task-plugin-error-state.html"),
+        Path("prototypes/output/sops-open-plugin-template-plugin-selection.html"),
+        Path("prototypes/output/space-variable-manage.html"),
+        Path("prototypes/output/node-output-viewer-proposal-v1.html"),
+        Path("prototypes/examples/composite-page.html"),
+        Path("prototypes/examples/detail-page.html"),
+        Path("prototypes/examples/flow-edit.html"),
+        Path("prototypes/examples/form-slider.html"),
+        Path("prototypes/examples/list-page.html"),
+        Path("prototypes/examples/tab-page.html"),
+        Path("prototypes/examples/task-detail.html"),
+    ]
+
+    for path in removed:
+        assert not path.exists(), path
+
+
+def test_retired_directories_are_removed():
+    removed = [
+        Path("prototypes/cache"),
+        Path("prototypes/metadata"),
+        Path("prototypes/renderers"),
+        Path("prototypes/output"),
+    ]
+
+    for path in removed:
+        assert not path.exists(), path
+
+
+def test_directory_readmes_describe_contract():
+    checks = {
+        Path("prototypes/masters/README.md"): [
+            "source of truth",
+            "page-type masters",
+            "stable states",
+            "_shared",
+            "docs/specs",
+            "docs/plans",
+        ],
+        Path("prototypes/masters/_shared/README.md"): [
+            "shared scaffolding",
+            "does not preview independently",
+            "reuse-only",
+            "Do not put delivery pages",
+        ],
+        Path("prototypes/features/README.md"): [
+            "feature slug",
+            "spec and one plan",
+            "feature.meta.json",
+            "homepage showcase contract",
+        ],
+        Path("prototypes/features/_legacy/README.md"): [
+            "archive-only",
+            "migrated historical feature material",
+            "prototypes/features/<feature-slug>/",
+            "Do not put shared masters",
+        ],
+        Path("prototypes/examples/README.md"): [
+            "reference only",
+            "component-showcase.html",
+            "not for delivery",
+            "docs/specs",
+            "docs/plans",
+        ],
+        Path(".ai/skills/prototype-generator/SKILL.md"): [
+            "BKFlow 原型展厅",
+            "feature.meta.json",
+            "features/<slug>/",
+            "首页展示所需的卡片信息",
+            "不要只生成 `README.md` 和 `index.html`",
+        ],
+    }
+
+    for path, expected_snippets in checks.items():
+        lines = path.read_text(encoding="utf-8").splitlines()
+        text = "\n".join(lines)
+        for line in expected_snippets:
+            assert line in text, (path, line)
+
+
+def test_prototypes_readme_describes_showcase_homepage_sources():
+    text = Path("prototypes/README.md").read_text(encoding="utf-8")
+    expected_snippets = [
+        "BKFlow 原型展厅",
+        "根路径 `/`",
+        "feature.meta.json",
+        "首页元数据",
+        "首页展示来源",
+        "不再把根首页描述成简单目录索引",
+    ]
+
+    for snippet in expected_snippets:
+        assert snippet in text, snippet
diff --git a/tests/interface/prototypes/test_task_detail_contract.py b/tests/interface/prototypes/test_task_detail_contract.py
new file mode 100644
index 0000000000..577017b5d5
--- /dev/null
+++ b/tests/interface/prototypes/test_task_detail_contract.py
@@ -0,0 +1,193 @@
+from pathlib import Path
+import re
+
+
+ROOT = Path("prototypes")
+TASK_DETAIL = ROOT / "masters" / "task-detail"
+STATES = TASK_DETAIL / "states"
+ASSETS = ROOT / "assets"
+
+
+def read_text(path: Path) -> str:
+    return path.read_text(encoding="utf-8")
+
+
+def extract_section(html: str, section_id: str) -> str:
+    match = re.search(
+        rf'<section[^>]*id="{re.escape(section_id)}"[^>]*>(.*?)</section>',
+        html,
+        re.DOTALL,
+    )
+    assert match, section_id
+    return match.group(1)
+
+
+def test_task_detail_master_files_exist():
+    required = [
+        TASK_DETAIL / "README.md",
+        TASK_DETAIL / "template.html",
+        STATES / "complete.html",
+        STATES / "failed.html",
+        STATES / "empty-log.html",
+    ]
+
+    for path in required:
+        assert path.is_file(), path
+
+
+def test_task_detail_readme_describes_execution_audit_surface_and_flow_editor_boundary():
+    text = read_text(TASK_DETAIL / "README.md")
+
+    for token in [
+        "execution detail route",
+        "read-only execution canvas",
+        "single-click node detail opening",
+        "configuration snapshot captured at execution time",
+        "distinct from `flow-editor/`",
+        "no save / publish / debug header actions",
+    ]:
+        assert token in text
+
+
+def test_task_detail_template_covers_execution_header_backlink_read_only_canvas_and_observation_tabs():
+    template = read_text(TASK_DETAIL / "template.html")
+
+    for token in [
+        "任务执行",
+        "audit-deep-dive-20260420_调试任务_20260420203821",
+        "完成",
+        "/template/view/2166/",
+        "源模板",
+        "执行画布",
+        "只读观察",
+        "节点详情",
+        "执行记录",
+        "配置快照",
+        "操作历史",
+        "调用日志",
+        "开始节点 / 消息展示 / 结束节点",
+        "异常信息",
+        "执行信息",
+        "输入参数",
+        "输出参数",
+        "标准插件",
+        "插件版本",
+        "节点名称",
+        "失败处理",
+        "暂无数据",
+        "pipeline trace",
+        "line-numbers",
+        'data-node-select="task-detail-main"',
+        'data-node-open="#task-detail-panel"',
+        'data-node-detail-source="',
+        'data-detail-source-group="task-detail-panel"',
+        'data-detail-source-id="',
+        'data-tab-group="task-detail-panel"',
+        'data-tab-target="task-detail-records"',
+        'data-tab-target="task-detail-snapshot"',
+        'data-tab-target="task-detail-history"',
+        'data-tab-target="task-detail-call-log"',
+    ]:
+        assert token in template
+
+    for forbidden in [
+        ">保存</button>",
+        ">发布</button>",
+        ">调试</button>",
+        "节点悬浮工具条",
+        "data-dblopen",
+        ">复制</button>",
+        ">连线</button>",
+        ">删除</button>",
+    ]:
+        assert forbidden not in template
+
+    node_sources = set(re.findall(r'data-node-detail-source="([^"]+)"', template))
+    panel_sources = set(re.findall(r'data-detail-source-id="([^"]+)"', template))
+
+    assert len(node_sources) >= 2
+    assert node_sources == panel_sources
+    assert 'data-node-status="未执行"' in template
+    assert "bk-task-status is-neutral" in template
+
+    records_panel = extract_section(template, "task-detail-records")
+    call_log_panel = extract_section(template, "task-detail-call-log")
+
+    assert "bk-log-viewer" not in records_panel
+    assert "bk-log-viewer" in call_log_panel
+
+
+def test_task_detail_state_pages_cover_complete_failed_and_empty_log_audit_semantics():
+    complete = read_text(STATES / "complete.html")
+    failed = read_text(STATES / "failed.html")
+    empty_log = read_text(STATES / "empty-log.html")
+
+    for token in [
+        "完成",
+        "bk-task-status is-success",
+        "暂无异常",
+        "调用日志",
+    ]:
+        assert token in complete
+
+    complete_records = extract_section(complete, "task-detail-records")
+    complete_call_log = extract_section(complete, "task-detail-call-log")
+    assert "bk-log-viewer" not in complete_records
+    assert "bk-log-viewer" in complete_call_log
+
+    for token in [
+        "失败",
+        "bk-task-status is-failed",
+        "异常信息",
+        "Traceback",
+        "ValueError",
+        "失败原因",
+        "调用日志",
+    ]:
+        assert token in failed
+
+    failed_records = extract_section(failed, "task-detail-records")
+    failed_call_log = extract_section(failed, "task-detail-call-log")
+    assert "bk-log-viewer" not in failed_records
+    assert "bk-log-viewer" in failed_call_log
+
+    for token in [
+        "调用日志",
+        "暂无调用日志",
+        "日志查看器",
+        "bk-log-empty",
+    ]:
+        assert token in empty_log
+
+
+def test_shared_assets_expose_minimal_task_detail_hooks():
+    css = read_text(ASSETS / "bkflow-prototype.css")
+    js = read_text(ASSETS / "bkflow-prototype.js")
+
+    for token in [
+        ".bk-task-detail",
+        ".bk-task-detail-header",
+        ".bk-task-detail-panel",
+        ".bk-task-status",
+        ".bk-task-detail-node-trail",
+        ".bk-task-detail-section",
+        ".bk-log-viewer",
+        ".bk-log-empty",
+        ".bk-task-status.is-neutral",
+    ]:
+        assert token in css
+
+    for token in [
+        "data-node-open",
+        "data-node-detail-source",
+        "data-detail-source-group",
+        "data-detail-source-id",
+        "data-tab-group",
+        "data-tab-target",
+        "statusClassMap",
+        "is-neutral",
+        '[data-tab-group="',
+        'panel.classList.add("is-open")',
+        "hidden = panel.id !== targetId",
+    ]:
+        assert token in js