lanhu-developer-mcp

蓝湖 MCP 服务器

为CursorIDE提供访问蓝湖设计文件的能力，通过Model Context Protocol服务器实现。

当Cursor能够访问蓝湖设计数据时，它在一次性准确实现设计方面比其他方法（如粘贴截图）要优秀得多。

快速开始，详情请参阅配置：

npx lanhu-developer-mcp

工作原理

• 打开Cursor的编辑器。
• 粘贴蓝湖设计稿页面的链接。
• 要求Cursor使用蓝湖文件做一些事情——例如实现一个设计。
• Cursor将从蓝湖获取相关元数据并使用它来编写代码。

这个MCP服务器专为Cursor设计。在响应来自蓝湖API的请求之前，它会简化并转换响应，只提供最相关的布局和样式信息给模型。

减少提供给模型的上下文量有助于使AI更准确，响应更相关。

安装

使用NPM快速运行服务器

你可以使用NPM快速运行服务器，无需安装或构建仓库：

npx lanhu-developer-mcp

# 或
pnpx lanhu-developer-mcp

关于如何获取蓝湖用户Token的说明可以在这里找到。

使用配置文件的工具的JSON配置

许多工具如Windsurf、Cline和Claude Desktop使用配置文件来启动服务器。

lanhu-developer-mcp服务器可以通过在配置文件中添加以下内容来配置：

{
  "mcpServers": {
    "lanhu-developer-mcp": {
      "command": "npx",
      "args": ["-y", "lanhu-developer-mcp", "--stdio"],
      "env": {
        "LANHU_TOKEN": "<your-lanhu-token>"
      }
    }
  }
}

配置

服务器可以使用环境变量（通过.env文件）或命令行参数进行配置。建议优先使用.env文件配置。

环境变量

• LANHU_TOKEN：你的蓝湖用户Token（必需）
• PORT：运行服务器的端口（默认：3333）

命令行参数

• --token：你的蓝湖用户Token
• --port：运行服务器的端口

连接到Cursor

启动服务器

> npx lanhu-developer-mcp
# 在端口3333上以HTTP模式初始化蓝湖MCP服务器...
# HTTP服务器监听端口3333
# SSE端点可用于http://localhost:3333/sse
# 消息端点可用于http://localhost:3333/messages

将Cursor连接到MCP服务器

一旦服务器运行，将Cursor连接到MCP服务器，在Cursor的设置中，在功能选项卡下。

服务器连接后，你可以在开始之前确认Cursor的连接是否有效。如果你看到绿点并且工具显示出来，那么你就可以开始了！

开始使用编辑器和你的蓝湖设计

一旦MCP服务器连接，你可以开始在Cursor的编辑器中使用工具，只要编辑器处于代理模式。

在编辑器中放置蓝湖文件的链接并要求Cursor对其进行操作应该会自动触发get_lanhu_data工具。

大多数蓝湖文件最终都很大，所以你可能想链接到文件中的特定设计稿。你可以从蓝湖设计稿页面复制链接：

一旦你有了特定设计稿的链接，你可以将其放在编辑器中并要求Cursor对其进行操作。

可用工具

服务器提供以下MCP工具：

get_lanhu_data

获取有关蓝湖设计稿的信息。

参数：

• project_id（字符串，必需）：要获取的蓝湖项目ID，通常在URL中找到，如lanhuapp.com/web/#/item/project/detailDetach?project_id=<project_id>&...
• image_id（字符串，必需）：要获取的设计稿ID，通常在URL中找到，如lanhuapp.com/web/#/item/project/detailDetach?image_id=<image_id>&...

功能特性

服务器提供以下主要功能特性：

自动下载设计资源

蓝湖MCP服务器能够自动从设计稿中提取和下载所有图片资源，并保存到本地src/assets/LanHuImgFile目录。系统会自动：

• 识别并提取设计稿中的所有图片URL
• 智能处理各种图片格式（jpg, png, gif, svg, webp等）
• 保留原始图片格式并正确设置文件扩展名
• 替换设计数据中的在线图片URL为本地路径，便于开发使用

Taro项目自动适配

系统会自动检测当前项目是否为Taro项目（通过检查package.json中的依赖），并提供以下特性：

• 自动转换所有样式单位从px到rpx，确保适配移动设备
• 支持全面的样式属性转换，包括：
  • 布局位置属性（top、left、bottom、right等）
  • 尺寸相关属性（width、height、minWidth、maxWidth等）
  • 边距和间距属性（margin、padding及其变体）
  • 字体相关属性（fontSize、lineHeight、letterSpacing等）
  • 边框相关属性（borderWidth、borderRadius及其变体）
  • 变换相关属性（translateX、translateY、scale、rotate）
  • 蓝湖特有属性（w、h、l、t、r、b、rad、sz等）
• 智能处理CSS字段和样式对象，包括theme、themeStyles、variants等
• 支持深度嵌套的节点结构和样式转换
• 内置循环引用检测，防止处理复杂数据结构时的死循环

大型设计稿优化处理

对于内容过长的设计稿（常见于复杂页面），系统会：

• 自动将处理后的设计数据保存到src/assets/LanHuPageFile.json文件
• 避免因响应内容过大导致的通信错误
• 提供清晰的文件保存路径信息
• 包含完整的错误处理机制，确保稳定运行

性能优化

• 使用WeakSet实现高效的循环引用检测
• 提供处理时间监控，帮助评估性能瓶颈
• 优化的属性名压缩，减少数据体积
• 并行下载图片资源，提高处理速度

全面的错误处理

• 在图片下载过程中出错不会影响主要数据的返回
• 提供详细的错误日志，便于调试和问题定位
• 在样式单位转换出错时自动回退到原始数据