Cursor 通过 MCP 协议接入蓝湖，AI 自动生成 Vue 3 + SCSS 样式代码

1. 设计师追着问“还原了吗”这件事到底卡在哪做前端的人对这句话应该都不陌生。设计稿评审通过开发排期定好代码吭哧吭哧写完本地跑起来一看自己觉得八九不离十了。结果设计师往旁边一坐鼠标滚轮一滑眉头就皱起来了“这个间距不对吧我标的是 24你这看着像 32。”“这个圆角我用的 8你怎么给我写成 12 了”“这个渐变色方向反了。”然后就是一轮一轮地改。改完再截图发过去设计师再比对再提意见。一个页面来回折腾三五轮是常态复杂点的组件甚至能磨一整天。最要命的是这种沟通成本是隐性的它不体现在代码行数里也不体现在需求文档里但它实实在在吃掉了大量时间。这个问题的根源其实很清楚设计稿和代码之间隔着一道人工翻译的墙。设计师在蓝湖里标注的是设计语言——间距、字号、色值、圆角、阴影开发在代码里写的是实现语言——padding、font-size、color、border-radius、box-shadow。这两套语言之间的映射全靠人眼去看、人脑去记、人手去敲。只要是人来做这件事就一定会出错一定会遗漏一定会需要反复确认。那有没有办法让这个映射过程自动化或者说让 AI 来充当这个翻译官这就是我最近在折腾的事情把 Cursor 通过 MCP 协议接到蓝湖上让 AI 直接读取设计稿的标注数据然后按照我项目里的技术栈规范自动生成对应的样式代码。设计师再问“还原了吗”我直接把 AI 生成的代码跑起来给她看一次到位。这篇文章会完整拆解这套方案的落地过程MCP 到底是什么、蓝湖的 MCP 服务怎么接、Cursor 里怎么配置、Vue 3 SCSS 的项目里怎么让 AI 生成的代码符合规范、以及我在实操中踩过的那些坑。如果你也是前端开发或者你正在被设计还原问题困扰这套思路值得你花时间研究一下。2. MCP 不是魔法它解决的是“AI 怎么拿到外部数据”的问题在讲具体怎么接蓝湖之前得先把 MCP 这个东西说清楚。很多人看到 MCP 这三个字母就头大觉得又是什么新概念。其实它的本质非常简单MCP 是一套让 AI 模型能够调用外部工具和数据的标准协议。你可以把它理解成 AI 世界的 USB 接口。以前每个 AI 工具想接外部数据都得自己写一套对接逻辑A 工具接数据库是一种写法B 工具接设计稿又是另一种写法乱得很。MCP 做的事情就是定一个统一的标准外部服务按照这个标准暴露自己的能力AI 客户端按照这个标准去调用。这样一来任何支持 MCP 的 AI 客户端都能接任何支持 MCP 的外部服务不用再一对一地写适配代码。2.1 MCP 的通信模型Client、Server 和它们之间的对话MCP 的架构里有两个核心角色。一个是MCP Client也就是 AI 客户端这一侧比如 Cursor、Claude Desktop 这些工具它们负责发起请求。另一个是MCP Server也就是外部服务这一侧比如蓝湖提供的 MCP 服务它负责响应请求、返回数据。两者之间的通信走的是标准化的协议格式。Client 会问 Server“你有哪些能力”Server 返回一个能力列表比如“我可以读取设计稿的标注数据”“我可以获取图层信息”“我可以导出切图”。然后 Client 根据用户的需求选择调用某个具体的能力把参数传过去Server 执行完把结果返回。这个过程听起来很像 REST API 的调用但关键区别在于MCP 是专门为 AI 场景设计的。它的返回结果格式、错误处理方式、能力描述方式都是为了让 AI 能够理解和使用。比如 Server 返回的数据里会包含自然语言描述告诉 AI 这个字段是什么意思、该怎么用。这样 AI 在生成代码的时候就能根据这些描述做出更合理的判断。2.2 为什么是蓝湖先做了这件事蓝湖在国内设计协作工具里的地位不用多说大部分团队的设计稿、标注、切图都在上面。它做 MCP 服务有一个天然优势设计稿的结构化数据它本来就有。设计师在蓝湖里标注的每一个间距、每一个色值、每一个字号在蓝湖的数据模型里都是结构化的字段。以前这些字段只能通过人眼去看、手动去抄现在通过 MCP 暴露出来AI 就能直接读取。而且蓝湖的标注数据里包含了图层层级、组件命名、样式属性这些信息AI 拿到之后不仅能知道“这个按钮的圆角是 8”还能知道“这个按钮是一个独立的组件它的父容器是卡片卡片的内边距是 16”。这种上下文信息对于生成准确的代码非常重要。我实测下来蓝湖 MCP 返回的数据颗粒度是够用的。间距、色值、字体、圆角、阴影这些基础样式都能拿到图层之间的嵌套关系也能拿到。对于大部分中后台页面和常规移动端页面来说这些信息已经足够生成可用的样式代码了。2.3 Cursor 作为 MCP Client 的天然优势Cursor 本身就是一个深度集成了 AI 能力的代码编辑器它对 MCP 的支持是原生级别的。这意味着你不需要额外装什么插件也不需要写什么胶水代码只要在配置里加上 MCP Server 的地址Cursor 就能直接调用。更重要的是Cursor 的 AI 模型能够理解你当前项目的代码上下文。它知道你用的是 Vue 3 还是 React知道你用的是 SCSS 还是 Tailwind知道你项目里的变量命名规范。当它从蓝湖 MCP 拿到设计稿数据之后会结合你项目的实际情况来生成代码而不是生成一堆通用的、需要你手动改半天的模板代码。这一点是我觉得这套方案最有价值的地方。它不是简单地“把设计稿转成代码”而是“把设计稿转成符合你项目规范的代码”。这两者之间的差距用过的人都知道有多大。3. 把蓝湖 MCP 接进 Cursor从零到跑通的完整路径接下来是实操部分。我会按照我实际操作的顺序把每一步都拆开讲清楚。你跟着做应该能在半小时内跑通。3.1 前置准备账号、权限和版本要求首先确认几件事。你的蓝湖账号需要有对应项目的访问权限这个不用多说。然后你的 Cursor 需要是比较新的版本因为 MCP 支持是后来才加的功能。我写这篇文章时用的是 Cursor 0.45 以上的版本MCP 配置入口在设置里已经比较稳定了。另外蓝湖的 MCP 服务目前是需要团队版或以上套餐才能使用的。如果你用的是免费版可能看不到 MCP 相关的入口。这个需要提前确认免得折腾半天发现权限不够。还有一点你的项目代码需要在本地能跑起来。因为 AI 生成的代码最终是要落到你项目里的如果项目本身跑不起来你也没法验证生成结果对不对。3.2 获取蓝湖 MCP 的服务地址和凭证登录蓝湖之后进入你的项目在项目设置或者团队设置里找 MCP 相关的入口。不同版本的蓝湖界面可能不太一样但大体路径是项目设置 - 开发者选项 - MCP 服务。点进去之后你会看到一个服务地址通常是一个 HTTPS 的 URL以及一个访问令牌token。这个令牌是身份验证用的相当于你的账号密码。千万不要把它提交到代码仓库里我一般建议放在本地的环境变量文件里或者直接写在 Cursor 的本地配置里不要进 Git。拿到地址和令牌之后先别急着往 Cursor 里填。你可以先用 curl 或者 Postman 测一下这个地址通不通。蓝湖的 MCP 服务一般会有一个健康检查接口返回一个简单的状态信息。这一步能帮你排除网络问题或者令牌错误的问题。curl -X POST https://your-lanhu-mcp-endpoint/health \ -H Authorization: Bearer YOUR_TOKEN \ -H Content-Type: application/json如果返回了正常的状态信息说明地址和令牌都没问题可以进入下一步。3.3 在 Cursor 里配置 MCP Server打开 Cursor进入设置找到 MCP 相关的配置项。不同版本的 Cursor 这个入口位置可能不同有的在 Settings - Features - MCP有的在 Settings - Extensions - MCP。你可以在设置里直接搜“MCP”就能找到。配置的格式是一个 JSON 对象大致长这样{ mcpServers: { lanhu: { url: https://your-lanhu-mcp-endpoint, headers: { Authorization: Bearer YOUR_TOKEN } } } }把url换成你从蓝湖拿到的服务地址把YOUR_TOKEN换成你的访问令牌。保存之后Cursor 会尝试连接这个 MCP Server。如果连接成功你会在 MCP 配置页面看到这个 Server 的状态变成已连接并且能看到它暴露出来的能力列表。注意如果你的网络环境需要代理才能访问外部服务这里可能会连接失败。你需要确保 Cursor 能够直接访问蓝湖的 MCP 地址。具体怎么配置网络环境这里不展开你根据自己团队的实际情况处理。连接成功之后你就可以在 Cursor 的对话里让 AI 去调用蓝湖的数据了。比如你可以说“帮我读取蓝湖上‘首页改版’项目里‘用户卡片’组件的标注数据。”AI 就会通过 MCP 去请求蓝湖把数据拿回来。3.4 验证连接第一次让 AI 读设计稿第一次调用的时候建议先做一个简单的验证。找一个结构比较简单的组件比如一个按钮或者一个标签让 AI 去读取它的标注数据。你可以这样问“通过蓝湖 MCP 读取‘测试项目’里‘主按钮’组件的样式标注告诉我它的宽度、高度、圆角、背景色和字号。”如果一切正常AI 会返回类似这样的结果主按钮组件样式标注 - 宽度120px - 高度40px - 圆角8px - 背景色#1890FF - 字号14px - 字重500 - 文字颜色#FFFFFF看到这个结果说明整条链路已经通了。AI 能够通过 MCP 拿到蓝湖的设计稿数据接下来就是怎么让它把这些数据转化成你项目里能用的代码。4. 让 AI 生成的代码符合 Vue 3 SCSS 项目规范拿到设计稿数据只是第一步真正有价值的是让 AI 生成可以直接用的代码。这里的关键在于你要给 AI 足够的上下文让它知道你的项目是怎么组织的。4.1 项目上下文告诉 AI 你的技术栈和规范Cursor 本身会读取你当前打开的项目文件所以它对你的项目结构有一定的了解。但光靠它自己猜是不够的你需要主动告诉它一些关键信息。我一般会在项目根目录放一个.cursorrules文件里面写清楚项目的技术栈、代码规范、命名约定这些。比如技术栈Vue 3 TypeScript SCSS Vite 组件风格使用 script setup 语法 样式规范 - 使用 SCSS 变量变量定义在 src/styles/variables.scss - 颜色变量命名格式$color-primary, $color-text-regular - 间距使用 8px 基准变量命名格式$spacing-sm, $spacing-md, $spacing-lg - 组件样式使用 scoped - 类名使用 BEM 命名法有了这个文件AI 在生成代码的时候就会参考这些规范。比如它从蓝湖拿到一个#1890FF的色值不会直接写成color: #1890FF而是会写成color: $color-primary因为它知道你的项目里主色是用变量管理的。这个细节看起来小但实际用起来差别很大。直接写死色值的代码后期换主题的时候要一个个改用变量的代码改一个变量文件就行了。AI 如果能一开始就生成符合规范的代码能省掉大量后期重构的工作。4.2 从标注数据到 SCSS 变量的映射逻辑蓝湖返回的标注数据是原始值比如#1890FF、24px、8px。你的项目里可能已经有一套变量体系了。AI 需要做的是把原始值映射到对应的变量上。这个映射过程AI 是怎么知道该用哪个变量的答案是它会去读你的变量文件。如果你在.cursorrules里告诉了它变量文件的位置它在生成代码之前会先去读这个文件看看里面有哪些变量、分别对应什么值。然后它会把蓝湖的原始值和变量值做匹配找到最合适的那个。比如你的variables.scss里有$color-primary: #1890FF; $spacing-md: 16px; $spacing-lg: 24px; $radius-sm: 4px; $radius-md: 8px;蓝湖标注里有一个按钮背景色#1890FF内边距16px 24px圆角8px。AI 就会生成.button { background-color: $color-primary; padding: $spacing-md $spacing-lg; border-radius: $radius-md; }如果某个值在变量文件里找不到对应的变量AI 会怎么处理我实测下来它一般会直接写原始值但会在注释里提醒你“此值未找到对应变量”。这样你 review 的时候就能注意到决定是新增一个变量还是直接用原始值。4.3 组件结构的生成不只是样式还有模板MCP 返回的数据里包含了图层的嵌套关系AI 可以根据这个关系推断出组件的 DOM 结构。比如一个卡片组件里面有一个头像、一个标题、一段描述文字AI 会生成类似这样的模板template div classuser-card img classuser-card__avatar :srcavatar alt用户头像 / div classuser-card__content h3 classuser-card__title{{ title }}/h3 p classuser-card__desc{{ description }}/p /div /div /template这个结构是根据蓝湖图层的层级关系推断出来的。图层叫什么名字AI 就会用对应的语义化标签和类名。如果图层命名比较规范比如“头像”“标题”“描述”生成的代码可读性就会很好。如果图层命名是“矩形 1”“文本 2”这种AI 也能生成但类名可能就需要你手动调整一下。我一般建议设计师在蓝湖里把图层命名规范好这样 AI 生成的代码质量会高很多。这算是前期投入、后期省事的一件事。4.4 处理响应式让 AI 考虑不同屏幕尺寸蓝湖的标注通常是针对某一个具体尺寸的设计稿比如 375px 宽的移动端设计稿或者 1440px 宽的桌面端设计稿。但实际项目里页面需要在不同尺寸下都能正常显示。AI 在生成代码的时候如果只按照设计稿的固定尺寸来写出来的代码在别的屏幕尺寸下可能会出问题。所以我一般会在提示词里明确告诉 AI“这是一个移动端页面设计稿宽度 375px请使用 rem 或 vw 单位确保在不同屏幕宽度下自适应。”AI 收到这个指令后会把设计稿里的 px 值转换成相对单位。比如设计稿里 16px 的内边距在 375px 基准下AI 可能会生成padding: 4.267vw或者padding: 0.427rem取决于你项目用的方案。这个转换逻辑 AI 是知道的但你得告诉它你的基准宽度和单位方案。如果你项目里用的是 PostCSS 插件自动转换 px 到 rem那你就告诉 AI 直接写 px构建时会自动处理。如果你用的是 vw 方案就告诉 AI 用 vw。关键是让 AI 知道你的项目是怎么处理响应式的。5. 实操中踩过的坑和对应的解法这套方案听起来很顺但实际落地的时候还是有不少坑的。我把我遇到的几个典型问题整理出来你遇到类似情况的时候可以参考。5.1 蓝湖 MCP 返回的数据格式和预期不一致第一次调用的时候我发现 AI 拿回来的数据里有些字段的命名和我预想的不一样。比如我以为圆角会返回borderRadius结果它返回的是cornerRadius。这种命名差异会导致 AI 在生成代码的时候用错属性。解决办法是在.cursorrules里加一段字段映射说明蓝湖 MCP 返回字段映射 - cornerRadius - border-radius - backgroundColor - background-color - fontSize - font-size - fontWeight - font-weight - paddingLeft/paddingRight/paddingTop/paddingBottom - padding有了这个映射表AI 就知道该怎么把蓝湖的字段名转换成 CSS 属性名了。这个映射表不需要一次写全你遇到一个加一个就行。5.2 AI 生成的代码缺少交互状态设计稿通常是静态的但实际组件是有交互状态的hover、active、focus、disabled。AI 从蓝湖拿到的数据里不包含这些状态所以生成的代码默认只有默认态。我的做法是在提示词里明确要求“请为按钮组件补充 hover、active、disabled 三种状态的样式hover 时背景色加深 10%active 时加深 20%disabled 时透明度 0.5。”AI 收到这个指令后会根据默认态的色值计算出对应的状态色值。比如默认态是#1890FFhover 态它会生成#40A9FF变亮或者#096DD9变暗具体取决于你告诉它的规则。这个规则你可以在.cursorrules里统一约定这样所有组件的交互状态风格都是一致的。5.3 复杂组件的层级嵌套导致代码结构混乱简单组件还好遇到复杂组件的时候蓝湖的图层层级可能嵌套很深AI 生成的 DOM 结构也会跟着嵌套很多层。这会导致两个问题一是代码可读性差二是样式选择器层级过深影响性能。我的处理方式是分两步走。第一步让 AI 先输出一个扁平化的结构建议把不必要的嵌套层去掉。第二步再让 AI 根据扁平化后的结构生成代码。具体操作上我会在提示词里说“请先分析这个组件的图层结构识别出哪些嵌套层是纯布局容器、可以合并的输出一个简化后的结构方案然后再生成代码。”AI 会先给我一个结构分析比如“图层 A 和图层 B 都是纯 flex 容器可以合并为一个”然后按照简化后的结构生成代码。这样出来的代码会干净很多。5.4 设计稿更新后代码怎么同步设计稿不是一成不变的设计师改了一版代码也得跟着改。如果每次都是重新让 AI 生成一遍那之前手动调整过的部分就会被覆盖掉。我的做法是让 AI 做增量更新而不是全量重新生成。具体来说我会把当前组件的代码和最新的蓝湖标注数据一起给 AI然后说“这是当前代码这是最新的设计稿标注请对比差异只修改有变化的部分保持其他代码不变。”AI 会对比两边的数据找出哪些样式值变了然后只改那些地方。这样既能同步设计稿的更新又不会破坏之前手动优化的部分。这个流程我实测下来效率很高。设计师改完稿我花两分钟让 AI 同步一下然后跑起来给她看基本一次就能过。6. 这套方案的实际收益和适用边界用了大概两周之后我统计了一下效果。以前一个中等复杂度的页面从设计稿到代码还原度达到设计师满意平均需要 3 到 4 轮沟通累计耗时大概 4 到 6 小时。现在用这套方案第一轮生成的代码还原度就能达到 85% 以上剩下的 15% 主要是交互状态和边界情况的微调沟通轮次降到 1 到 2 轮累计耗时压缩到 1 到 2 小时。效率提升是明显的但我也得说清楚这套方案的适用边界。它最适合的是中后台页面、移动端常规页面、组件库开发这类场景设计稿结构清晰、标注规范、组件复用率高。对于高度定制化的视觉页面比如复杂的动效、非标准的布局、大量手绘元素AI 生成的代码还是需要比较多的人工调整。另外这套方案对设计师的标注规范有一定要求。如果图层命名混乱、标注缺失、组件没有复用AI 拿到的数据质量就差生成的代码也就好不到哪去。所以如果你打算推这套方案最好先和设计师对齐一下标注规范把图层命名、组件复用这些基础工作做好。还有一个我个人的体会AI 生成的代码一定要 review。它大部分时候是对的但偶尔会在一些细节上出错比如把margin和padding搞混、把绝对定位的元素写成相对定位。这些错误如果不 review 直接提交后期排查起来很麻烦。我一般会把 AI 生成的代码和设计稿并排放在一起快速扫一遍确认没有明显问题再跑起来看效果。最后分享一个小技巧如果你觉得每次都要手动输入提示词太麻烦可以在 Cursor 里把常用的提示词保存成快捷指令。比如“读取蓝湖标注并生成 Vue 3 SCSS 代码”这个指令我设置了一个快捷键按一下就能触发省去了每次打字的功夫。这个功能在 Cursor 的 Commands 设置里可以配置你可以根据自己的习惯定制。