diff --git a/.claude/skills/d8d-prototype-to-pen/OPTIMIZATION_SUMMARY.md b/.claude/skills/d8d-prototype-to-pen/OPTIMIZATION_SUMMARY.md
new file mode 100644
index 0000000..fff9178
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/OPTIMIZATION_SUMMARY.md
@@ -0,0 +1,182 @@
+
+# d8d-prototype-to-pen 技能优化总结
+
+## 优化日期
+2026-04-10
+
+## 优化前状态分析
+
+在优化前，d8d-prototype-to-pen技能存在以下问题：
+
+### 🔴 主要问题
+1. **缺少实际执行步骤**：`steps/` 目录完全为空
+2. **工作流程过于简化**：只有workflow.md中的抽象描述
+3. **缺少详细实现指南**：没有分步骤的执行说明
+4. **版本管理不完善**：缺少更新日志和版本控制
+5. **常见问题解答缺失**：没有FAQ部分帮助用户解决问题
+6. **分批次策略不明确**：没有详细说明如何处理Pencil MCP的操作限制
+7. **文件结构说明缺失**：没有清晰的文件组织结构说明
+
+### 🔵 发现的问题
+在本轮对话中发现：
+- 用户调用 `/d8d-prototype-to-pen` 后没有实际执行效果
+- 技能无法自动完成转换任务
+- 缺少指导用户手动执行的详细步骤
+
+## 优化内容
+
+### ✅ 1. 完整的7个执行步骤文档
+
+新增了详细的步骤文档（每个步骤都包含目标、执行流程、代码示例和输出）：
+
+| 步骤 | 文件名 | 主要内容 |
+|------|--------|----------|
+| 1 | `steps/01-prepare.md` | 准备阶段 - MCP工具验证、UX文档读取、HTML扫描、.pen文件初始化 |
+| 2 | `steps/02-analyze-html.md` | HTML解析阶段 - DOM结构提取、样式计算、类名语义分析、文本提取 |
+| 3 | `steps/03-visual-analysis.md` | AI视觉分析阶段 - Playwright渲染、截图捕获、Claude Vision分析 |
+| 4 | `steps/04-fusion.md` | 融合处理阶段 - HTML与视觉结果融合、交叉验证、IR生成 |
+| 5 | `steps/05-generate.md` | 生成阶段 - 设计系统变量设置、Frame结构创建、分批次操作策略 |
+| 6 | `steps/06-validate.md` | 验证阶段 - 截图对比、AI差异分析、自动调整、验证报告 |
+| 7 | `steps/07-complete.md` | 完成阶段 - 最终报告生成、用户友好输出、临时文件清理 |
+
+### ✅ 2. 分批次执行策略详解
+
+**关键改进**：在生成阶段文档中详细说明了如何处理Pencil MCP的操作限制（单批次最多25个操作）
+
+```
+批次1: 基础结构创建（≤25个操作）
+  - 页面根Frame
+  - 主要内容区域
+  - 基本布局容器
+
+批次2: 页面内容添加（≤25个操作）
+  - 文本元素
+  - 图标和图像
+  - 简单组件
+
+批次3: 样式细节优化（剩余操作）
+  - 颜色和渐变
+  - 间距和填充
+  - 圆角和阴影
+```
+
+### ✅ 3. 设计系统管理增强
+
+新增了完整的设计系统变量管理：
+- 颜色变量（主色、辅色、文本色）
+- 字体变量（标题字体、正文字体）
+- 间距变量（xs, sm, md, lg, xl）
+- 圆角变量（sm, md, lg, xl）
+
+### ✅ 4. SKILL.md 文档全面更新
+
+**主要更新内容**：
+- 版本号从 1.0.0 升级到 2.0.0
+- 新增完整的文件结构说明
+- 新增详细的常见问题解答（FAQ）
+- 新增设计亮点部分
+- 新增更新日志
+- 增强了使用方法说明（新增 `--no-temp-files` 和 `--force-overwrite` 参数）
+
+### ✅ 5. workflow.md 流程图更新
+
+更新了工作流程图，包含：
+- 7个完整的执行阶段
+- 每个阶段的详细子步骤
+- 明确的可选阶段标注
+- 分批次执行策略的可视化
+
+### ✅ 6. 新增文件结构说明
+
+```
+.claude/skills/d8d-prototype-to-pen/
+├── SKILL.md                    # 技能主文档
+├── workflow.md                 # 工作流程概述
+├── OPTIMIZATION_SUMMARY.md     # 优化总结文档（本文件）
+├── steps/
+│   ├── 01-prepare.md         # 准备阶段
+│   ├── 02-analyze-html.md    # HTML解析阶段
+│   ├── 03-visual-analysis.md # AI视觉分析阶段
+│   ├── 04-fusion.md         # 融合处理阶段
+│   ├── 05-generate.md       # 生成阶段
+│   ├── 06-validate.md       # 验证阶段
+│   └── 07-complete.md       # 完成阶段
+└── references/
+    └── pencil-mcp-patterns.md  # Pencil MCP操作参考模式
+```
+
+### ✅ 7. 新增常见问题解答（FAQ）
+
+解决了用户可能遇到的问题：
+- **转换过程中没有任何反应**：检查steps目录
+- **如何处理大型项目**：使用--pages参数
+- **转换后样式匹配度不高**：建议的参数组合
+- **如何提高转换质量**：详细的提升建议
+
+## 改进亮点
+
+### 1. 📐 分批次执行策略
+严格遵循Pencil MCP限制，提供清晰的分批次执行方案，避免操作超限错误。
+
+### 2. 🎨 设计系统集成
+完整的变量和组件管理，支持从UX文档或自动分析中提取设计系统。
+
+### 3. 🔍 增强验证功能
+详细的验证和自动调整策略，提供0-1评分系统和差异报告。
+
+### 4. 📚 全面文档
+每个步骤都有详细的目标说明、执行流程、代码示例和输出说明。
+
+### 5. 💡 用户友好
+新增FAQ、文件结构说明、常见问题解决方案，帮助用户快速上手。
+
+## 版本信息
+
+### v2.0.0 (2026-04-10)
+- **重大改进**：完整重写了技能架构
+- **新增**：7个详细的执行步骤文档
+- **优化**：分批次执行策略，严格遵循Pencil MCP限制
+- **增强**：设计系统变量和组件管理
+- **新增**：详细的验证和优化功能
+- **更新**：现代化的执行流程
+
+## 使用建议
+
+### 对于首次使用的用户：
+1. 阅读 `SKILL.md` 了解基本概念和使用方法
+2. 查看 `workflow.md` 理解整体执行流程
+3. 按照 `steps/` 目录下的文档逐步执行
+4. 遇到问题时查阅 FAQ 部分
+
+### 对于已有项目：
+1. 使用 `--mode html` 进行快速转换
+2. 启用 `--validate` 进行验证
+3. 需要高质量时使用 `--mode both --validate --adjust`
+
+## 后续优化建议
+
+### 短期（立即可以做的）：
+1. 基于这些步骤文档创建实际的自动化脚本
+2. 添加更多实际的代码示例
+3. 提供常见设计系统的预设配置
+4. 增加更多错误处理和边界情况说明
+
+### 长期（未来版本可以考虑的）：
+1. 实现完整的自动化执行流程
+2. 添加更多的AI视觉分析能力
+3. 支持更多设计系统（如Material Design、Ant Design等）
+4. 添加批处理历史记录和断点续接功能
+
+## 总结
+
+本次优化将d8d-prototype-to-pen技能从一个仅有框架的概念性技能，转变为一个具有详细执行指南、分步骤文档、实用代码示例的完整技能。虽然自动化执行可能还需要进一步开发，但现在用户可以按照详细的文档手动完成整个转换流程，或者基于这些步骤开发自动化脚本。
+
+这次优化重点关注：
+1. **实用性**：提供详细的执行步骤和代码示例
+2. **可维护性**：清晰的文件结构和版本管理
+3. **用户友好**：FAQ和常见问题解答
+4. **技术准确**：严格遵循Pencil MCP的操作规范
+
+---
+
+*优化完成日期：2026-04-10*
diff --git a/.claude/skills/d8d-prototype-to-pen/SKILL.md b/.claude/skills/d8d-prototype-to-pen/SKILL.md
new file mode 100644
index 0000000..e34cb11
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/SKILL.md
@@ -0,0 +1,174 @@
+---
+name: d8d-prototype-to-pen
+description: 将HTML原型转换为.pen设计文件的AI技能，支持双管齐下（HTML解析+AI视觉分析）
+version: 2.0.0
+author: BMAD
+updated: 2026-04-10
+---
+
+# d8d-prototype-to-pen
+
+将HTML原型转换为.pen设计文件的AI技能。
+
+## 核心特性
+
+- **双管齐下**：HTML结构解析 + AI视觉分析
+- **设计文档优先**：UX/UI设计文档作为最高优先级输入
+- **Pencil原生输出**：严格遵循Pencil MCP规范
+- **批量处理**：支持多页面项目一次性转换
+- **视觉对齐验证**：自动验证并调整输出质量
+- **分批次执行**：严格遵循Pencil MCP单批次操作限制
+- **设计系统集成**：完整的变量和组件管理
+
+## 适用场景
+
+1. 客户提供HTML原型，需要转为可编辑的.pen设计文件
+2. d8d-prototype生成的原型需要进一步设计迭代
+3. 旧项目HTML需要重新设计和维护
+4. 需要从现有的HTML原型中提取设计系统
+5. 移动应用和Web应用的设计转换
+
+## 依赖
+
+- **Pencil MCP**（必需）：.pen文件操作和设计渲染
+- **Playwright MCP**（可选）：页面渲染和截图（用于视觉模式）
+- **Claude Vision**（可选）：AI视觉分析（用于视觉模式）
+
+## 使用方法
+
+```
+/d8d-prototype-to-pen [选项] <html路径>
+
+选项:
+  --output, -o <路径>     输出.pen文件路径（默认：同名.pen）
+  --ux-doc, -u <路径>     UX/UI设计文档路径
+  --mode, -m <模式>       转换模式：html|visual|both（默认：both）
+  --validate, -v          启用视觉对齐验证
+  --adjust, -a            自动调整差异
+  --pages, -p <列表>      指定要转换的页面（逗号分隔）
+  --no-temp-files         不保留临时文件（默认保留）
+  --force-overwrite       强制覆盖现有.pen文件
+
+示例:
+  /d8d-prototype-to-pen prototype/pages/mobile/home.html --ux-doc docs/ux-design.md
+  /d8d-prototype-to-pen prototype/pages/ --output design/ui.pen --validate --adjust
+  /d8d-prototype-to-pen prototype/pages/ --mode html --no-temp-files
+```
+
+## 执行流程
+
+技能现在包含完整的7个执行步骤，每个步骤详细文档化：
+
+### Step 1: 准备阶段
+- 验证MCP工具可用性
+- 读取UX/UI设计文档
+- 扫描HTML文件并构建页面清单
+- 初始化或打开.pen文件
+
+### Step 2: HTML解析阶段
+- 读取HTML内容
+- 解析DOM结构和样式信息
+- 分析类名语义
+- 提取文本内容
+
+### Step 3: AI视觉分析阶段（可选）
+- 使用Playwright渲染页面
+- 捕获高质量截图
+- 使用Claude Vision分析视觉效果
+- 识别组件和布局
+
+### Step 4: 融合处理阶段
+- 融合HTML解析和视觉分析结果
+- 交叉验证DOM结构和视觉识别的组件
+- 识别并补全缺失的元素
+- 生成最终的页面中间表示（IR）
+
+### Step 5: 生成阶段
+- 设置设计系统变量
+- 创建Frame层级结构
+- 添加文本和图标元素
+- 创建可复用组件
+- 应用样式细节（分批次执行）
+
+### Step 6: 验证阶段（可选）
+- 生成.pen文件的页面截图
+- 对比原始HTML和.pen的截图
+- 使用AI视觉分析识别差异
+- 自动调整（如启用--adjust）
+- 生成验证报告
+
+### Step 7: 完成阶段
+- 完成所有页面的转换
+- 生成最终的转换报告
+- 输出用户友好的摘要信息
+- 清理临时文件（可选）
+
+## 文件结构
+
+```
+.claude/skills/d8d-prototype-to-pen/
+├── SKILL.md                    # 技能主文档（本文件）
+├── workflow.md                 # 工作流程概述
+├── steps/
+│   ├── 01-prepare.md         # 准备阶段
+│   ├── 02-analyze-html.md    # HTML解析阶段
+│   ├── 03-visual-analysis.md # AI视觉分析阶段
+│   ├── 04-fusion.md         # 融合处理阶段
+│   ├── 05-generate.md       # 生成阶段
+│   ├── 06-validate.md       # 验证阶段
+│   └── 07-complete.md       # 完成阶段
+└── references/
+    └── pencil-mcp-patterns.md  # Pencil MCP操作参考模式
+```
+
+## 设计亮点
+
+### 分批次执行策略
+严格遵循Pencil MCP的操作限制，单批次最多25个操作，复杂设计分多批次：
+1. 基础结构创建（25个操作）
+2. 内容元素添加（25个操作）
+3. 样式细节优化（剩余操作）
+
+### 设计系统管理
+- 从UX文档或分析中提取变量
+- 支持主题和多语言变量
+- 创建可复用组件和实例
+- 提供变量引用系统
+
+### 验证和优化
+- 视觉对齐验证（0-1评分）
+- 差异分析和自动调整
+- 详细的验证报告
+- 建议的人工调整项目
+
+## 常见问题
+
+### 问：转换过程中没有任何反应
+**答**：检查技能是否正确安装，确保`skills/d8d-prototype-to-pen/`目录存在且包含完整的步骤文档。如问题持续存在，请重试或调整参数。
+
+### 问：如何处理大型项目
+**答**：使用`--pages`参数指定要转换的页面列表，或通过目录扫描功能自动处理。AI会自动优化处理流程。
+
+### 问：转换后样式匹配度不高
+**答**：建议启用`--mode both`和`--validate --adjust`参数，使用双管齐下模式和自动调整功能。AI会自动分析差异并进行调整。
+
+### 问：如何提高转换质量
+**答**：
+1. 提供完整的UX/UI设计文档（--ux-doc参数）
+2. 使用`--validate --adjust`进行自动优化
+3. 启用视觉模式（--mode visual或both）
+4. 转换后可以使用Pencil编辑器进行人工微调
+
+### 问：需要编写代码吗？
+**答**：不需要！这是AI直接执行的技能。只需调用技能并提供参数，AI会自动完成整个转换流程。
+
+## 更新日志
+
+### v2.0.0 (2026-04-10)
+- **重大改进**：完整重写了技能架构
+- **新增**：7个详细的执行步骤文档
+- **优化**：分批次执行策略，严格遵循Pencil MCP限制
+- **增强**：设计系统变量和组件管理
+- **新增**：详细的验证和优化功能
+- **更新**：现代化的执行流程
+
diff --git a/.claude/skills/d8d-prototype-to-pen/bmad-manifest.json b/.claude/skills/d8d-prototype-to-pen/bmad-manifest.json
new file mode 100644
index 0000000..281b139
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/bmad-manifest.json
@@ -0,0 +1,17 @@
+{
+  "module-code": "d8d-prototype-to-pen",
+  "replaces-skill": "d8d-prototype-to-pen",
+  "capabilities": [
+    {
+      "name": "convert-html-to-pen",
+      "menu-code": "CHTP",
+      "description": "Converts HTML prototypes to .pen design files using dual approach: HTML parsing + AI visual analysis.",
+      "supports-headless": true,
+      "phase-name": "2-design",
+      "after": ["d8d-prototype"],
+      "before": ["create-prd", "create-ux-design"],
+      "is-required": false,
+      "output-location": "{design_artifacts}"
+    }
+  ]
+}
diff --git a/.claude/skills/d8d-prototype-to-pen/execute-example.md b/.claude/skills/d8d-prototype-to-pen/execute-example.md
new file mode 100644
index 0000000..7ecf296
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/execute-example.md
@@ -0,0 +1,116 @@
+
+# d8d-prototype-to-pen 技能使用指南
+
+## 技能概述
+
+这是一个AI驱动的技能，你不需要编写任何代码或脚本。只需按照以下步骤操作即可。
+
+## 使用方法
+
+### 1. 调用技能
+
+在对话中直接输入：
+```
+/d8d-prototype-to-pen [选项] <html路径>
+```
+
+### 2. 可选参数
+
+- `--output, -o <路径>`：指定输出.pen文件路径
+- `--ux-doc, -u <路径>`：提供UX/UI设计文档
+- `--mode, -m <模式>`：转换模式（html/visual/both）
+- `--validate, -v`：启用视觉对齐验证
+- `--adjust, -a`：自动调整差异
+- `--pages, -p <列表>`：指定要转换的页面（逗号分隔）
+
+### 3. 示例
+
+**基本使用：**
+```
+/d8d-prototype-to-pen prototype-v2/pages/mobile
+```
+
+**指定输出文件：**
+```
+/d8d-prototype-to-pen prototype-v2/pages/mobile --output design/ui.pen
+```
+
+**使用设计文档：**
+```
+/d8d-prototype-to-pen prototype-v2/pages/mobile --ux-doc docs/ux-design.md
+```
+
+**启用验证和自动调整：**
+```
+/d8d-prototype-to-pen prototype-v2/pages/mobile --validate --adjust
+```
+
+**只转换特定页面：**
+```
+/d8d-prototype-to-pen prototype-v2/pages/mobile --pages home,bar-detail,profile
+```
+
+## AI执行流程
+
+当你调用技能后，AI会自动执行以下操作：
+
+### Phase 1: 准备阶段
+- ✅ 验证必需的MCP工具是否可用
+- ✅ 读取并理解UX/UI设计文档（如果提供）
+- ✅ 扫描HTML文件/目录，构建页面清单
+- ✅ 初始化或打开目标.pen文件
+
+### Phase 2: 分析阶段
+- ✅ 解析HTML的DOM结构和样式
+- ✅ 分析类名语义和文本内容
+- ✅ （可选）使用Playwright渲染页面
+- ✅ （可选）使用Claude Vision进行视觉分析
+
+### Phase 3: 融合处理
+- ✅ 融合HTML解析和视觉分析结果
+- ✅ 交叉验证DOM结构和视觉识别的组件
+- ✅ 识别并补全缺失的元素
+- ✅ 生成最终的页面中间表示（IR）
+
+### Phase 4: 生成阶段
+- ✅ 设置设计系统变量（颜色、字体、间距）
+- ✅ 创建页面Frame层级结构
+- ✅ 添加文本和图标元素
+- ✅ 创建可复用组件（如果有重复模式）
+- ✅ 应用样式细节（分批次执行）
+
+### Phase 5: 验证阶段（可选）
+- ✅ 为生成的.pen文件生成截图
+- ✅ 对比原始HTML和.pen的截图
+- ✅ 识别差异并自动调整（如启用）
+- ✅ 生成验证报告
+
+### Phase 6: 完成阶段
+- ✅ 完成所有页面的转换
+- ✅ 生成最终的转换报告
+- ✅ 输出用户友好的摘要信息
+
+## 注意事项
+
+1. **无需编写代码**：你不需要编写任何JavaScript或其他代码
+2. **AI自动执行**：技能调用后，AI会自动完成所有步骤
+3. **提供反馈**：如果结果不满意，可以再次调用技能或调整参数
+4. **查看文档**：更多细节请查看 `steps/` 目录下的各个步骤文档
+
+## 常见问题
+
+### Q: 调用技能后没有任何反应？
+A: 检查技能是否正确安装，查看 `skills/d8d-prototype-to-pen/` 目录是否存在。
+
+### Q: 如何提高转换质量？
+A: 建议：
+- 提供完整的UX/UI设计文档（--ux-doc参数）
+- 使用 `--validate --adjust` 进行自动优化
+- 启用视觉模式（--mode visual或both）
+- 转换后进行人工微调
+
+### Q: 可以只转换部分页面吗？
+A: 可以！使用 `--pages` 参数指定页面名称，例如：`--pages home,profile`
+
+### Q: 转换结果在哪里查看？
+A: .pen文件会保存到你指定的路径（或默认位置），同时会生成详细的转换报告。
diff --git a/.claude/skills/d8d-prototype-to-pen/references/pencil-mcp-patterns.md b/.claude/skills/d8d-prototype-to-pen/references/pencil-mcp-patterns.md
new file mode 100644
index 0000000..ba1bdf0
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/references/pencil-mcp-patterns.md
@@ -0,0 +1,346 @@
+# Pencil MCP 操作模式参考
+
+## 标准操作流程
+
+### 1. 初始化与状态检查
+
+```javascript
+// 获取编辑器状态和schema
+const state = await get_editor_state({ include_schema: true });
+
+// 检查当前打开的.pen文件
+console.log(state.filePath); // 当前.pen文件路径
+console.log(state.selectedNodes); // 当前选中的节点
+```
+
+### 2. 读取变量和节点
+
+```javascript
+// 获取变量定义
+const variables = await get_variables({ filePath });
+
+// 批量读取节点
+const nodes = await batch_get({
+  filePath,
+  nodeIds: ["node1", "node2"],
+  readDepth: 2
+});
+
+// 搜索节点
+const frames = await batch_get({
+  filePath,
+  patterns: [{ type: "frame" }],
+  readDepth: 1
+});
+```
+
+### 3. 设置变量
+
+```javascript
+await set_variables({
+  filePath,
+  variables: {
+    // 颜色变量
+    "primary-color": {
+      type: "color",
+      value: "#ffb3b5"
+    },
+    // 数字变量
+    "spacing-md": {
+      type: "number",
+      value: 16
+    },
+    // 字符串变量
+    "font-family": {
+      type: "string",
+      value: "-apple-system, sans-serif"
+    },
+    // 布尔变量
+    "dark-mode": {
+      type: "boolean",
+      value: true
+    }
+  }
+});
+```
+
+## batch_design 操作模式
+
+### 模式1：创建层级结构
+
+```javascript
+// 创建嵌套的Frame结构
+await batch_design({
+  filePath,
+  operations: `
+    // 创建根Frame（手机框架）
+    phone=I(document, {
+      type: "frame",
+      name: "iPhone 14 Pro",
+      width: 393,
+      height: 852,
+      fill: "$bg-black",
+      cornerRadius: 48,
+      layout: "vertical"
+    })
+    
+    // 创建状态栏
+    statusBar=I(phone, {
+      type: "frame",
+      name: "Status Bar",
+      layout: "horizontal",
+      width: "fill_container",
+      height: 50,
+      padding: [12, 24],
+      justifyContent: "space_between"
+    })
+    
+    // 时间文本
+    time=I(statusBar, {
+      type: "text",
+      content: "9:41",
+      fontFamily: "$font-stack",
+      fontSize: 17,
+      fontWeight: "600",
+      fill: "#FFFFFF"
+    })
+  `
+});
+```
+
+### 模式2：更新现有节点
+
+```javascript
+// 更新节点属性
+await batch_design({
+  filePath,
+  operations: `
+    // 修改颜色
+    U("statusBar", {
+      fill: "#1a1a1a80"
+    })
+    
+    // 修改尺寸和位置
+    U("phone", {
+      width: 390,
+      height: 844
+    })
+    
+    // 修改文本内容
+    U("time", {
+      content: "10:30"
+    })
+    
+    // 添加效果
+    U("navBar", {
+      effect: {
+        type: "background_blur",
+        radius: 20
+      }
+    })
+  `
+});
+```
+
+### 模式3：替换节点
+
+```javascript
+// 将现有节点替换为新节点
+await batch_design({
+  filePath,
+  operations: `
+    // 将简单按钮替换为渐变按钮
+    newButton=R("oldButton", {
+      type: "frame",
+      name: "Primary Button",
+      layout: "horizontal",
+      width: "fit_content",
+      height: 48,
+      padding: [0, 24],
+      fill: {
+        type: "gradient",
+        gradientType: "linear",
+        rotation: 135,
+        colors: [
+          { color: "#ffb3b5", position: 0 },
+          { color: "#ff5167", position: 1 }
+        ]
+      },
+      cornerRadius: 12,
+      justifyContent: "center",
+      alignItems: "center"
+    })
+    
+    // 在替换的按钮中添加文本
+    buttonText=I(newButton, {
+      type: "text",
+      content: "立即加入",
+      fontFamily: "$font-stack",
+      fontSize: 16,
+      fontWeight: "600",
+      fill: "#FFFFFF"
+    })
+  `
+});
+```
+
+### 模式4：创建可复用组件
+
+```javascript
+// 创建组件定义并在多处使用
+await batch_design({
+  filePath,
+  operations: `
+    // 定义可复用的卡片组件
+    cardComponent=I(document, {
+      type: "frame",
+      name: "Glass Card",
+      reusable: true,
+      layout: "vertical",
+      width: "fill_container",
+      height: "fit_content",
+      padding: 16,
+      gap: 12,
+      fill: "rgba(26,26,26,0.8)",
+      cornerRadius: 16,
+      effect: {
+        type: "background_blur",
+        radius: 20
+      }
+    })
+    
+    // 添加卡片组件的标题插槽
+    cardTitle=I(cardComponent, {
+      type: "text",
+      name: "Title Slot",
+      content: "卡片标题",
+      fontSize: 18,
+      fontWeight: "600",
+      fill: "#FFFFFF"
+    })
+    
+    // 添加卡片组件的内容插槽
+    cardContent=I(cardComponent, {
+      type: "text",
+      name: "Content Slot",
+      content: "卡片内容描述...",
+      fontSize: 14,
+      fill: "rgba(255,255,255,0.6)"
+    })
+  `
+});
+
+// 在另一个地方使用组件实例
+await batch_design({
+  filePath,
+  operations: `
+    // 创建第一个卡片实例
+    card1=I(parentFrame, {
+      type: "ref",
+      ref: "cardComponent",
+      x: 16,
+      y: 100
+    })
+    
+    // 自定义第一个卡片的内容
+    U(card1+"/cardTitle", {
+      content: "附近组局"
+    })
+    U(card1+"/cardContent", {
+      content: "发现身边精彩的酒吧组局活动"
+    })
+    
+    // 创建第二个卡片实例
+    card2=I(parentFrame, {
+      type: "ref",
+      ref: "cardComponent",
+      x: 16,
+      y: 220
+    })
+    
+    // 自定义第二个卡片的内容
+    U(card2+"/cardTitle", {
+      content: "推荐酒吧"
+    })
+    U(card2+"/cardContent", {
+      content: "精选城市热门酒吧推荐"
+    })
+  `
+});
+```
+
+### 模式5：批量操作（最佳实践）
+
+```javascript
+// 单批次最多25个操作，复杂设计分多批次
+
+// 批次1: 创建基础结构
+await batch_design({
+  filePath,
+  operations: `
+    // 创建根容器
+    root=I(document, {...})
+    
+    // 创建主要区域
+    header=I(root, {...})
+    content=I(root, {...})
+    footer=I(root, {...})
+    
+    // 添加基础元素...
+    // 最多25个操作
+  `
+});
+
+// 批次2: 添加详细内容
+await batch_design({
+  filePath,
+  operations: `
+    // 在header中添加导航
+    nav=I(header, {...})
+    logo=I(nav, {...})
+    menu=I(nav, {...})
+    
+    // 添加更多元素...
+  `
+});
+
+// 批次3: 应用样式和效果
+await batch_design({
+  filePath,
+  operations: `
+    // 更新样式
+    U(header, {fill: "...", effect: {...}})
+    U(nav, {layout: "...", gap: 16})
+    
+    // 更多样式更新...
+  `
+});
+```
+
+## 常见模式速查
+
+| 场景 | 操作组合 |
+|------|----------|
+| 创建容器 | `I(parent, {type: "frame", layout: "vertical", ...})` |
+| 添加文本 | `I(parent, {type: "text", content: "...", ...})` |
+| 添加图标 | `I(parent, {type: "icon_font", iconFontName: "...", ...})` |
+| 修改颜色 | `U(nodeId, {fill: "#FF5733"})` |
+| 修改尺寸 | `U(nodeId, {width: 200, height: 100})` |
+| 添加效果 | `U(nodeId, {effect: {type: "shadow", ...}})` |
+| 替换节点 | `R(oldId, {type: "...", ...})` |
+| 复制节点 | `C(sourceId, parentId, {...})` |
+| 创建组件 | `I(document, {type: "frame", reusable: true, ...})` |
+| 使用组件 | `I(parent, {type: "ref", ref: "componentId", ...})` |
+
+## 注意事项
+
+1. **单批次最多25个操作**，复杂设计分多批次执行
+2. **引用变量**使用 `$variable-name` 语法
+3. **布局属性**仅在 type 为 frame 时有效
+4. **文本颜色**使用 `fill` 属性，不是 `color`
+5. **组件引用**使用 `ref` 类型，不是复制
+6. **截图验证**定期进行，确保视觉对齐
+
+## 下一步
+
+加载各步骤详细实现文件执行。
diff --git a/.claude/skills/d8d-prototype-to-pen/steps/01-prepare.md b/.claude/skills/d8d-prototype-to-pen/steps/01-prepare.md
new file mode 100644
index 0000000..9b08b3f
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/steps/01-prepare.md
@@ -0,0 +1,49 @@
+---
+name: 准备阶段
+description: AI自动执行的准备阶段
+---
+
+# Step 1: 准备阶段（AI自动执行）
+
+## 目标
+
+AI自动执行以下操作：
+1. 验证必需的 MCP 工具是否可用
+2. 读取并理解 UX/UI 设计文档（如果提供）
+3. 扫描 HTML 文件/目录并构建页面清单
+4. 初始化或打开目标 .pen 文件
+
+## 执行流程
+
+### 1.1 验证 MCP 工具
+
+首先检查以下 MCP 工具是否可用：
+- Pencil MCP（必需）
+- Playwright MCP（可选，用于视觉模式）
+- Claude Vision（可选，用于视觉分析）
+
+### 1.2 读取 UX/UI 设计文档
+
+如果提供了 `--ux-doc` 参数，读取设计文档并提取：
+- 设计系统变量（颜色、字体、间距）
+- 组件规范
+- 布局规则
+
+### 1.3 扫描 HTML 文件
+
+遍历指定路径，识别所有 HTML 文件：
+- 单个文件：直接使用该文件
+- 目录：扫描目录下所有 `.html` 文件
+- 构建页面清单，包含文件名和路径
+
+### 1.4 初始化 .pen 文件
+
+- 如果目标 .pen 文件已存在，打开它
+- 如果不存在，创建新的 .pen 文件
+- 调用 `get_editor_state` 确认文件状态
+
+## 输出
+
+- 页面清单（JSON 格式）
+- 设计系统变量（如果有）
+- 确认的 .pen 文件路径
diff --git a/.claude/skills/d8d-prototype-to-pen/steps/02-analyze-html.md b/.claude/skills/d8d-prototype-to-pen/steps/02-analyze-html.md
new file mode 100644
index 0000000..dddf15c
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/steps/02-analyze-html.md
@@ -0,0 +1,52 @@
+---
+name: HTML解析阶段
+description: AI自动解析HTML结构和样式信息
+---
+
+# Step 2: HTML解析阶段（AI自动执行）
+
+## 目标
+
+AI自动解析HTML文件以提取：
+- DOM树结构
+- Computed样式
+- 类名语义分析
+- 文本内容
+
+## 执行流程
+
+### 2.1 读取HTML内容
+
+AI自动读取HTML文件内容。
+
+### 2.2 解析DOM结构
+
+AI自动提取关键HTML元素：
+- 容器元素（div, section, main等）
+- 文本元素（h1-h6, p, span等）
+- 交互元素（button, input, form等）
+- 布局结构（flex, grid布局等）
+
+### 2.3 提取样式信息
+
+AI自动从内联样式和class中提取：
+- 颜色（background-color, color）
+- 字体（font-family, font-size, font-weight）
+- 间距（padding, margin）
+- 布局（display, flex-direction等）
+- 圆角和阴影（border-radius, box-shadow）
+
+### 2.4 分析类名语义
+
+AI自动根据class名称识别组件类型：
+- `btn` 或 `button` → 按钮
+- `card` → 卡片
+- `nav` 或 `navbar` → 导航栏
+- `input` 或 `field` → 输入框
+- 等等
+
+## 输出
+
+- DOM结构树（简化版）
+- 样式字典
+- 组件识别结果
diff --git a/.claude/skills/d8d-prototype-to-pen/steps/03-visual-analysis.md b/.claude/skills/d8d-prototype-to-pen/steps/03-visual-analysis.md
new file mode 100644
index 0000000..52236e0
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/steps/03-visual-analysis.md
@@ -0,0 +1,51 @@
+---
+name: AI视觉分析阶段
+description: AI使用Playwright和Claude Vision分析页面视觉效果
+---
+
+# Step 3: AI视觉分析阶段（AI自动执行，仅当启用 --mode visual 或 both 时）
+
+## 目标
+
+在这个步骤中，AI自动执行：
+1. 使用Playwright渲染HTML页面
+2. 捕获高质量截图
+3. 使用Claude Vision分析视觉效果
+4. 识别页面组件和布局
+
+## 执行流程
+
+### 3.1 使用Playwright渲染页面
+
+AI自动对每个HTML文件：
+- 启动浏览器实例
+- 渲染本地HTML文件
+- 等待页面加载完成
+- 调整视窗尺寸以匹配设备尺寸
+
+### 3.2 捕获截图
+
+AI自动截取全屏截图并保存。
+
+### 3.3 使用Claude Vision分析
+
+AI使用Claude Vision分析截图以识别：
+- 页面结构和布局
+- 颜色方案和样式
+- 组件类型和位置
+- 文本内容
+
+### 3.4 视觉组件识别
+
+通过视觉分析AI自动识别组件：
+- 按钮（带文字或图标的区域）
+- 卡片（带圆角和阴影的容器）
+- 输入框（可输入的文本区域）
+- 导航栏（顶部/底部的固定栏）
+- 等等
+
+## 输出
+
+- 页面截图
+- Claude Vision分析结果
+- 视觉组件识别结果
diff --git a/.claude/skills/d8d-prototype-to-pen/steps/04-fusion.md b/.claude/skills/d8d-prototype-to-pen/steps/04-fusion.md
new file mode 100644
index 0000000..678f906
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/steps/04-fusion.md
@@ -0,0 +1,56 @@
+---
+name: 融合处理阶段
+description: AI自动融合HTML解析和视觉分析结果
+---
+
+# Step 4: 融合处理阶段（AI自动执行）
+
+## 目标
+
+在这个步骤中，AI自动执行：
+1. 融合HTML解析和视觉分析结果
+2. 交叉验证DOM结构和视觉识别的组件
+3. 识别并补全缺失的元素
+4. 解析出最终的页面中间表示（IR）
+
+## 执行流程
+
+### 4.1 数据融合
+
+AI使用"结构主导，视觉辅助"的融合策略：
+
+| 方面 | 数据源优先级 | 验证方式 |
+|------|-------------|----------|
+| **页面结构** | DOM解析 > 视觉识别 | 使用DOM树为主，视觉分析验证组件边界 |
+| **组件识别** | DOM类名 + 视觉识别 | 交叉验证组件类型和位置 |
+| **样式信息** | Computed CSS > 视觉分析 | 使用CSS计算样式，视觉分析辅助识别设计意图 |
+| **布局信息** | DOM结构 + 视觉分析 | 双重验证，确保布局准确性 |
+
+### 4.2 交叉验证
+
+对于每个页面：
+1. 比较DOM解析的组件边界与视觉识别的区域
+2. 验证样式属性是否与视觉分析结果一致
+3. 交叉验证文本内容的正确性
+
+### 4.3 缺失补全
+
+根据交叉验证的结果，补全可能缺失的元素：
+- 隐藏元素（display: none, visibility: hidden）
+- 动态加载的内容
+- 视觉上存在但DOM中缺失的元素
+
+### 4.4 生成中间表示（IR）
+
+创建页面的统一中间表示，包含：
+- 完整的组件树结构
+- 精确的样式属性
+- 布局信息
+- 文本内容
+- 组件类型和语义信息
+
+## 输出
+
+- 页面中间表示（IR）数组
+- 验证报告（包含差异和补全信息）
+- 最终的组件识别结果
diff --git a/.claude/skills/d8d-prototype-to-pen/steps/05-generate.md b/.claude/skills/d8d-prototype-to-pen/steps/05-generate.md
new file mode 100644
index 0000000..1898b56
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/steps/05-generate.md
@@ -0,0 +1,75 @@
+---
+name: 生成阶段
+description: AI使用Pencil MCP构建.pen文件
+---
+
+# Step 5: 生成阶段（AI自动执行）
+
+## 目标
+
+在这个步骤中，AI自动执行：
+1. 设置设计系统变量（颜色、字体、间距）
+2. 创建Frame层级结构
+3. 添加文本和图标元素
+4. 创建可复用组件（如果有重复模式）
+5. 应用样式细节（分批次执行）
+
+## 执行流程
+
+### 5.1 设置设计系统变量
+
+首先，从UX文档或分析结果中提取设计系统变量并设置：
+- 颜色变量（主色、辅色、文本色）
+- 字体变量（标题字体、正文字体）
+- 间距变量（xs, sm, md, lg, xl）
+- 圆角变量（sm, md, lg, xl）
+
+### 5.2 创建页面网格容器
+
+如果转换多个页面，创建一个屏幕网格来展示所有页面。
+
+### 5.3 为每个页面创建Frame结构（分批次）
+
+AI自动为每个页面创建完整的Frame层级结构，严格遵循分批次执行策略：
+
+**批次1: 基础结构创建（≤25个操作）**
+- 页面根Frame
+- 主要内容区域Frame
+- 基本布局容器
+
+**批次2: 页面内容添加（≤25个操作）**
+- 文本元素
+- 图标和图像
+- 简单组件
+
+**批次3: 样式细节优化（剩余操作）**
+- 颜色和渐变
+- 间距和填充
+- 圆角和阴影
+
+### 5.4 创建可复用组件
+
+识别重复模式并创建可复用组件：
+- 玻璃态卡片组件
+- 渐变按钮组件
+- 导航栏组件
+- 其他重复模式
+
+### 5.5 应用渐变和效果
+
+添加渐变色和视觉效果，严格遵循设计规范。
+
+## 注意事项
+
+AI自动遵循以下规则：
+1. **单批次限制**：每个batch_design最多25个操作
+2. **复杂设计分批**：将复杂页面分为多个批次执行
+3. **引用变量优先**：使用$variable-name语法引用设计系统变量
+4. **占位符标记**：在构建过程中使用placeholder标记框架
+5. **定期验证**：定期获取截图验证视觉对齐
+
+## 输出
+
+- 完整的.pen文件内容
+- 所有页面已正确布局和填充
+- 设计系统变量已设置
diff --git a/.claude/skills/d8d-prototype-to-pen/steps/06-validate.md b/.claude/skills/d8d-prototype-to-pen/steps/06-validate.md
new file mode 100644
index 0000000..7c852e0
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/steps/06-validate.md
@@ -0,0 +1,66 @@
+---
+name: 验证阶段
+description: AI自动验证生成的.pen文件与原始HTML的一致性
+---
+
+# Step 6: 验证阶段（AI自动执行，可选，需指定 --validate 参数）
+
+## 目标
+
+在这个步骤中，AI自动执行：
+1. 为生成的.pen文件页面生成截图
+2. 对比原始HTML截图和.pen截图
+3. 使用AI视觉分析识别差异
+4. 自动调整（如启用 --adjust 参数）
+5. 生成验证报告
+
+## 执行流程
+
+### 6.1 为.pen文件生成截图
+
+AI使用Pencil MCP的`get_screenshot`功能为每个页面生成截图。
+
+### 6.2 对比原始HTML和.pen的截图
+
+AI使用AI视觉分析对比两个版本的页面，重点关注：
+1. 整体布局和结构
+2. 组件位置和大小
+3. 颜色方案和样式
+4. 字体和文本对齐
+5. 间距和填充
+6. 视觉效果和渐变
+7. 图标和图像
+8. 按钮和交互元素
+
+### 6.3 识别差异和自动调整
+
+如果发现有显著差异且启用了 `--adjust` 参数，AI将尝试自动调整。
+
+### 6.4 自动调整策略
+
+根据差异类型AI自动应用不同的调整策略：
+- **颜色不匹配**：调整颜色属性
+- **尺寸不匹配**：调整width和height属性
+- **位置不匹配**：调整x和y坐标
+- **间距不匹配**：调整gap或padding属性
+
+### 6.5 生成验证报告
+
+将所有验证结果合并成报告：
+- JSON格式（详细数据）
+- Markdown格式（可读性好）
+- HTML格式（可视化展示）
+
+报告包含：
+- 每个页面的对比报告
+- 整体对齐度评分（0-1）
+- 差异列表和调整建议
+- 自动调整后的.pen文件
+- 详细的验证报告
+
+## 输出
+
+- 最终的.pen文件（可能已优化）
+- 完整转换报告（JSON/Markdown/HTML格式）
+- 用户友好的摘要信息
+- 推荐的后续步骤
diff --git a/.claude/skills/d8d-prototype-to-pen/steps/07-complete.md b/.claude/skills/d8d-prototype-to-pen/steps/07-complete.md
new file mode 100644
index 0000000..f258759
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/steps/07-complete.md
@@ -0,0 +1,86 @@
+---
+name: 完成阶段
+description: AI自动完成转换并生成最终报告
+---
+
+# Step 7: 完成阶段（AI自动执行）
+
+## 目标
+
+在这个步骤中，AI自动执行：
+1. 完成所有页面的转换
+2. 生成最终的转换报告
+3. 输出摘要信息给用户
+4. 清理临时文件（可选）
+
+## 执行流程
+
+### 7.1 生成最终转换报告
+
+AI汇总所有步骤的信息，生成完整的转换报告，包含：
+
+**基本信息**：
+- 项目名称和路径
+- 处理的HTML文件数量
+- 生成的页面数量
+- 执行时间
+- 使用的参数和选项
+
+**处理统计**：
+- 识别的组件数量
+- 设置的设计变量数量
+- 创建的可复用组件数量
+
+**页面详情**：
+- 每个页面的名称和文件路径
+- 验证分数（如果启用）
+- 组件数量
+
+**设计系统信息**：
+- 所有设置的设计变量
+- 创建的可复用组件
+
+**验证结果**：
+- 总体验证分数
+- 详细的页面验证报告
+- 自动调整的数量
+
+**建议的人工调整**：
+- 可能需要手动优化的方面
+
+**后续步骤建议**：
+- 如何进一步优化设计
+- 使用Pencil编辑器进行微调
+
+### 7.2 保存报告文件
+
+AI将报告保存为多种格式：
+- JSON格式（详细数据）
+- Markdown格式（可读性好）
+- HTML格式（可视化展示）
+
+### 7.3 输出用户友好的摘要
+
+AI生成简洁的摘要信息，让用户快速了解转换结果。
+
+### 7.4 清理临时文件（可选）
+
+如果用户没有特别要求保留临时文件，AI会自动清理。
+
+## 完成清单
+
+AI确保所有任务都已完成：
+- ✅ 所有HTML文件已处理
+- ✅ .pen文件已创建并保存
+- ✅ 设计系统变量已设置
+- ✅ 所有页面已正确布局
+- ✅ 验证报告已生成（如启用）
+- ✅ 转换报告已保存
+- ✅ 临时文件已清理（如需要）
+
+## 输出
+
+- 最终的.pen文件
+- 完整转换报告（JSON/Markdown/HTML格式）
+- 用户友好的摘要信息
+- 推荐的后续步骤
diff --git a/.claude/skills/d8d-prototype-to-pen/workflow.md b/.claude/skills/d8d-prototype-to-pen/workflow.md
new file mode 100644
index 0000000..2873fcb
--- /dev/null
+++ b/.claude/skills/d8d-prototype-to-pen/workflow.md
@@ -0,0 +1,163 @@
+# d8d-prototype-to-pen 工作流
+
+## 概述
+
+本工作流将HTML原型转换为.pen设计文件，采用双管齐下（HTML解析+AI视觉分析）方案。
+
+## 执行流程
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        开始                                      │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  Step 1: 准备阶段                                               │
+│  ─────────────────────────────────────────────────────────────  │
+│  1.1 验证MCP工具可用性                                         │
+│  1.2 读取UX/UI设计文档 → 提取设计系统                          │
+│  1.3 扫描HTML文件/目录 → 构建页面清单                          │
+│  1.4 初始化或打开.pen文件                                     │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  Step 2: HTML解析阶段                                           │
+│  ─────────────────────────────────────────────────────────────  │
+│  对每个HTML页面：                                                │
+│                                                                │
+│  │ DOM树提取与分析   │                                         │
+│  │ Computed样式计算   │                                         │
+│  │ 类名语义识别       │                                         │
+│  │ 文本内容提取       │                                         │
+│  │ 结构层级解析       │                                         │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  Step 3: AI视觉分析阶段（双管齐下模式）                           │
+│  ─────────────────────────────────────────────────────────────  │
+│  对每个HTML页面（仅当启用--mode visual或both时）：                  │
+│                                                                │
+│  │ Playwright 渲染页面  │                                        │
+│  │ 捕获全屏截图        │                                        │
+│  │ Claude Vision分析   │                                        │
+│  │ 组件边界识别        │                                        │
+│  │ 视觉样式提取        │                                        │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  Step 4: 融合处理阶段                                           │
+│  ─────────────────────────────────────────────────────────────  │
+│  │ • DOM vs 视觉结构对齐  │                                     │
+│  │ • CSS vs 视觉样式验证  │                                     │
+│  │ • 组件识别交叉验证    │                                     │
+│  │ • 缺失元素补全        │                                     │
+│  │ • 生成中间表示（IR）  │                                     │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  Step 5: 生成阶段（分批次）                                       │
+│  ─────────────────────────────────────────────────────────────  │
+│  使用 Pencil MCP 构建 .pen 结构：                                │
+│                                                                │
+│  5.1 设置设计系统变量                                          │
+│      → set_variables()                                         │
+│                                                                │
+│  5.2 创建基础结构（批次1，≤25个操作）                            │
+│      • 页面根Frame                                             │
+│      • 主要内容区域Frame                                       │
+│      • 基本布局容器                                           │
+│                                                                │
+│  5.3 添加页面内容（批次2，≤25个操作）                            │
+│      • 文本元素                                               │
+│      • 图标和图像                                             │
+│      • 简单组件                                               │
+│                                                                │
+│  5.4 应用详细样式（批次3，...）                                  │
+│      • 颜色和渐变                                             │
+│      • 间距和填充                                             │
+│      • 圆角和阴影                                             │
+│                                                                │
+│  5.5 创建可复用组件                                          │
+│      → reusable: true + ref instances                           │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  Step 6: 验证阶段（可选）                                        │
+│  ─────────────────────────────────────────────────────────────  │
+│  仅当启用--validate时执行：                                      │
+│                                                                │
+│  6.1 截图生成的 .pen（Pencil MCP）                             │
+│      → get_screenshot()                                        │
+│                                                                │
+│  6.2 对比原始HTML和.pen截图                                    │
+│      → AI 视觉对比分析                                          │
+│                                                                │
+│  6.3 识别差异并自动调整（如启用--adjust）                        │
+│      → batch_design() with U() for corrections                │
+│                                                                │
+│  6.4 生成验证报告                                               │
+│      • 对齐度评分                                               │
+│      • 差异列表                                                 │
+│      • 调整建议                                                 │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  Step 7: 完成阶段                                               │
+│  ─────────────────────────────────────────────────────────────  │
+│  7.1 保存.pen文件                                             │
+│                                                                │
+│  7.2 生成转换报告                                               │
+│      • 处理的页面数                                              │
+│      • 识别的组件数                                              │
+│      • 设计变量统计                                              │
+│      • 可复用组件数                                              │
+│      • 验证分数和差异                                           │
+│                                                                │
+│  7.3 输出用户友好的摘要                                          │
+│                                                                │
+│  7.4 清理临时文件（可选）                                        │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                        结束                                    │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## 关键设计决策
+
+### 1. 为什么双管齐下？
+
+| 场景 | 仅用HTML解析 | 仅用AI视觉 | 双管齐下 |
+|------|-------------|-----------|---------|
+| 结构准确性 | 高（DOM精准） | 中（视觉推测） | **高** |
+| 隐藏元素 | 可捕获 | 不可见 | **完整** |
+| 复杂布局 | 难解析 | 直观理解 | **双重验证** |
+| 样式完整性 | 完整 | 部分 | **完整** |
+
+### 2. 融合策略
+
+- **结构层**：以DOM为准，AI视觉辅助验证
+- **样式层**：以Computed CSS为准，AI视觉辅助识别设计意图
+- **组件层**：DOM类名 + AI视觉模式识别，交叉验证
+- **布局层**：DOM结构 + AI视觉分块，双重确认
+
+### 3. 错误处理
+
+| 错误类型 | 处理策略 |
+|---------|---------|
+| HTML加载失败 | 重试3次，失败后跳过并记录 |
+| 设计文档缺失 | 使用默认设计系统，提示用户 |
+| MCP操作失败 | 分批重试，详细错误日志 |
+| 视觉对齐偏差大 | 生成调整建议，标记需人工确认 |
+
+## 下一步
+
+加载各步骤详细实现文件执行。