figma-mcp-stdio 0.1.3 → 0.1.5

package/build/index.js

@@ -11,7 +11,29 @@ const server = new FastMCP({
     name: "My Server",
     version: getVersion(),
 });
-// 添加批量图片压缩工具
+// 自动生成页面工具
+server.addTool({
+    name: "figma_generate_page_tasks",
+    description: "获取Figma生成页面所需要的任务列表",
+    execute: async (args) => {
+        return String(`
+            1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
+            2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则，使用【下载Figma图片工具】下载页面的截图
+            3. 根据用户输入的图片描述，使用【下载Figma图片工具】下载图片，入参的图片格式为png格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下
+            4. 使用【批量压缩图片工具】对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能
+            5. 使用【获取图片详情工具】获取截图详情，根据详情内容生成页面，结合JSON数据优化样式，截图为主，JSON数据为辅
+            6. 使用terminal命令删除页面截图(保存在images下的)，只保留用户指定下载的图片资源文件
+            7. 确保生成的页面具有响应式特性，宽度设置为100%而非固定的设计稿尺寸（如375px）
+            
+            质量要求：
+            - 交互功能：实现设计稿中的交互逻辑和用户体验
+            - 图片处理：正确替换和优化图片资源，语义化命名
+            - 完整样式：包含渐变背景、阴影效果、圆角、动画等所有视觉元素
+            - 响应式设计：确保在不同设备上的良好显示效果
+            `);
+    },
+});
+// 批量图片压缩工具
 server.addTool({
     name: "compress_multiple_images",
     description: "批量压缩多个本地图片文件，保存到原地址",
@@ -61,35 +83,52 @@ server.addTool({
         }
     },
 });
-// 添加一个工具
-// Tools 使服务器能够向客户端公开可执行功能
+// Figma节点ID转换规则
 server.addTool({
-    // AI通过工具名称理解功能用途，应使用动词开头的描述性名称（如"search-files"、"create-user"）
-    name: "figma_generate_page_tasks",
-    // AI的工具选择依据，清晰准确的描述帮助AI在多个工具中选择正确的工具
-    description: "获取Figma生成页面所需要的任务列表",
-    // 定义AI调用工具时必须提供的参数结构，Zod验证确保AI传递的参数格式正确
-    // 实际执行AI请求的逻辑，返回的内容格式影响AI对结果的理解和后续操作
+    name: "figma_transform_node_id",
+    description: "Figma节点ID转换规则",
+    parameters: z.object({
+        nodeId: z.string().describe("Figma设计稿中的节点ID"),
+    }),
     execute: async (args) => {
         return String(`
-            1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据，包含组件层级、样式属性、位置信息等
-            2. 使用能够下载Figma图片资源的工具下载页面的截图，作为视觉参考基准
-            3. 根据用户输入的图片描述，使用能够下载Figma图片资源的工具下载指定图片为png格式，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下
-            4. 使用能够批量压缩图片的工具对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能
-            5. 结合JSON数据和截图生成高还原度的页面代码，优先参考截图进行视觉还原，其次参考JSON数据补充细节信息
-            6. 清理临时文件，使用terminal命令删除页面截图文件，只保留用户指定下载的图片资源文件
-            7. 确保生成的页面具有响应式特性，宽度设置为100%而非固定的设计稿尺寸（如375px）
-            
-            质量要求：
-            - 高还原度：严格按照Figma设计稿的视觉效果和布局进行还原
-            - 交互功能：实现设计稿中的交互逻辑和用户体验
-            - 图片处理：正确替换和优化图片资源
-            - 完整样式：包含渐变背景、阴影效果、圆角、动画等所有视觉元素
-            - 响应式设计：确保在不同设备上的良好显示效果
+${args.nodeId}如果是以 - 分割，就改为 : 冒号分割
+举例：30473-13383 应该转换为 30473:13383
             `);
     },
 });
-// 辅助函数
+// 获取图片详情工具
+server.addTool({
+    name: "get-image-to-base64",
+    description: "获取图片详情",
+    parameters: z.object({
+        imageAbsolutePath: z.string().describe("本地图片的绝对路径"),
+    }),
+    execute: async (args) => {
+        const { imageAbsolutePath } = args;
+        const base64 = await getImageToBase64(imageAbsolutePath);
+        return {
+            content: [{
+                    type: "image",
+                    data: base64,
+                    mimeType: "image/png",
+                }]
+        };
+    },
+});
+// 辅助函数 读取本地绝对路径图片并转为base64字符串
+/**
+ * 读取本地绝对路径图片并转为base64字符串
+ * @param imageAbsolutePath 本地图片绝对路径
+ * @returns base64字符串（不带data:image/...;base64,前缀）
+ */
+const getImageToBase64 = async (imageAbsolutePath) => {
+    // 读取图片为Buffer
+    const imageBuffer = await fs.readFileSync(path.resolve(imageAbsolutePath));
+    // 转为base64字符串
+    return imageBuffer.toString("base64");
+};
+// 辅助函数 批量压缩图片
 async function processBatchImages(imagePaths, tinyApiKey, quality, concurrent) {
     const results = [];
     // 限制并发数量

package/package.json

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