Cursor + Figma:UI 设计稿一键转代码的高效工作流
见字如面,与大家分享实践中的经验与思考。
为什么选择Figma设计稿来生成代码?Claude 3系列模型不是已经支持多模态,可以通过截图来生成代码么?
但使用Figma设计稿来生成代码有以下几个显著优势:
设计交互与标注: Figma设计稿包含完整的设计规范、组件结构和交互信息,比简单截图提供更丰富的上下文
精确还原: 通过API直接获取设计元素的确切尺寸、颜色、字体和布局信息,实现更精准的代码转换
协作流程整合: 设计师和开发者可以围绕同一Figma文件协作,减少沟通成本
批量处理能力: 可以一次性处理多个屏幕或组件,提高开发效率
资源优化: 直接访问设计原始资源,如图标、图片等,确保资源质量
前期准备
Figma:APP 版
Cursor:0.47.9 或更高版本
MacOS/Windows/Linux
准备 Figma Api Key
在网页/App版本Figma 中通过点击:用户头像 -> Settings -> Security -> Personal access tokens,在如下页面中创建 Figma 的 api key。
生成 Token 之后,记得拷贝到粘贴板,提供 Cursor MCP Server 的配置使用。
Cursor 中配置 Figma MCP 服务
新建文件.cursor/mcp.json
,填入如下配置信息,其中--figma-api-key
通过上一步获取到的,拷贝进来即可。
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR_FIGMA_API_KEY_HERE",
"--stdio"
]
}
}
}
成功后:
实操步骤
01 Figma 中获取设计稿链接
我使用的本人社区共享的Pilates应用设计稿,这个设计稿是由 Cursor 生成的,生成步骤参考文章:Cusor 使用对话直接生成 Figma UI 设计稿。
本地没有 figma 设计稿的可以直接使用,Figma链接地址:https://www.figma.com/community/file/1485225685820771951
02 Cursor 实现代码
示例提示词:
使用 HTML5 + Tailwind CSS实现 figma UI 设计稿:https://www.figma.com/design/OlXlQokYwC0mCPO2WHxWB4/Pilates-App-Design-(Community)?node-id=1-19&t=PeTjezcU2efZUW4G-4,将生成的全部页面都放到一个 html 中展示。
注意:其中的 figma 链接需要替换成你自己的。
生成过程:
效果展示:
可以看到通过浏览器打开的效果图,基本上是 100% 复刻了 Figma 设计稿。
03 定制化提示词示例
以下是几种常见场景的提示词模板:
场景一:生成React组件
基于Figma设计稿:[Figma链接],使用React和Tailwind CSS实现一个响应式的导航栏组件。请确保实现悬停效果和移动端适配。
场景二:实现特定功能页面
参考Figma设计稿:[Figma链接],使用Vue.js实现用户个人资料页面,包含头像上传、信息编辑和保存功能。请考虑表单验证和提交状态处理。
场景三:多页面应用
根据Figma设计稿:[Figma链接],使用Next.js和styled-components构建一个包含登录、注册、首页和详情页的电商应用原型。
进阶技巧
优化生成代码质量的提示
明确技术栈:在提示中指定具体的框架版本和首选库
分解复杂页面:对于复杂UI,先生成页面骨架,再逐步完善各个组件
提供额外上下文:如品牌风格指南、交互逻辑或API规范
指定代码规范:明确提出代码风格、命名约定或项目结构需求
可以参考文章:Cursor AI 提示词编写技巧总结
集成到现有项目工作流
如果你有一个已经存在的项目,可以使用以下策略集成Figma-Cursor工作流:
组件库映射:告诉AI将Figma组件映射到你项目中已有的组件库
增量开发:一次处理一个页面或组件,逐步集成到现有代码库
代码风格匹配:提示AI分析你的现有代码,以保持一致的编码风格
版本控制整合:为每个Figma设计转换创建单独的分支,便于代码审查
示例提示:
分析我项目中的src/components目录,然后基于Figma设计稿[链接]实现一个新的ProductCard组件,保持与现有组件库风格一致,并使用项目中已定义的颜色变量和间距规范。
常见问题与解决方案
1. 生成的代码与设计稿不匹配
可能原因:Figma节点结构复杂或嵌套层级过深 解决方法:在提示中指定关注特定节点ID或使用组件名称来引导AI
2. 资源引用问题
可能原因:图像或图标无法正确导出 解决方法:使用Cursor的Figma MCP插件自动下载所需资源,或提示AI生成占位资源
3. 响应式设计不完善
可能原因:Figma设计稿只提供了单一分辨率视图 解决方法:在提示中明确要求添加响应式设计规则,或提供多尺寸设计稿的链接
最后
通过Cursor与Figma的结合,设计稿到代码的转换效率得到了质的飞跃。这种工作流不仅加速了前端开发过程,还提高了设计还原的准确性,减少了设计师和开发者之间的沟通成本。
随着AI技术的进步,这种工作流将变得更加智能和高效,未来可能会彻底改变前端开发的传统模式。
Cursor 系列精选阅读
探索我的更多Cursor专题文章,按学习路径排序,助您全面掌握这款AI编辑器:
入门篇
进阶篇
设计与开发实战
欢迎关注我的公众号“Eric技术圈”,原创技术文章第一时间推送。