figma-mcp-stdio 1.0.11 → 1.0.13

package/build/index.js

@@ -32,15 +32,23 @@ const taskList = [
     '【前期准备】:',
     "1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据,注入上下文中，数据名称 figmaJson",
     "2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
-    "3. 判断有无用户输入的图片描述，若无则【获取打标图片节点ID】，使用【下载Figma图片工具】下载图片，只下载打标图片节点，节点里面的图片不下载，入参的图片格式为png格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下",
+    `3. 判断有无用户输入的图片描述
+    - 若有使用【下载Figma图片工具】下载对应图片
+    - 若无则执行【获取打标图片节点ID】工具，获取打标图片节点ID
+        - 若存在打标图片节点ID, 则使用【下载Figma图片工具】下载图片，仅下载这些打标图片节点（不下载其内部图片）
+        - 若不存在打标图片节点ID, 则不下载图片
+    【注】下载图片时统一使用 PNG 格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下`,
     "4. 使用【批量压缩图片工具】对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能",
     "5. 调用【获取组件库信息任务】，从知识库中获取组件库信息",
-    "6. 使用【获取图片详情工具】获取截图详情",
+    "6. 使用【获取图片详情工具】获取截图详情，并注入到上下文中，数据名称 imageDetails",
     "【生成页面】:",
-    `7. 根据截图详情内容生成页面，结合 figmaJson数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
+    `7. 根据截图详情imageDetails内容生成页面，结合 figmaJson数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
+    - ⚠️ 重要提示：样式生成时gap转换为margin、font-weight: 600转换为font-weight: bold
     `,
     "【自检流程】:",
     "8. 执行自检流程，利用截图详情执行【检查页面】工具自检",
+    "9. 执行UI还原度对比流程，执行【还原度对比】工具自检",
+    "10. 再次执行UI还原度对比流程，执行【还原度对比】工具自检",
 ];
 // 自动生成页面工具-印尼专用
 server.addTool({
@@ -113,7 +121,7 @@ server.addTool({
             // 优先使用参数中的 API 密钥，然后尝试环境变量
             const tinyApiKey = args.tinyApiKey || process.env.TINY_API_KEY;
             const compressionMethod = tinyApiKey ? "TinyPNG" : "Sharp压缩";
-            console.log(`开始批量压缩 ${args.imagePaths.length} 个图片，使用 ${compressionMethod}`);
+            console.error(`开始批量压缩 ${args.imagePaths.length} 个图片，使用 ${compressionMethod}`);
             // 批量处理图片，支持并发
             const results = await processBatchImages(args.imagePaths, tinyApiKey, args.quality, args.concurrent);
             // 统计结果
@@ -189,6 +197,10 @@ server.addTool({
         imageAbsolutePath: z.string().describe("本地图片的绝对路径"),
     }),
     execute: async (args) => {
+        // 使用 console.error 输出调试信息，避免干扰 MCP 的 JSON-RPC 通信
+        console.error('=== get-image-to-base64 调试信息 ===');
+        console.error('参数:', JSON.stringify(args, null, 2));
+        console.error('图片路径:', args.imageAbsolutePath);
         const { imageAbsolutePath } = args;
         const base64 = await getImageToBase64(imageAbsolutePath);
         return {
@@ -200,13 +212,32 @@ server.addTool({
         };
     },
 });
-// 图片检查工具
+// 还原度对比工具
 server.addTool({
-    name: "check_image",
-    description: "检查图片",
+    name: "check_ui",
+    description: "还原度对比工具",
     execute: async (args) => {
         return String(`
-            1. 检查图片节点是否为图片，如果为图片则内部的节点不需要生成
+           你是一名专业的 UI/UX 设计师和前端开发质量评审专家
+            使用能控制网页浏览器的工具@cursor/browser将当前 UI 与截图对比
+            【前置准备】
+            - 可查看当前项目readme了解如何启动和访问
+            - 若是移动端项目，设计稿采用375px设计，选取一个对应的机型进行UI截图
+            - 若是官网项目，则无需选取机型，浏览器窗口宽度调整为1440px
+            【重点对比场景】
+            - 调整间距、颜色和排版以保持一致
+            - 调用获取图片详情工具获取UI详情（右图）与截图详情imageDetails包含内容（左图）对比，与左图比右图相对应的按钮、文字是否都存在
+                    - 若有按钮或文本不存在，检查滚动后截图详情是否存在，若存在截断，此时不要调整视口高度，检查容器实际情况调整样式，通过修改容器的高度或宽度，让内容自然撑开
+                        - 【弹窗】：调整弹窗的高度，让内容展示全
+                        - 【注意】：即使元素在 DOM 中存在，UI 详情中也可能未正确展示。
+                        在覆盖组件库样式时，应检查当前 CSS 的实现方式（如使用 style 内联样式或 style 模块化样式），以确保样式覆盖生效
+            【不同机型兼容，检查排版】
+                - 调整为 iphone 5的尺寸
+                - 调整为 iPhone 12 pro的尺寸
+                -【注意】：若进行了兼容性检查并调整后需要在重新进行重点对比场景
+                    若是官网项目，则无需进行兼容性检查
+            【忽略对比场景】
+            - 与截图对比，如果多出一个齿轮按钮忽略，该按钮为移动端调试icon
             `);
     },
 });
@@ -441,7 +472,7 @@ async function simpleImageCompress(imagePath, quality = 80) {
                     .toBuffer();
                 break;
         }
-        console.log(`Sharp压缩完成: ${extension} 格式, 质量: ${quality}`);
+        console.error(`Sharp压缩完成: ${extension} 格式, 质量: ${quality}`);
         return compressedBuffer;
     }
     catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "figma-mcp-stdio",
-    "version": "1.0.11",
+    "version": "1.0.13",
     "description": "A Model Context Protocol server",
     "private": false,
     "type": "module",