本文档整理了如何通过配置蓝湖 MCP (Model Context Protocol)，让 Cursor 直接读取蓝湖设计稿的结构化数据（颜色、间距、字体、图层等），从而告别"对着截图猜样式"，实现高保真还原前端代码。
一、 核心前提确认
在开始之前，请确认你的蓝湖版本：
-
适用场景 ：绝大多数个人或团队使用的蓝湖官方公有云版本 （访问地址为
https://lanhuapp.com/...）。 -
不适用场景：公司内网私有化部署版（网址为自定义域名或内网 IP），此类版本需联系公司内部管理员获取专门的 API 地址和 Token。
-
注意 ：公有云版本目前没有公开的"创建应用获取 Token"的开放平台入口，请直接使用下文获取 Cookie 的方式。
二、 第一步：获取蓝湖身份凭证 (Cookie)
我们需要从浏览器中提取你的登录凭证，让 Cursor 有权限读取你的项目。
-
在浏览器中登录蓝湖网页版，并进入任意一个具体的设计项目页面。
-
按下
F12打开浏览器开发者工具。 -
切换到 Network（网络） 面板。
-
刷新页面 (
F5)，等待面板捕获到网络请求。 -
在请求列表中点击任意一个请求，在右侧找到 Request Headers（请求头）。
-
找到
Cookie:开头的那一行，复制其完整的值 （这是一段很长的文本，通常包含user_token、session等字段）。
⚠️ 安全警告 ：这段 Cookie 等同于你的账号密码，切勿 将其提交到公开的 Git 仓库或分享给他人。建议将配置文件加入
.gitignore。
三、 第二步：在 Cursor 中配置 MCP
由于 Cursor 版本更新，MCP 的配置入口移到了 Customize 页面。
1. 打开 MCP 配置面板
-
打开 Cursor 设置 (
Ctrl+Shift+J或Cmd+Shift+J)。 -
在左侧菜单找到并点击 Customize（定制）选项卡。
-
在顶部菜单栏选择 MCPs。
2. 编辑配置文件
-
点击 New MCP Server （新建 MCP 服务器），Cursor 会自动为你打开
mcp.json文件（也可能在项目根目录创建.cursor/mcp.json）。 -
将以下配置代码粘贴进去，并将
LANHU_COOKIE的值替换为你刚刚复制的完整 Cookie：
javascript
{
"mcpServers": {
"lanhu": {
"command": "npx",
"args": ["-y", "mcp-lanhu"],
"env": {
"LANHU_COOKIE": "这里粘贴你刚才复制的一整段Cookie"
}
}
}
}3. 验证连接成功
-
保存文件并稍微等待片刻（Cursor 会自动下载依赖并启动服务）。
-
在 Customize -> MCPs 页面，检查
lanhu服务是否出现在 Connected 列表下，并且旁边亮起绿灯 （显示如3 tools enabled）。 -
如果是绿灯，说明配置完美通关！
四、 第三步：如何在日常开发中高效使用
配置好后，你不需要再手动截图发给 AI，直接在 Cursor 对话框（Ctrl+L / Cmd+L）中通过提示词驱动即可。
推荐的工作流（分步走，防翻车）
步骤 1：让 AI 提取设计规范（确认数据准确性）
-
复制蓝湖设计稿的网页链接（确保能直接打开那张设计图）。
-
在 Cursor 中输入：
"请调用 lanhu 工具，读取这个设计稿链接：你的蓝湖链接。提取页面的布局结构、颜色变量、字体大小、圆角和间距等设计参数，先不要写代码，把提取到的数据以表格形式发给我。"
-
目的：确认 MCP 是否精准抓取了数据，避免 AI 拿着错误数据闭门造车。
步骤 2：让 AI 生成代码（结合项目上下文）
-
确认数据无误后，输入：
"数据无误。请根据上述提取的设计规范，参考当前项目
@目标文件的代码风格，使用 Vue/Tailwind（根据你的技术栈修改）帮我还原这个页面/组件。"
步骤 3：处理切图
- MCP 主要解决布局和样式代码。对于复杂的图标、背景图，建议你直接在蓝湖点击下载切图放到项目的
assets目录中，然后提示 AI 引用该图片路径。
五、 常见问题与排查 (FAQ)
-
Cursor 中 MCP 显示红灯 / Error？
-
检查
mcp.json是否有语法错误（如逗号、引号是否闭合）。 -
确保电脑已安装 Node.js 环境（因为用到了
npx命令）。 -
点击报错信息查看日志，如果是 401/403，说明 Cookie 填错了或已失效。
-
-
过几天突然不能用了？
- Cookie 过期 。重新回到第一步，去浏览器里复制最新的 Cookie，替换
mcp.json里的旧内容，保存即可。
- Cookie 过期 。重新回到第一步，去浏览器里复制最新的 Cookie，替换
-
还原精度不够？
-
在 Prompt 中增加强约束："请严格使用 Flex 布局"、"务必使用项目里已有的 UI 组件库（如 Element Plus/Arco Design），不要自己手写基础按钮"。
-
针对复杂的阴影或渐变，可以手动在蓝湖里点击复制 CSS 代码，直接丢给 AI。
-