sloth-d2c-mcp 1.0.4-beta78 → 1.0.4-beta79

package/README.md

@@ -1,100 +1,83 @@
-## D2C MCP Server
+# Sloth D2C MCP
 
-这是一个MCP (Model Context Protocol) 服务器，提供Figma设计转代码的功能。
+## 简介
 
-## 可用工具
+Sloth D2C 设计稿转代码工具，包括 Sloth D2C 设计稿转代码 Figma 插件及 Sloth D2C MCP 工具。
 
-### 1\. d2c\_figma\_intercept
+Sloth D2C 设计稿转代码插件，面向前端开发与设计团队的智能化工具，支持设计稿快速转前端代码，并通过协同 MCP 工具，写入生产级前端代码；同时支持文本/图片+Prompt输入AI，生成目标风格页面并转译至Figma节点。
 
-使用Tauri桌面应用获取用户输入的工具。
+Sloth D2C MCP 工具，获取插件推送的转码数据，通过拦截页面配置框架选择、转换倍率、颜色格式、图片存储、提示词编辑等基础设置，同时支持圈选分组、组件映射、模块标记等高级设置，以生成提示词指导 Agent 生成目标代码并写入。
 
-**特点:**
+## 核心能力
 
-*   打开原生桌面应用
-*   更好的用户体验
-*   窗口始终保持在最前面
-*   支持快捷键操作
+<!-- ### 节点清洗 -->
+<!-- 待补充 -->
 
-**参数:**
+### 效果预览及源码调整
 
-*   `fileKey`: Figma文件的key (必需)
-*   `nodeId`: 节点ID (可选)
-*   `depth`: 遍历深度 (可选)
+插件支持生成代码页面预览，同时支持源码二次编辑。在插件转码后，提供代码编辑器编辑源码，实时预览效果。
 
-### 2\. d2c\_figma\_intercept\_web
+### AI 生成页面
 
-使用网页浏览器获取用户输入的工具。
+插件支持文本/图片+Prompt 输入 AI，生成目标风格页面代码并预览。同时支持转译至成 Figma 节点并插入 Figma 设计稿。
 
-**特点:**
+### 自研 MCP 拦截器
 
-*   在默认浏览器中打开网页
-*   兼容性更好
-*   无需额外的桌面应用
+设计了创新的 MCP 拦截器。利用 await 挂起 MCP 的核心请求，为用户创造了一个交互窗口。通过配置拦截及数据推送突破 RESTful API 限制，最大化还原度。
 
-**参数:**
+### 支持多种框架
 
-*   `fileKey`: Figma文件的key (必需)
-*   `nodeId`: 节点ID (可选)
-*   `depth`: 遍历深度 (可选)
+MCP 默认支持 React、Vue 代码生成，系统内置提示词默认配置。同时支持新增自定义框架，配置自定义框架生成提示词。
 
-## 使用方法
+### 多种图片存储方式
 
-启动MCP服务器:
+支持图片本地存储、OSS 存储及自定义图片上传方式。
 
-通过MCP客户端调用工具:
+### 圈选分组与采样
 
-或者使用网页版本:
+支持圈选分组与智能采样，圈选分组功能允许你在设计稿预览页中手动划分代码结构区域，每个区域分别在不同的采用请求流程进行代码生成，提高转码效率和准确性。
 
-```plaintext
-{
-  "method": "tools/call",
-  "params": {
-    "name": "d2c_figma_intercept_web",
-    "arguments": {
-      "fileKey": "your-figma-file-key",
-      "nodeId": "optional-node-id"
-    }
-  }
-}
-```
+### 组件映射
 
-## 端口配置
+从项目中选择组件文件，将项目中的组件映射对应圈选元素，生成代码时直接引用对应组件。
 
-*   MCP服务器: 端口3001 (如果被占用会自动尝试下一个端口)
-*   网页服务器: 端口3002
-*   Tauri回调服务器: 动态端口 (从3001开始)
+### 模块标记
 
-## 开发
+对圈选后的模块进行标记，方便其他设计稿类似模块的直接复用，无需重复生成。
 
-```plaintext
-# 安装依赖
-npm install
+## 安装 MCP
 
-# 开发模式
-npm run dev
+```bash
+# 使用 pnpm（推荐）
+pnpm install sloth-d2c-mcp -g
 
-# 构建
-npm run build
+# 或使用 npm
+npm install sloth-d2c-mcp -g
 
-# 测试
-node test-both-tools.js
+# 验证安装
+sloth
 ```
 
-```plaintext
-{
-"method": "tools/call",
-"params": {
- "name": "d2c_figma_intercept",
- "arguments": {
-   "fileKey": "your-figma-file-key",
-   "nodeId": "optional-node-id"
- }
-}
-}
+## 配置 MCP
+
+**TME-Continue**
+
+```yaml
+- name: sloth-d2c-mcp
+  command: sloth
+  connectionTimeout: 3000000
+  args:
+    - --stdio
 ```
 
-```plaintext
-npm run dev
+**Copilot**
+
+```json
+"d2c-cli": {
+  "type": "stdio",
+  "command": "sloth",
+  "args": ["--stdio"]
+}
 ```
 
-npx @modelcontextprotocol/_inspector_
+> **提示**：推荐使用 Claude AI 模型。若需转码长设计稿，请开启 MCP 采样功能以优化转码策略（TME-Continue 和 Copilot 均支持）。

package/cli/run.js

@@ -93,6 +93,26 @@ if (args[0] === 'config') {
   process.env.SLOTH_COMMAND = 'framework';
   // 传递子命令参数
   process.env.SLOTH_FRAMEWORK_ARGS = JSON.stringify(args.slice(1));
+} else if (args[0] === 'run') {
+  // run 命令：后台运行 sloth --stdio
+  const { spawn } = await import('node:child_process');
+  const { fileURLToPath } = await import('node:url');
+  
+  // 获取当前脚本路径（兼容 Node.js 18）
+  const scriptPath = fileURLToPath(import.meta.url);
+  
+  // 后台启动子进程
+  const child = spawn(process.execPath, [scriptPath, '--stdio'], {
+    detached: true,
+    stdio: 'ignore',
+    env: { ...process.env, NODE_ENV: 'cli' }
+  });
+  
+  // 解除父进程对子进程的引用，允许父进程退出
+  child.unref();
+  
+  console.log(`[sloth] 已在后台启动，PID: ${child.pid}`);
+  process.exit(0);
 } else {
   // 设置环境变量为CLI模式
   process.env.NODE_ENV = "cli";

package/dist/build/core/prompt-builder.js

@@ -209,3 +209,97 @@ export function buildPlaceholderPrompt(placeholders) {
     prompt += '\n将 HTML 标签转换为真实组件调用，但不需要添加对应的 import 语句，保持其在布局中的位置。\n';
     return prompt;
 }
+/**
+ * 构建完整的 AI 代码修改提示词
+ * 用于用户确认变更后，生成可直接发送给 AI 的完整提示词
+ * @param confirmedChanges 用户确认的变更点列表
+ * @param options 配置选项
+ * @returns 完整的 AI 提示词
+ */
+export function buildFullUpdatePromptForAI(confirmedChanges, options = {}) {
+    const { fileKey, nodeId, htmlDiff } = options;
+    if (!confirmedChanges || confirmedChanges.length === 0) {
+        return '没有需要修改的变更点。';
+    }
+    const typeLabels = {
+        layout: '布局变更',
+        style: '样式变更',
+        content: '内容变更',
+        structure: '结构变更',
+    };
+    let prompt = `# 设计稿变更 - 代码修改任务
+
+## 任务背景
+
+用户的 UI 设计稿发生了变更，需要根据以下变更点修改现有代码。这是一个**增量修改任务**，不是全新创建。
+
+## 前置要求
+
+**请先确认当前上下文中是否包含需要修改的代码。**
+
+如果当前上下文中没有相关代码，请让用户：
+1. 提供需要修改的代码文件路径，以便读取
+2. 或直接粘贴需要修改的代码内容
+
+---
+
+## 变更信息
+
+`;
+    // 添加设计稿信息（如果有）
+    if (fileKey) {
+        prompt += `- **设计稿标识**: ${fileKey}${nodeId ? ` / ${nodeId}` : ''}\n`;
+    }
+    prompt += `- **变更数量**: ${confirmedChanges.length} 个\n\n`;
+    // 变更点详情
+    prompt += `## 变更点详情\n\n`;
+    confirmedChanges.forEach((change, index) => {
+        prompt += `### ${index + 1}. ${change.title}\n\n`;
+        prompt += `- **类型**: ${typeLabels[change.type] || change.type}\n`;
+        prompt += `- **描述**: ${change.description}\n`;
+        prompt += `- **建议操作**: ${change.suggestedAction}\n`;
+        if (change.userPrompt) {
+            prompt += `- **用户补充**: ${change.userPrompt}\n`;
+        }
+        prompt += `\n`;
+    });
+    // 添加 HTML Diff（如果有）
+    if (htmlDiff && htmlDiff.trim()) {
+        prompt += `## 设计稿 HTML Diff
+
+以下是新旧设计稿的 HTML 差异，可帮助你精确定位需要修改的样式和布局：
+
+\`\`\`diff
+${htmlDiff}
+\`\`\`
+
+**说明**：
+- \`---\` 开头的行表示被删除的内容（旧设计稿）
+- \`+++\` 开头的行表示新增的内容（新设计稿）
+- HTML 使用 Tailwind CSS 类名
+
+`;
+    }
+    // 修改指南
+    prompt += `## 修改要求
+
+### 核心原则
+
+1. **基于现有实现**: 分析当前项目的技术栈和代码实现方式，在此基础上进行修改
+2. **最小化变更**: 只修改与变更点相关的代码，保持其他部分不变
+3. **保持一致性**: 遵循现有代码的命名规范、代码风格和架构模式
+4. **增量修改**: 优先通过修改现有代码实现，避免大规模重构
+
+### 修改流程
+
+1. **分析现有代码**: 理解当前代码的技术栈、组件结构、样式方案
+2. **定位修改位置**: 根据变更点找到需要修改的具体代码位置
+3. **实施修改**: 按照现有代码风格进行修改
+4. **验证完整性**: 确保修改后代码可正常运行
+
+---
+
+**请开始分析代码并执行修改。如果需要更多信息或代码上下文，请告诉我。**
+`;
+    return prompt;
+}

package/dist/build/index.js

@@ -13,7 +13,7 @@ import { updateImageMapIfNeeded } from './utils/update.js';
 import { Logger } from './utils/logger.js';
 import { getAvailablePort, saveImageFile, replaceImageSrc } from './utils/utils.js';
 import { processSampling, buildNestingStructure } from './core/sampling.js';
-import { buildComponentMappingPrompt, buildPlaceholderPrompt } from './core/prompt-builder.js';
+import { buildComponentMappingPrompt, buildFullUpdatePromptForAI, buildPlaceholderPrompt } from './core/prompt-builder.js';
 // @ts-ignore
 import * as flatted from 'flatted';
 import { promises as fs } from 'fs';
@@ -77,11 +77,16 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
     nodeId: z.string().optional().describe('The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided'),
     depth: z.number().optional().describe('How many levels deep to traverse the node tree, only use if explicitly requested by the user'),
     local: z.boolean().optional().describe('Whether to use local data cache, default is false'),
+    update: z
+        .boolean()
+        .optional()
+        .default(false)
+        .describe('Set to true only when user explicitly wants to modify/update previously generated code. Default is false (create new code).'),
 }, async (args) => {
     try {
         trackToolCall('d2c_figma');
         Logger.log(`收到工具调用参数:`, JSON.stringify(args, null, 2));
-        const { fileKey, nodeId, depth, local } = args;
+        const { fileKey, nodeId, depth, local, update = false } = args;
         let config = await configManager.load();
         let hasLaunchWebview = false;
         // 检测 VSCode 扩展是否可用
@@ -99,19 +104,21 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             Logger.log('获取根目录时出错:', error);
         }
         await startListening();
-        // 没有配置figmaApiKey，无法预览，直接唤起配置页面
-        if (!config.mcp?.figmaApiKey) {
+        let userConfirmedChanges;
+        let userHtmlDiff; // 存储 HTML diff 文本
+        // 没有配置figmaApiKey，非数据推送模式，无法预览，直接唤起配置页面
+        if (!config.mcp?.figmaApiKey && !local) {
             hasLaunchWebview = true;
             let configDataString;
             if (isVSCodePluginAvailable) {
                 // 优先使用 VSCode 扩展
                 Logger.log('使用 VSCode 扩展获取用户输入');
-                configDataString = await getUserInputFromVSCode({ fileKey: fileKey, nodeId: nodeId });
+                configDataString = await getUserInputFromVSCode({ fileKey: fileKey, nodeId: nodeId, mode: update ? 'update' : 'create' });
             }
             else {
                 // 降级到网页浏览器
                 Logger.log('VSCode 扩展不可用，降级到网页浏览器');
-                configDataString = await getUserInput({ fileKey: fileKey, nodeId: nodeId });
+                configDataString = await getUserInput({ fileKey: fileKey, nodeId: nodeId, mode: update ? 'update' : 'create' });
             }
             console.log('getting configDataString', configDataString);
             if (!configDataString || configDataString.trim() === '') {
@@ -119,7 +126,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             }
             else {
                 const configData = JSON.parse(configDataString);
-                const { mcp, groupsData, ...rest } = configData;
+                const { mcp, groupsData, confirmedChanges, htmlDiff, ...rest } = configData;
                 config = {
                     ...config,
                     mcp,
@@ -128,6 +135,8 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                         [fileKey]: rest,
                     },
                 };
+                userConfirmedChanges = confirmedChanges;
+                userHtmlDiff = htmlDiff; // 保存 HTML diff
                 mcpServer.setConfig(config.mcp);
                 configManager.save(config);
                 if (rest) {
@@ -160,12 +169,12 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             await fileManager.saveFile(fileKey, nodeId, 'nodeList.json', flatted.stringify(d2cNodeList));
             await fileManager.saveFile(fileKey, nodeId, 'imageMap.json', flatted.stringify(imageMap));
             // 保存figma绝对定位代码
-            await fileManager.saveFile(fileKey, nodeId, 'absolute.html', absoluteHtml);
+            await fileManager.saveAbsoluteHtml(fileKey, nodeId, absoluteHtml);
         }
         else {
             d2cNodeList = flatted.parse(await fileManager.loadFile(fileKey, nodeId, 'nodeList.json'));
             imageMap = flatted.parse(await fileManager.loadFile(fileKey, nodeId, 'imageMap.json'));
-            absoluteHtml = await fileManager.loadFile(fileKey, nodeId, 'absolute.html');
+            absoluteHtml = await fileManager.loadAbsoluteHtml(fileKey, nodeId);
             console.log('cache load data');
         }
         console.log('d2cNodeList', d2cNodeList);
@@ -177,10 +186,10 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             Logger.log(`收到网页工具调用参数:`, JSON.stringify(args, null, 2));
             let configDataString;
             if (isVSCodePluginAvailable) {
-                configDataString = await getUserInputFromVSCode({ fileKey: fileKey, nodeId: nodeId });
+                configDataString = await getUserInputFromVSCode({ fileKey: fileKey, nodeId: nodeId, mode: update ? 'update' : 'create' });
             }
             else {
-                configDataString = await getUserInput({ fileKey: fileKey, nodeId: nodeId });
+                configDataString = await getUserInput({ fileKey: fileKey, nodeId: nodeId, mode: update ? 'update' : 'create' });
             }
             console.log('收到网页提交数据', configDataString);
             if (!configDataString || configDataString.trim() === '') {
@@ -188,7 +197,9 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             }
             else {
                 const configData = JSON.parse(configDataString);
-                const { mcp, groupsData, ...rest } = configData;
+                const { mcp, groupsData, confirmedChanges, htmlDiff, ...rest } = configData;
+                userConfirmedChanges = confirmedChanges;
+                userHtmlDiff = htmlDiff; // 保存 HTML diff
                 // 保存旧配置用于比较
                 const oldFileConfig = config.fileConfigs?.[fileKey] || defaultConfigData;
                 config = {
@@ -227,6 +238,22 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 }
             }
         }
+        // Update 模式：直接返回提示词，不需要复杂的采样逻辑
+        if (update) {
+            // 保存图片文件
+            saveImageFile({ imageMap, root });
+            Logger.log(`Update 模式: 收到已构建的提示词，直接返回`);
+            Logger.log(`Update 模式: 变更点数量 - ${userConfirmedChanges?.length || 0} 个`);
+            Logger.log(`Update 模式: HTML Diff 长度 - ${userHtmlDiff?.length || 0} 字符`);
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: buildFullUpdatePromptForAI(userConfirmedChanges, { htmlDiff: userHtmlDiff }),
+                    },
+                ],
+            };
+        }
         // 从 fileManager 按 nodeId 加载 groupsData 和 promptSetting
         const groupsData = await fileManager.loadGroupsData(fileKey, nodeId);
         const savedPromptSetting = await fileManager.loadPromptSetting(fileKey, nodeId);
@@ -385,10 +412,10 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         const markedComponents = [];
         if (groupsData && groupsData.length > 0) {
             groupsData.forEach((group) => {
-                if (group.marked && group.screenshot?.hash && group.name) {
+                if (group.marked && group.screenshot && group.name) {
                     markedComponents.push({
                         name: group.name,
-                        signature: group.screenshot.hash,
+                        signature: group.screenshot,
                     });
                 }
             });
@@ -520,6 +547,9 @@ mcpServer.tool('mark_components', 'Mark and save components to project component
                 super: comp.super,
                 description: comp.description,
             };
+            if (comp.signature) {
+                storedComponent.signature = comp.signature;
+            }
             if (existingIndex !== undefined) {
                 // 更新已存在的组件（保留原始导入时间）
                 const originalImportedAt = existingComponents[existingIndex].importedAt;