我把 Cursor 接到了蓝湖上，设计师再也不用追着我问"还原了吗"用过蓝湖的前端都懂，还原设计稿这件事有多折磨人。设

摘要：蓝湖设计稿 → Cursor 直接读 → 生成代码，听起来很美好。但 MCP 选型、Cookie 过期、样式方案对不上、AI 幻觉，每个环节都有坑。这篇文章把整个流程和踩坑记录都写清楚。

用过蓝湖的前端都懂，还原设计稿这件事有多折磨人。

设计师发来一个链接，你打开蓝湖，切到标注模式，开始量间距、看色值、下切图。一个页面还原下来，至少 30 分钟是在"抄"设计稿。改稿更崩溃——设计师改了间距，你得重新量一遍。

上个月我试着用 Cursor 接了蓝湖的 MCP，让 AI 直接读设计数据生成代码。折腾了两天，能用，但离"一键还原"还差得远。

这篇文章不讲"MCP 是什么"，讲实际接入后到底能干什么、哪些地方会坑。下面示例用 Vue 3 + SCSS，React / 其他栈同理，换一下 Prompt 里的技术栈约束即可。

注意：文中提到的蓝湖 MCP 均为第三方开源工具，非蓝湖官方产品。通过 Cookie / 登录态访问蓝湖接口，账号安全需自行负责，Cookie 不要提交到 git。

选哪个 MCP 包——我试了几个

搜"蓝湖 MCP"能出来至少五六个包，大部分是第三方个人维护的。我挑了几个主流的试：

MCP 包	核心特点	适合场景
`mcp-lanhu`	一行命令 `npx -y mcp-lanhu`，支持 `include` 按需取 tokens / layout / layers	想细控上下文、只要 Design Tokens
`lanhu-flow-mcp`	和上面类似，按需读取（tokens / layout / slices），对大稿友好	设计稿大、不想一次塞爆上下文
`lanhu-server-mcp`	有 `lanhu_implement_context`，能检测仓库技术栈再给写码指引	想尽量贴合现有项目结构
`@star_work/lanhu-mcp`	工具少而清晰：解析链接、拉设计数据、下预览图、下切图；支持浏览器登录续 Cookie	想快速落地、少折腾配置

最后我留在 @star_work/lanhu-mcp 上。原因很简单：

工具链够用：解析链接 → 看截图 → 拿图层结构 → 下载切图，日常还原就这几步。
Cookie 能续：挂了可以走 lanhu_login 弹浏览器登录，不用每次都去 F12 抄 Cookie。
配置短：npx 就能跑。

如果你更在意「只要 tokens、不要完整图层树」，可以试 mcp-lanhu / lanhu-flow-mcp——它们的 include、layer_depth 对控 token 更细。

配置流程：先能连上蓝湖

踩坑点

① Cookie 会过期。
蓝湖登录态不是永久的。失效后工具会 401 / 取数失败。用 @star_work/lanhu-mcp 时，优先让 AI 调 lanhu_login 重新登录；如果是手写进 env 的 Cookie，就再抄一次更新配置。

② 不要把 Cookie 提交到 git。
如果一定要把 mcp.json 放项目里，务必把 .cursor/mcp.json（或整份 .cursor/）加进 .gitignore。多个 MCP 文档都专门警告了这一点。

③ 用户级配置更省心。
MCP 配在用户级，所有项目共用，仓库里也不用留敏感信息。

实际使用：别一上来就让 AI 写代码

配置完只是第一步。真正用起来的时候，不要让 AI 看到设计稿就直接写代码。

我最初的做法是：粘链接 → 说「帮我实现这个页面」→ AI 开始生成。结果出来的代码跟设计稿差得挺远——间距不对、字体大小不对、切图没下载。

后来调整了流程，效果好很多。对应 @star_work/lanhu-mcp 的工具大致是：

步骤	做什么	对应工具
1	解析分享 / 邀请链接，确认 tid、pid、image_id	`lanhu_resolve_link`
2	先看设计稿预览图，对齐「要做哪一屏」	`lanhu_get_screenshot`
3	再拉结构化图层数据（尺寸、文案、样式线索）	`lanhu_get_design`
4	下载已标注切图，确认资源清单后再引用	`lanhu_download_slices`
5	人工确认后，再让 AI 按项目技术栈写代码	—

Prompt 可以怎么写

先确认画板：

解析这个蓝湖链接，确认项目参数，并拉一下预览图给我确认是不是这一屏：
<蓝湖链接>

再拿结构（先别写码）：

用 lanhu_get_design 拉这张稿的结构化数据。
先把关键区块、文案、主要尺寸/颜色列出来给我确认，暂时不要写代码。

人工确认后再写：

根据上面的设计数据和预览图，用 Vue 3 + SCSS 实现这个页面。
颜色和间距尽量复用项目已有变量（例如 @/styles/variables.scss），不要硬写 rgba。
切图用刚才下载的资源，按业务语义重命名后再引用。
严格按设计稿标注数值，不要自行把 12px「优化」成 16px。

关键一句：AI 不认识你项目里的 $primary-color，它默认只会给你原始色值或它熟悉的原子类。 变量映射必须在 Prompt 里约束，或你先手改一版映射再让它写。

踩坑记录

坑 1：颜色是 rgba，项目用的是 SCSS 变量

蓝湖 / MCP 吐出来的经常是原始色值，例如 rgba(51,51,51,1)。AI 会原样写进样式，但你项目里可能已经有 $text-primary: #333。

解决方式：在 Prompt 里写明变量文件路径，并要求「颜色和间距优先复用已有变量」。或者先手动把 tokens 映射到 SCSS 变量，再让 AI 基于映射后的表生成。

坑 2：设计数据里可能带 UnoCSS class，和 SCSS 项目对不上

@star_work/lanhu-mcp 的 lanhu_get_design 会返回清洗后的图层树，里面常带 UnoCSS 风格的原子类。如果你的项目是 Vue + SCSS（或 React + SCSS），AI 有时会直接把这些 class 抄进模板——编译过不了，或者和现有样式体系两套并行。

解决方式：明确说「项目用 SCSS，不要输出 UnoCSS / Tailwind 原子类；把视觉信息转成 SCSS」。预览图 + 尺寸文案当参考，class 字符串别当最终实现。

坑 3：切图文件名缺业务语义

MCP 下载的切图会按类型命名，例如 bg-1.webp、img-1.webp、icon-1.webp。比纯数字序号好一点，但两周后你仍可能忘了 icon-3 是什么。

解决方式：在 Prompt 里要求结合图层名称 / 业务含义重命名，例如 home-top-notice-bg.webp，再放进 assets/。下载后先看清单，确认缺图再写页面。

坑 4：上下文太大

设计稿图层很深时，一次把完整结构塞进对话，token 消耗很大，后面 AI 更容易胡说。

解决方式：

先 lanhu_get_screenshot 对齐视觉，再按需 lanhu_get_design
大页面拆成「头部 / 列表 / 弹层」分次实现
如果改用 mcp-lanhu / lanhu-flow-mcp，可用 include、layer_depth 进一步裁剪返回内容

坑 5：AI 把间距搞错了（最隐蔽）

设计稿标注 12px，AI 生成了 padding: 12px，看起来对。但项目规范可能是 $spacing-md: 16px。更麻烦的是，AI 有时会「自作主张」把 12px 改成 16px，觉得差不多。

解决方式：Prompt 加一句「严格按设计稿标注数值，不要自行调整」。有设计规范变量表时，写清「仅当数值与变量一致时才替换成变量」。

坑 6：没下切图就开写，页面缺图

只拉了结构就开始写，结果背景图、图标全是占位或 404。

解决方式：写码前固定走一遍 lanhu_download_slices，把清单贴进对话或写进注释，再引用本地路径。

总结

蓝湖 MCP 能省掉「手动量间距、下切图」的时间，但它不是「一键还原」。它把设计数据喂给 AI，但「喂什么、怎么喂、喂多少」，还是得你来控制。

我的推荐配置：

{
  "mcpServers": {
    "lanhu": {
      "command": "npx",
      "args": ["-y", "@star_work/lanhu-mcp"]
    }
  }
}

推荐流程：

lanhu_resolve_link → 确认链接 / 画板
lanhu_get_screenshot → 人工确认是不是这一屏
lanhu_get_design → 看结构（注意 UnoCSS vs SCSS）
lanhu_download_slices → 下切图并重命名
约束技术栈与变量后，再让 AI 写代码

一句话总结：MCP 是管道，不是魔法。

我把 Cursor 接到了蓝湖上，设计师再也不用追着我问"还原了吗"