匿名 作者：林昌鹏
前言
如果你还在设计稿和代码编辑器之间反复横跳，手动搬运间距、颜色和组件属性，那么最近Figma最新推出的Dev Mode MCP 就是为你准备的“跨界翻译官”。
什么是MCP？
MCP全称Model Context Protocol，是由Anthropic开发并开源的AI与外部工具的通信标准协议，被业内称为“AI世界的USB-C接口”。而Figma的Dev Mode MCP服务器，则是这一协议在设计领域的首个官方落地（虽然社区内已有像 Figma-Context-MCP (github.com/GLips/Figma…) 这样的开源产品，但实际体验下来准确度不如官方的MCP，不过官方的需要付费，各有利弊）——它像一个实时数据管道，把Figma设计稿中的结构化信息，直接输送给AI编程助手（如Cursor、VS Code Copilot等）
传统设计转代码的痛点是什么？
- 看图说话，误差大：AI只能“猜”设计图中的尺寸、颜色、组件逻辑；
- 手动标注，效率低：开发者需反复核对间距、字体、交互状态；
- 设计系统难同步：组件库更新后，代码无法自动响应。
MCP的突破在于：它让AI不再“盲猜”。
通过提取Figma设计文件中的完整上下文，包括：
- ✅ 设计变量（颜色、间距、字体等Token）
- ✅ 组件属性与变体（如按钮的hover状态）
- ✅ 图层结构、命名与注释
- ✅ 响应式布局逻辑与交互伪代码68
AI模型获得了“透视设计”的能力，输出代码的准确率和一致性大幅提升。
如何配置Figma Dev Mode MCP
前置条件
- 账号要求：figma付费账户且是Dev seat 或 Full seat
- IDE要求：支持MCP Server （VS Code、Cursor等）
- 软件要求：下载最新版 Figma桌面客户端(www.figma.com/downloads/)
启动MCP服务器
- 打开Figma桌面App → 点击左上角菜单 → Preferences
- 在设置面板中找到 “Enable Dev Mode MCP Server” 并勾选
注意：这个设置需要进入你的设计稿页面内才会有，首页并没有这个入口
出现如下提示说明开启成功
配置你的AI编程工具（以Cursor为例）
- 打开Cusor Settings进入设置页
- 左侧选择MCP Tab页，点击添加MCP server按钮
- 粘贴以下配置并保存：
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
如下图显示就表示连接成功了，如果显示失败可以操作右侧开关或刷新按钮进行重试
至此一切配置就绪，俗话说实践出真知，接下来就进入到实战环节，看看效果到底如何！
实战环节
这是我们内部系统的某个移动端页面的设计稿，接下来就以这个页面进行实验，活不多说，开冲！
首先在figma内复制这个设计稿链接：
然后在Cursor内打开chat功能，复制以下内容进行输入
- 你是一名资深前端开发工程师，擅长使用Taro对移动端（750px）设计稿进行一比一还原
- 所有设计稿包含顶部状态栏和导航栏，在进行代码还原设计稿的时候无需还原这块内容
- @https://www.figma.com/design/xxx(你复制的figma设计稿链接地址)
请对这个figma页面内的设计稿进行开发，页面内所有的主文案、组件内容项和组件内文案都根据Figma节点进行细化，保证和设计稿保持一致
- 所有代码请在project/src/pages/mcp-test目录下生成
简单概括下上述prompt：
- 使用Taro对设计稿进行还原
- 无需实现顶部系统状态栏和导航栏
- 对我们复制的figma链接进行开发
- 代码存放位置
接下来看下实际效果：
页面：
布局样式大体上还原的不错，不过还是存在一些细节上的问题，比如图标显示有误，问题列表的副标题存在换行等等
代码：
import { View, Text } from '@tarojs/components';
import './index.less';
export default function Index() {
return (
<View className="after-sales-page">
{/* 页面主体内容 */}
<View className="page-content">
{/* 标题卡片 */}
<View className="title-card">
<View className="title-content">
<Text className="title-text">请选择您遇到的问题</Text>
</View>
</View>
{/* 选项列表 */}
<View className="option-list">
{/* 我要上门维修 */}
<View className="option-item">
<View className="option-main">
<View className="option-title">我要上门维修</View>
<View className="option-subtitle">设备出现故障，由技术员上门维修</View>
</View>
<View className="option-arrow">
<View className="arrow-icon">
<View className="icon-chevron-right" />
</View>
</View>
</View>
{/* 我要寄修 */}
<View className="option-item">
<View className="option-main">
<View className="option-title">我要寄修</View>
<View className="option-subtitle">设备出现故障，由配送司机带回仓库维修</View>
</View>
<View className="option-arrow">
<View className="arrow-icon">
<View className="icon-chevron-right" />
</View>
</View>
</View>
{/* 我要无理由退货 */}
<View className="option-item">
<View className="option-main">
<View className="option-title">我要无理由退货</View>
<View className="option-subtitle">设备签收15天内未拆封可以发起退货</View>
</View>
<View className="option-arrow">
<View className="arrow-icon">
<View className="icon-chevron-right" />
</View>
</View>
</View>
{/* 我要质量问题退货 */}
<View className="option-item">
<View className="option-main">
<View className="option-title">我要质量问题退货</View>
<View className="option-subtitle">设备签收15天出现质量问题可以发起退货</View>
</View>
<View className="option-arrow">
<View className="arrow-icon">
<View className="icon-chevron-right" />
</View>
</View>
</View>
</View>
</View>
{/* 底部按钮 */}
<View className="bottom-button">
<View className="scan-button">
<View className="scan-icon">
<View className="icon-scan" />
</View>
<Text className="scan-text">扫码上报</Text>
</View>
</View>
</View>
);
}
代码方面看似好像没什么问题，但实际上我们不会这么去写，比如按钮，我们在实际开发中肯定会使用组件库的按钮组件进行开发，而不是每个页面自己去实现一个按钮样式
那么接下来方向就很明确了，我们需要让AI使用正确的图标、使用正确的组件进行代码生成，直接把我们的图标库和组件库丢给AI，给原先的prompt添加下面两条内容：
......
- @我们内部的组件库文档地址
这是我们的移动端组件库文档，组件库npm包为@guming/gudesign，如果设计稿内布局节点的名称和组件库内的组件名称相同，可通过组件库直接使用同名组件，并结合设计稿样式、组件库文档内相关组件的API以及项目内同组件的使用方式进行参考后对组件设置合理的props
- @guming/icon-gudesign 这是我们的图标库，如果页面有涉及到图标，请检查图标库内是否有匹配的图标，可通过项目依赖查询图标组件的name属性并进行判断
静静等待一会，我们再来看看他会交出怎样的一个答案！
生成的页面：
生成的代码：
import React from 'react';
import { View } from '@tarojs/components';
import { Card, CellList, Button } from '@guming/gudesign';
import IconHub from '@guming/icon-gudesign';
import { observer } from 'mobx-react';
import './index.less';
// 定义选项数据
const serviceOptions = [
{
key: 'door-repair',
title: '我要上门维修',
subTitle: '设备出现故障，由技术员上门维修',
arrow: true,
onClick: () => {
console.log('点击上门维修');
},
},
{
key: 'send-repair',
title: '我要寄修',
subTitle: '设备出现故障，由配送司机带回仓库维修',
arrow: true,
onClick: () => {
console.log('点击寄修');
},
},
{
key: 'return-no-reason',
title: '我要无理由退货',
subTitle: '设备签收15天内未拆封可以发起退货',
arrow: true,
onClick: () => {
console.log('点击无理由退货');
},
},
{
key: 'return-quality',
title: '我要质量问题退货',
subTitle: '设备签收15天出现质量问题可以发起退货',
arrow: true,
onClick: () => {
console.log('点击质量问题退货');
},
},
];
export default observer(() => {
const handleScanReport = () => {
console.log('点击扫码上报');
};
return (
<View className="page-device-service">
{/* 主体内容区域 */}
<View className="content-area">
{/* 标题卡片 */}
<Card title="请选择您遇到的问题" radius={false} className="title-card" />
{/* 选项列表 */}
<CellList items={serviceOptions} className="service-list" />
</View>
{/* 底部按钮区域 */}
<View className="bottom-button-area">
<Button
type="primary"
size="large"
icon={<IconHub name="scanning" />}
className="scan-button"
onClick={handleScanReport}
>
扫码上报
</Button>
</View>
</View>
);
});
效果非常不错！无论是样式还是代码都非常满足我们的要求了，接下来只需要关注我们的实际业务逻辑实现即可！
总结
虽然只是实现了一个比较简单的页面，但是我相信这种模式未来肯定能够在工作中提升我们的效率，此外在官方的文档中还提到了一个Figma提供的工具 Code Connect (help.figma.com/hc/en-us/ar…) ：
简单点来说就是可以将设计稿内的组件及属性和我们组件库内的组件进行映射关联，如此一来我们不再需要告诉AI我们的组件库文档地址，并且生成的代码和组件props也更加准确，但是比较遗憾的是我们的figma账号是专业版，这个功能只有组织和企业计划两个档才可以使用，暂时无法进行体验了
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)