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

package/agents/build.js

@@ -17,6 +17,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import YAML from "yaml";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -162,120 +163,62 @@ function generateMcpToolTable(tools, toolPrefix) {
 }
 
 /**
- * 从 frontmatter 中移除指定字段
+ * 自动发现项目中的 skills（从 standard-skill 目录扫描子目录名）
  */
-function stripFrontmatterFields(content, fields) {
-    const fmMatch = content.match(/^(---\n)([\s\S]*?)(\n---)/);
-    if (!fmMatch) return content;
-
-    const prefix = fmMatch[1];
-    let fmBody = fmMatch[2];
-    const suffix = fmMatch[3];
-
-    for (const field of fields) {
-        // 匹配字段行（支持简单值、多行值、YAML列表等）
-        // 简单行：tools: ["*"]
-        // YAML列表：tools:\n  - "*"
-        const simpleLineRegex = new RegExp(`^${field}:.*$\\n?`, "m");
-        fmBody = fmBody.replace(simpleLineRegex, "");
-
-        const yamlListRegex = new RegExp(`^${field}:\\s*\\n(?:^\\s+.*$\\n?)*`, "m");
-        fmBody = fmBody.replace(yamlListRegex, "");
-    }
-
-    // 清理空行
-    fmBody = fmBody.replace(/\n{2,}/g, "\n");
-
-    return prefix + fmBody + suffix + content.slice(fmMatch[0].length);
+function discoverSkills() {
+    const skillDir = path.join(AGENTS_DIR, "..", "standard-skill");
+    if (!fs.existsSync(skillDir)) return [];
+    return fs.readdirSync(skillDir).filter((name) =>
+        fs.statSync(path.join(skillDir, name)).isDirectory()
+    );
 }
 
 /**
- * 替换 frontmatter 中的字段为平台特定值
- * 支持简单值和通过模板字符串注入多行 YAML
+ * 处理 frontmatter：YAML 解析 → 结构化增删 → YAML 序列化
+ *
+ * 替代原 stripFrontmatterFields / replaceFrontmatterFields / simpleYamlStringify 三套正则方案。
+ * 流程：
+ *   1. 解析 frontmatter 为 JS 对象
+ *   2. 按 stripFrontmatterFields 删除字段
+ *   3. 按 frontmatter 覆盖非字符串占位符的具体值
+ *   4. 按 autoInject 自动注入 skills / mcpServers（含 additionalMcpServers）
+ *   5. 序列化回 YAML 并拼回 content
  */
-function replaceFrontmatterFields(content, fields) {
+function processFrontmatter(content, platformConfig, discoveredSkills, mcpServerNames) {
     const fmMatch = content.match(/^(---\n)([\s\S]*?)(\n---)/);
     if (!fmMatch) return content;
 
-    const prefix = fmMatch[1];
-    let fmBody = fmMatch[2];
-    const suffix = fmMatch[3];
-
-    for (const [field, value] of Object.entries(fields)) {
-        // 先移除旧字段（支持简单值和多行 YAML 块）
-        const simpleLineRegex = new RegExp(`^${field}:.*$\\n?`, "gm");
-        fmBody = fmBody.replace(simpleLineRegex, "");
-        const yamlBlockRegex = new RegExp(`^${field}:\\s*\\n(?:^\\s+[\\s\\S]*?)*\\n?`, "gm");
-        fmBody = fmBody.replace(yamlBlockRegex, "");
-
-        // 插入新值
-        let formattedValue;
-        if (typeof value === "object") {
-            // 对于对象类型，使用 JSON 转 YAML 的简单实现
-            formattedValue = "\n" + simpleYamlStringify(value, 2, 2);
-        } else if (typeof value === "string" && value.includes("{{")) {
-            // 模板字符串，保留原样（由后续处理替换）
-            formattedValue = ` ${value}`;
-        } else {
-            formattedValue = ` ${value}`;
-        }
-        fmBody += `${field}:${formattedValue}\n`;
-    }
+    // 1. 解析为结构化数据
+    let data = YAML.parse(fmMatch[2]) || {};
 
-    // 清理多余空行
-    fmBody = fmBody.replace(/\n{3,}/g, "\n\n");
+    // 2. 删除不需要的字段（如 Qwen 不需要 tools/model/type）
+    for (const field of platformConfig.stripFrontmatterFields || []) {
+        delete data[field];
+    }
 
-    return prefix + fmBody + suffix + content.slice(fmMatch[0].length);
-}
+    // 3. 应用平台覆盖（只跳过 {{placeholder}} 占位符，非占位符的字符串值正常应用）
+    for (const [key, value] of Object.entries(platformConfig.frontmatter || {})) {
+        if (typeof value === "string" && /^\{\{.*\}\}$/.test(value)) continue;
+        data[key] = value;
+    }
 
-/**
- * 简易 YAML 序列化（仅支持嵌套对象和布尔/数字/字符串值）
- */
-function simpleYamlStringify(obj, indent = 2, currentIndent = 0) {
-    if (obj === null || obj === undefined) return "";
-    if (typeof obj !== "object") return String(obj);
-
-    const lines = [];
-    const pad = " ".repeat(currentIndent);
-
-    for (const [key, value] of Object.entries(obj)) {
-        if (value === null || value === undefined) continue;
-
-        if (typeof value === "object" && !Array.isArray(value)) {
-            lines.push(`${pad}${key}:`);
-            const childLines = simpleYamlStringify(value, indent, currentIndent + indent);
-            if (childLines) lines.push(childLines);
-        } else if (Array.isArray(value)) {
-            lines.push(`${pad}${key}:`);
-            for (const item of value) {
-                if (typeof item === "object") {
-                    const entries = Object.entries(item);
-                    lines.push(`${pad}- ${entries[0][0]}: ${formatYamlValue(entries[0][1])}`);
-                    for (const [k, v] of entries.slice(1)) {
-                        lines.push(`${pad}  ${k}: ${formatYamlValue(v)}`);
-                    }
-                } else {
-                    lines.push(`${pad}- ${formatYamlValue(item)}`);
-                }
-            }
-        } else {
-            lines.push(`${pad}${key}: ${formatYamlValue(value)}`);
-        }
+    // 4. 自动注入（基于 autoInject 能力声明）
+    const autoInject = platformConfig.autoInject || [];
+    if (autoInject.includes("skills") && discoveredSkills.length > 0) {
+        data.skills = discoveredSkills;
+    }
+    if (autoInject.includes("mcpServers") && mcpServerNames.length > 0) {
+        data.mcpServers = mcpServerNames;
     }
 
-    return lines.join("\n");
-}
+    // 5. 序列化回 YAML
+    const yamlStr = YAML.stringify(data, {
+        lineWidth: 0,
+        defaultKeyType: "PLAIN",
+        defaultStringType: "PLAIN",
+    });
 
-function formatYamlValue(value) {
-    if (typeof value === "boolean") return value ? "true" : "false";
-    if (typeof value === "number") return String(value);
-    if (typeof value === "string") {
-        if (value.includes("\n") || value.includes(":") || value.includes("#") || value.includes("'") || value.includes('"') || value.includes("[")) {
-            return `"${value.replace(/"/g, '\\"')}"`;
-        }
-        return value;
-    }
-    return String(value);
+    return fmMatch[1] + yamlStr.trimEnd() + fmMatch[3] + content.slice(fmMatch[0].length);
 }
 
 /**
@@ -283,7 +226,7 @@ function formatYamlValue(value) {
  */
 function cleanupContent(content) {
     // 移除连续3个以上空行 → 2个空行
-    let result = content.replace(/\n{4,}/g, "\n\n\n");
+    let result = content.replace(new RegExp("\\n{4,}", "g"), "\n\n\n");
     // 移除 frontmatter 后多余空行（--- 后最多1个空行）
     result = result.replace(/(---\n)\n{2,}/g, "$1\n");
     return result;
@@ -310,27 +253,12 @@ function build() {
         // 对整个模板内容（含 frontmatter）进行条件过滤
         let filtered = filterByContentLevel(templateContent, platformConfig.contentLevel);
 
-        // 剥离 frontmatter 中指定字段（如 Qwen 不需要 tools/model/type）
-        if (platformConfig.stripFrontmatterFields && platformConfig.stripFrontmatterFields.length > 0) {
-            filtered = stripFrontmatterFields(filtered, platformConfig.stripFrontmatterFields);
-        }
-
-        // 替换 frontmatter 字段为平台特定值（仅当存在非字符串类型的具体值时）
-        // 原有的 frontmatter 配置（如 {{name}}, {{description}}）是死配置，从未被使用
-        // 只有 OpenCode 等新平台需要替换 mode/tools 等对象类型字段
-        if (platformConfig.frontmatter) {
-            const concreteFields = {};
-            for (const [key, value] of Object.entries(platformConfig.frontmatter)) {
-                // 只处理对象类型（如 tools: { write: true }）和布尔/数字类型
-                // 跳过所有字符串类型（包括 {{name}} 等占位符和 "- \"*\"" 等 YAML 字符串）
-                if (typeof value === "object" && value !== null) {
-                    concreteFields[key] = value;
-                }
-            }
-            if (Object.keys(concreteFields).length > 0) {
-                filtered = replaceFrontmatterFields(filtered, concreteFields);
-            }
-        }
+        // YAML 结构化处理 frontmatter（strip + override + autoInject）
+        const skills = discoverSkills();
+        const mcpServerNames = [platformsConfig.mcpServerName]
+            .concat((platformsConfig.additionalMcpServers || []).map((s) => s.name))
+            .filter(Boolean);
+        filtered = processFrontmatter(filtered, platformConfig, skills, mcpServerNames);
 
         // 替换 {{TOOL:}} 占位符
         filtered = replaceToolPlaceholders(filtered, platformConfig.toolPrefix);
@@ -384,15 +312,21 @@ function build() {
         console.log(`    ✓ Synced to opencode-extension/agents/`);
     }
 
-    // 5. 同步 SKILL.md 和 commands 到 qwen-extension/
+    // 5. 共享资源准备（skills、commands）
     const packageRoot = path.join(AGENTS_DIR, "..");
-
-    // 同步所有 skills（从 standard-skill 目录读取）
     const standardSkillDir = path.join(packageRoot, "standard-skill");
+    const skillDirs = fs.existsSync(standardSkillDir)
+        ? fs.readdirSync(standardSkillDir).filter((name) =>
+              fs.statSync(path.join(standardSkillDir, name)).isDirectory()
+          )
+        : [];
+    const commandsSourceDir = path.join(packageRoot, "commands");
+    const cmdFiles = fs.existsSync(commandsSourceDir)
+        ? fs.readdirSync(commandsSourceDir).filter((f) => f.endsWith(".md"))
+        : [];
+
+    // 5a. 同步 skills 和 commands 到 qwen-extension/
     if (fs.existsSync(standardSkillDir)) {
-        const skillDirs = fs.readdirSync(standardSkillDir).filter((name) => {
-            return fs.statSync(path.join(standardSkillDir, name)).isDirectory();
-        });
         for (const skillDir of skillDirs) {
             const srcSkillPath = path.join(standardSkillDir, skillDir, "SKILL.md");
             const destSkillPath = path.join(qwenExtDir, "skills", skillDir, "SKILL.md");
@@ -407,13 +341,11 @@ function build() {
     }
 
     // 同步 commands
-    const commandsSourceDir = path.join(packageRoot, "commands");
     const commandsDestDir = path.join(qwenExtDir, "commands");
     if (fs.existsSync(commandsSourceDir)) {
         if (!fs.existsSync(commandsDestDir)) {
             fs.mkdirSync(commandsDestDir, { recursive: true });
         }
-        const cmdFiles = fs.readdirSync(commandsSourceDir).filter((f) => f.endsWith(".md"));
         for (const cmdFile of cmdFiles) {
             fs.copyFileSync(
                 path.join(commandsSourceDir, cmdFile),
@@ -425,6 +357,39 @@ function build() {
         }
     }
 
+    // 5b. 同步 skills 和 commands 到 opencode-extension/
+    if (fs.existsSync(standardSkillDir)) {
+        for (const skillDir of skillDirs) {
+            const srcSkillPath = path.join(standardSkillDir, skillDir, "SKILL.md");
+            const destSkillPath = path.join(opencodeExtDir, "skills", skillDir, "SKILL.md");
+            if (fs.existsSync(srcSkillPath)) {
+                if (!fs.existsSync(path.dirname(destSkillPath))) {
+                    fs.mkdirSync(path.dirname(destSkillPath), { recursive: true });
+                }
+                fs.copyFileSync(srcSkillPath, destSkillPath);
+            }
+        }
+        if (skillDirs.length > 0) {
+            console.log(`    ✓ Synced ${skillDirs.length} skill(s) to opencode-extension/skills/`);
+        }
+    }
+
+    const opencodeCommandsDestDir = path.join(opencodeExtDir, "commands");
+    if (fs.existsSync(commandsSourceDir)) {
+        if (!fs.existsSync(opencodeCommandsDestDir)) {
+            fs.mkdirSync(opencodeCommandsDestDir, { recursive: true });
+        }
+        for (const cmdFile of cmdFiles) {
+            fs.copyFileSync(
+                path.join(commandsSourceDir, cmdFile),
+                path.join(opencodeCommandsDestDir, cmdFile),
+            );
+        }
+        if (cmdFiles.length > 0) {
+            console.log(`    ✓ Synced ${cmdFiles.length} command(s) to opencode-extension/commands/`);
+        }
+    }
+
     // 6. 生成 qwen-extension.json（MCP 配置从 platforms.json 读取）
     const qwenConfig = platformsConfig.platforms.qwen;
     if (qwenConfig && qwenConfig.mcp) {
@@ -457,10 +422,67 @@ function build() {
             excludeTools: [],
         };
 
+        // 追加额外的 MCP Server（HTTP 或 stdio 模式）
+        if (platformsConfig.additionalMcpServers) {
+            for (const server of platformsConfig.additionalMcpServers) {
+                if (server.type === "http") {
+                    manifest.mcpServers[server.name] = {
+                        type: "http",
+                        httpUrl: server.httpUrl,
+                    };
+                } else {
+                    manifest.mcpServers[server.name] = {
+                        type: server.type,
+                        command: server.command,
+                        args: server.args,
+                    };
+                }
+            }
+        }
+
         fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 4) + "\n");
         console.log(`    ✓ Generated qwen-extension.json (type: ${qwenConfig.mcp.type}, httpUrl: ${qwenConfig.mcp.httpUrl})`);
     }
 
+    // 7. 生成 opencode-extension/opencode.json（OpenCode 项目级 MCP 配置）
+    const opencodeConfig = platformsConfig.platforms.opencode;
+    if (opencodeConfig && opencodeConfig.mcp) {
+        const opencodeManifestPath = path.join(opencodeExtDir, "opencode.json");
+        const opencodeManifest = {
+            $schema: "https://opencode.ai/config.json",
+            mcp: {},
+        };
+
+        // 主 MCP Server
+        opencodeManifest.mcp[platformsConfig.mcpServerName] = {
+            type: opencodeConfig.mcp.type,
+            url: opencodeConfig.mcp.url,
+        };
+
+        // 额外的 MCP Server
+        if (platformsConfig.additionalMcpServers) {
+            for (const server of platformsConfig.additionalMcpServers) {
+                if (server.type === "http") {
+                    opencodeManifest.mcp[server.name] = {
+                        type: "remote",
+                        url: server.httpUrl,
+                    };
+                } else {
+                    opencodeManifest.mcp[server.name] = {
+                        type: "local",
+                        command: [server.command, ...server.args],
+                    };
+                }
+            }
+        }
+
+        if (!fs.existsSync(opencodeExtDir)) {
+            fs.mkdirSync(opencodeExtDir, { recursive: true });
+        }
+        fs.writeFileSync(opencodeManifestPath, JSON.stringify(opencodeManifest, null, 4) + "\n");
+        console.log(`    ✓ Generated opencode-extension/opencode.json (type: ${opencodeConfig.mcp.type}, url: ${opencodeConfig.mcp.url})`);
+    }
+
     console.log("\n✅ Agent build complete!");
 }
 

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

@@ -1,18 +1,19 @@
 ---
 description: |
-    szcd 组件库专家，用于查询组件信息、匹配需求到组件、生成基于 szcd 组件库的 React 代码。
-    当用户需要使用 @szc-ft/szcd 组件库开发页面、选择组件、查询组件 API、根据设计稿生成代码时，应使用此 agent。
-    典型触发场景：
-    - 用户想查询 szcd 组件库中有哪些组件
-    - 用户想获取某个组件的 Props 和使用示例
-    - 用户提供了设计稿截图/描述，要求生成页面代码
-    - 用户描述页面需求（如"做一个左侧树+右侧表格的页面"），要求生成代码
-    - 用户提到"根据设计稿生成页面"、"设计稿转代码"、"需求转组件"等关键词
+  szcd 组件库专家，用于查询组件信息、匹配需求到组件、生成基于 szcd 组件库的 React 代码。
+  当用户需要使用 @szc-ft/szcd 组件库开发页面、选择组件、查询组件 API、根据设计稿生成代码时，应使用此 agent。
+
+  典型触发场景：
+  - 用户想查询 szcd 组件库中有哪些组件
+  - 用户想获取某个组件的 Props 和使用示例
+  - 用户提供了设计稿截图/描述，要求生成页面代码
+  - 用户描述页面需求（如"做一个左侧树+右侧表格的页面"），要求生成代码
+  - 用户提到"根据设计稿生成页面"、"设计稿转代码"、"需求转组件"等关键词
 tools:
   write: true
   edit: true
   bash: true
-
+mode: all
 ---
 
 # szcd-component-expert: szcd 组件库专家
@@ -67,10 +68,136 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 - 缺少交互细节时，询问"编辑操作用弹窗还是抽屉？"并提供选项
 
 
+### 步骤2.5：Sketch 文件解析（条件执行）
+
+**当用户提供 .sketch 设计文件时**，使用 `sketch-mcp-server`（独立 MCP Server，stdio 模式）解析，直接提取结构化数据，结合组件库架构推理组件方案，无需经过视觉模型和 `map_design_data`。
+
+**核心原则**：写代码前必须先 `getMultipleNodeInfo` 拉取所有 `text` 和 `rectangle` 节点的完整样式 Token（`style.fills[0].color.hex`、`text.color`、`style.fontSize`），禁止凭节点名猜测颜色和样式。一次批量查询（50-100 个 ID）比逐个 `getNodeInfo` 快 10 倍以上，且不会遗漏。
+
+**工作流（6步深度探查，像素级还原）**：
+
+1. **加载文件**：
+   - `loadSketchByPath` 加载 .sketch 文件
+   - `listPages` 列出所有页面
+   - `listNodesByPage`（type="artboard"）获取画板列表
+   - 根据画板名称选择目标页面
+
+2. **获取完整节点树**：
+   - `getPageStructure`（pageId）**或** `getDocumentStructure`（includeDetails=true）— 拿到完整节点树 + 所有节点 ID
+   - 必须 `includeDetails=true`，否则拿不到初始样式
+   - 拿到所有节点 ID 列表，为下一步分组做准备
+
+3. **按类型分组统计**：
+   - `getNodesSummary`（pageId, groupBy="type"）— 按类型分组，统计 text/rectangle/group 各多少个
+   - 识别组件模式：
+     - `group(rectangle + text)` = 标签组件（如状态徽章）
+     - `group(text + text + rectangle...)` = 表单项
+     - `group(text 列表 + 边框)` = 表格行
+   - 决定下一批 `getMultipleNodeInfo` 的目标节点范围（所有 type=text + type=rectangle）
+
+4. **批量拉取样式 Token**：
+   - `getMultipleNodeInfo`（[id1, id2, ...]）— 每次 ≤ 100 个节点
+   - 关键字段提取：
+     - 背景色：`style.fills[0].color.hex`
+     - 文字色：`text.color`（部分版本在 `style.fills[0].color`）
+     - 字号：`style.fontSize`
+     - 字重：`style.fontWeight`
+     - 边框：`style.borders[0].color.hex` + `thickness`
+   - **禁止**逐个 `getNodeInfo` 探查
+
+5. **获取组件库架构**（复用步骤1结果）：
+   - `get_architecture_overview` 的 `templatePatterns` 提供模板组合模式
+   - `llmMappingHints` 提供常见错误修正
+
+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`
+
+**Sketch → szcd 工作流（结构化直传 + 样式 Token，无需视觉模型）**：
+```
+.sketch → loadSketchByPath → listPages → listNodesByPage(type=artboard)
+→ getPageStructure(includeDetails=true) / getDocumentStructure(includeDetails=true)
+→ getNodesSummary(groupBy="type")
+→ getMultipleNodeInfo([所有text+rectangle节点ID])  ← 关键：批量拿样式 Token
+→ [步骤1架构数据] → LLM推理组件
+→ get_component_full_profile(批量) → 编码
+```
+
+**首轮常见错误 → 正确做法对照表**：
+
+| 步骤 | 第一次做错的 | 应该做的 |
+|------|------------|---------|
+| 结构获取 | `getDocumentStructure(includeDetails=false)` 只有名称和位置 | `includeDetails=true` 或 `getPageStructure`，拿到初始样式 |
+| 样式提取 | 没做 | `getMultipleNodeInfo` 批量拉取所有 type=text 和 type=rectangle 节点 |
+| 组件识别 | 凭节点名猜测（如看到 "tag" 节点就写 `<Tag>`） | `getNodesSummary(groupBy="type")` 统计类型分布，识别 text+rectangle 组合 → 标签组件 |
+| 颜色提取 | 跳过 | 对每个 rectangle（背景）+ text（文字）取 `style.fills[0].color.hex` + `text.color` |
+
+**提示**：
+- 大型 .sketch 文件先 `listNodesByPage(type="artboard")` 锁定目标画板，避免一次性加载整个文档
+- `getNodesSummary` 是 token 节省关键：先按类型分组统计，再决定要查哪些节点 ID
+- 批量 `getMultipleNodeInfo` 严格 ≤ 100 个/次，超过需分批
+- 仅当结构化样式数据仍不足（如复杂渐变、阴影）时，才回退到 `renderNodeAsBase64` + `analyze_design_image`
+- 如果 sketch-mcp-server 工具不可用，提示用户安装：`npm install -g sketch-mcp-server`
+
+**Sketch 结构 → 组件映射规则**：
+
+*页面级布局*：
+| Sketch 特征 | 推断结果 | 依据 |
+|---|---|---|
+| 画板名称（如 "4.1-编目审核-待办"） | `pageName` | 直接使用 |
+| 左右分区布局 | `TemplateMode(templateTpye="LeftRight")` | 区域分布 |
+| 上下分区布局 | `TemplateMode(templateTpye="TopBottom")` | 区域分布 |
+| 标签页(Tabs) + 每个 Tab 内有表格 | `QueryTabsTables` 或 `TemplateMode` + Tabs | templatePatterns.QueryTabsTables |
+
+*区域级组件*：
+| Sketch 特征 | 推断结果 | 依据 |
+|---|---|---|
+| 左侧窄区域 + 树形图层 | `LeftTree` 组件 | templatePatterns.TreeQueryTable |
+| 顶部输入框/下拉框/日期选择器 | `Query` 组件 | 搜索区域特征 |
+| 中间表头 + 数据行图层 | `TableOrList` 组件 | 表格区域特征 |
+| 弹窗/抽屉图层 | `ModelOrDrawer` 组件 | 弹窗交互特征 |
+| 页面标题 + 返回箭头 | `TitleAndBack` 组件 | 标题栏特征 |
+| 详情展示区域（只读字段） | `FormItemOrDetailItem(type="detail")` | 详情区特征 |
+
+*数据可视化*：
+| Sketch 特征 | 推断结果 | 依据 |
+|---|---|---|
+| 折线趋势图/时间序列图 | `Line` | ECharts 层图表组件 |
+| 柱状对比图/条形图 | `Bar` | ECharts 层图表组件 |
+| 饼图/环形图/占比图 | `Pie` | ECharts 层图表组件 |
+| 雷达图/多维度对比 | `Radar` | ECharts 层图表组件 |
+| 仪表盘/进度指示 | `Gauge` | ECharts 层图表组件 |
+| 漏斗图/转化率 | `Funnel` | ECharts 层图表组件 |
+
+*表格子类型*：
+| 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`
+
 ### 步骤3：分析设计稿（条件执行）
 
 当用户提供了设计稿图片时：
-- 如果**主代理已提供图片描述**（设计稿已被解读为文字），直接使用该描述，跳过此步
+- 如果**主代理已提供图片描述**（设计稿已被解读为文字），直接使用该描述，跳过图像分析
 - 如果图片未被解读，调用 `analyze_design_image` 工具分析
 - 如果该工具不可用，告知用户需要提供设计稿的文字描述
 
@@ -84,8 +211,7 @@ szcd 是基于 Ant Design 5.27 封装的企业级 React 组件库，采用分层
 使用 MCP 工具获取组件信息和 API，**优先使用 Repowiki 语义搜索工具**：
 
 - `search_components_semantic` — 基于 Repowiki 知识库的语义搜索，用自然语言描述匹配最适合的组件（**优先使用**）
-- `get_component_full_profile` — 一站式获取组件全景画像。`name` 支持逗号分隔批量查询（如 `"Query,TableOrList"`），`depth="deep"` 获取 Props 链 + 源码摘要 + 样式注入，**返回值是紧凑 Markdown 格式**（**推荐首选，一次调用替代多次查询**）
-- `get_component_dependencies` — 查询组件依赖关系图，确认 hooks 和插槽关系
+- `get_component_full_profile` — 一站式获取组件全景画像。`name` 支持逗号分隔批量查询（如 `"Query,TableOrList"`），`depth="deep"` 获取 Props 链 + 依赖关系 + 源码摘要 + 样式注入，**返回值是紧凑 Markdown 格式**（**推荐首选，一次调用替代多次查询**）
 - `get_best_practices` — 获取组件使用最佳实践，指定 scenario 可获取组合最佳实践（如"左树右表页面"）
 - `get_style_injection_guide` — 查询组件样式注入方法，获取 CSS 覆盖路径和分配策略
 - `read_file` — 读取组件源码（deep 模式信息不足时）

package/agents/platforms.json

@@ -1,15 +1,20 @@
 {
     "mcpServerName": "szcd-component-helper",
+    "additionalMcpServers": [
+        {
+            "name": "sketch-mcp-server",
+            "type": "stdio",
+            "command": "sketch-mcp-server",
+            "args": []
+        }
+    ],
     "platforms": {
         "claude": {
             "outputFile": "szcd-component-expert.md",
             "contentLevel": "base",
             "frontmatter": {
                 "name": "{{name}}",
-                "description": "{{description}}",
-                "tools": "[\"*\"]",
-                "model": "sonnet",
-                "type": "agent"
+                "description": "{{description}}"
             },
             "toolPrefix": ""
         },
@@ -18,7 +23,6 @@
             "contentLevel": "enhanced",
             "frontmatter": {
                 "name": "{{name}}",
-                "tools": "- \"*\"",
                 "description": "{{description}}"
             },
             "toolPrefix": "mcp__szcd-component-helper__"
@@ -26,9 +30,11 @@
         "qoder": {
             "outputFile": "szcd-component-expert.qoder.md",
             "contentLevel": "full",
+            "autoInject": ["skills", "mcpServers"],
             "frontmatter": {
                 "name": "{{name}}",
-                "description": "{{description}}"
+                "description": "{{description}}",
+                "tools": ["*"]
             },
             "toolPrefix": ""
         },
@@ -60,7 +66,11 @@
                 }
             },
             "stripFrontmatterFields": ["name", "model", "type"],
-            "toolPrefix": ""
+            "toolPrefix": "",
+            "mcp": {
+                "type": "remote",
+                "url": "http://localhost:3456/mcp"
+            }
         }
     }
 }