figma-mcp-stdio 1.0.13 → 1.0.15

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,10 @@ const taskList = [
     '【前期准备】:',
     "1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据,注入上下文中，数据名称 figmaJson",
     "2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
-    `3. 判断有无用户输入的图片描述
-    - 若有使用【下载Figma图片工具】下载对应图片
-    - 若无则执行【获取打标图片节点ID】工具，获取打标图片节点ID
+    `3. 按照规则下载图片
+    - ⚠️ 重要提示：不要额外下载类型为IMAGE的图片
+    - 若有用户输入的图片描述，则使用【下载Figma图片工具】下载对应图片
+    - 若无用户输入的图片描述，则执行【获取打标图片节点ID】工具，获取打标图片节点ID
         - 若存在打标图片节点ID, 则使用【下载Figma图片工具】下载图片，仅下载这些打标图片节点（不下载其内部图片）
         - 若不存在打标图片节点ID, 则不下载图片
     【注】下载图片时统一使用 PNG 格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下`,
@@ -42,14 +40,31 @@ const taskList = [
     "5. 调用【获取组件库信息任务】，从知识库中获取组件库信息",
     "6. 使用【获取图片详情工具】获取截图详情，并注入到上下文中，数据名称 imageDetails",
     "【生成页面】:",
-    `7. 根据截图详情imageDetails内容生成页面，结合 figmaJson数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
+    `9. 根据截图详情imageDetails内容生成页面，结合 figmaJson数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
     - ⚠️ 重要提示：样式生成时gap转换为margin、font-weight: 600转换为font-weight: bold
     `,
+    '【页面优化】:',
+    `10. 使用【页面优化工具】优化页面`,
     "【自检流程】:",
-    "8. 执行自检流程，利用截图详情执行【检查页面】工具自检",
-    "9. 执行UI还原度对比流程，执行【还原度对比】工具自检",
-    "10. 再次执行UI还原度对比流程，执行【还原度对比】工具自检",
+    `12. 执行UI还原度对比流程，执行【还原度对比】工具自检
+     - ⚠️ 重要提示：不允许跳过，必须执行
+    `,
+    "13. 再次执行UI还原度对比流程，执行【还原度对比】工具自检",
 ];
+// 问题修复工具
+server.addTool({
+    name: "page_optimization",
+    description: "页面优化工具",
+    execute: async (args) => {
+        return String(`
+            你是一个专业的页面优化工程师，请严格执行以下步骤，每执行一步都输出执行结果
+            【优化规则】:
+            1、样式生成时gap转换为margin、font-weight: 600转换为font-weight: bold
+            2、如存在design-token样式，如 Base/FontSize/20 斜杠分割的格式，使用design-token的原始值（如 Base/FontSize/20），无需转换为变量，打包工具会自动转换
+            3、最外层容器不要设置为375px、1440px等固定宽度，响应式布局，宽度为100%
+        `);
+    },
+});
 // 自动生成页面工具-印尼专用
 server.addTool({
     name: "figma_generate_page_tasks",
@@ -121,7 +136,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 +211,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 +228,18 @@ server.addTool({
     description: "还原度对比工具",
     execute: async (args) => {
         return String(`
-           你是一名专业的 UI/UX 设计师和前端开发质量评审专家
-            使用能控制网页浏览器的工具@cursor/browser将当前 UI 与截图对比
+            ⚠️ 重要提示：不允许跳过，必须执行，采用@cursor/browser浏览器工具进行对比，查看当前项目readme了解启动和访问项目的方式，查看当前项目的路由配置了解访问路径，项目启动后，通过navigate工具访问页面
+            你是一名 UI 验收专家，具备像素级别的视觉识别能力
+            使用能控制网页浏览器的工具@cursor/browser将当前 UI（只截取当前视窗,fullPage=false） 与截图对比
             【前置准备】
-            - 可查看当前项目readme了解如何启动和访问
             - 若是移动端项目，设计稿采用375px设计，选取一个对应的机型进行UI截图
             - 若是官网项目，则无需选取机型，浏览器窗口宽度调整为1440px
             【重点对比场景】
+            ⚠️ 重要提示: 严格执行以下对比禁止跳过
             - 调整间距、颜色和排版以保持一致
+            - 检查是否有横向或纵向溢出，如果溢出则调整样式，让内容自然撑开
             - 调用获取图片详情工具获取UI详情（右图）与截图详情imageDetails包含内容（左图）对比，与左图比右图相对应的按钮、文字是否都存在
-                    - 若有按钮或文本不存在，检查滚动后截图详情是否存在，若存在截断，此时不要调整视口高度，检查容器实际情况调整样式，通过修改容器的高度或宽度，让内容自然撑开
+                    - 若有按钮或文本不存在，通过滚动模拟用户行为，每屏单独截图对比，若还存在截断，此时不要调整视口高度，检查容器实际情况调整样式，通过修改容器的高度或宽度，让内容自然撑开
                         - 【弹窗】：调整弹窗的高度，让内容展示全
                         - 【注意】：即使元素在 DOM 中存在，UI 详情中也可能未正确展示。
                         在覆盖组件库样式时，应检查当前 CSS 的实现方式（如使用 style 内联样式或 style 模块化样式），以确保样式覆盖生效
@@ -472,7 +484,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.15",
     "description": "A Model Context Protocol server",
     "private": false,
     "type": "module",