figma-mcp-stdio 1.0.13 → 1.0.14

package/build/index.js

@@ -12,9 +12,6 @@ const server = new FastMCP({
     version: getVersion(),
 });
 /**
- * 7. 优化JSON数据，合并图层，生成新的 JSON 数据，识别JSON中卡片（Frame/Group），如果识别到模块，则合并模块内的所有节点如果模块没有 Frame/Group 包裹，而是子元素与其他元素平级，聚合元素结合图片辅助检查
-                - 检查初步分组是否合理（是否把两个卡片误合并？是否遗漏了卡片阴影等元素？）。
-                - 如果需要，调整分组。
  */
 const taskList = [
     "你是一个专业的Figma页面生成工程师，请严格执行以下步骤，Figma设计稿生成页面,确保页面样式与设计稿一致，并实现设计稿中的交互逻辑和用户体验；每执行一步都输出执行结果",
@@ -32,9 +29,9 @@ const taskList = [
     '【前期准备】:',
     "1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据,注入上下文中，数据名称 figmaJson",
     "2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
-    `3. 判断有无用户输入的图片描述
-    - 若有使用【下载Figma图片工具】下载对应图片
-    - 若无则执行【获取打标图片节点ID】工具，获取打标图片节点ID
+    `3. 按照规则下载图片，不要额外下载节点类型为IMGAE的图片
+    - 若有用户输入的图片描述，则使用【下载Figma图片工具】下载对应图片
+    - 若无用户输入的图片描述，则执行【获取打标图片节点ID】工具，获取打标图片节点ID
         - 若存在打标图片节点ID, 则使用【下载Figma图片工具】下载图片，仅下载这些打标图片节点（不下载其内部图片）
         - 若不存在打标图片节点ID, 则不下载图片
     【注】下载图片时统一使用 PNG 格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下`,
@@ -47,7 +44,9 @@ const taskList = [
     `,
     "【自检流程】:",
     "8. 执行自检流程，利用截图详情执行【检查页面】工具自检",
-    "9. 执行UI还原度对比流程，执行【还原度对比】工具自检",
+    `9. 执行UI还原度对比流程，执行【还原度对比】工具自检
+     - ⚠️ 重要提示：不允许跳过，必须执行
+    `,
     "10. 再次执行UI还原度对比流程，执行【还原度对比】工具自检",
 ];
 // 自动生成页面工具-印尼专用
@@ -121,7 +120,6 @@ server.addTool({
             // 优先使用参数中的 API 密钥，然后尝试环境变量
             const tinyApiKey = args.tinyApiKey || process.env.TINY_API_KEY;
             const compressionMethod = tinyApiKey ? "TinyPNG" : "Sharp压缩";
-            console.error(`开始批量压缩 ${args.imagePaths.length} 个图片，使用 ${compressionMethod}`);
             // 批量处理图片，支持并发
             const results = await processBatchImages(args.imagePaths, tinyApiKey, args.quality, args.concurrent);
             // 统计结果
@@ -197,10 +195,6 @@ 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 {
@@ -218,16 +212,18 @@ server.addTool({
     description: "还原度对比工具",
     execute: async (args) => {
         return String(`
+            ⚠️ 重要提示：不允许跳过，必须执行，采用@cursor/browser浏览器工具进行对比，可查看当前项目readme了解如何启动和访问，检查项目是否启动，若项目未启动可启动，通过navagate工具访问页面
            你是一名专业的 UI/UX 设计师和前端开发质量评审专家
-            使用能控制网页浏览器的工具@cursor/browser将当前 UI 与截图对比
+            使用能控制网页浏览器的工具@cursor/browser将当前 UI（只截取当前视窗,fullPage=false） 与截图对比
             【前置准备】
-            - 可查看当前项目readme了解如何启动和访问
             - 若是移动端项目，设计稿采用375px设计，选取一个对应的机型进行UI截图
             - 若是官网项目，则无需选取机型，浏览器窗口宽度调整为1440px
             【重点对比场景】
+            ⚠️ 重要提示: 也严格执行以下对比禁止跳过
             - 调整间距、颜色和排版以保持一致
+            - 检查是否有明显布局错误，例如：左右对齐、居中对齐
             - 调用获取图片详情工具获取UI详情（右图）与截图详情imageDetails包含内容（左图）对比，与左图比右图相对应的按钮、文字是否都存在
-                    - 若有按钮或文本不存在，检查滚动后截图详情是否存在，若存在截断，此时不要调整视口高度，检查容器实际情况调整样式，通过修改容器的高度或宽度，让内容自然撑开
+                    - 若有按钮或文本不存在，通过滚动模拟用户行为，每屏单独截图对比，若还存在截断，此时不要调整视口高度，检查容器实际情况调整样式，通过修改容器的高度或宽度，让内容自然撑开
                         - 【弹窗】：调整弹窗的高度，让内容展示全
                         - 【注意】：即使元素在 DOM 中存在，UI 详情中也可能未正确展示。
                         在覆盖组件库样式时，应检查当前 CSS 的实现方式（如使用 style 内联样式或 style 模块化样式），以确保样式覆盖生效
@@ -472,7 +468,6 @@ async function simpleImageCompress(imagePath, quality = 80) {
                     .toBuffer();
                 break;
         }
-        console.error(`Sharp压缩完成: ${extension} 格式, 质量: ${quality}`);
         return compressedBuffer;
     }
     catch (error) {

package/package.json

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