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

package/standard-skill/szcd-design-to-code/SKILL.md

@@ -55,29 +55,32 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 ### 步骤2.5：Sketch 文件解析（有 .sketch 文件时执行）
 
-**核心原则**：写代码之前必须拿到所有 `text` 和 `rectangle` 节点的完整样式 Token，禁止凭节点名猜测颜色/字号/背景色。`getMultipleNodeInfo` 支持任意数量 ID（内部自动分片），比逐个 `getNodeInfo` 快 10 倍以上。
+**核心原则**：写代码之前必须拿到所有 `text`、`rectangle`、`group` 节点的完整样式 Token + 父子层级，禁止凭节点名猜测颜色/字号/背景色，禁止用 x 坐标平面判定元素归属。`queryNodes.type` 接受数组、`getMultipleNodeInfo` 内部自动分片，比逐个 `getNodeInfo` 快 10 倍以上。
 
-**工具调用顺序（优化后，4 次主调用）**：
+**工具调用顺序（sketch-mcp-server ≥ v1.5.0，4 次主调用）**：
 
 1. `mcp__sketch-mcp-server__loadSketchByPath` — 加载文件（内部自动解压并保存目录，供后续 extractBitmaps 使用）
 2. `mcp__sketch-mcp-server__listPages` — 获取页面列表
 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` 参数限制返回类型
+4. `mcp__sketch-mcp-server__getPageStructure`（pageId, mode="tree"）— **先看完整层级关系**，识别顶层 group 分区（如 LeftTree 区/Query+Table 区/信息栏区/标题栏区）
+   - 再用 `mode="ids"` 拿到按类型分组的全量 ID：`{ text: [...], rectangle: [...], group: [...], bitmap: [...], shapePath: [...] }`
    - 同时返回 `summary`（各类型统计）和 `totalIds`（总数）
-5. `mcp__sketch-mcp-server__getMultipleNodeInfo`（[所有 text + rectangle ID]）— **支持任意数量 ID，内部自动分批处理**
-   - 关键字段：`style.fills[0].color.hex`（背景色）、`text.color`（文字色）、`style.fontSize`、`style.fontWeight`
+5. `mcp__sketch-mcp-server__getMultipleNodeInfo`（[**所有 text + rectangle + group ID 同批提交**]）— **支持任意数量 ID，内部自动分批处理**
+   - 关键字段：`style.fills[0].color.hex`（背景色）、`text.color`（文字色）、`style.fontSize`、`style.fontWeight`、`style.borders[0]`、`style.shadows`
+   - **`parent: { id, name, type }`**（v1.5.0+ 新增）— 元素归属判定的核心字段，**始终用 parent 走 group 父子关系，禁止用 x/y 坐标判定归属**
+   - **禁止只取 text 类型**：会遗漏 rectangle/group 容器的渐变背景、边框、阴影；信息栏/卡片类区块必须连容器一起拉
    - 无需手动分批，传入全部 ID 即可（内部按 100 个一批自动处理）
 
-**与旧策略的差异**：
-- 旧策略：`getPageStructure`(可能截断) + `getNodesSummary` + 手动分批 `getMultipleNodeInfo`
-- 新策略：`getPageStructure(mode="ids")`(轻量全量 ID) + `getMultipleNodeInfo`(自动分片)
-- 调用次数：旧 6 次 → 新 4 次（含 loadSketch + listPages 合并）
+**替代方案（更短，3 次主调用）**：当只关心特定类型节点时，可用 `queryNodes` 一次性拿数组类型：
+```
+queryNodes({ pageId, type: ["text", "rectangle", "group"], limit: 500 })
+→ 返回这三类节点的 ID 列表，跳过 getPageStructure(mode="ids") 步骤
+```
+适用场景：已通过 `getPageStructure(mode="tree")` 看清分区，只想批量获取关键 token 节点时。
 
 **步骤 2.5 产出物**（**只产出数据，不做组件映射**）：
 - 按类型分组的全量节点 ID 列表
-- text/rectangle 节点的完整样式 Token
+- text/rectangle/group 节点的完整样式 Token + parent 父子关系
 - bitmap ID 列表（传给步骤 2.5.1）
 - shapePath 节点名列表（传给步骤 2.5.1）
 
@@ -92,21 +95,55 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 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"]`）
-   - 匹配策略：节点名关键词 → 拼音匹配图标列表
+2. `mcp__sketch-mcp-server__matchIconFromName`（nodeNames, library="newFont"）— 匹配 iconfont 图标库（v1.5.0+ 评分制）
+   - 输入 shapePath 节点名列表（如 `["表 icon", "新建文件夹", "编组11备份"]`）
+   - **评分机制**：compoundIcons 强映射 +100、keyword 精确 +20、keyword 包含 +10、semanticTag +3
+   - 每个 nodeName 返回 **Top-3 候选**（按分数降序），让你做最终选择
    - 返回格式：
      ```json
      {
-       "matchedIcons": [
-         { "nodeName": "表 icon", "iconType": "icon-biao", "library": "newFont" }
+       "results": [
+         {
+           "nodeName": "新建文件夹",
+           "top3": [
+             { "source": "compound", "score": 104, "antdIcon": "FolderAddOutlined", "matchedBy": "文件夹|目录|folder + 新增|添加|add|plus|新建|create", "rationale": "..." },
+             { "source": "compound", "score": 104, "antdIcon": "FileAddOutlined" },
+             { "source": "compound", "score": 102, "antdIcon": "FolderOutlined" }
+           ],
+           "bestMatch": { "source": "compound", "antdIcon": "FolderAddOutlined" }
+         }
        ],
-       "unmatched": ["菜单icon"],
-       "recommendFallback": { "菜单icon": "antd MenuOutlined" },
-       "matchRate": "80.0%"
+       "matchedIcons": [...],  // Top-1 兼容旧字段
+       "unmatched": ["编组11备份"],  // 无关键词信号的节点
+       "recommendFallback": { "编组11备份": "antd QuestionOutlined" },
+       "matchRate": "66.7%"
      }
      ```
 
+**⚠️ 图标语义优先级（v1.5.0 已内置 compoundIcons，多数场景自动命中）**：
+
+实战教训：Sketch 中"编组11备份"实际是 folder-plus 图标，旧版被误判为通用 PlusOutlined（优先命中"新增"关键词吃掉了 folder 语义）。v1.5.0 评分制 + compoundIcons 强映射已修复该类问题。
+
+**判定流程**：
+1. **优先看 `bestMatch.source`**：`compound` 表示触发了复合词强映射，可直接采用 `antdIcon`
+2. **看 Top-3 是否有合适的候选**：分数接近的候选都值得考虑
+3. **`unmatched` 节点（如"编组11备份"无关键词信号）**：必须看节点 `parent.name` 和兄弟节点上下文兜底
+   - 例：parent 是 LeftTree 标题区 → 多半是文件夹/分类操作图标 → `FolderAddOutlined` / `FolderOpenOutlined`
+   - 例：parent 是 Query 操作栏 → 多半是表单动作图标 → `SearchOutlined` / `PlusOutlined`
+
+**参考表（内置 compoundIcons 已覆盖；列出供 unmatched 兜底参考）**：
+
+| Sketch 节点上下文 | 期望 antd 图标 | 反例（不要选） |
+|---|---|---|
+| 文件夹+新增/添加 | `FolderAddOutlined` | PlusOutlined |
+| 文件+新增 | `FileAddOutlined` | PlusOutlined |
+| 用户+新增 | `UserAddOutlined` | PlusOutlined |
+| 文件夹+打开 | `FolderOpenOutlined` | FolderOutlined |
+| 编辑+笔 | `EditOutlined` | FormOutlined |
+| 设置+齿轮 | `SettingOutlined` | ToolOutlined |
+
+**操作流程**：matchIconFromName 返回 unmatched 或 fallback 为通用 `PlusOutlined/EditOutlined` 时，**先看节点 parent group 的名称/兄弟节点**，按上表选语义更精确的复合图标。
+
 **步骤 2.5.1 产出物**：
 - bitmap base64 资源列表 → 用于代码中的 CSS background-image
 - IconfontWapper 代码片段（`<IconfontWapper assets="newFont" type="icon-biao" />`）
@@ -128,15 +165,36 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 - 新做法：直接传入全部 ID（如 200 个）→ 内部自动按 100 个一批处理 → 返回合并结果
 - 返回结构不变：`{ nodes: [...], total, requested, batches }`
 
-**经验3：text 节点是颜色/DOM 映射的两级索引**
+**经验3：元素归属必须走 group 父子关系，禁止 x 坐标平面判定**
+
+实战教训：`'主题'text(x=272,y=149)` 被错误识别为内容区块标题，实际是左侧树标题（与树节点同 x=272 列）。同列坐标不代表同区域。
+
+正确做法：
+- 步骤 2.5 第 4 步先 `mode="tree"` 看顶层 group 分区（通常 2-5 个，对应 LeftTree区/Query+Table区/信息栏区/标题栏区）
+- `getMultipleNodeInfo`/`getNodeInfo` v1.5.0+ **自动返回** `parent: { id, name, type }` 字段，按 parent 归属到具体分区即可
+- "主题"这类标题文本，先看 `parent.name` 是否带 "LeftTree" / "树" 等容器关键字，不要看 x 坐标
+- 坐标仅作为同 parent 内子元素排序兜底使用
+
+**经验4：信息栏/卡片容器必须先取 group 再取子元素**
+
+实战教训：步骤 2.5 仅提取 text 节点导致信息栏容器样式遗漏（渐变背景 #f3faff→#f8fdff、边框 #e9f5ff、图标编组）。
+
+正确做法：
+- 看到画板里有 `编组N`/`infoCard`/`statBox` 等 group 节点，必须连 group 自身和内部 rectangle 一起拉 `getMultipleNodeInfo`
+- group 节点的 `style.fills` 才是渐变背景、`style.borders` 才是边框
+- 子图标若为 group(rectangle + shapePath)，rectangle 是圆形/方形背景，shapePath 是矢量图标
+
+**经验5：text 节点是颜色/DOM 映射的两级索引**
 每个 text 节点同时关联两种上下文，**必须同批拉取**：
 - 自身样式：`fontSize`、`fontWeight`、`text.color`
 - 所属 group 父级 rectangle 样式：`bg`、`border`、`radius`、`shadow`
 
 错误做法：先查 text 拿自身样式 → 再根据 parent ID 单独查 rectangle（多走一步）
-正确做法：构造查询列表时，**把同一 group 内的 text + rectangle 节点 ID 合并提交**
+正确做法：
+- 用 `queryNodes({ pageId, type: ["text", "rectangle", "group"], limit: 500 })` 一次拿三类节点的 ID
+- 再用 `getMultipleNodeInfo([...全部ID])` 同批提交，每个节点返回的 `parent` 字段直接告诉你归属关系，无需二次查询
 
-**经验4：图表区样式提取有规律可循**
+**经验6：图表区样式提取有规律可循**
 
 | 图表子元素 | 对应 Sketch 节点类型 | 关键样式字段 |
 |---|---|---|
@@ -151,7 +209,7 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 
 识别出图表后，**图例色块**应归入 ECharts `legend` 配置（不要用 div 硬编码），**柱体色**映射到 `series.itemStyle.color`。
 
-**经验5：矢量图形用 matchIconFromName 自动匹配，无需手动解压**
+**经验7：矢量图形用 matchIconFromName 自动匹配，无需手动解压**
 - `shapePath` / `shapeGroup` 在 sketch 节点中占比可能高达 46.8%，但 `renderNodeAsBase64` 不支持渲染
 - **新方案**：`matchIconFromName(shapePathNames)` 自动查询 iconfont 库 → 返回匹配结果
 - bitmap 用 `extractBitmaps(bitmapIds)` 自动提取 PNG 资源
@@ -206,6 +264,19 @@ Ant Design → ProComponents → Cover 层 → Wrapper 层 → ProPackages →
 | 柱状对比图 | `Bar` |
 | 饼图/环形图 | `Pie` |
 
+### ⚠️ TemplateMode 槽位传参铁律（高频踩坑）
+
+**LeftContent / Query / PageContent 三个槽位都接收单个 ReactNode，禁止传数组**：
+
+| ❌ 错误 | ✅ 正确 | 后果 |
+|---|---|---|
+| `LeftContent={[<LeftTree/>]}` | `LeftContent={<LeftTree/>}` | 数组会触发多余 tab 渲染 |
+| `LeftContent={[<LeftTree/>, <Filter/>]}` | `LeftContent={<><LeftTree/><Filter/></>}` 或包一层 div | 同上 |
+| `Query={[<Query/>]}` | `Query={<Query/>}` | 同上 |
+| `PageContent={[<TableOrList/>]}` | `PageContent={<TableOrList/>}` | 同上 |
+
+**判定方法**：Sketch 中只要某个分区是"单棵树/单个查询面板/单个表格"，对应槽位就传单个组件实例。需要多个并列时用 Fragment `<>...</>` 或容器 div 包裹，**不要用数组**。
+
 **长尾场景走语义搜索**（不进文档，避免膨胀）：
 - 数据可视化长尾：`Radar` / `Gauge` / `Funnel`（用 `Line/Bar/Pie` 之外的图表）
 - 表格子类型长尾：`DragSortTable`（拖拽排序）、`steps` 步骤条表单