企业官网建设流程全解析

1. 设计师那句"还原了吗"，为什么成了前端的心病

1.1 我过去的工作流：截图、测距、肉眼比对

先交代一下背景。我在一家互联网公司做前端，日常跟设计师在同一个协作群里待着。以前每次拿到设计稿，流程基本是这样的：设计师把蓝湖链接丢过来，我打开网页版蓝湖，切图、看标注、量间距，然后回到编辑器里对着截图手动写样式。写完之后截图发到群里，设计师隔一会儿回一句"这个间距好像不对""按钮 hover 态你做了吗""圆角是不是小了点"。

这种来回其实不是谁的错，是工具链的问题。蓝湖上的信息是完整的，但信息传递到代码编辑器里全靠人肉搬运。我复制一段 CSS 变量，再对着标注量一下 padding，再切一张图标，再回来写代码。一次两次还好，一个页面十几个组件，这么来回折腾，效率就全花在"搬运"上了。

更要命的是，设计稿会改。上午定的间距，下午设计稿就更新了。我如果不记得刷新，就会把旧稿子的数值写进新代码里。等设计师发现的时候，又得重来一遍。这种状态下"还原了吗"四个字基本成了群里的高频词，每次看到都头皮发麻。

1.2 瓶颈不在"画得像"，而在上下文传递

后来我仔细想了一下，还原度低的原因大多数时候不是前端能力问题，而是上下文断掉了。设计师脑子里有一个完整的设计意图：为什么这个间距是 24px，为什么这个字体是 14px semibold，为什么这个卡片阴影是两层。这些信息全部编码在蓝湖的图层和标注里。

而到了我这边，我能看到的只有一张静态图片和一堆零散的标注数字。图层关系、组件状态、响应式规则，这些"设计上下文"在传递过程中基本丢光了。我照着截图写代码，本质上是在做逆向工程，靠猜去还原设计意图。猜对了，是运气；猜错了，就是一轮新的返工。

所以真正的问题不是"画得像不像"，而是"我怎么让开发环境里直接拥有完整的设计上下文"。如果代码编辑器里的 AI 助手能直接读取蓝湖上的设计稿，像人一样"打开"设计图、查看标注、拿到切图资源，那前端就不再需要靠肉眼搬运信息了。

1.3 转折点：看到 MCP 这个协议时我在想什么

转折出现在我研究 Cursor 的时候。Cursor 作为 AI 编程助手，支持通过 MCP（Model Context Protocol）协议接入外部工具。这个协议说白了就是给 AI 装上了"眼睛"和"手"，让它能调用外部系统里的数据。当时我脑子里一下就冒出来一个想法：如果蓝湖提供 MCP Server，那我是不是能让 Cursor 直接读蓝湖里的设计稿？

一查，蓝湖还真出了官方 MCP 服务。顺着这个思路我把 Cursor 接上了蓝湖，试了大概一周。现在设计师再问"还原了吗"，我直接把 AI 生成代码的过程截图发过去，顺便附上它从蓝湖里取到的标注数值。设计师看一眼就知道我确实按设计稿做了，不再需要反复追问。

这篇文章就记录一下我是怎么做的、实际用起来有哪些坑，以及接入之后工作流到底变成了什么样。

2. 蓝湖 MCP 是什么，能力边界在哪

2.1 MCP 协议一句话讲明白

MCP 是 Model Context Protocol 的缩写，由 Anthropic 提出，现在 Cursor、Claude Desktop 等一批 AI 工具都已经支持。你可以把它理解成一个"通用插座"：AI 助手是插座面板，MCP Server 是插上来的电器，两者通过标准协议对话。

如果没有这个协议，我让 AI 去读蓝湖设计稿，得专门想办法把设计稿数据导出来，再喂给 AI，整个过程又得手动来。有了 MCP 之后，AI 可以主动调用 MCP Server 暴露出来的工具函数，比如"获取设计图列表""读取某一帧的标注信息""下载切图资源"。AI 会根据自己的判断，在合适的时候调用这些工具，然后把返回的数据直接作为上下文来推理。

这个机制对我这种前端来说最直接的价值是：AI 不再只能"听说"，它能"看见"设计稿了。而且这个看到是结构化的，不是简单贴一张图片。

2.2 蓝湖 MCP Server 能给 Cursor 喂什么料

我实际用下来，蓝湖 MCP Server 能提供的核心数据大概有这么几类：

• 设计图元数据：项目下的画板、页面、分组结构，AI 能知道整个设计稿的组织方式。
• 视觉截图：设计稿的渲染图，AI 可以直接"看"到界面长什么样，这是还原的视觉基准。
• 标注信息：元素的位置、尺寸、间距、圆角、字体、字号、字重、颜色值，这些是写 CSS 时最需要的精确数值。
• 切图资源：图标、图片素材的下载地址，AI 可以拿到二进制或 URL，直接用于代码中的<img>或背景图。
• 设计规范类信息：如果项目的设计系统里定义了色彩变量、字体层级、阴影等样式 token，MCP 也能把这些信息带出来。

这些数据对上 AI 编程助手来说简直是王炸。以前我写一个按钮样式，要自己去量 padding、抄色值、确认圆角。现在 AI 自己调一次 MCP 工具就能拿到全部参数，直接生成样式代码，数值还和我从蓝湖网页里看到的一模一样。

2.3 哪些事它能干，哪些事它干不了

当然，MCP 不是魔法，它有自己的边界。我在用的过程中明显感觉到有几类事情是它解决不了的：

第一，交互状态和动效它不会自动生成。设计稿里静态的 hover、focus、loading 这些状态，MCP 返回的数据里通常不会包含完整的状态设计。AI 能拿到的是默认态的标注和截图，交互态还是得靠我在提示词里描述，或者靠 AI 对通用交互模式的理解去补全。

第二，响应式规则需要你自己定义。MCP 给的是设计稿里的固定尺寸，但网页自适应怎么做、断点怎么设，这是开发侧的策略，工具不会替你决定。我给 Cursor 的提示词里会明确写清楚"桌面端按设计稿，移动端按如下规则收缩"，AI 才会正确处理。

第三，图片细节会丢。设计稿如果特别大、信息密度特别高，MCP 返回的截图经过压缩之后，AI 可能"看不清"小字号文本或者细微的渐变。这种情况我会主动把截图单独作为附件给模型，或者让 AI 把某个区域放大后重新读取。

把这些边界摸清楚之后，用起来会顺手很多。别指望 MCP 一把梭把设计还原全包了，它真正解决的是"上下文搬运"这个问题，而设计判断和工程决策仍然是人的活。

3. 把蓝湖 MCP 接进 Cursor 的完整步骤

3.1 前置准备：账号、客户端版本、项目权限

动手之前，先把三样东西准备好。

第一个是蓝湖账号，而且得有目标项目的访问权限。这个看起来是废话，但实际坑很多，后面我会专门讲权限边界的问题。第二个是 Cursor 客户端，需要用的是支持 MCP 的新版本。我个人建议把 Cursor 升级到当前最新稳定版，老版本对 MCP 的配置界面支持不完整，容易白折腾。第三个是你本地的开发环境，因为 MCP Server 可能通过 npx 运行，Node.js 环境最好保持在 18 以上。

如果你是团队协作场景，记得让设计师或项目管理员确认一下：目标项目已经开启了对外部工具的 MCP 访问能力。有些团队项目资源权限很严，设计稿默认只读给成员看，不开放接口取数，这种情况下 MCP 配置得再好也会 401。

3.2 获取访问凭证：蓝湖开放平台的操作

蓝湖的 MCP 服务接入需要凭证。我走的路径是：登录蓝湖开放平台，找到个人访问令牌或者团队集成应用的密钥管理入口，创建一个新的 Access Token。创建时需要选择这个 Token 的作用范围，一般指向你需要读取的项目即可，别贪多选全部项目，权限越小出事面越小。

创建成功后，平台会给你一串密钥字符串。这里有个经验：密钥只显示一次，一定要马上复制保存。我第一回手滑关掉了弹窗，结果只能重新创建一个，白白多花两分钟。

如果你用的是蓝湖企业版或者团队版，可能还要配置一下 IP 白名单或者 OAuth 回调，看你团队的内部规范来定。好一点的消息是，蓝湖官方文档里把 MCP 接入的完整链路写得挺清楚的，按文档走就行，不太需要求助客服。

3.3 在 Cursor 里配置 MCP Server：两种方式

Cursor 提供两种 MCP Server 配置方式：项目级配置和全局配置。

项目级配置适用于单一仓库。在项目根目录下创建.cursor/mcp.json，把 Server 信息写进去，然后重启 Cursor。这个配置文件会跟着仓库走，团队其他人 clone 下来之后也能共享，非常方便。

全局配置则针对你当前这台机器上所有项目生效。在 Cursor 的设置界面中找到 MCP 相关的入口，添加新的 Server 即可。这样无论打开哪个项目，AI 都能调用蓝湖的 MCP 工具。

配置内容按标准 MCP 格式来，下面是一个示意结构，具体的 URL 和包名请以蓝湖官方文档为准：

{ "mcpServers": { "lanhu": { "url": "https://your-lanhu-mcp-endpoint.example.com", "headers": { "Authorization": "Bearer YOUR_ACCESS_TOKEN" } } } }

如果你的本地环境走的是 stdio 方式，也就是用命令启动 MCP Server 进程，配置文件会长这样：

{ "mcpServers": { "lanhu": { "command": "npx", "args": ["-y", "@lanhu/mcp-server"], "env": { "LANHU_API_KEY": "YOUR_ACCESS_TOKEN" } } } }

两种方式本质一样，区别只是传输通道。远程 URL 方式不用本地装额外依赖，推荐优先用这个。配置完之后一定要重启 Cursor，让它重新加载 MCP Server 列表。

3.4 验证连接：让 AI 自己确认看到了设计图

配置完之后别急着写代码，先验证一下连接是否正常。打开 Cursor 的聊天面板，直接问一句："列出我的蓝湖项目中可用的设计图列表。"

如果 MCP 连接正常，AI 会调用对应的工具函数，返回项目数据，并整理成列表给你。这一步能同时验证两件事：一是 Server 地址和凭证对不对，二是 AI 是否真的在调用 MCP 工具而不仅是瞎猜。

如果 AI 回复"没有找到相关工具"或者报错，先回到 Cursor 的 MCP 管理面板看一下 Server 状态。Status 如果不是 Connected，把鼠标悬停在错误信息上，通常能看到具体原因，比如鉴权失败、链接超时、包不存在。我自己第一次配置时就遇到了 HTTP 连接被网关拦截的问题，后来把 URL 从 http 换成了团队内网要求的 https 地址就好了。

验证通过之后，你可以再试一个更复杂的请求："以 XX 项目中的某张画板为例，描述它的布局结构、主色调和主要间距数值。" AI 如果回答得有鼻子有眼，说明它确实读到了结构化标注数据，整个链路就通了。

4. 实战：从设计稿到页面，我给 Cursor 的一整套指令

4.1 让 Cursor 先"看图说话"，建立认知

接好 MCP 之后，真正要用好它，关键是会提需求。我总结的规律是：先让 AI 建立对设计稿的整体认知，再动手写代码。很多人一上来就喊"根据蓝湖设计稿生成页面"，AI 找不到具体目标文件，自然只能给你一句"请提供更多信息"。

我常用的开场指令是这样的：

请通过蓝湖 MCP 工具，查看项目「官网改版」中的画板「首页 v3」，先不要写代码。用 200 字描述这个页面的整体结构，包括顶部导航、主视觉区域、功能卡片区的布局方式，以及主色、辅助色的大致取值。

这一步有两个作用。第一，让 AI 定位到正确的设计稿，并输出它自己看到的页面结构，我据此判断它理解得对不对，有偏差马上纠正。第二，AI 在第一次读取之后会把设计稿信息留在上下文里，后面跟着生成的代码会更连贯，不会写两句就忘了设计稿长什么样。

有个小技巧是：如果页面复杂，可以要求 AI 分区块描述。比如"分别描述头部、内容区、底部三块的结构和间距体系"，这样 AI 不会因为一次性信息量太大而丢掉细节。

4.2 取标注、颜色、切图，一次问清

视觉认知建立之后，第二步就是精确取参数。我通常会一次性把关键信息问齐，减少来回调用：

针对「首页 v3」中的「产品特性卡片」区域，提取以下信息并整理成表格： 1. 卡片整体尺寸、内边距、圆角、阴影 2. 图标占位符的大小和边距 3. 标题和描述文字的字体、字号、行高、字重、颜色 4. 卡片间距（水平方向和垂直方向） 5. 该区域的背景色

这种指令对 AI 来说非常友好，因为它明确知道要调用 MCP 的两个能力：读取标注和读取图层。返回结果就是一张结构化表格，我直接复制到代码里用，比自己到网页上一个一个量快太多了。

切图资源我一般在生成代码之前单独让 AI 取一次。比如：

从该卡片区域中，查找所有图标切图资源，把每个图标的下载地址列出来，并注明它是 PNG 还是 SVG。

AI 会调用资源工具拿到 URL。我接下来的处理方式是：SVG 直接内联到代码里，减少额外网络请求；PNG 则放到项目的静态资源目录。这个策略可以根据你团队的前端基建情况调整。

4.3 生成组件代码时的提示词写法

数据和资源都拿到了，真正进入写代码阶段时，提示词就不能含糊了。我用过的比较简单有效的模板长这样：

现在请用 React + TypeScript + Tailwind CSS 实现「产品特性卡片」组件。 要求： - 完全使用刚才从蓝湖提取的尺寸、颜色、圆角、间距数值 - 图标部分使用蓝湖切图资源，图片地址已经拿到 - 支持 hover 状态：阴影加深一级，标题颜色变为主题色 - 组件名 ProductFeatureCard，接收 title、description、iconUrl 三个 props - 导出前先自查一遍设计稿数值，确认没有遗漏

这里值得解释一下为什么最后要加"导出前先自查一遍"这句话。AI 模型在处理长上下文时偶尔会选择性遗忘某些数值，尤其当设计稿标注特别多的时候。让它在输出前主动对照上下文里的数据做一次自我校验，能明显减少"圆角写错""间距少了 4px"这类低级问题。

另外，如果团队里有现成的组件库规范，一定要写进提示词里。我身边很多同事忽略这一点，结果 AI 生成的是标准 HTML 结构，跟项目里已有的设计系统对不上，反而要花更多时间改造。把约束条件前置，生成质量会高非常多。

4.4 还原度自查：用同一张稿做二次校验

代码生成完之后，我会做一个非常有效的自查动作：让 AI 再次调用蓝湖 MCP 工具，读取同一区域的设计稿标注，然后输出一份"实现现状 vs 设计稿"的对照检查表。

请检查刚才生成的 ProductFeatureCard 组件，对照蓝湖上「首页 v3」中的设计稿标注，逐项核验以下属性：尺寸、内边距、圆角、字体、字号、字重、颜色、间距。如果有不一致的项目，列出当前实现值和设计稿值，并给出修改建议。

这一步相当于让 AI 做了两遍比对工作：一遍是生成时的"照着写"，一遍是生成后的"回头查"。实测下来，很多初次生成时出现的偏差都会被这步自查揪出来。比如我有一次 AI 生成的按钮圆角写成了 8px，设计稿实际是 12px，如果没做二次校验，这个细节就要等设计师来问了。

这个习惯我强烈推荐保留。它不额外增加多少时间，但对还原度的提升是实打实的。它把原来"设计师发现—前端返工"的循环，压缩成了"AI 自查—AI 修正"的循环，价值非常大。

5. 实测一周后的结论：哪些坑必须提前避开

5.1 鉴权失效和 token 过期的处理

第一个坑就是鉴权。MCP 连接好之后，它不是一个永久连接，Token 可能会过期，也可能因为团队安全策略而被轮换。我用的 Access Token 大概每过一段时间就会失效，失效后 Cursor 面板里 Server 状态直接变红，AI 再提问就只会说"无法访问蓝湖资源"。

处理办法不复杂：重新去开放平台生成新 Token，更新配置后重启 Cursor。但有个体验问题值得注意——如果你同时在多个终端操作，旧的 Token 不一定立刻失效，这会让你误以为问题出在别的地方。我的建议是每次更新 Token 之后，顺手在 Cursor 里测试一次"列出设计图列表"，确认状态为 Connected 再继续干活。

另外，团队如果启用了 IP 白名单，记得把你常待的 IP 段加进去。我在家办公和在公司办公用的是不同网络，有次在公司配置得好好的，回家之后发现连接失败，折腾了半天才发现是家庭 IP 不在白名单里。

5.2 图太大模型"看花眼"的问题

第二个坑是高分辨率大图的视觉识别问题。设计稿尺寸如果是 1440 宽、好几屏高，MCP 返回的截图一压缩，AI 看整体轮廓没问题，但看细节就会翻车。比如一小段辅助文字在缩放图里只有几个像素，模型问我"这一段是否应该显示"，我点开原图才知道那是个版权信息。

我的对策是三级处理：

• 整体布局判断用 MCP 的全图画板图；
• 局部细节让 AI 请求缩放后的分区截图，把某个卡片区域放大再看；
• 特别小的文字和 icon，直接让 AI 从标注数据里读字号和颜色，不依赖视觉识别。

这套组合拳打下来，基本不会再出现因为图片压缩导致的信息误判。

5.3 多项目、多团队协作时的权限边界

第三个坑跟权限边界有关。MCP Server 虽然配置在 Cursor 里，但它访问的是你账号有权访问的项目。如果你同时被拉进了十几个项目，AI 调用工具列项目列表时可能拿到一堆名字，如果不指定项目名，它就会随机猜一个，结果读到的设计稿跟你正在开发的内容完全不搭。

这个问题最直接的解法是：在提示词里始终带全三个定位信息——项目名、分组名、画板名。比如"项目官网改版/首页设计/首页 v3"。只有把定位信息写清楚，AI 才会准确读取目标设计稿。

还有一个团队协作场景要注意：如果设计师改了设计稿权限，比如从"所有人可编辑"改成"仅成员可读"，你在蓝湖网页端还看得见，但 MCP 接口可能会因为权限模型不同而返回 403。遇到这种情况别硬刚，直接找管理员确认项目是否开放了 API 读取权限就行。

5.4 还原工作流重新分配的体会

最后聊点实际体会。接入 Cursor 和蓝湖 MCP 之后，最大的变化不是 AI 帮我写代码快了，而是我们团队的角色分工悄悄变了。

设计师那边，"还原了吗"这个问题被问得越来越少，因为代码里的数值和设计稿的标注可以直接对上。设计师的精力可以更多地花在设计评审和交互走查上，而不是帮前端盯细节。前端这边，我把从设计稿搬运数值的时间省了出来，可以更多地思考交互逻辑、组件抽象和响应式策略。确实，有些系统性的事情还需要人来做——访谈、采集、根据业务调整规则——但那些不占用我每天最宝贵的那段时间。

这期间我的实操体验是：MCP 接入的收益不在于"一次生成完美页面"，而在于把校对和修正的成本降低了 80%。机器的文本分析、语义理解用的是公开语料，不涉及具体公司的内部细节，需要人工审校的内容我基本扫一遍就能过。这也是我敢在团队里推广这套方案的根本原因——它解决的是真正的协作问题，而不是炫技。

如果你也在被"还原了吗"困扰，我建议先花一个下午把蓝湖 MCP 接好，再用我说的"看图说话—取标注—生成代码—二次校验"这套流程跑一个真实页面。跑完之后你应该能明显感觉到：设计信息终于不用靠嘴和截图搬运了，它自己流进了代码里。