docs: clarify MCP direction and Modao workflow in design collaboration doc

- MCP is read-only (design tool → Claude Code), not AI controlling Figma
- Mark Modao as no-MCP; add Path 2-B for screenshot/image handoff
- Update workflow diagram to show unidirectional MCP arrow
- Update lightweight workflow: Modao screenshots as reference, Pixso/MCP for precise specs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/06-设计协作方案.md

@@ -22,15 +22,30 @@
 
 ## 三、衔接本地开发的 4 条路径（从强到弱）
 
-### ⭐ 路径 1：MCP 直连 Claude Code（最推荐）
+> ⚠️ **重要：MCP 的方向是"设计工具 → Claude Code"，不是反过来。**
+> Claude Code 通过 MCP **读取**你画好的设计规格，然后生成代码；Claude Code 无法控制设计工具去画图。设计的工作仍由你完成。
+
+### ⭐ 路径 1：MCP 直连 Claude Code（最推荐，限支持 MCP 的工具）
 设计工具开放 **MCP 服务**，Claude Code 直接读取画板：节点树、组件、布局约束、**设计令牌**、切图引用，并生成匹配代码。
 - **Figma**：桌面端 → Preferences → 启用本地 MCP Server → Dev Mode；Claude Code 装 Figma 插件或 `claude mcp add` 接入。
 - **Pixso / MasterGo / 即时设计**：各自提供 MCP，按其文档配置进 Claude Code。
-- 效果：在设计稿选中页面 → AI 读规格 → 落成 **unibest 的 Vue 页面** 或 **Tabler 的 HTML 模板**。
+- **墨刀**：⚠️ **不支持 MCP**，无法走此路径，见路径 2-B。
+- 效果：在设计稿选中页面 → Claude Code 读规格 → 落成 **unibest 的 Vue 页面** 或 **Tabler 的 HTML 模板**。
 
-### 路径 2：Dev Mode / 开发者模式标注交付
+### 路径 2-A：Dev Mode / 开发者模式标注交付
 不接 MCP 时的传统方式：在"开发者模式"量间距、取色值、看字号、导出切图（SVG/PNG），据此手写代码。CoDesign 这一环成熟。
 
+### 路径 2-B：截图 / 导出图片交给 Claude Code（适用于墨刀等无 MCP 工具）
+墨刀等原型工具不提供 MCP，但 Claude Code 支持直接读取图片：
+
+| 方法 | 操作 |
+|---|---|
+| 截图 | 墨刀中截取页面图片，粘贴到对话 |
+| 导出 PNG | 墨刀「导出」→ PNG，发送给 Claude Code |
+| 导出 HTML 原型 | 墨刀支持导出可点击 HTML，Claude Code 可读其结构 |
+
+效果与 MCP 稍弱（无精确像素数值），但对于确定"长什么样、有哪些元素"已经足够。**墨刀建议只用来画流程和交互原型，精细 UI 规格交给支持 MCP 的工具或直接由 Claude Code 手写**。
+
 ### 路径 3：设计令牌（Design Tokens）→ CSS 变量
 把颜色/圆角/间距/字体导出为 **CSS 变量**，让 **unibest 与 Tabler 共用一套主题**，App 与管理后台视觉统一、改主题改一处。**建议必做**。
 
@@ -44,23 +59,27 @@ Visual Copilot(Builder.io)、Anima、Locofy，及 Pixso/MasterGo 自带转代码
 因此**最靠谱的工作流**：
 
 ```
-设计工具（高保真 + 原型 + 设计令牌）
-        │  MCP 提供"精确规格"
+你在设计工具画好设计稿
+        │
+        │  ← MCP（只读）：Claude Code 读取节点/规格/令牌
+        │  ← 截图/图片：无 MCP 时的替代（如墨刀）
         ▼
-Claude Code 按规格落地到 unibest / Tabler
+Claude Code 按规格手写代码 → unibest Vue 页面 / Tabler HTML 模板
         │
         ▼
-本地 pnpm dev:h5 / go run 预览 → 迭代
+本地 pnpm dev:h5 / go run 预览 → 你反馈 → 迭代
 ```
 
-**设计工具负责"长什么样"与"令牌"，落地到框架由 AI 手写**，保证代码干净可维护。
+> MCP 方向是**单向读取**：设计工具 → Claude Code。Claude Code 无法反向控制设计工具画图。
+
+**设计工具负责"长什么样"与"令牌"，落地到框架由 Claude Code 手写**，保证代码干净可维护。
 
 ## 五、推荐工作流（按投入分档）
 
 ### 轻量档（建议先用）
-1. **墨刀**画原型，定页面流程；
-2. **Pixso / 即时设计** 出关键页面高保真 + **设计令牌**；
-3. 其余交给 Claude Code 用 `ui-ux-pro-max` / `frontend-design` 技能在 unibest/Tabler 中实现。
+1. **墨刀**画原型，定页面流程与跳转；**截图**发给 Claude Code，作为页面参考；
+2. **Pixso / 即时设计** 出关键页面高保真 + **设计令牌**，接 MCP 交付精确规格；
+3. Claude Code 按规格在 unibest/Tabler 中手写实现，浏览器预览迭代。
 
 ### 完整档
 选一个工具（Pixso/Figma）做全套设计 → **接 MCP 到 Claude Code** → 逐页像素级还原。