test-mcp-m MCP Server

A TypeScript-based MCP (Model Context Protocol) server that provides image compression and Figma page generation utilities. This server is designed to help with optimizing images and generating code from Figma designs.

Features

Tools

compress_multiple_images

批量压缩多个本地图片文件，支持两种压缩方式：

• TinyPNG API: 高质量压缩（需要API密钥）
• Sharp: 本地压缩（无需API密钥）

参数：

• imagePaths (string[]): 图片文件路径数组，支持绝对路径或相对路径
• tinyApiKey (string, 可选): TinyPNG API 密钥，如不提供则从环境变量 TINY_API_KEY 读取
• quality (number, 可选): 压缩质量，1-100之间，默认80
• concurrent (number, 可选): 并发处理数量，1-10之间，默认3个

支持的图片格式：

• .jpg / .jpeg
• .png
• .webp

功能特点：

• 支持并发处理多个图片
• 自动备份原文件，失败时自动恢复
• 详细的压缩统计信息
• 优先使用TinyPNG API，降级到Sharp压缩
• 保存到原地址，覆盖原文件

figma_generate_page_tasks

获取Figma生成页面所需要的任务列表，提供完整的工作流程指导。该工具返回基于功能描述的任务清单，支持AI自动匹配合适的MCP工具。

工作流程（7个步骤）：

1. 数据提取 - 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据，包含组件层级、样式属性、位置信息等
2. 截图获取 - 使用能够下载Figma页面截图的工具获取完整页面的高清截图，作为视觉参考基准
3. 图片下载 - 根据用户输入的图片描述，使用能够下载Figma图片资源的工具下载指定图片，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下
4. 图片优化 - 使用能够批量压缩图片的工具对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能
5. 代码生成 - 结合JSON数据和截图生成高还原度的页面代码，优先参考截图进行视觉还原，其次参考JSON数据补充细节信息
6. 文件清理 - 清理临时文件，删除页面截图文件，只保留用户指定下载的图片资源文件
7. 响应式处理 - 确保生成的页面具有响应式特性，宽度设置为100%而非固定的设计稿尺寸（如375px）

质量要求：

• 高还原度 - 严格按照Figma设计稿的视觉效果和布局进行还原
• 交互功能 - 实现设计稿中的交互逻辑和用户体验
• 图片处理 - 正确替换和优化图片资源
• 完整样式 - 包含渐变背景、阴影效果、圆角、动画等所有视觉元素
• 响应式设计 - 确保在不同设备上的良好显示效果

设计特点：

• 🎯 功能导向 - 基于功能描述而非具体工具名称，提高灵活性
• 🔄 自动匹配 - AI可根据描述自动查找和使用合适的MCP工具
• 📋 流程化 - 标准化的7步工作流程，确保转码质量
• 🛡️ 质量保证 - 明确的质量要求和验收标准

安装与开发

安装依赖

npm install

构建服务器

npm run build

开发模式（自动重新构建）

npm run watch

调试

使用 MCP Inspector

Stdio 模式

npm run inspector

使用配置

Stdio 模式

{
    "mcpServers": {
        "test-mcp-m": {
            "command": "npx",
             "args": [
                "-y",
                "test-mcp-m",
                "--stdio"
            ],
            "env": {
                "TINY_API_KEY": "xxx"
            }   
        }
    }
}

环境变量

可选环境变量

• TINY_API_KEY: TinyPNG API 密钥，用于高质量图片压缩

依赖项

核心依赖

• fastmcp: MCP服务器框架
• zod: 参数验证
• sharp: 图像处理和压缩
• fs: 文件系统操作
• https: HTTP客户端（用于TinyPNG API）

使用示例

批量压缩图片

// 使用TinyPNG API压缩（需要API密钥）
await compress_multiple_images({
    imagePaths: ["./image1.jpg", "./image2.png"],
    tinyApiKey: "your-api-key",
    quality: 80,
    concurrent: 3
});

// 使用Sharp压缩（无需API密钥）
await compress_multiple_images({
    imagePaths: ["./image1.jpg", "./image2.png"],
    quality: 80,
    concurrent: 3
});

获取Figma页面生成任务

await figma_generate_page_tasks({});

许可证

MIT License