供稿来自：@徐晨皓
随着人工智能技术的不断发展，AI 辅助编程工具逐渐崭露头角，为开发者带来了全新的开发体验和效率提升。Cursor 作为其中一款备受关注的工具，其功能是否真的如宣传般强大，本文将从前端开发视角出发，重点聚焦于图生代码功能在 ToC 和 ToB 项目中的表现，同时还涉及了 Figma MCP 接入方面内容，为开发者提供有效的使用参考。
图生代码
在前端开发实践中，将设计稿或原型图转化为代码是一项关键且耗时的任务。Cursor 的图生代码功能旨在简化这一流程，通过导入设计稿或原型图，自动生成相应的代码结构和组件，为开发者节省时间和精力。下面通过一个 ToC 项目和一个 ToB 项目，简单介绍该功能的实际表现。
ToC项目
背景
本迭代的推书运营活动页面由宣传横幅区域和书籍推荐列表区域构成。该页面的设计稿如下图所示，其布局和内容旨在吸引读者关注并引导阅读。
实践
将设计稿图片导入 Cursor，期望其生成对应的结构布局和组件拆分代码，最好能实现样式设置以还原设计稿。导入后，Cursor 生成的布局结构与设计稿对比如图 2 所示。
从生成结果来看，Cursor 生成的结构布局与设计稿较为契合（样式上并没有还原）。这一特性在日常开发中意义重大，显著提升了 HTML 代码的开发效率。开发人员无需从头构建页面结构，需依据设计稿，有针对性地补充和调整 CSS 样式代码，大大简化了开发步骤，加快了项目交付速度 。
组件拆分情况
组件拆分：Cursor 做到了良好的拆分，将页面拆分为 Banner.vue、BookItem.vue、BookList.vue 等组件
总结
以设计稿上存在的元素为基准，判断 Cursor 通过图生成的结构的完成情况，其完成度可为🌕🌕🌕🌑。这表明 Cursor 在图生代码方面，能够较好地满足项目的初始化结构以及组件的划分，但对于样式这类细节，仍有很大的提升空间。
ToB项目
背景
本迭代的一个简单表单弹窗，其原型图如下图所示，主要用于修改盖章人信息。
实践
将原型图导入 Cursor，要求使用 vue2 + element-ui 生成对应的代码结构。Cursor 处理后的代码及生成结果如下图所示。
总结
从生成结果来看，虽然生成的样式与原型图存在差异，但在功能上两者保持一致。在 ToB 项目中，功能往往是首要考虑因素，样式问题在大多数情况下可以通过沟通解决。
MCP接入
在图生成代码的过程中，当前的操作流程较为繁琐，需要先将设计稿或原型图导出，再导入到 Cursor 中，方可生成代码。而且，由于不同模型对图片的识别与解析能力参差不齐，这一过程在准确性和效率上存在很大的提升空间。那么，是否存在一种更为便捷高效的方式，无需进行图片的导入与导出操作，就能直接为 AI 模型提供设计稿或原型图的上下文，让模型更为精准地理解需求细节呢？答案是肯定的。通过接入对应设计工具的 MCP，能够直接为 Cursor 提供设计稿文件的布局信息，显著提高 AI 编码生成代码的准确性与效率。
背景
我们将以 Figma - MCP 接入为例，对设计工具的 MCP 接入流程，以及在具体开发过程中的实际表现展开简要介绍。在此之前，先为大家详细讲解 Figma 以及 MCP 的相关知识，帮助大家更好地理解后续内容。
Figma：一款界面设计工具，用于UI 设计、原型设计等场景MCP：模型上下文协议（Model Context Protocol），提供了一种标准化的方法来为模型提供上下文。Figma-Context-MCP：一个 MCP（Model Context Protocol）服务器，旨在向 AI 编码代理（例如 Cursor）提供 Figma 文件的布局信息，以提高 AI 编码代理基于 Figma 设计生成代码的准确性和效率
接入流程
查看项目文档
项目地址：https://github.com/GLips/Figma-Context-MCP
生成figma-key
figma地址：https://www.figma.com/
启动本地MCP
替换<your-figma-api-key>为上述key
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>node版本: > 18.0.0
启动成功
Cusrsor添加MCP
该MCP Servers会提供两个tools：get_figma_data以及dowload_figma_images，会为Cursor提供设计稿的内容上下文以及下载对应设计稿功能。
实践
由于目前项目中，figma上暂无对应的设计稿以及原型图。因此，本次主要对后台常用的Table页面进行实践。（需要使用agent模式）
表格页原型图
通过接入 Figma-MCP，Cursor 会调用 Figma-MCP提供的get_figma_data tool，能够精准解析页面元素的上下文关系。针对各类交互设计，Cursor 还能自动抛出相应事件，为开发者开展业务逻辑开发提供便利。在处理后台页面时，这一功能极大地简化了开发流程，有效提升了开发效率。
总结
本次分享聚焦于前端领域，体验了 Cursor 在图生代码以及接入 Figma-MCP 生成代码方面，于实际开发流程中的表现。在页面初始化阶段，Cursor 作为AI 辅助编程工具，能够较好地构建页面的整体布局，合理地进行组件划分，并高效地完成事件抛出等关键任务，为后续开发奠定了坚实基础。然而，在面对诸如精细的样式设计以及复杂的业务逻辑等细节性问题时，还有较大的提升空间，仍需我们开发者凭借专业知识与经验逐步处理。尽管如此，从宏观的开发流程来看，Cursor 的介入无疑极大地简化了开发步骤，显著加快了项目的交付速度，为前端开发工作带来了更高的效率与价值。以上便是我对 Cursor 在前端开发流程中表现的一些简单实践，若内容存在偏差，或持有更优见解，欢迎大家一起沟通讨论。