什么是设计工具 MCP？从 Figma、Pixso 看 AI 设计与设计稿转代码

以前大家聊 MCP，更多是 AI 怎么连数据库、搜索、办公软件和各种 API。现在设计工具也开始开放 MCP，

。

Figma 是比较早被大家关注的案例，国内用国产设计工具的团队不少，Pixso MCP 也可以看看。

可以把 MCP 看成一种开放协议，用来

。以前 AI 主要待在对话框里，你提需求，它按上下文生成东西。有了 MCP，它还能拿到外部工具的能力和上下文。

放到设计里，你让 AI 做一个 SaaS 后台，它能列出页面，也能生成一些 UI 代码。可如果它能连上你的设计工具，能做的事就不同了。它能读到设计文件里的页面、图层、组件，不用每次都从空白对话重新开始。

。它把 AI Agent 和 Figma 的设计流程连了起来。于这样就出现了另一种做法：设计师不用在 AI 工具和设计工具之间来回切，AI Agent 可以直接参与设计。设计工具本身也在换角色，从画界面的软件，变成 AI 工作流的一环。

Figma 不是唯一的选择。国内不少设计团队，实际用的未必是 Figma。已有设计资产、协作习惯、网络环境、工具成本，都会影响选型。很多国内团队长期用 Pixso。

，用来连接支持 MCP 的 AI 工具和 Pixso 设计流程，让 AI 参与设计稿生成、读取设计上下文、设计到开发这些任务。

以前聊 AI 做 UI，很多人想到的是让 AI 生成一个页面。比如输入“帮我设计一个电商 App 首页”，它给一张图，或者一段网页代码。这当然有用，尤其前期找方向、快速出方案。但做过产品设计的人知道，

。

页面结构要调，组件要统一，颜色字体得符合规范，交互状态要补，移动端和桌面端可能还得分开处理。设计工作不只是把页面画出来。MCP 有意思的地方，是让 AI Agent 能进入这个过程。

以 Pixso MCP 为例，设计师可以让支持 MCP 的 AI Agent 连接 Pixso，比如

。这里还会碰到一个常和 MCP 一起出现的词：AI Skill。MCP 管连接，Skill 管连上之后怎么把一类任务做完。在 Agent 工具里装好 Pixso AI skill 插件后，你可以

。它得先弄明白需求，规划页面结构，挑组件，处理布局和视觉规范，然后把设计稿生成在你的画布里，后面再按反馈改。

对设计师来说，MCP 和 skill 并没有多出一个独立 AI 工具，它们让 AI 慢慢进入原来的设计流程。但也不等于设计师以后没事做了。AI 越深入真实工作流，设计师的判断反而越关键。方案合不合理、信息层级清不清楚、交互逻辑有没有问题、跟产品定位搭不搭，还是得设计师来判断。

设计师更关心 AI 生成设计稿，开发者更容易感受到价值的，是设计稿转代码

以前设计师把页面交给开发，

。这个页面分几个区域？哪些是组件？按钮多大？文字字号多少？模块间距多少？图片图标用什么资源？移动端怎么适配？这些信息大多在设计稿里，但开发要自己看、自己判断，再把视觉信息变成代码。

设计师看的是设计文件，开发最后要的是代码。如果 AI Agent 能通过 MCP 读取设计文件，两边就多了一层连接。

比如设计师在 Pixso 里做完一个页面，开发正在用 Cursor、Claude Code、VS Code 这类 AI 编程环境写代码。这时如果 AI 编程工具能

，开发就可以让 AI 按设计稿辅助写页面代码。跟传统对着设计稿写代码比，区别在于 AI 拿到了更多上下文。

开发者可以告诉 AI：“按这个 Pixso 页面设计，用当前项目的 React 组件规范实现。”如果 AI 还能拿到设计稿页面结构，再结合项目已有代码和组件库，它做这件事的基础会比只看截图完整。

设计稿转代码不是点一下就能上线。真实开发里还有业务逻辑、接口、状态管理、响应式适配、组件复用、工程规范等一堆问题。AI 生成的代码还是得开发检查，不过它确实能减少一部分重复活，尤其是页面结构、样式、基础组件这些和设计稿关系很近的内容。

再看 Figma MCP、Pixso MCP，设计工具开放 MCP 后，

。当 AI Agent 连上设计工具后，需求来了，不用先开 AI 工具生成结果，再手动搬进设计软件；AI 可以直接参与设计稿生成、修改和整理。MCP 把 AI Agent 和设计工作流接上，AI Skill 再进一步，让 Agent 围绕具体设计任务去执行。

Figma 和 Pixso 虽然不同，但方向类似：设计工具正在变成 AI Agent 能调用的工作环境；AI 也在从对话助手，变成能参与真实设计和开发流程的 Agent。

AI 设计接下来该看什么？可能是它能不能进入设计师和开发者每天用的工具里，把一项完整工作做下来。