@szc-ft/mcp-szcd-client 0.23.0 → 0.24.0

package/qwen-extension/agents/szcd-component-expert.md

@@ -75,7 +75,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 1. **加载文件**：
    - `loadSketchByPath` 加载 .sketch 文件
    - `listPages` 列出所有页面
-   - `listNodesByPage`（type="artboard"）获取画板列表
+   - `queryNodes`（pageId, type="artboard"）获取画板列表
    - 根据画板名称选择目标页面
 
 2. **获取完整节点树**：
@@ -84,7 +84,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
    - 拿到所有节点 ID 列表，为下一步分组做准备
 
 3. **按类型分组统计**：
-   - `getNodesSummary`（pageId, groupBy="type"）— 按类型分组，统计 text/rectangle/group 各多少个
+   - `getPageStructure`（pageId, mode="summary", groupBy="type"）— 按类型分组，统计 text/rectangle/group 各多少个
    - 识别组件模式：
      - `group(rectangle + text)` = 标签组件（如状态徽章）
      - `group(text + text + rectangle...)` = 表单项
@@ -101,25 +101,20 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
      - 边框：`style.borders[0].color.hex` + `thickness`
    - **禁止**逐个 `getNodeInfo` 探查
 
-5. **获取组件库架构**（复用步骤1结果）：
-   - `get_architecture_overview` 的 `templatePatterns` 提供模板组合模式
-   - `llmMappingHints` 提供常见错误修正
+**步骤 2.5 产出物**（**只产出数据，不做组件映射**）：
+- Sketch 节点结构 + 全量节点 ID 列表
+- text/rectangle 节点的完整样式 Token
+- 图表区结构规律识别结果
 
-6. **LLM 推理组件范围 + 批量获取组件详情**：
-   - 从 Sketch 结构 + 样式 Token 推断：画板名称→`pageName`，区域分布→`layoutType`，图层类型+颜色→组件映射
-   - 对照 `templatePatterns` 选择最匹配的模板（TreeQueryTable/QueryTabsTables/LeftRight/UpDown）
-   - 输出组件候选列表（如 `["Query","TableOrList","LeftTree","TemplateMode"]`）
-   - 调用 `get_component_full_profile`（name="Query,TableOrList,LeftTree,TemplateMode", depth="deep"）一次性获取所有需要的组件 API
-   - 如需样式注入细节，追加 `get_style_injection_guide`
+组件候选列表推理**不**在步骤 2.5 内部完成，**统一在主流程步骤 3.5 中结合步骤 1 的 `templatePatterns` 推理**。
 
 **Sketch → szcd 工作流（结构化直传 + 样式 Token，无需视觉模型）**：
 ```
-.sketch → loadSketchByPath → listPages → listNodesByPage(type=artboard)
+.sketch → loadSketchByPath → listPages → queryNodes(pageId, type=artboard)
 → getPageStructure(includeDetails=true) / getDocumentStructure(includeDetails=true)
-→ getNodesSummary(groupBy="type")
-→ getMultipleNodeInfo([所有text+rectangle节点ID])  ← 关键：批量拿样式 Token
-→ [步骤1架构数据] → LLM推理组件
-→ get_component_full_profile(批量) → 编码
+→ getPageStructure(pageId, mode="summary", groupBy="type")
+→ getMultipleNodeInfo([所有text+rectangle节点ID])    ← 步骤 2.5 结束
+→ [进入主流程步骤 3.5 统一推理]
 ```
 
 **首轮常见错误 → 正确做法对照表**：
@@ -128,17 +123,91 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 |------|------------|---------|
 | 结构获取 | `getDocumentStructure(includeDetails=false)` 只有名称和位置 | `includeDetails=true` 或 `getPageStructure`，拿到初始样式 |
 | 样式提取 | 没做 | `getMultipleNodeInfo` 批量拉取所有 type=text 和 type=rectangle 节点 |
-| 组件识别 | 凭节点名猜测（如看到 "tag" 节点就写 `<Tag>`） | `getNodesSummary(groupBy="type")` 统计类型分布，识别 text+rectangle 组合 → 标签组件 |
+| 组件识别 | 凭节点名猜测（如看到 "tag" 节点就写 `<Tag>`） | `getPageStructure(pageId, mode="summary", groupBy="type")` 统计类型分布，识别 text+rectangle 组合 → 标签组件 |
 | 颜色提取 | 跳过 | 对每个 rectangle（背景）+ text（文字）取 `style.fills[0].color.hex` + `text.color` |
 
+**实战经验沉淀（重要，4 条核心收获）**：
+
+**收获 1：首轮 `getMultipleNodeInfo` 必须全量拉取，不能挑**
+- 错误做法：先查 7 个顶层容器，再根据需要分批补漏（结果补了 7 轮 ≈ 108 个节点）
+- 正确做法：`getPageStructure(pageId)` 一次性拿全量 ID → `getMultipleNodeInfo(全部 text + 全部 rectangle 节点 ID)`，≤100 个/批，**2 批搞定**
+
+**收获 2：text 节点是颜色/DOM 映射的两级索引**
+每个 text 节点同时关联两种上下文，**必须同批拉取**：
+- 自身样式：`fontSize`、`fontWeight`、`text.color`
+- 所属 group 父级 rectangle 样式：`bg`、`border`、`radius`、`shadow`
+
+错误做法：先查 text 拿自身样式 → 再根据 parent ID 单独查 rectangle（多走一步）
+正确做法：构造查询列表时，**把同一 group 内的 text + rectangle 节点 ID 合并提交**
+
+**收获 3：图表区样式提取有规律可循**
+
+| 图表子元素 | 对应 Sketch 节点类型 | 关键样式字段 |
+|---|---|---|
+| 图表标题 | `text`（带蓝色矩形左饰线） | 14px Semibold；矩形 4×14 #0079f7 |
+| 图例文字 | `text` | 14px |
+| 图例色块 | `rectangle` | 8×8 / 10×3 |
+| 坐标轴文字 | `text`（成组） | 12px #7b828d |
+| 柱体颜色 | 区域 `rectangle` | `style.fills[0].hex` |
+| 数据标签 | `text`（白字） | 12px #ffffff |
+
+**图表区结构规律**：`标题 text + 标题装饰 rectangle + 图例 text*N + 色块 rectangle*N + 坐标轴 text*N + 柱体 rectangle*N + 标签 text*N`
+
+识别出图表后，**图例色块**应归入 ECharts `legend` 配置（不要用 div 硬编码），**柱体色**映射到 `series.itemStyle.color`。
+
+**收获 4：矢量图形是工具链盲区（兜底方案）**
+- `shapePath` / `shapeGroup` 在 sketch 节点中占比可能高达 46.8%（实战中 434/926），但 `renderNodeAsBase64` 不支持渲染
+- 解压 `.sketch`（zip 格式）只能提取 `bitmap` 中内嵌的 PNG/PDF（实战中可能仅 2 张，常是侧边栏 Logo）
+- **兜底方案**：① 用解压提取的 PNG/PDF 资源；② 无资源时用 antd `@ant-design/icons` 同语义图标替代；③ 在代码注释中标注"⚠️ 矢量图标用 antd 图标替代，原始 Sketch 为 shapePath"
+
 **提示**：
-- 大型 .sketch 文件先 `listNodesByPage(type="artboard")` 锁定目标画板，避免一次性加载整个文档
-- `getNodesSummary` 是 token 节省关键：先按类型分组统计，再决定要查哪些节点 ID
-- 批量 `getMultipleNodeInfo` 严格 ≤ 100 个/次，超过需分批
+- 大型 .sketch 文件先 `queryNodes(pageId, type="artboard")` 锁定目标画板，避免一次性加载整个文档
+- `getPageStructure(pageId, mode="summary")` 是 token 节省关键：先按类型分组统计，再决定要查哪些节点 ID
+- 批量 `getMultipleNodeInfo` 支持任意数量 ID（内部自动分批），无需手动拆分
 - 仅当结构化样式数据仍不足（如复杂渐变、阴影）时，才回退到 `renderNodeAsBase64` + `analyze_design_image`
 - 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g sketch-mcp-server`
 
-**Sketch 结构 → 组件映射规则**：
+**提示**：
+- 大型 .sketch 文件用 `getPageStructure(maxDepth=1-2)` 即可获取布局概况，避免深层递归超时
+- `queryNodes(pageId, type="artboard")` 优先于 `getPageStructure`，更轻量
+- 仅当结构化数据不足以判断视觉细节（颜色、间距、字体）时，才回退到 `renderNodeAsBase64` + `analyze_design_image`
+- 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g sketch-mcp-server`
+
+### 步骤3：分析设计稿（条件执行）
+
+当用户提供了设计稿图片时：
+- 如果**主代理已提供图片描述**（设计稿已被解读为文字），直接使用该描述，跳过图像分析
+- 如果图片未被解读，调用 `analyze_design_image` 工具分析
+- 如果该工具不可用，告知用户需要提供设计稿的文字描述
+
+- 注意：OCR 降级模式下仅返回原始文字，需结合组件库工具自行映射
+
+
+### 步骤3.5：组件候选列表推理（统一环节，必做）
+
+**这是统一的组件候选列表推理环节**，无论设计稿来源是 .sketch 文件（步骤 2.5）还是图片（步骤 3），都需经过此环节：
+
+```
+步骤 1 templatePatterns  +  步骤 2.5/3 设计稿数据  →  组件候选列表
+(4 种模板模式 + llmMappingHints)  (结构 + 样式 Token)  (如 ["Query","TableOrList","LeftTree","TemplateMode"])
+```
+
+**输入**：
+- 步骤 1 的 `get_architecture_overview` 返回的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
+- 步骤 2.5 的 Sketch 节点结构 + 样式 Token
+- 或步骤 3 的图片分析描述
+
+**输出**：
+- **组件候选列表**（如 `["Query","TableOrList","LeftTree","TemplateMode"]`）
+- 模板类型选择（如 `TemplateMode(templateType="LeftRight")`）
+
+**禁止**：
+- ❌ 在步骤 2.5 内部推理组件候选列表（应只产出 Sketch 数据 + 样式 Token）
+- ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
+- ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
+
+**推理时使用映射规则**（**此表为本步骤专用，仅含核心高频场景**）：
 
 *页面级布局*：
 | Sketch 特征 | 推断结果 | 依据 |
@@ -158,47 +227,28 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 | 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
 | 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
 
-*数据可视化*：
+*数据可视化（核心 3 类）*：
 | Sketch 特征 | 推断结果 | 依据 |
 |---|---|---|
 | 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
 | 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
 | 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
-| 雷达图/多维度对比 | `Radar` | ECharts 层图表组件 |
-| 仪表盘/进度指示 | `Gauge` | ECharts 层图表组件 |
-| 漏斗图/转化率 | `Funnel` | ECharts 层图表组件 |
 
-*表格子类型*：
+*表格子类型（核心 2 类）*：
 | Sketch 特征 | 推断结果 | 依据 |
 |---|---|---|
 | 可编辑表格（单元格直接输入） | `TableOrList(componentType="EditableProTable")` | 可编辑表格特征 |
-| 拖拽排序表格（有序号/拖拽手柄） | `TableOrList(componentType="DragSortTable")` | 拖拽排序特征 |
 | 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` | 卡片布局特征 |
-| 步骤条表单（分步填写） | `ModelOrDrawer(componentType="steps")` | StepsForm 特征 |
 
-*辅助/插槽组件*：
-| Sketch 特征 | 推断结果 | 依据 |
-|---|---|---|
-| 树标题栏添加按钮/操作入口 | `CustomOption` | LeftTree 的 CustomOption 插槽 |
-| 树节点右键菜单/增删改操作 | `TreeNode` | LeftTree 的 CustomTreeNode 插槽 |
-| 圆形头像/头像编辑区 | `ModeAvatar` | 头像区域特征 |
-| 文件上传区/拖拽上传框 | `Upload`（Cover 层） | 上传区域特征 |
+**长尾场景走语义搜索**（不进文档，避免膨胀）：
 
-**提示**：
-- 大型 .sketch 文件用 `getPageStructure(maxDepth=1-2)` 即可获取布局概况，避免深层递归超时
-- `listNodesByPage(type="artboard")` 优先于 `getPageStructure`，更轻量
-- 仅当结构化数据不足以判断视觉细节（颜色、间距、字体）时，才回退到 `renderNodeAsBase64` + `analyze_design_image`
-- 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g sketch-mcp-server`
+*数据可视化长尾*：`Radar`（雷达图）、`Gauge`（仪表盘）、`Funnel`（漏斗图）
 
-### 步骤3：分析设计稿（条件执行）
+*表格子类型长尾*：`DragSortTable`（拖拽排序表格）、`ModelOrDrawer(componentType="steps")`（步骤条表单）
 
-当用户提供了设计稿图片时：
-- 如果**主代理已提供图片描述**（设计稿已被解读为文字），直接使用该描述，跳过图像分析
-- 如果图片未被解读，调用 `analyze_design_image` 工具分析
-- 如果该工具不可用，告知用户需要提供设计稿的文字描述
-
-- 注意：OCR 降级模式下仅返回原始文字，需结合组件库工具自行映射
+*辅助/插槽组件*：`CustomOption`（LeftTree 添加按钮插槽）、`TreeNode`（树节点右键菜单插槽）、`ModeAvatar`（圆形头像）、`Upload`（文件上传）
 
+**处理方式**：本表未覆盖的视觉特征 → 调用 `search_components_semantic`（query="[场景描述，如'拖拽排序表格']"）按需补全，再进入步骤 4。
 
 ### 步骤4：查询组件 + 依赖验证（必做）
 

package/qwen-extension/qwen-extension.json

@@ -1,6 +1,6 @@
 {
     "name": "szcd-component-helper",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "description": "szcd 组件库 MCP 助手 — 查询组件信息、匹配需求、生成代码",
     "mcpServers": {
         "szcd-component-helper": {

package/qwen-extension/skills/szcd-component-helper/SKILL.md

@@ -81,14 +81,14 @@ AI 助手在处理页面生成需求时，必须按以下流程使用工具：
 ### 步骤3.5：Sketch 文件解析（如有 .sketch 设计稿）
 - **当用户提供 .sketch 文件时**，使用 `sketch-mcp-server`（独立 MCP Server，stdio 模式）解析，直接提取结构化数据，结合组件库架构推理组件方案，无需经过视觉模型和 `map_design_data`
 - 工作流（4步直传）：
-  1. **解析 Sketch 结构**：`loadSketchByPath` → `listPages` → `listNodesByPage(type="artboard")` → `getNodeInfo`/`getPageStructure(maxDepth=2)` 提取结构
+  1. **解析 Sketch 结构**：`loadSketchByPath` → `listPages` → `queryNodes(pageId, type="artboard")` → `getNodeInfo`/`getPageStructure(maxDepth=2)` 提取结构
   2. **获取组件库架构**（复用步骤1结果）：`get_architecture_overview` 的 `templatePatterns` 提供模板组合模式，`llmMappingHints` 提供常见错误修正
   3. **LLM 推理组件范围**：从 Sketch 结构化数据推断画板名称→`pageName`、区域分布→`layoutType`、图层类型→组件映射，对照 `templatePatterns` 选择最匹配的模板，输出组件候选列表
   4. **批量获取组件详情**：调用 `get_component_full_profile(name="Query,TableOrList,LeftTree,TemplateMode", depth="deep")` 一次性获取所有需要的组件 API
 
 **Sketch → szcd 工作流（结构化直传，无需视觉模型）**：
 ```
-.sketch → loadSketchByPath → listPages → listNodesByPage(type=artboard)
+.sketch → loadSketchByPath → listPages → queryNodes(pageId, type=artboard)
 → getNodeInfo/getPageStructure → [步骤1架构数据] → LLM推理组件
 → get_component_full_profile(批量) → 编码
 ```
@@ -107,7 +107,7 @@ AI 助手在处理页面生成需求时，必须按以下流程使用工具：
 
 **提示**：
 - 大型 .sketch 文件用 `getPageStructure(maxDepth=1-2)` 即可获取布局概况，避免深层递归超时
-- `listNodesByPage(type="artboard")` 优先于 `getPageStructure`，更轻量
+- `queryNodes(pageId, type="artboard")` 优先于 `getPageStructure`，更轻量
 - 仅当结构化数据不足以判断视觉细节（颜色、间距、字体）时，才回退到 `renderNodeAsBase64` + `analyze_design_image`
 - 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g sketch-mcp-server`
 
@@ -124,7 +124,7 @@ AI 助手在处理页面生成需求时，必须按以下流程使用工具：
 - 若用户表示不准确或不采纳，收集原因
 - 调用 `submit_feedback` 将反馈提交到服务器
 
-## 可用工具（13 + 17 Sketch）
+## 可用工具（13 + 15 Sketch）
 
 ### Sketch 文件解析工具（sketch-mcp-server，独立 MCP Server）
 
@@ -152,26 +152,28 @@ sketch-mcp-server 是社区版 MCP Server（npm: `sketch-mcp-server`），通过
 - `nodeId` (string, required): 节点 ID（artboard 级别效果最佳）
 - `format` (enum, optional, default: "svg"): 输出格式，当前仅支持 svg
 
-#### S5. getNodesSummary
+#### S5. getPageStructure (mode="summary")
 **功能**：获取节点统计摘要，Token 消耗比完整信息减少 80-90%。
 **参数**：
-- `pageId` (string, optional): 页面 ID
+- `pageId` (string, required): 页面 ID
+- `mode` (string, required): "summary"
 - `groupBy` (enum, optional): type/style/position/size
-- `includeStats` (boolean, optional, default: true)
+- `maxSamples` (number, optional, default: 5)
 
-#### S6. findNodesByName
+#### S6. queryNodes (name 参数)
 **功能**：按名称搜索节点，支持模糊匹配。
 **参数**：
 - `name` (string, required): 搜索关键词
-- `limit` (number, optional, default: 10): 最大返回数量
+- `limit` (number, optional, default: 50): 最大返回数量
 
-#### S7-S17. 其他 Sketch 工具
-- `listNodes` / `listNodesByPage` — 列出节点（含过滤）
+#### S7-S15. 其他 Sketch 工具
+- `queryNodes` — 统一节点查询（支持 pageId/type/name/nameContains/limit/offset）
 - `getNodeInfo` / `getMultipleNodeInfo` — 获取节点详情
-- `getNodePosition` — 获取节点位置
 - `getDocumentStructure` — 获取文档结构（支持字段过滤和摘要模式）
-- `getSymbolMasters` / `getSymbolInstances` — Symbol 组件管理
+- `getSymbols` — Symbol 组件查询（type="master" 或 "instance"）
 - `getSymbolMasterBySymbolID` / `getSymbolInstanceStyles` — Symbol 详情
+- `getShapePathData` — 提取 shapePath SVG 路径数据
+- `extractBitmaps` / `matchIconFromName` — 资源提取与图标匹配
 
 ### 复合组件工具
 

package/qwen-extension/skills/szcd-design-to-code/SKILL.md

@@ -55,29 +55,140 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 ### 步骤2.5：Sketch 文件解析（有 .sketch 文件时执行）
 
-**核心原则**：写代码之前必须拿到所有 `text` 和 `rectangle` 节点的完整样式 Token，禁止凭节点名猜测颜色/字号/背景色。一次 `getMultipleNodeInfo(50-100 个节点)` 比逐个 `getNodeInfo` 快 10 倍以上，且不会遗漏。
+**核心原则**：写代码之前必须拿到所有 `text` 和 `rectangle` 节点的完整样式 Token，禁止凭节点名猜测颜色/字号/背景色。`getMultipleNodeInfo` 支持任意数量 ID（内部自动分片），比逐个 `getNodeInfo` 快 10 倍以上。
 
-**工具调用顺序（深度探查，像素级还原）**：
+**工具调用顺序（优化后，4 次主调用）**：
 
-1. `mcp__sketch-mcp-server__loadSketchByPath` — 加载文件
+1. `mcp__sketch-mcp-server__loadSketchByPath` — 加载文件（内部自动解压并保存目录，供后续 extractBitmaps 使用）
 2. `mcp__sketch-mcp-server__listPages` — 获取页面列表
-3. `mcp__sketch-mcp-server__listNodesByPage`（type="artboard"）— 获取画板列表，确定目标画板
-4. `mcp__sketch-mcp-server__getPageStructure`（pageId）**或** `getDocumentStructure`（includeDetails=true）— 拿到完整节点树 + 所有节点 ID（含初始样式）
-5. `mcp__sketch-mcp-server__getNodesSummary`（pageId, groupBy="type"）— 按类型分组统计，识别组件模式
-   - `group(rectangle + text)` = 标签组件
-   - `group(text + text + rectangle...)` = 表单项
-   - 统计各类型数量，决定下一批查询范围
-6. `mcp__sketch-mcp-server__getMultipleNodeInfo`（[id1, id2, ...]）— **批量查询所有 type=text 和 type=rectangle 节点**，每次 ≤ 100 个
+3. `mcp__sketch-mcp-server__queryNodes`（pageId, type="artboard"）— 获取画板列表，确定目标画板
+4. `mcp__sketch-mcp-server__getPageStructure`（pageId, mode="ids"）**替代旧的 getPageStructure + getNodesSummary 组合**
+   - 一次返回按类型分组的全量 ID：`{ text: [...], rectangle: [...], bitmap: [...], shapePath: [...] }`
+   - 可选 `typeFilter` 参数限制返回类型
+   - 同时返回 `summary`（各类型统计）和 `totalIds`（总数）
+5. `mcp__sketch-mcp-server__getMultipleNodeInfo`（[所有 text + rectangle ID]）— **支持任意数量 ID，内部自动分批处理**
    - 关键字段：`style.fills[0].color.hex`（背景色）、`text.color`（文字色）、`style.fontSize`、`style.fontWeight`
-   - 不要逐个 `getNodeInfo`，太慢且容易漏
+   - 无需手动分批，传入全部 ID 即可（内部按 100 个一批自动处理）
+
+**与旧策略的差异**：
+- 旧策略：`getPageStructure`(可能截断) + `getNodesSummary` + 手动分批 `getMultipleNodeInfo`
+- 新策略：`getPageStructure(mode="ids")`(轻量全量 ID) + `getMultipleNodeInfo`(自动分片)
+- 调用次数：旧 6 次 → 新 4 次（含 loadSketch + listPages 合并）
+
+**步骤 2.5 产出物**（**只产出数据，不做组件映射**）：
+- 按类型分组的全量节点 ID 列表
+- text/rectangle 节点的完整样式 Token
+- bitmap ID 列表（传给步骤 2.5.1）
+- shapePath 节点名列表（传给步骤 2.5.1）
+
+组件候选列表推理**不**在步骤 2.5 内部完成，**统一在主流程中结合步骤 1 的 `templatePatterns` 推理**（详见主流程步骤 4 前置说明）。
+
+### 步骤2.5.1：图标与位图提取（有 bitmap/shapePath 节点时执行）
+
+**输入**：步骤 2.5 产出的 bitmap ID 列表 + shapePath 节点名列表
+
+**工具调用**：
+
+1. `mcp__sketch-mcp-server__extractBitmaps`（bitmapIds）— 从 .sketch 解压目录提取 bitmap PNG 资源
+   - 返回 `{ bitmaps: [{ nodeId, name, base64, mimeType, size, fileName }] }`
+   - 位图资源用于 CSS `background-image` 引用
+2. `mcp__sketch-mcp-server__matchIconFromName`（nodeNames, library="newFont"）— 匹配 iconfont 图标库
+   - 输入 shapePath 节点名列表（如 `["表 icon", "文件 icon"]`）
+   - 匹配策略：节点名关键词 → 拼音匹配图标列表
+   - 返回格式：
+     ```json
+     {
+       "matchedIcons": [
+         { "nodeName": "表 icon", "iconType": "icon-biao", "library": "newFont" }
+       ],
+       "unmatched": ["菜单icon"],
+       "recommendFallback": { "菜单icon": "antd MenuOutlined" },
+       "matchRate": "80.0%"
+     }
+     ```
+
+**步骤 2.5.1 产出物**：
+- bitmap base64 资源列表 → 用于代码中的 CSS background-image
+- IconfontWapper 代码片段（`<IconfontWapper assets="newFont" type="icon-biao" />`）
+- 未匹配节点的 fallback 建议（antd 图标替代）
+
+### 步骤2.5.2：批量样式提取（合并入步骤 2.5）
+
+此步骤已合并入步骤 2.5 第 5 步，`getMultipleNodeInfo` 现在支持自动分片，无需手动分批调用。
+
+### 步骤2.5 实战经验沉淀（重要）
+
+**经验1：用 `getPageStructure(mode="ids")` 一步拿全量 ID，避免 getPageStructure 截断**
+- 错误做法：用 `getPageStructure(pageId)` 拿节点树 → 大文件截断 → 需要 agent 解析
+- 正确做法：`getPageStructure(pageId, mode="ids")` 轻量返回 `{ text: [ids], rectangle: [ids], bitmap: [ids] }` → 无截断风险
+- 如需节点层级关系，用 `getPageStructure(pageId, fields=["id","name","type"])` 过滤字段
+
+**经验2：`getMultipleNodeInfo` 支持任意数量，无需手动分批**
+- 旧做法：手动把 ID 分成每批 ≤ 100 个 → 多次调用
+- 新做法：直接传入全部 ID（如 200 个）→ 内部自动按 100 个一批处理 → 返回合并结果
+- 返回结构不变：`{ nodes: [...], total, requested, batches }`
+
+**经验3：text 节点是颜色/DOM 映射的两级索引**
+每个 text 节点同时关联两种上下文，**必须同批拉取**：
+- 自身样式：`fontSize`、`fontWeight`、`text.color`
+- 所属 group 父级 rectangle 样式：`bg`、`border`、`radius`、`shadow`
+
+错误做法：先查 text 拿自身样式 → 再根据 parent ID 单独查 rectangle（多走一步）
+正确做法：构造查询列表时，**把同一 group 内的 text + rectangle 节点 ID 合并提交**
+
+**经验4：图表区样式提取有规律可循**
+
+| 图表子元素 | 对应 Sketch 节点类型 | 关键样式字段 |
+|---|---|---|
+| 图表标题 | `text`（带蓝色矩形左饰线） | 14px Semibold；矩形 4×14 #0079f7 |
+| 图例文字 | `text` | 14px |
+| 图例色块 | `rectangle` | 8×8 / 10×3 |
+| 坐标轴文字 | `text`（成组） | 12px #7b828d |
+| 柱体颜色 | 区域 `rectangle` | `style.fills[0].hex` |
+| 数据标签 | `text`（白字） | 12px #ffffff |
+
+**图表区结构规律**：`标题 text + 标题装饰 rectangle + 图例 text*N + 色块 rectangle*N + 坐标轴 text*N + 柱体 rectangle*N + 标签 text*N`
+
+识别出图表后，**图例色块**应归入 ECharts `legend` 配置（不要用 div 硬编码），**柱体色**映射到 `series.itemStyle.color`。
+
+**经验5：矢量图形用 matchIconFromName 自动匹配，无需手动解压**
+- `shapePath` / `shapeGroup` 在 sketch 节点中占比可能高达 46.8%，但 `renderNodeAsBase64` 不支持渲染
+- **新方案**：`matchIconFromName(shapePathNames)` 自动查询 iconfont 库 → 返回匹配结果
+- bitmap 用 `extractBitmaps(bitmapIds)` 自动提取 PNG 资源
+- 兜底：未匹配的节点用 antd `@ant-design/icons` 同语义图标替代，在代码注释中标注“⚠️ 矢量图标用 antd 图标替代，原始 Sketch 为 shapePath”
 
-**⚠️ 与旧策略的差异**：
-- 旧策略：maxDepth=2 拿布局，样式靠组件默认
-- 新策略：includeDetails=true + 批量 `getMultipleNodeInfo` 拿所有 text/rectangle 完整样式 Token
-- 适用场景：需要像素级还原设计稿（颜色、字号、标签背景色等）
-- 代价：token 消耗约 10 倍（旧策略的几 KB → 新策略的几十到几百 KB，取决于节点数）
+### 步骤3：分析设计稿图片（有图片时执行）
+
+- 主智能体已提供图片描述时，直接使用，跳过此步
+- 否则调用 `mcp__szcd-component-helper__analyze_design_image` 分析
+- 获得描述后，结合步骤1的 `templatePatterns` 推理组件候选列表
+- 立即调用 `mcp__szcd-component-helper__get_component_full_profile`（批量，depth="gencode"）
+
+### 步骤3.5：组件候选列表推理（统一环节，结合步骤1 + 步骤2.5/3）
+
+**这是统一推理环节**，无论设计稿来源是 .sketch 文件（步骤 2.5）还是图片（步骤 3），都需经过此环节：
+
+```
+步骤 1 templatePatterns  +  步骤 2.5/3 设计稿数据  →  组件候选列表
+(4 种模板模式 + llmMappingHints)  (结构 + 样式 Token)  (如 ["Query","TableOrList","LeftTree","TemplateMode"])
+```
 
-**Sketch 结构 → 组件映射规则**：
+**输入**：
+- 步骤 1 的 `templatePatterns`（TreeQueryTable / QueryTabsTables / LeftRight / UpDown）
+- 步骤 1 的 `llmMappingHints.commonMistakes`（避免 LLM 常见映射错误）
+- 步骤 2.5 的 Sketch 节点结构 + 样式 Token
+- 或步骤 3 的图片分析描述
+
+**输出**：
+- **组件候选列表**（如 `["Query","TableOrList","LeftTree","TemplateMode"]`）
+- 模板类型选择（如 `TemplateMode(templateType="LeftRight")`）
+
+**禁止**：
+- ❌ 在步骤 2.5 内部推理组件候选列表（应只产出 Sketch 数据 + 样式 Token）
+- ❌ 在步骤 3 内部推理组件候选列表（应只产出图片描述）
+- ❌ 跳过此环节直接调 `get_component_full_profile`（必须先有候选列表）
+
+**推理时使用映射规则**（**此表为本步骤专用，核心高频场景**）：
 
 | Sketch 特征 | 推断组件 |
 |---|---|
@@ -89,23 +200,23 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 | 弹窗/抽屉图层 | `ModelOrDrawer` |
 | 页面标题 + 返回箭头 | `TitleAndBack` |
 | 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` |
-| 卡片列表（非表格式数据卡片） | `TableOrList(componentType="ProList")` |
+| 卡片列表 | `TableOrList(componentType="ProList")` |
 | 可编辑表格 | `TableOrList(componentType="EditableProTable")` |
 | 折线趋势图 | `Line` |
 | 柱状对比图 | `Bar` |
 | 饼图/环形图 | `Pie` |
 
-推理出组件候选列表后，立即进入步骤4批量获取组件 API。
-
-### 步骤3：分析设计稿图片（有图片时执行）
+**长尾场景走语义搜索**（不进文档，避免膨胀）：
+- 数据可视化长尾：`Radar` / `Gauge` / `Funnel`（用 `Line/Bar/Pie` 之外的图表）
+- 表格子类型长尾：`DragSortTable`（拖拽排序）、`steps` 步骤条表单
+- 辅助/插槽组件：`CustomOption`（LeftTree 添加按钮）、`TreeNode`（树节点右键菜单）、`ModeAvatar`（头像）、`Upload`（文件上传）
 
-- 主智能体已提供图片描述时，直接使用，跳过此步
-- 否则调用 `mcp__szcd-component-helper__analyze_design_image` 分析
-- 获得描述后，结合步骤1的 `templatePatterns` 推理组件候选列表
-- 立即调用 `mcp__szcd-component-helper__get_component_full_profile`（批量，depth="gencode"）
+**处理方式**：本表未覆盖的视觉特征 → 调用 `{{TOOL:search_components_semantic}}`（query="[场景描述，如'拖拽排序表格']"）按需补全，再进入步骤 4。
 
 ### 步骤4：批量获取组件 API（必做）
 
+**前置条件**：已通过步骤 3.5 获得组件候选列表。
+
 调用 `mcp__szcd-component-helper__get_component_full_profile`：
 - `name` 用逗号分隔一次性查询所有候选组件，如 `"Query,TableOrList,LeftTree,TemplateMode"`
 - `depth="gencode"`（比 deep 小 30-50%，生成代码场景首选）

package/standard-skill/szcd-component-helper/SKILL.md

@@ -81,14 +81,14 @@ AI 助手在处理页面生成需求时，必须按以下流程使用工具：
 ### 步骤3.5：Sketch 文件解析（如有 .sketch 设计稿）
 - **当用户提供 .sketch 文件时**，使用 `sketch-mcp-server`（独立 MCP Server，stdio 模式）解析，直接提取结构化数据，结合组件库架构推理组件方案，无需经过视觉模型和 `map_design_data`
 - 工作流（4步直传）：
-  1. **解析 Sketch 结构**：`loadSketchByPath` → `listPages` → `listNodesByPage(type="artboard")` → `getNodeInfo`/`getPageStructure(maxDepth=2)` 提取结构
+  1. **解析 Sketch 结构**：`loadSketchByPath` → `listPages` → `queryNodes(pageId, type="artboard")` → `getNodeInfo`/`getPageStructure(maxDepth=2)` 提取结构
   2. **获取组件库架构**（复用步骤1结果）：`get_architecture_overview` 的 `templatePatterns` 提供模板组合模式，`llmMappingHints` 提供常见错误修正
   3. **LLM 推理组件范围**：从 Sketch 结构化数据推断画板名称→`pageName`、区域分布→`layoutType`、图层类型→组件映射，对照 `templatePatterns` 选择最匹配的模板，输出组件候选列表
   4. **批量获取组件详情**：调用 `get_component_full_profile(name="Query,TableOrList,LeftTree,TemplateMode", depth="deep")` 一次性获取所有需要的组件 API
 
 **Sketch → szcd 工作流（结构化直传，无需视觉模型）**：
 ```
-.sketch → loadSketchByPath → listPages → listNodesByPage(type=artboard)
+.sketch → loadSketchByPath → listPages → queryNodes(pageId, type=artboard)
 → getNodeInfo/getPageStructure → [步骤1架构数据] → LLM推理组件
 → get_component_full_profile(批量) → 编码
 ```
@@ -107,7 +107,7 @@ AI 助手在处理页面生成需求时，必须按以下流程使用工具：
 
 **提示**：
 - 大型 .sketch 文件用 `getPageStructure(maxDepth=1-2)` 即可获取布局概况，避免深层递归超时
-- `listNodesByPage(type="artboard")` 优先于 `getPageStructure`，更轻量
+- `queryNodes(pageId, type="artboard")` 优先于 `getPageStructure`，更轻量
 - 仅当结构化数据不足以判断视觉细节（颜色、间距、字体）时，才回退到 `renderNodeAsBase64` + `analyze_design_image`
 - 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g sketch-mcp-server`
 
@@ -124,7 +124,7 @@ AI 助手在处理页面生成需求时，必须按以下流程使用工具：
 - 若用户表示不准确或不采纳，收集原因
 - 调用 `submit_feedback` 将反馈提交到服务器
 
-## 可用工具（13 + 17 Sketch）
+## 可用工具（13 + 15 Sketch）
 
 ### Sketch 文件解析工具（sketch-mcp-server，独立 MCP Server）
 
@@ -152,26 +152,28 @@ sketch-mcp-server 是社区版 MCP Server（npm: `sketch-mcp-server`），通过
 - `nodeId` (string, required): 节点 ID（artboard 级别效果最佳）
 - `format` (enum, optional, default: "svg"): 输出格式，当前仅支持 svg
 
-#### S5. getNodesSummary
+#### S5. getPageStructure (mode="summary")
 **功能**：获取节点统计摘要，Token 消耗比完整信息减少 80-90%。
 **参数**：
-- `pageId` (string, optional): 页面 ID
+- `pageId` (string, required): 页面 ID
+- `mode` (string, required): "summary"
 - `groupBy` (enum, optional): type/style/position/size
-- `includeStats` (boolean, optional, default: true)
+- `maxSamples` (number, optional, default: 5)
 
-#### S6. findNodesByName
+#### S6. queryNodes (name 参数)
 **功能**：按名称搜索节点，支持模糊匹配。
 **参数**：
 - `name` (string, required): 搜索关键词
-- `limit` (number, optional, default: 10): 最大返回数量
+- `limit` (number, optional, default: 50): 最大返回数量
 
-#### S7-S17. 其他 Sketch 工具
-- `listNodes` / `listNodesByPage` — 列出节点（含过滤）
+#### S7-S15. 其他 Sketch 工具
+- `queryNodes` — 统一节点查询（支持 pageId/type/name/nameContains/limit/offset）
 - `getNodeInfo` / `getMultipleNodeInfo` — 获取节点详情
-- `getNodePosition` — 获取节点位置
 - `getDocumentStructure` — 获取文档结构（支持字段过滤和摘要模式）
-- `getSymbolMasters` / `getSymbolInstances` — Symbol 组件管理
+- `getSymbols` — Symbol 组件查询（type="master" 或 "instance"）
 - `getSymbolMasterBySymbolID` / `getSymbolInstanceStyles` — Symbol 详情
+- `getShapePathData` — 提取 shapePath SVG 路径数据
+- `extractBitmaps` / `matchIconFromName` — 资源提取与图标匹配
 
 ### 复合组件工具