本文针对设计师写的，前端或者开发大佬如果看到，请指正🙏，目的是想让体验设计师多了解开发知识，能够快速让自己的设计做出可体验的 demo，从而验证设计。

前言

在AI时代，职能的边界正日益模糊。只要保持持续学习的心态，并善用AI工具，我们便能突破以往的限制，完成过去难以企及的任务。 众多大型科技公司也正积极利用AI，助力设计师突破固有边界，实现更具挑战性的设计目标。 以Figma为例，其最新推出的mcp服务便是一个强有力的证明。设计师现在可以直接在 Cursor、WindSurf 或 VS Code 等开发环境中，轻松地将设计稿一键转化为可运行的应用程序原型。 今天，我们就来实际演示这项功能的效果。

先看效果

这是设计稿：

这是网页运行的效果：

可以自适应布局

还原度还是挺高的，但肯定是有些瑕疵。时间关系，只要多次对比和对话，cursor 就会尽量还原设计效果的🤣！

使用过程

安装一个框架

这次我使用 nextjs 作为前端框架。 安装很简单：

npx create-next-app@latest

配置 MCP

Figma 配置

首先安装 Figma 客户端，然后打开这些设置。

Cursor 配置

安装 cursor 然后，打开网址：https://docs.cursor.com/tools 直接安装 MCP即可：

看到这样就证明安装成功了。

注意，这里的 mcp 配置文件是这样的，注意更换地址：

{
  "mcpServers": { 
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

开始编码

首选在 Figma 客户端中（必须使用客户端）打开设计稿，然后选中画板。

回到 cursor，输入指令。如：

开发一个web首页，使用Figma的设计稿，调用Figma mcp工具实现。

Cursor 先识别 mcp 工具，一旦识别成功，就开始干活了！

一路 Accept 即可。

第一次生成，大致的效果 ok，但是图标和布局不一致，需要进一步告诉 cursor 修改。

需要检查图标、样式、布局等，调用Figma工具，进一步调整页面。

AI 又开始忙活了。

经过几轮优化，增加响应式设计，那么一个完整的页面就成形了！

写在最后

通过 Figma 官方的 mcp 工具，体验设计师可借助 AI 能力实现：

1. 极速设计验证 - 快速完成设计方案可行性测试
2. 全流程贯通 - 支持从设计稿到网站级应用的一键部署（当前仅限网页端）

需注意当前版本限制： ⚠️ 图标处理机制
• 暂不支持自动切图功能
• AI 通过智能调用图标库资源实现风格模拟，输出为近似效果（非精准替换）

想获取更多 AI 辅助设计和设计灵感趋势？ 欢迎关注我的公众号（设计小站）：sjxz00。