企业官网建设流程全解析

设计师又发来一条消息：“那页还原了吗？”

以前看到这个问题，我第一反应是打开蓝湖链接，对着标注一个个量间距、调颜色、切图片，再切回编辑器改代码，操作下来少说二十分钟，最后回复一个“差不多了”。直到我把 Cursor 通过 MCP 协议接到蓝湖上，这个流程被彻底改写了——现在 Cursor 里的 AI 可以直接读取蓝湖设计稿的页面结构、标注、颜色和切图数据，再据此生成前端代码，设计师只需要发一个链接和页面名，我甚至不用打开浏览器。

这套方案不是用截图喂给 AI 猜，而是让 AI 通过 MCP Server 去蓝湖拉真实的设计稿数据，包括坐标、字号、色值、间距、切图资源。这篇内容就把完整思路、部署步骤、配置写法、实测表现和避坑经验一次讲清楚，适合正在用 Cursor 写代码、同时被设计稿还原沟通折磨的前端工程师、全栈开发，以及所有对 AI 编程工具链感兴趣的人。

1. 内容整体设计与思路拆解

1.1 为什么偏偏是 Cursor 加蓝湖

先说痛点。传统的前端还原流程是：设计师在蓝湖上传设计稿，工程师打开蓝湖看标注，测量间距、确认色值、下载切图，再回编辑器手写代码。这件事本身不难，但极其琐碎，而且设计师和工程师之间永远隔着一层信息差：

• 设计师觉得自己已经给了全部信息，工程师还反复问“这个按钮 hover 效果是什么”“这个间距是 16 还是 20”。
• 工程师觉得看标注已经够认真了，但常有漏看细节，比如只切了 3x 图忘了 2x 图，或者把字体粗细看错一个级别。
• 截图沟通更不靠谱，放大缩小之后比例直接失真，AI 纯看截图猜代码，出来的东西只能叫“参考”而不是“还原”。

Cursor 解决了“AI 写代码”的问题，但 AI 一直缺少设计稿数据。你可以把截图拖给 Cursor，可以描述“左边一个 300px 的侧边栏”，但没法让它直接打开蓝湖去读取每个像素的真实标注。这就好比你让一个新来的工程师干活，却不给他看设计稿，只让他凭感觉写。

蓝湖这边其实是有 Open API 的，数据都在云端，关键是缺一个环节让 Cursor 能“顺手”取数。MCP 就是补上这个环节的协议：Cursor 作为客户端，通过统一协议连上蓝湖数据服务，AI 在对话里需要某个页面的标注时，会自动调用工具去拉取，数据直接进入上下文，再生成代码。链路打通之后，设计师的“还原了吗”就变成了“你让 AI 再对一眼就行”。

1.2 为什么选择 MCP 而不是插件或脚本

从技术选型上看，有几种方式可以把蓝湖数据喂给 Cursor，我逐一比较过：

我最后选了 MCP，核心原因是它最贴合 AI 的使用方式。写脚本的痛点是：AI 并不知道数据在哪个文件里，你得先查、再跑脚本、再把结果贴回去，等于还是有人肉环节。MCP 把“取数”变成了 AI 的一种能力，它自己决定什么时候调用工具、调用哪个工具、怎么用返回的数据。

打个比方，MCP 就像是给 Cursor 插了一个“USB 接口”，插上之后蓝湖就成了它的一块外接设备，需要时自动读写，不需要时也不占地方。

1.3 整体链路与各环节职责

这套方案的完整链路是四层：

1. Cursor 客户端：主要负责对话、代码生成，以及管理 MCP 客户端的连接状态。
2. MCP Client：Cursor 内置，负责把 AI 的工具调用请求转换成标准协议消息，发给 MCP Server。
3. MCP Server：独立进程，封装蓝湖 OpenAPI，暴露给 AI 一组工具，比如“获取项目列表”“读取页面标注”“获取切图资源”。
4. 蓝湖云端：提供设计稿原始数据，通过 OpenAPI 鉴权和访问控制。

MCP Server 可以和 Cursor 跑在同一台机器上，也可以部署在远端通过 URL 访问。我建议先从本地方式开始，等稳定了再考虑远端部署，因为本地模式排障更容易——你可以在命令行手动启动 Server，直接用 curl 测试接口，确认数据没问题再让 Cursor 连接。

2. 核心细节解析与实操要点

2.1 MCP Server 需要暴露哪些能力

一个能真正帮到前端开发的蓝湖 MCP Server，至少要覆盖以下工具能力：

实际部署时，具体工具名以你选用的 MCP Server 实现为准，但能力范围大致就是这些。最关键的是get_page_markup和get_assets，前者解决了“页面长什么样”，后者解决了“图片素材从哪来”。

我建议在配置完成后先做一个验证：直接让 Cursor“帮我列出蓝湖上所有项目”，如果它真的能返回项目列表，说明整条链路已经通了，再往下一步。

2.2 Cursor 的安装、中文设置与基础配置

很多人在搜“cursor 怎么设置中文”“cursor 汉化”，这跟接蓝湖属于两条线，但既然要长期用，强烈建议先花五分钟把基本环境和语言习惯调好。我实测下来的做法是：

• 下载安装：直接从官网下载对应系统版本，安装后打开，注册账号并绑定邮箱或 GitHub 登录。基础编辑操作和 VS Code 几乎一样，不需要额外学习成本。
• 界面语言：Cursor 本身的界面至今没有完全官方的简体中文汉化包，网上流传的汉化补丁我不建议碰，改动安装目录文件会导致升级失败或异常报错，代价不小。
• 更实用的做法是让 AI 用中文回复：打开 Cursor 设置里的 Rules for AI，填入“请始终使用简体中文回复，代码注释也要用简体中文”。这个设置是全局的，之后所有对话都会自动用中文。
• 在某次对话中临时切换：直接输入“接下来请用中文回复”即可，AI 会记住本次会话的语言偏好。

还有一个高频问题是“cursor 注册账号可以用多久”“cursor pro 有多少额度”。注册免费账号是长期有效的，但免费账号的 AI 调用次数有限；付费按订阅周期计费，具体额度和价格以官网最新说明为准，因为这东西变动比较快，我写死反而容易误导人。

2.3 MCP 配置文件写法与参数解析

Cursor 支持两种方式配置 MCP Server：图形界面添加，以及项目级配置文件。我推荐用项目级.cursor/mcp.json，好处是可以随仓库提交、团队成员共享。

配置文件的核心结构是一个 JSON 对象：

{ "mcpServers": { "lanhu": { "command": "npx", "args": ["-y", "lanhu-mcp-server", "--api-token", "${LANHU_API_TOKEN}"], "env": { "LANHU_API_TOKEN": "你的蓝湖API Token" } } } }

几个参数逐个说：

• mcpServers：固定顶层字段，里面可以挂多个 Server，比如你还可以加一个 GitHub MCP Server。
• lanhu：给这个 Server 起的名字，随便起，但建议用英文，日志里好认。
• command：启动命令。Mac/Linux 下通常用npx，Windows 下如果遇到npx无法识别，改成npx.cmd，这是 Windows 下最容易踩的坑。
• args：命令行参数。-y表示自动确认安装 npm 包，lanhu-mcp-server是包的名称，--api-token是包的 CLI 参数。注意，具体包名和参数以你选用的开源项目说明为准，换成你自己的。
• env：环境变量。把 Token 放在这里而不是硬编码进args，是因为部分 Server 会优先从环境变量读取密钥，这样即使命令行被截屏也不容易泄漏密钥。

配置完成后，在 Cursor 的 MCP 面板里检查状态。正常情况对应 Server 会显示绿色 connected，如果显示红色或 error，按文末的排查章节处理。

3. 实操过程与核心环节实现

3.1 获取蓝湖 API Token

要把蓝湖数据开放给 MCP Server，需要先拿到一个有访问权限的 Token。具体路径在蓝湖平台上是“个人设置”或“开发者中心”里申请开放 API 的访问令牌，不同团队版本的菜单位置略有差异，但逻辑是一样的：

1. 登录蓝湖，进入个人设置页面。
2. 找到开放 API / 开发者选项，选择申请 Token。
3. 按需选择权限范围，这里强烈建议选只读权限。MCP Server 只需要读取设计稿和标注数据，完全不需要写权限。如果你误把写权限交给 AI，它一旦被恶意提示词诱导，理论上可以修改你在蓝湖上的数据，风险不值当。
4. 生成后立刻复制保存，这个 Token 通常只在创建时完整显示一次。

把这个 Token 放到你本机的环境变量里，比如写入 shell 配置文件：

export LANHU_API_TOKEN="你的Token"

不要把它提交到 Git 仓库。就算.cursor/mcp.json里不直接写 Token，也别把带真实 Token 的配置文件推到远端，我见过有人把 Token 发到团队群里导致整个团队都要轮换密钥的场面，真的很麻烦。

3.2 部署 MCP Server：三种方式对比

我实测下来有三种部署方式，从简单到复杂排列。

第一种，本地 npx 方式。如果社区已经有一个lanhu-mcp-server之类的 npm 包，这是最快的验证方式：

npx -y lanhu-mcp-server --api-token $LANHU_API_TOKEN

运行后会出现一些启动日志，看到类似“MCP server running on stdio”的输出就表示进程起来了。这时候不要关掉终端，因为 Cursor 需要这个进程持续运行。首次运行会下载包，有点慢，别急着反复重启。

第二种，Docker 方式。适合要长期稳定跑、或者在远端服务器部署的场景：

docker run -d --name lanhu-mcp \ -e LANHU_API_TOKEN=你的Token \ -p 8768:8768 \ 你的镜像名/lanhu-mcp-server:latest

Docker 方式的好处是环境隔离、可复现，换电脑重装也方便。缺点是 macOS 上首次配置 Docker 本身就有学习成本，所以新手我不建议一上来就用它。

第三种，源码构建。去 GitHub 上找一个蓝湖 MCP Server 开源项目，clone 下来执行npm install && npm run build，然后用node dist/index.js启动。适合你想改功能、或者官方包还没有发布的情况。源码方式最大的价值是你能看到底层调了哪些 API，排障的时候心里有数。

从落地效率来看，先用 npx 验证链路是正确的路子，确认没问题之后再用 Docker 固化，把 npx 和 Docker 背后的包源码都留一份。

3.3 Cursor 内配置与连接验证

在 Cursor 里接 MCP 有两种入口。如果你走图形界面：打开 Settings，找到 MCP 选项卡，点击 Add new MCP server，选择 Command 类型，把 npx 命令和环境变量填进去。如果你像我一样喜欢把配置入库，直接编辑项目根目录的.cursor/mcp.json即可。

配置完成后重点检查三件事：

1. Server 状态是否是 connected。不是绿色说明进程没起来或者网络有问题。
2. 给 AI 一个下探问题：直接在对话里输入“你能访问到哪些蓝湖工具？”，如果它返回工具列表，说明 MCP Client 和 Server 已经握手成功。
3. 再进一步：让它“用蓝湖工具列出第一个项目的文件列表”，这里成功的话，说明 Token 权限和网络链路都通了。

配置完成后建议重启一次 Cursor，有时候 MCP Client 不会热加载配置，重启后最保险。我在第一次配置时遇到过配置保存了但工具始终不出现的情况，重启后立刻恢复正常。

3.4 实战：让 AI 读取设计稿生成登录页

链路通了之后，重点就变成怎么向 AI 提需求。我的经验是把提示词写成“指出数据来源 + 指出目标页面 + 指定技术栈 + 明确输出格式”四段式：

请使用蓝湖 MCP 工具查看设计稿文件 [{fileId}]， 找到名为“登录页”的页面，读取该页面的布局结构、所有组件的坐标与尺寸、 颜色值、字体样式以及文案内容。 然后使用 React + Tailwind CSS 实现一个响应式登录页， 要求布局比例尽量与设计稿一致，颜色用设计稿中的色值。 先调用工具获取数据，再输出代码。

注意，我在提示词里明确说了“先调用工具获取数据，再输出代码”，这是为了避免 AI 偷懒凭经验直接生成一个“差不多的登录页”。实测下来，加了这句之后 AI 会先调用蓝湖工具，再基于返回数据写代码。

AI 的返回通常会分成几个步骤：先是工具调用日志，你会看到类似Calling get_page_markup with pageId=xxx的记录；然后它会总结从蓝湖读取到的关键信息，比如“页面宽度 1440px，主色 #4F46E5，标题字号 32px”；最后才是代码输出。

有一点要提前知道：AI 生成的代码只能算“第一轮还原稿”，不要指望一次就完美。但它已经把最耗时的信息搬运工作做完了，你只需要做代码 review 和微调。这一步节省的时间占整个还原任务的大头。

4. 常见问题与排查技巧实录

4.1 MCP Server 显示 error / 连接失败

现象：Cursor 的 MCP 面板里，lanhu 显示红色 error，或者对话里 AI 说“无法访问蓝湖工具”。

排查顺序我建议从下往上：

1. 先在命令行手动运行启动命令，看有没有报错。最常见的是 Token 未设置或失效，命令行会直接提示鉴权失败。
2. 确认网络能访问蓝湖 OpenAPI。如果本地网络本身访问不了蓝湖，MCP Server 拿到数据也是白搭。
3. 检查配置文件里的命令路径。Windows 上把npx改成npx.cmd，这个坑我踩过一次，直接占用了我半小时。
4. 如果你用了${LANHU_API_TOKEN}这种变量展开写法，部分 Cursor 版本不支持在 JSON 配置里展开 shell 变量，建议把 Token 直接放到env字段里，或者干脆硬编码进args（注意别提交 Git）。

最后还有一个容易被忽略的点：改完配置之后 Cursor 并不会自动重连，需要重启应用或者手动移除 Server 再重新添加。

4.2 Cursor 登录异常与账号风控问题

很多人搜过“too many computers used within the last 24 hours for the same cursor account”，我也遇到过。这是 Cursor 官方对账号登录设备数量的风控策略，短时间内太多设备或太多网络环境登录同一个账号，就会触发这个提示。解决办法很简单：停止在这台设备上反复登录，等 24 小时后重试；如果急着用，就换回常用设备和网络环境。这类限制本质上是防共享账号滥用，不是系统故障，所以不要试图绕过，等它自动解除就行。

另外“cursor 注册账号可以用多久”这个问题本质上取决于账号类型。免费账号长期有效，订阅则按周期扣费。如果你复购时发现生效日期不是从当前日期开始，这通常是订阅平台的计算规则，一般是按原账单周期顺延，不是按购买当日重新起算。

4.3 Agent 执行缓慢或提示 Taking longer than expected

这个提示我理解是一种“超时保护”。出现它的原因大多是：蓝湖 MCP 工具返回的数据量太大，一次性把所有页面、所有标注都塞进上下文，模型处理不动了。

优化手段有三个方向：

1. 缩小数据范围。不要对整份设计稿说“读取所有页面”，要明确“只读取‘登录页’这一个页面”“只要首页首屏的布局数据”。
2. 减少工具调用轮次。对话历史里已经调用过的工具结果不需要重复调用，你可以提醒 AI“直接用上一次获取的标注数据继续”。
3. 开启 Allow 和 Auto-run 权限时要有意识：你给 AI 的权限越大，它可能越激进地并行调用工具。首次运行建议选 “Allow Once”，确认整个调用链没问题之后，再说“以后蓝湖相关操作可以直接运行”。

4.4 中文设置到底怎么弄

这是搜索里最高频的问题，集中回答一次。

Cursor 界面汉化的正确姿势是等官方语言包，或者使用基于插件机制的汉化方案；修改安装目录文件的汉化方式会在软件更新后失效，并可能触发校验问题。对话中文设置的两种做法：

• 全局设置：Settings → Rules for AI，加入“请始终使用简体中文回复，代码注释使用简体中文”。
• 单会话设置：在对话输入框直接输入“接下来的所有回复请用中文”。

顺带说一句“vibcoding”这类用法，其实就是把 AI 当作主要编码工具、人只负责描述需求、review 结果的开发方式。接了蓝湖之后，这种方式的准确率才真正提上来，因为 AI 终于有了设计稿数据基础，而不是凭空“ vibe”。

4.5 数据对不上：标注不准、权限缺失、版本不对

如果你发现 AI 读到的数据和蓝湖网页上看到的不一致，先检查三件事：

1. Token 权限。只读 Token 如果没被加进对应的团队或项目，MCP Server 能连上但拉不到数据，AI 会返回“无权限”或“资源不存在”。
2. 设计稿版本。蓝湖链接通常对应一个具体版本，如果你给 AI 的文件 ID 是一周前的旧文件，而设计师早改过了，那数据自然对不上。让设计师直接复制当前生效的分享链接给你。
3. 页面命名。设计稿里的页面名可能是“未命名- 2”这种没有任何信息量的名字。建议要求团队统一规范画板命名，比如“登录页- 桌面端”“登录页- 移动端”，这能让 AI 更精确地定位目标页面。

4.6 几个独家避坑心得

这套链路跑通之后，我总结出几个在实操中真正有价值的习惯：

把 Token 权限最小化是底线。AI 编程工具给你的便利越大，你越要考虑它的边界。蓝湖只开放读取设计稿数据就足够完成还原任务，绝不给写权限。就算某天真需要自动化标注，也应该由专人手动控制写操作。

不要盲目信任 AI 的“工具调用成功”日志。有时候 MCP 工具成功返回了数据，但 AI 在生成代码时因为上下文长度限制，只用了其中一部分标注，剩下的按经验补了。所以 prompt 里尽量让 AI“如数据不完整则明确说明”，这会逼它在遇到缺失信息时说出来，而不是自己脑补。

给团队立一个规矩：后端接口、设计稿链接、需求变更记录都尽可能结构化地提供给 AI。MCP 只能帮你拿到蓝湖数据，拿不到需求背景，那句话还得靠人写清楚。我可以让 AI 写 90% 的代码，但那 10% 的业务理解，永远是我的职责。

我个人在实际操作中最大的体会是：把 Cursor 接到蓝湖不是要让 AI 取代工程师，而是让 AI 取代“机械搬运标注”的那部分工作。设计师不再需要追问，我也从重复劳动里解放出来，省下来的每一分钟都在为真正的业务判断留出空间。如果你也在被设计稿还原折腾，按这篇的方法走一遍，大概率能找到同样的自由感。