前端日常项目里难点不是写业务逻辑，是对着设计稿“抠”像素。以前每次拿到高保真设计稿，光是确认色值、量间距、琢磨到底用Flex还是Grid去实现那个视觉效果，就得花掉不少时间。

现在AI编程工具火得不行，我自己现在也基本离不开Cursor了。写个通用函数、重构老代码或者查Bug，确实爽。但一到“还原设计稿”这个环节，之前的体验就总是差点意思。常规操作就是发给大模型，让它照着写。但截图终究是死的，图层嵌套、真实的间距数据，AI根本get不到，生成的代码只能说“看着像”，具体到字体大小、内外边距，经常跑偏，最后还得自己上手一行行调。

后来发现团队在用的设计工具Pixso有了MCP，能跟Cursor打通精确转换设计稿。所以花时间实际配置玩了一下，今天就来聊聊具体的玩法和一些真实感受。

先搞清楚MCP是干啥的

开始前，还是得先简单提一嘴MCP是啥，不然下面的操作逻辑会有点懵。

MCP全称Model Context Protocol，就是个开放协议。大模型本身没法直接读你电脑里的文件或者某个应用的数据，因为缺“上下文”。MCP就是专门给大模型搭桥用的，让它能用一套标准、安全的方式，跟外部工具或数据源互相对接。

Pixso就是按这个协议造了个本地的MCP服务。这样Cursor能直接读到Pixso设计稿背后的结构化数据，而不是一张平面截图。AI拿到的信息，包含了图层树、Auto Layout约束、精确的CSS属性这些。知道这个底层的逻辑之后，你就能理解为什么这么搞出来的代码会准很多。

 

手把手配置：打通Pixso和Cursor

实际配置比想象中简单，几分钟就能搞定，我一步步说下。

1. 客户端版本要搞对

有个细节容易踩坑：必须是Pixso客户端，版本号不能低于2.2.0。我一开始也习惯性地去网页版找入口，后来才反应过来，要搭本地通信服务，肯定得靠本地客户端。去官网下个最新版就行。装好后打开你的设计稿文件，保持窗口开着别关。

2. 打开本地MCP服务

在Pixso客户端左上角，点击文件名的设置图标（一般是齿轮或者更多菜单）。下拉里找到【Pixso MCP】，然后点【打开本地MCP服务器】。点完之后，Pixso就在你电脑后台跑起来一个服务，等着接收编辑器的请求了。

3. Cursor里添加配置

切到Cursor编辑器。按顺序点 File → Preferences → Cursor Settings 进设置中心。左侧菜单找到MCP相关项，一般在Features底下的 Tools & MCP 里。

点 + Add New MCP Server，填这几个信息：

• Name：随便起，比如 Pixso MCP。
• Type：选 sse。
• URL：填 http://localhost:3667/mcp（这是Pixso默认的地址）。

如果你习惯改JSON配置，也可以直接把这段加进去：

json

{

  "mcpServers": {

    "Pixso MCP": {

      "url": "http://localhost:3667/mcp",

      "headers": {}

    }

  }

}

保存后，看一眼刚加的Pixso MCP。如果旁边亮起绿灯，就说明握手成功了。

4. 最后一步，转代码

回到Pixso画布里，选中你要生成代码的区域——哪怕就一个按钮，或者一整块卡片都行。右键点它，选【复制/粘贴为】 → 【复制链接】，拿到这个元素的专属链接。切回Cursor，打开侧边栏的AI对话框。注意，要把模式切到Agent，不然AI不会主动去调用MCP工具。

对话框里粘贴刚才复制的链接，然后打上你的需求。比如：“通过Pixso MCP读这个链接的数据，帮我生成React组件，样式用Tailwind CSS，代码放到 src/components/DataCard.jsx 里。”

回车之后，你会看到Cursor噼里啪啦通过MCP跟Pixso要数据，Pixso很快返回一堆结构化的节点信息。也就几秒钟，一份层级清楚、样式属性跟设计稿对得上的代码就出现在编辑器里了。

使用感受

前后试了几个不同复杂度的组件，说几个印象比较深的点吧。

1. 先说说我最在意的转换精度。以前AI识图写代码，遇到响应式或者具体数值经常是猜的。但Pixso MCP传的是源数据，设计师在Pixso里设的Auto Layout、宽高比例、阴影参数，包括padding是16还是24，都能被准确抓取。出来的Flex布局结构很规整，后期基本不用再拿浏览器开发者工具去量、去改，这块确实省了不少时间。

2. 另外是协作模式的变化。以前前端得对着标注工具，手动把设计语言“翻译”成代码。现在靠着Pixso的协同能力和MCP协议，在IDE里简单敲几行指令就能把基础UI搭起来。时间省下来，就可以多花精力去折腾状态管理、接口对接、性能优化这些真正费脑子的活儿。

至少对我自己来说，Pixso MCP加Cursor这个搭配，确实把设计稿到代码这条路跑通了不少，比以前顺手多了。