figma-mcp-stdio 1.0.12 → 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,16 +29,25 @@ const taskList = [
     '【前期准备】:',
     "1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据,注入上下文中，数据名称 figmaJson",
     "2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
-    "3. 判断有无用户输入的图片描述，若无则【获取打标图片节点ID】，使用【下载Figma图片工具】下载图片，只下载打标图片节点，节点里面的图片不下载，入参的图片格式为png格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下",
+    `3. 按照规则下载图片，不要额外下载节点类型为IMGAE的图片
+    - 若有用户输入的图片描述，则使用【下载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({
@@ -114,7 +120,6 @@ server.addTool({
             // 优先使用参数中的 API 密钥，然后尝试环境变量
             const tinyApiKey = args.tinyApiKey || process.env.TINY_API_KEY;
             const compressionMethod = tinyApiKey ? "TinyPNG" : "Sharp压缩";
-            console.log(`开始批量压缩 ${args.imagePaths.length} 个图片，使用 ${compressionMethod}`);
             // 批量处理图片，支持并发
             const results = await processBatchImages(args.imagePaths, tinyApiKey, args.quality, args.concurrent);
             // 统计结果
@@ -201,13 +206,34 @@ server.addTool({
         };
     },
 });
-// 图片检查工具
+// 还原度对比工具
 server.addTool({
-    name: "check_image",
-    description: "检查图片",
+    name: "check_ui",
+    description: "还原度对比工具",
     execute: async (args) => {
         return String(`
-            1. 检查图片节点是否为图片，如果为图片则内部的节点不需要生成
+            ⚠️ 重要提示：不允许跳过，必须执行，采用@cursor/browser浏览器工具进行对比，可查看当前项目readme了解如何启动和访问，检查项目是否启动，若项目未启动可启动，通过navagate工具访问页面
+           你是一名专业的 UI/UX 设计师和前端开发质量评审专家
+            使用能控制网页浏览器的工具@cursor/browser将当前 UI（只截取当前视窗,fullPage=false） 与截图对比
+            【前置准备】
+            - 若是移动端项目，设计稿采用375px设计，选取一个对应的机型进行UI截图
+            - 若是官网项目，则无需选取机型，浏览器窗口宽度调整为1440px
+            【重点对比场景】
+            ⚠️ 重要提示: 也严格执行以下对比禁止跳过
+            - 调整间距、颜色和排版以保持一致
+            - 检查是否有明显布局错误，例如：左右对齐、居中对齐
+            - 调用获取图片详情工具获取UI详情（右图）与截图详情imageDetails包含内容（左图）对比，与左图比右图相对应的按钮、文字是否都存在
+                    - 若有按钮或文本不存在，通过滚动模拟用户行为，每屏单独截图对比，若还存在截断，此时不要调整视口高度，检查容器实际情况调整样式，通过修改容器的高度或宽度，让内容自然撑开
+                        - 【弹窗】：调整弹窗的高度，让内容展示全
+                        - 【注意】：即使元素在 DOM 中存在，UI 详情中也可能未正确展示。
+                        在覆盖组件库样式时，应检查当前 CSS 的实现方式（如使用 style 内联样式或 style 模块化样式），以确保样式覆盖生效
+            【不同机型兼容，检查排版】
+                - 调整为 iphone 5的尺寸
+                - 调整为 iPhone 12 pro的尺寸
+                -【注意】：若进行了兼容性检查并调整后需要在重新进行重点对比场景
+                    若是官网项目，则无需进行兼容性检查
+            【忽略对比场景】
+            - 与截图对比，如果多出一个齿轮按钮忽略，该按钮为移动端调试icon
             `);
     },
 });
@@ -442,7 +468,6 @@ async function simpleImageCompress(imagePath, quality = 80) {
                     .toBuffer();
                 break;
         }
-        console.log(`Sharp压缩完成: ${extension} 格式, 质量: ${quality}`);
         return compressedBuffer;
     }
     catch (error) {

package/package.json

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