From 2379ddac8f08c6e9e8486c2e74f12c851f0d3454 Mon Sep 17 00:00:00 2001
From: Kong <jiangsimpler@gmail.com>
Date: Tue, 7 Jul 2026 17:58:55 +0800
Subject: [PATCH] docs: add product design copilot migration plan

---
 ...L-PRODUCT-DESIGN-copilot-migration-plan.md | 680 ++++++++++++++++++
 1 file changed, 680 insertions(+)
 create mode 100644 docs/GOAL-PRODUCT-DESIGN-copilot-migration-plan.md

diff --git a/docs/GOAL-PRODUCT-DESIGN-copilot-migration-plan.md b/docs/GOAL-PRODUCT-DESIGN-copilot-migration-plan.md
new file mode 100644
index 0000000..9f4df86
--- /dev/null
+++ b/docs/GOAL-PRODUCT-DESIGN-copilot-migration-plan.md
@@ -0,0 +1,680 @@
+# GOAL-PRODUCT-DESIGN: Product Design 迁移到 Copilot 的详细计划书
+
+**日期:** 2026-07-07  
+**状态:** 草案，待用户评审  
+**目标版本:** MVP 原型优先，后续再进入正式 VS Code Marketplace 发布  
+**建议仓库:** 新建独立 VS Code 扩展仓库 `kong-product-design-copilot`  
+**参考源仓库:** https://github.com/openai/oai-maintained-plugins/tree/main/plugins/product-design  
+**本地参考版本:** `C:\Users\jiang\.codex\plugins\cache\openai-curated-remote\product-design\0.1.48`  
+**关联能力:** `kong-chat-bridge` 作为 LLM Provider，`gpt-5.5` 作为主模型，`gpt-image-2` 作为图片生成工具模型
+
+---
+
+## 1. Product Design 是什么
+
+### 1.1 定义
+
+Product Design 在这里不是单个提示词，也不是单纯“生成 UI 图片”的功能，而是一套面向产品设计工作的多阶段 Agent 工作流。它把用户从“一个产品想法”带到“可评审的视觉方案、可运行的原型、可对比的设计 QA 和可分享的交付物”。
+
+它的核心价值是把设计师、产品经理和不直接写代码的用户从抽象想法带到可验证的软件形态。典型工作包括：
+
+- 收集产品上下文、用户目标、视觉偏好和交互范围。
+- 审计已有产品流程，基于截图证据提出 UX、视觉和可访问性问题。
+- 为一个产品功能生成多个视觉方向，让用户先选方向再进入实现。
+- 根据已选中的图片、截图、Figma frame 或 URL，生成可运行的前端原型。
+- 对比源视觉目标和实际实现截图，做设计 QA，发现布局、间距、字体、颜色、图片裁切和交互问题。
+- 将原型部署或分享给团队评审。
+
+### 1.2 它不是哪些东西
+
+Product Design 不应该被实现成以下形式：
+
+- 不是把一大段 system prompt 塞给 Copilot 后让模型自由发挥。
+- 不是只注册一个 `generate_image` 工具。
+- 不是绕过用户确认直接改代码的自动开发器。
+- 不是没有截图证据的主观 UI 评价器。
+- 不是 `kong-chat-bridge` 的一部分。`kong-chat-bridge` 应继续专注做 LLM Provider。
+
+### 1.3 最关键的工作原则
+
+Product Design 的能力边界要由工作流状态机保证，而不是只靠提示词约束：
+
+1. 没有确认设计 brief，不能进入视觉 ideation。
+2. 没有 URL、截图、Figma、图片 mock 或用户选择的视觉方案，不能进入代码实现。
+3. 新设计方向要先生成 3 个清晰不同的视觉方案，然后等待用户选择。
+4. 用户选择视觉目标后，才能进入 image-to-code 或 prototype。
+5. 实现完成后，必须将源视觉目标和实际截图放在一起做设计 QA。
+6. 图片、截图和原型产物要保存为可追踪 artifact，不能只存在一次性对话里。
+
+---
+
+## 2. 背景与目标
+
+### 2.1 当前背景
+
+当前已经有 `kong-chat-bridge` 作为 VS Code Copilot 的自定义 LLM Provider。近期已经验证图片生成链路可行：
+
+- 用户在 Copilot Chat 里选择或调用 `gpt-5.5`。
+- `gpt-5.5` 可以通过工具自动调用 `gpt-image-2`。
+- 图片结果可以保存到本地文件，并通过 markdown image/file URI fallback 显示在 Copilot 聊天框。
+- 用户可以继续对图片提出修改请求，系统可按策略决定是否把上一张图放入上下文。
+
+这说明底层“模型 + 图片生成 + Copilot 显示”的基础已经具备。下一步不是继续堆 Provider 能力，而是把 Product Design 的产品设计工作流迁移进 Copilot。
+
+本计划以 Codex Product Design 插件仓库作为参考源：`https://github.com/openai/oai-maintained-plugins/tree/main/plugins/product-design`。迁移时应参考它的能力拆分、工作流顺序和质量门禁，但不要直接复制原始提示词或受限内容；新的 VS Code 扩展应使用自有实现来表达同等行为契约。
+
+### 2.2 一句话目标
+
+在 VS Code Copilot Chat 中提供 `@product-design` 专属入口，让用户可以通过现有 `kong-chat-bridge` 模型能力完成产品 brief、视觉方案生成、方案选择、图片修改、原型实现和设计 QA 的闭环。
+
+### 2.3 成功标准
+
+| ID | 成功标准 | 优先级 |
+|---|---|---|
+| GOAL-001 | 用户能在 Copilot Chat 中输入 `@product-design` 进入产品设计工作流 | P0 |
+| GOAL-002 | 用户确认 brief 后能生成 3 张不同视觉方案，并在聊天框中看到图片 | P0 |
+| GOAL-003 | 用户选择某张图后，可以继续用自然语言修改图片 | P0 |
+| GOAL-004 | 未选择视觉目标时，扩展不能直接改项目代码 | P0 |
+| GOAL-005 | 后续可以扩展到 image-to-code、design-qa、audit、url-to-code、share | P1 |
+
+---
+
+## 3. 范围定义
+
+### 3.1 MVP 范围
+
+MVP 只做最小可用闭环：
+
+1. 新建 VS Code 扩展 `kong-product-design-copilot`。
+2. 注册 `@product-design` Chat Participant。
+3. 实现 `user-context` 的最小保存和读取。
+4. 实现 `get-context` brief 收集与确认。
+5. 实现 `ideate`，严格生成 3 张视觉方案。
+6. 将图片保存到扩展本地 storage，并在 Copilot Chat 中显示。
+7. 支持用户选择第 1/2/3 张方案。
+8. 支持基于已选图片继续修改图片。
+9. 实现图片上下文策略：`auto`、`include-image`、`omit-image`。
+10. 实现单元测试和本地 VSIX 打包。
+
+### 3.2 二期范围
+
+二期进入真实设计到代码：
+
+1. `image-to-code`：根据用户选中的图片或截图生成可运行前端。
+2. `design-qa`：对比源图和实际渲染截图，输出差异报告。
+3. 写入项目文件前，自动创建 worktree 分支，遵守目标仓库的工程规范。
+4. 支持读取现有项目设计系统、组件库、样式 token 和截图。
+
+### 3.3 三期范围
+
+三期补齐完整 Product Design 工作流：
+
+1. `audit`：基于截图证据审计产品流程。
+2. `url-to-code`：基于 URL 截图克隆轻量原型。
+3. `prototype`：支持多页面交互原型。
+4. `share`：接入 Sites、Vercel 或用户指定部署目标。
+5. Figma、Storybook、浏览器标注和团队协作能力。
+
+### 3.4 明确不做
+
+MVP 阶段不做以下内容：
+
+- 不复制 OpenAI curated Product Design skill 的原始提示词到公开扩展。
+- 不在 `kong-chat-bridge` 里混入 Product Design 状态机。
+- 不直接依赖真实在线 LLM 做自动化测试。
+- 不在没有视觉目标的情况下直接写代码。
+- 不做 Figma 写入和部署分享。
+
+---
+
+## 4. 需求完整性评审
+
+### 4.1 当前已明确
+
+- Product Design 是工作流型能力，需要迁移成 VS Code Chat Participant + Tool + Artifact Store。
+- 现有 `kong-chat-bridge` 继续做 Provider，不负责 Product Design 流程。
+- `gpt-5.5` 和 `gpt-image-2` 的图片生成路径已经验证可用于 Copilot Chat。
+- 第一阶段最重要的是让图片 ideation 在 Copilot 中真实可见、可选、可修改。
+
+### 4.2 主要缺口
+
+| 编号 | 缺口 | 影响 | 建议处理 |
+|---|---|---|---|
+| Q-001 | 新扩展仓库名称和发布 publisher 待确认 | 影响 package.json、Marketplace URL、CI | 默认 `kong-product-design-copilot`，publisher 沿用 `KongKong` |
+| Q-002 | 是否必须公开发布 Marketplace 待确认 | 影响授权、隐私和审查 | MVP 先本地 VSIX，用户确认后再发布 |
+| Q-003 | Product Design saved context 的存储格式待确认 | 影响后续迁移兼容性 | 默认使用 JSON + markdown 双格式 |
+| Q-004 | 是否需要支持 Figma/URL/audit 第一版 | 影响工期 | 默认放二期或三期 |
+| Q-005 | 是否允许复用 curated skill 的文字内容 | 有授权风险 | 不复制原文，只复刻行为契约和状态机 |
+
+### 4.3 初步范围建议
+
+| 范围 | 内容 |
+|---|---|
+| MVP 必须包含 | `@product-design`、brief gate、3 张视觉方案、图片显示、方案选择、多轮修改、上下文策略 |
+| 二期建议包含 | image-to-code、design-qa、项目 worktree 集成 |
+| 三期建议包含 | audit、url-to-code、share、Figma/Storybook/browser annotation |
+
+---
+
+## 5. 角色与使用场景
+
+| ID | 角色 | 描述 | 主要诉求 |
+|---|---|---|---|
+| ROLE-001 | 产品经理 | 希望快速把产品想法变成可评审视觉方向 | 先看方案，再决定是否开发 |
+| ROLE-002 | 设计师 | 希望生成视觉探索、审计流程、对比实现质量 | 保留设计判断和迭代控制 |
+| ROLE-003 | 开发者 | 希望将选中的视觉目标落成可运行代码 | 明确输入、减少返工 |
+| ROLE-004 | 插件维护者 | 维护 `kong-chat-bridge` 和 Product Design 扩展 | Provider 和 workflow 解耦 |
+
+---
+
+## 6. 核心用户流程
+
+### 6.1 MVP 主流程
+
+| ID | 流程 | 说明 | 关联需求 |
+|---|---|---|---|
+| UC-001 | 进入 Product Design | 用户输入 `@product-design 设计一个...` | REQ-001 |
+| UC-002 | 收集并确认 brief | 扩展识别缺失信息，追问或回放 brief | REQ-002 |
+| UC-003 | 生成 3 张视觉方案 | 确认 brief 后调用图片生成链路 | REQ-003 |
+| UC-004 | 展示并保存图片 | 3 张图显示在 Copilot Chat，并落盘保存 artifact | REQ-004 |
+| UC-005 | 用户选择方案 | 用户回复选择 1/2/3，扩展记录 selected target | REQ-005 |
+| UC-006 | 多轮图片修改 | 用户要求修改已选方案，扩展调用图片工具生成新版 | REQ-006 |
+
+### 6.2 二期实现流程
+
+| ID | 流程 | 说明 | 关联需求 |
+|---|---|---|---|
+| UC-101 | 从视觉目标生成代码 | 用户选择图片后，生成前端实现计划和代码 | REQ-101 |
+| UC-102 | 运行本地预览 | 启动 dev server 或使用项目已有运行方式 | REQ-102 |
+| UC-103 | 设计 QA | 比较源图和实现截图，输出差异与修复建议 | REQ-103 |
+| UC-104 | 修复并复验 | 修复明显差异，直到 QA 通过或记录残余风险 | REQ-104 |
+
+---
+
+## 7. 功能需求
+
+| ID | 类型 | 需求描述 | 优先级 | 状态 |
+|---|---|---|---|---|
+| REQ-001 | 功能需求 | 扩展必须提供 `@product-design` Chat Participant | P0 | 草案 |
+| REQ-002 | 功能需求 | 扩展必须在设计或实现前执行 brief gate | P0 | 草案 |
+| REQ-003 | 功能需求 | brief 确认后必须生成 3 张视觉方案 | P0 | 草案 |
+| REQ-004 | 功能需求 | 生成图片必须在 Copilot Chat 中可见 | P0 | 草案 |
+| REQ-005 | 功能需求 | 用户必须能选择某个视觉方案作为后续目标 | P0 | 草案 |
+| REQ-006 | 功能需求 | 用户必须能基于已选图片继续修改图片 | P0 | 草案 |
+| REQ-007 | 数据需求 | brief、图片、选择状态、修改历史必须保存为 artifact | P0 | 草案 |
+| REQ-008 | 集成需求 | 扩展必须复用 `kong-chat-bridge` 暴露的模型能力 | P0 | 草案 |
+| REQ-009 | 非功能需求 | LLM 不可用、图片工具不可用时必须明确失败，不得伪造成功 | P0 | 草案 |
+| REQ-010 | 安全需求 | 不得写入或提交 API key、token、密码等敏感信息 | P0 | 草案 |
+| REQ-101 | 功能需求 | 二期支持从选中视觉目标生成前端代码 | P1 | 暂缓 |
+| REQ-102 | 功能需求 | 二期支持运行预览和截图 | P1 | 暂缓 |
+| REQ-103 | 功能需求 | 二期支持 design QA 比较源图和实现截图 | P1 | 暂缓 |
+| REQ-201 | 功能需求 | 三期支持 URL audit、url-to-code 和 share | P2 | 暂缓 |
+
+---
+
+## 8. 功能模块设计
+
+| ID | 模块 | 职责 | 优先级 | 关联需求 |
+|---|---|---|---|---|
+| FUNC-001 | Chat Participant | 注册 `@product-design`，接收用户请求，输出对话结果 | P0 | REQ-001 |
+| FUNC-002 | Workflow Router | 根据请求路由到 user-context、get-context、ideate 等 workflow | P0 | REQ-001, REQ-002 |
+| FUNC-003 | Workflow State Machine | 管理状态，不允许跳过 brief 或视觉目标 | P0 | REQ-002, REQ-005 |
+| FUNC-004 | Brief Manager | 收集、回放、确认设计 brief | P0 | REQ-002 |
+| FUNC-005 | Image Ideation | 调用模型生成 3 张视觉方案 | P0 | REQ-003 |
+| FUNC-006 | Image Artifact Store | 保存图片、元数据、修改历史 | P0 | REQ-004, REQ-007 |
+| FUNC-007 | Chat Image Renderer | 用 markdown image + file link fallback 显示图片 | P0 | REQ-004 |
+| FUNC-008 | Context Policy | 控制图片是否进入后续上下文 | P0 | REQ-006, REQ-007 |
+| FUNC-009 | Model Adapter | 通过 VS Code Language Model API 调用当前模型 | P0 | REQ-008 |
+| FUNC-010 | Error Reporter | 统一展示模型、工具、权限、文件失败 | P0 | REQ-009 |
+| FUNC-101 | Image-to-Code Runner | 从视觉目标生成代码实现 | P1 | REQ-101 |
+| FUNC-102 | Design QA Runner | 对比源图和实现截图 | P1 | REQ-103 |
+
+---
+
+## 9. 推荐架构
+
+### 9.1 总体架构
+
+```mermaid
+flowchart TB
+  User["User in VS Code Copilot Chat"] --> Participant["@product-design Chat Participant"]
+  Participant --> Router["Workflow Router"]
+  Router --> State["Workflow State Machine"]
+  State --> Brief["Brief Manager"]
+  State --> Ideate["Image Ideation"]
+  State --> Select["Variant Selection"]
+  State --> Modify["Image Modification"]
+  Ideate --> ModelAdapter["Model Adapter"]
+  Modify --> ModelAdapter
+  ModelAdapter --> VSCodeLM["VS Code Language Model API"]
+  VSCodeLM --> Kong["kong-chat-bridge Provider"]
+  Kong --> GPT55["gpt-5.5"]
+  GPT55 --> ImageTool["gpt-image-2 image_generation tool"]
+  Ideate --> Store["Artifact Store"]
+  Modify --> Store
+  Store --> Renderer["Chat Image Renderer"]
+  Renderer --> User
+```
+
+### 9.2 为什么不直接改 `kong-chat-bridge`
+
+`kong-chat-bridge` 的职责是把 OpenAI-compatible API 暴露给 VS Code/Copilot。它应该只回答以下问题：
+
+- 有哪些模型。
+- 如何把 VS Code 的模型请求转成 OpenAI-compatible 请求。
+- 如何处理文本、工具调用和图片输出。
+- 如何把图片安全显示给 Copilot Chat。
+
+Product Design 的职责是 workflow orchestration。它要管理用户 brief、选择状态、图片上下文、设计门禁、QA 和原型 artifact。这些不属于 Provider 层。如果混在 `kong-chat-bridge` 内，会导致：
+
+- Provider 变成业务工作流插件，职责膨胀。
+- 后续 audit、url-to-code、share 难以复用。
+- 用户只想使用模型时也会被 Product Design 状态污染。
+- Marketplace 更新和权限边界不清晰。
+
+### 9.3 VS Code API 选择
+
+| 能力 | 推荐 API | 用途 |
+|---|---|---|
+| `@product-design` 专属入口 | Chat Participant API | 控制端到端对话和流程 |
+| 图片生成、保存、QA 等可调用能力 | Language Model Tool API | 供 agent mode 或 participant 调用 |
+| 调用当前选择的模型 | Language Model API | 尊重用户在 Copilot Chat 中选择的模型 |
+| 暴露 `gpt-5.5`、`gpt-image-2` | Language Model Chat Provider API | 由现有 `kong-chat-bridge` 继续提供 |
+
+参考官方文档：
+
+- VS Code AI Extensibility Overview: https://code.visualstudio.com/api/extension-guides/ai/ai-extensibility-overview
+- Chat Participant API: https://code.visualstudio.com/api/extension-guides/ai/chat
+- Language Model Tool API: https://code.visualstudio.com/api/extension-guides/ai/tools
+- Language Model API: https://code.visualstudio.com/api/extension-guides/ai/language-model
+- Language Model Chat Provider API: https://code.visualstudio.com/api/extension-guides/ai/language-model-chat-provider
+
+---
+
+## 10. 状态机设计
+
+### 10.1 状态定义
+
+| 状态 | 含义 | 可进入条件 | 可执行动作 |
+|---|---|---|---|
+| `idle` | 无活动设计任务 | 新对话或任务结束 | 接收用户需求 |
+| `collecting_context` | 正在收集产品上下文 | 用户提出设计/原型/视觉请求 | 追问缺失信息 |
+| `brief_ready` | brief 已整理但未确认 | 信息足够 | 回放 brief，等待确认 |
+| `brief_confirmed` | brief 已确认 | 用户确认 | 进入 ideate |
+| `ideating` | 正在生成视觉方案 | brief 已确认 | 调用图片生成 |
+| `awaiting_selection` | 等待用户选择 1/2/3 | 3 张图已生成 | 记录用户选择 |
+| `target_selected` | 已选择视觉目标 | 用户选择图片 | 修改图片或二期实现 |
+| `modifying_image` | 正在修改图片 | 已有 selected target | 生成新版图片 |
+| `ready_for_build` | 可进入代码实现 | 视觉目标明确 | 二期 image-to-code |
+| `qa_required` | 需要设计 QA | 原型实现完成 | 二期设计 QA |
+| `done` | 本轮完成 | 用户接受结果 | 归档 artifacts |
+
+### 10.2 禁止跳转
+
+| 禁止跳转 | 原因 |
+|---|---|
+| `idle -> ideating` | 缺少 brief gate |
+| `brief_confirmed -> ready_for_build` | brief 不是视觉目标 |
+| `collecting_context -> ready_for_build` | 没有确认 brief 和视觉目标 |
+| `awaiting_selection -> ready_for_build` | 用户尚未选择方案 |
+| `target_selected -> done` | 没有展示修改或下一步选项 |
+
+---
+
+## 11. Artifact 与数据设计
+
+### 11.1 存储位置
+
+推荐使用 VS Code extension context 的 `globalStorageUri`：
+
+```text
+<globalStorage>/kong-product-design/
+  sessions/
+    <session-id>/
+      brief.md
+      state.json
+      artifacts.json
+      images/
+        option-1.png
+        option-2.png
+        option-3.png
+        selected-v1.png
+        selected-v2.png
+      qa/
+        design-qa.md
+```
+
+如果需要兼容人工查看，可同步生成一个 markdown 索引：
+
+```text
+<globalStorage>/kong-product-design/sessions/<session-id>/README.md
+```
+
+### 11.2 数据对象
+
+| ID | 数据对象 | 说明 | 持久化 | 关联功能 |
+|---|---|---|---|---|
+| TABLE-001 | DesignSession | 一次 Product Design 会话 | JSON 文件 | FUNC-003 |
+| TABLE-002 | DesignBrief | 产品、用户、视觉、交互 brief | Markdown + JSON | FUNC-004 |
+| TABLE-003 | ImageArtifact | 图片路径、prompt、模型、hash、来源 | JSON 文件 | FUNC-005, FUNC-006 |
+| TABLE-004 | SelectionState | 当前选中的视觉目标 | JSON 文件 | FUNC-003 |
+| TABLE-005 | ContextPolicy | 图片上下文策略 | JSON 文件 | FUNC-008 |
+
+### 11.3 `state.json` 示例
+
+```json
+{
+  "schemaVersion": 1,
+  "sessionId": "pd-20260707-001",
+  "status": "awaiting_selection",
+  "briefConfirmed": true,
+  "selectedArtifactId": null,
+  "contextPolicy": "auto",
+  "createdAt": "2026-07-07T00:00:00+08:00",
+  "updatedAt": "2026-07-07T00:00:00+08:00"
+}
+```
+
+### 11.4 `artifacts.json` 示例
+
+```json
+{
+  "artifacts": [
+    {
+      "id": "img-option-1",
+      "kind": "image",
+      "role": "ideation-option",
+      "path": "images/option-1.png",
+      "mimeType": "image/png",
+      "model": "gpt-image-2",
+      "promptSummary": "Quiet dashboard login page with blue sky theme",
+      "hash": "sha256:...",
+      "createdAt": "2026-07-07T00:00:00+08:00"
+    }
+  ]
+}
+```
+
+---
+
+## 12. 图片上下文策略
+
+图片上下文策略必须显式设计，否则多轮设计会出现两个问题：上下文太大，以及模型不知道用户在改哪张图。
+
+| 策略 | 行为 | 适用场景 |
+|---|---|---|
+| `auto` | 默认策略。只在用户明确修改已选图时带入图片；普通说明和总结不带图 | MVP 默认 |
+| `include-image` | 每次修改都带入 selected image | 用户要求保持强视觉一致 |
+| `omit-image` | 不带入图片，只用文字描述和 artifact 元数据 | 用户只做方向性修改或节省上下文 |
+
+MVP 默认 `auto`：
+
+1. 如果用户说“把这张图改成...”“在第 2 张基础上...”，带入 selected image。
+2. 如果用户只是问“这三张有什么区别”，不带入图片原文，只用 artifact 元数据和 brief。
+3. 如果图片超过模型或 Provider 支持范围，降级为文字 summary，并明确提示。
+
+---
+
+## 13. Package 与项目结构建议
+
+### 13.1 新扩展目录
+
+```text
+kong-product-design-copilot/
+  package.json
+  tsconfig.json
+  src/
+    extension.ts
+    chat/
+      productDesignParticipant.ts
+      responseRenderer.ts
+    workflow/
+      router.ts
+      stateMachine.ts
+      briefManager.ts
+      ideationWorkflow.ts
+      selectionWorkflow.ts
+      imageModificationWorkflow.ts
+    model/
+      modelAdapter.ts
+      imageGenerationRequest.ts
+    storage/
+      artifactStore.ts
+      sessionStore.ts
+    tools/
+      generateDesignOptionsTool.ts
+      saveProductContextTool.ts
+      runDesignQaTool.ts
+    test/
+      router.test.ts
+      stateMachine.test.ts
+      artifactStore.test.ts
+      responseRenderer.test.ts
+```
+
+### 13.2 package.json contribution
+
+```json
+{
+  "contributes": {
+    "chatParticipants": [
+      {
+        "id": "kong-product-design.product-design",
+        "fullName": "Product Design",
+        "name": "product-design",
+        "description": "Design, ideate, prototype, and QA product experiences.",
+        "isSticky": true
+      }
+    ],
+    "languageModelTools": [
+      {
+        "name": "kong_product_design_generate_options",
+        "displayName": "Generate product design options",
+        "modelDescription": "Generate exactly three visual product design options after a brief is confirmed.",
+        "inputSchema": {
+          "type": "object",
+          "properties": {
+            "brief": { "type": "string" },
+            "styleDirection": { "type": "string" }
+          },
+          "required": ["brief"]
+        }
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 14. 模型调用策略
+
+### 14.1 文本与流程判断
+
+优先使用用户在 Copilot Chat 中选择的模型。这样做可以尊重用户设置，也能自然复用 `kong-chat-bridge`。
+
+### 14.2 图片生成
+
+推荐请求结构：
+
+```json
+{
+  "model": "gpt-5.5",
+  "tools": [
+    {
+      "type": "image_generation",
+      "model": "gpt-image-2"
+    }
+  ],
+  "tool_choice": "auto"
+}
+```
+
+Product Design 扩展不应硬编码 API key，也不应直接绕过 `kong-chat-bridge` 调 `https://api.kongsites.com/v1`。API key 和 base URL 继续由 Provider 配置管理。
+
+### 14.3 防御式处理
+
+| 场景 | 处理 |
+|---|---|
+| 当前模型不可用 | 提示用户选择可用模型，列出当前扩展能看到的候选项 |
+| 图片工具不可用 | 明确说明无法生成图片，不输出假链接 |
+| 返回文本但没有图片 | 显示模型文本，并提示没有收到图片 artifact |
+| 图片写入失败 | 返回错误路径和建议，不声称图片已生成 |
+| Copilot Chat 不渲染图片 | 回退显示本地文件链接 |
+
+---
+
+## 15. 安全与合规
+
+| ID | 风险 | 缓解 |
+|---|---|---|
+| RISK-001 | 复制 curated skill 原始提示词存在授权风险 | 只复刻行为契约，不复制原文 |
+| RISK-002 | API key 泄露 | 不在新扩展中保存 key，只复用 Provider |
+| RISK-003 | 图片包含敏感内容 | artifact 本地保存，不自动上传；后续分享前二次确认 |
+| RISK-004 | 模型输出不可控 | 关键状态由代码状态机验证，不只依赖提示词 |
+| RISK-005 | 误改用户项目 | MVP 不写项目代码；二期必须 worktree + 用户确认 |
+
+---
+
+## 16. 实施任务拆解
+
+### Phase 0: 设计确认
+
+| ID | 任务 | 交付物 | 验证方式 | 优先级 |
+|---|---|---|---|---|
+| TASK-001 | 评审本计划书 | 确认后的设计计划 | 用户确认 | P0 |
+| TASK-002 | 确认新扩展仓库位置和 publisher | 仓库路径和发布策略 | 用户确认 | P0 |
+
+### Phase 1: MVP 扩展原型
+
+| ID | 任务 | 交付物 | 验证方式 | 优先级 |
+|---|---|---|---|---|
+| TASK-101 | 创建 VS Code 扩展骨架 | TypeScript extension | `npm run compile` | P0 |
+| TASK-102 | 注册 `@product-design` Chat Participant | package.json + handler | Extension Host 手工验证 | P0 |
+| TASK-103 | 实现 workflow router | router 单测 | 单元测试 | P0 |
+| TASK-104 | 实现状态机 | stateMachine 单测 | 禁止跳转测试 | P0 |
+| TASK-105 | 实现 brief manager | brief markdown/json | 单元测试 + 手工验证 | P0 |
+| TASK-106 | 实现 image ideation | 3 图片生成流程 | Copilot Chat 手工验证 | P0 |
+| TASK-107 | 实现 artifact store | 本地图片和 JSON | 文件读写测试 | P0 |
+| TASK-108 | 实现 chat image renderer | markdown image + file link | Copilot Chat 可见图片 | P0 |
+| TASK-109 | 实现 selection 和 modify | selected target + 修改图 | 多轮手工验证 | P0 |
+| TASK-110 | 打包 VSIX | `.vsix` | 本地安装测试 | P0 |
+
+### Phase 2: Image-to-Code 与 Design QA
+
+| ID | 任务 | 交付物 | 验证方式 | 优先级 |
+|---|---|---|---|---|
+| TASK-201 | 实现 image-to-code workflow | 生成实现计划和代码 | 小型前端样例验收 | P1 |
+| TASK-202 | 接入项目 worktree 流程 | 新分支新 worktree | git 状态验证 | P1 |
+| TASK-203 | 实现截图 capture adapter | 源图 + 实现截图 | 浏览器截图验证 | P1 |
+| TASK-204 | 实现 design QA 报告 | `design-qa.md` | 对比报告可读 | P1 |
+| TASK-205 | 修复循环 | 差异修复和复验 | QA pass 或风险记录 | P1 |
+
+### Phase 3: 完整工作流
+
+| ID | 任务 | 交付物 | 验证方式 | 优先级 |
+|---|---|---|---|---|
+| TASK-301 | audit workflow | 基于截图的 UX audit | 手工流程审计 | P2 |
+| TASK-302 | url-to-code workflow | URL 克隆原型 | 本地运行验证 | P2 |
+| TASK-303 | share workflow | share target adapter | 链接访问验证 | P2 |
+| TASK-304 | user-context 完整版 | 保存产品、设计系统、偏好 | 回归测试 | P2 |
+
+---
+
+## 17. 验收标准
+
+| ID | 验收对象 | Given | When | Then | 关联需求 | 关联测试 |
+|---|---|---|---|---|---|---|
+| AC-001 | Chat Participant | 扩展已安装 | 用户输入 `@product-design` | Copilot Chat 进入 Product Design 响应 | REQ-001 | TC-001 |
+| AC-002 | Brief Gate | 用户提出设计请求但信息不足 | 扩展处理请求 | 扩展追问缺失信息，不生成图片 | REQ-002 | TC-002 |
+| AC-003 | Brief Playback | 信息足够 | 扩展处理请求 | 扩展回放 brief 并等待确认 | REQ-002 | TC-003 |
+| AC-004 | 三图生成 | brief 已确认 | 用户要求开始设计 | 生成并显示 3 张视觉方案 | REQ-003, REQ-004 | TC-004 |
+| AC-005 | 选择方案 | 3 张图已显示 | 用户回复“选第 2 张” | state 记录 selectedArtifactId | REQ-005 | TC-005 |
+| AC-006 | 修改图片 | 已选择图片 | 用户说“让天空更蓝一点” | 生成新版图片并显示 | REQ-006 | TC-006 |
+| AC-007 | 禁止无目标实现 | 没有选中视觉目标 | 用户要求“直接写代码” | 扩展拒绝并要求先选择视觉目标 | REQ-002, REQ-005 | TC-007 |
+| AC-008 | 错误真实反馈 | 图片工具失败 | 扩展收到错误 | 用户看到明确失败原因，不出现假图片 | REQ-009 | TC-008 |
+
+---
+
+## 18. 测试用例
+
+| ID | 类型 | 前置条件 | 步骤 | 预期结果 | 关联验收 |
+|---|---|---|---|---|---|
+| TC-001 | 手工 | 安装扩展 | Copilot Chat 输入 `@product-design 你能做什么` | 返回 Product Design 能力说明 | AC-001 |
+| TC-002 | 单元 | 构造缺少产品目标的请求 | 调用 router + state machine | 返回 `collecting_context` | AC-002 |
+| TC-003 | 单元 | 构造完整 brief | 调用 brief manager | 输出可确认 brief | AC-003 |
+| TC-004 | 手工 | brief 已确认，Provider 可用 | 请求生成设计方案 | Chat 中可见 3 张图 | AC-004 |
+| TC-005 | 单元 | artifacts 有 3 张图 | 输入“选第 2 张” | selectedArtifactId 指向 option-2 | AC-005 |
+| TC-006 | 手工 | 已选择 option-2 | 输入“让天空更蓝一点” | 生成修改后的图片 | AC-006 |
+| TC-007 | 单元 | state 未选择图片 | 调用 image-to-code | 返回 gate blocked | AC-007 |
+| TC-008 | 单元 | mock 图片工具失败 | 调用 ideation workflow | 返回真实错误，不创建假 artifact | AC-008 |
+| TC-009 | 回归 | 安装 Product Design 扩展 | 使用普通 `kong-chat-bridge` 模型聊天 | 原有 Provider 文本聊天不受影响 | AC-001 |
+
+---
+
+## 19. 追踪矩阵
+
+| REQ-ID | 需求摘要 | FUNC-ID | TASK-ID | AC-ID | TC-ID | 覆盖状态 |
+|---|---|---|---|---|---|---|
+| REQ-001 | 提供 `@product-design` | FUNC-001 | TASK-102 | AC-001 | TC-001 | 已覆盖 |
+| REQ-002 | brief gate | FUNC-002, FUNC-003, FUNC-004 | TASK-103, TASK-104, TASK-105 | AC-002, AC-003, AC-007 | TC-002, TC-003, TC-007 | 已覆盖 |
+| REQ-003 | 生成 3 张视觉方案 | FUNC-005 | TASK-106 | AC-004 | TC-004 | 已覆盖 |
+| REQ-004 | 图片在 Chat 中可见 | FUNC-006, FUNC-007 | TASK-107, TASK-108 | AC-004 | TC-004 | 已覆盖 |
+| REQ-005 | 支持选择方案 | FUNC-003 | TASK-109 | AC-005, AC-007 | TC-005, TC-007 | 已覆盖 |
+| REQ-006 | 支持图片修改 | FUNC-005, FUNC-008 | TASK-109 | AC-006 | TC-006 | 已覆盖 |
+| REQ-007 | 保存 artifact | FUNC-006 | TASK-107 | AC-004, AC-005 | TC-004, TC-005 | 已覆盖 |
+| REQ-008 | 复用 Provider | FUNC-009 | TASK-106 | AC-004 | TC-004, TC-009 | 已覆盖 |
+| REQ-009 | 失败不伪报 | FUNC-010 | TASK-106, TASK-108 | AC-008 | TC-008 | 已覆盖 |
+| REQ-010 | 不泄露密钥 | FUNC-009, FUNC-010 | TASK-101 到 TASK-110 | AC-008 | TC-008, TC-009 | 已覆盖 |
+| REQ-101 | image-to-code | FUNC-101 | TASK-201 | 待补充 | 待补充 | 二期覆盖 |
+| REQ-103 | design QA | FUNC-102 | TASK-204, TASK-205 | 待补充 | 待补充 | 二期覆盖 |
+
+---
+
+## 20. 开发与发布流程建议
+
+### 20.1 开发流程
+
+1. 从目标仓库远端默认分支 fetch 最新代码。
+2. 创建 `codex/product-design-copilot-mvp` worktree 分支。
+3. 完成 MVP 扩展骨架和单元测试。
+4. 本地 Extension Host 验证 `@product-design`。
+5. 打包 VSIX 给用户本机安装测试。
+6. 用户确认后创建 PR。
+7. PR merge 后打 tag 和 release。
+8. 用户确认是否清理本地 worktree。
+
+### 20.2 发布策略
+
+| 阶段 | 发布方式 | 理由 |
+|---|---|---|
+| MVP 内测 | 本地 VSIX | 快速验证 Copilot 图片显示和工作流 |
+| 小范围测试 | GitHub Release | 便于版本回滚和下载 |
+| 正式发布 | VS Code Marketplace | 用户可直接安装和更新 |
+
+---
+
+## 21. 残余风险与待确认问题
+
+| ID | 类型 | 内容 | 默认假设 | 影响 |
+|---|---|---|---|---|
+| Q-001 | 待确认 | 新扩展是否放在独立 GitHub repo | 默认独立 repo | 影响工程结构 |
+| Q-002 | 待确认 | publisher 是否沿用 `KongKong` | 默认沿用 | 影响 Marketplace ID |
+| Q-003 | 待确认 | 是否要兼容现有 Product Design saved context | 默认先不兼容 | 影响迁移成本 |
+| RISK-001 | 风险 | Copilot Chat 对本地图片渲染策略可能变化 | 保留 file link fallback | 影响图片可见性 |
+| RISK-002 | 风险 | VS Code LM API 或 tool API 行为变化 | 封装 adapter，减少扩散 | 影响维护成本 |
+| RISK-003 | 风险 | 模型选择不是 `gpt-5.5` 时图片工具不可用 | 检查 model capabilities 并提示 | 影响用户体验 |
+
+---
+
+## 22. 建议下一步
+
+建议下一步只推进 Phase 0 和 Phase 1：
+
+1. 用户确认本计划书的范围和新扩展命名。
+2. 创建独立扩展仓库或在指定位置初始化扩展。
+3. 先实现 `@product-design -> brief -> 3 images -> select -> modify`。
+4. 打包 VSIX 给本机测试。
+5. 确认 Copilot Chat 中图片可见、多轮修改可用、状态机不跳 gate。
+
+这个闭环通过后，再进入 `image-to-code` 和 `design-qa`。这样可以把风险分开：第一阶段验证产品设计工作流和图片显示，第二阶段才允许真正写项目代码。