一小时完成从设计到上线：Augment × Figma Make × MCP，AI 帮你收尾添彩！

大家好，我是二号小明，今天给大家带来的是一个让AI Coding 着色的快速体验。

想必大家都有体验，目前AI Coding很火，很多程序员以及计算机相关专业的人员都在使用AI IDE进行应用编程，但目全球比较强大的claude code 、cursor针对业务代码能力的生成公认还是不错的，但是针对UI方面就很差强人意了。每次因为一些功能都要给它掰扯半天，从而占据了开发者很多业务逻辑的实现时间，最终也很难达到想象的效果。

那近期我尝试了一个新组合：Augment AI Coding + Figma Make + MCP 接口，用时1小时成功构建了一个轻量级的家庭行为监控系统，效果出奇地好。UI 高级、代码干净，体验堪称“丝滑”。

接下来，我会用一篇手把手的保姆级教程，带你完整走一遍从设计到代码融合的流程。

Figma 一个前端设计工具，目前算是顶流的前端设计工具。其功能介绍在这里就不重复再阐述了，做过前端以及产品经理的同学应该都有接触过，通过figma可以进行原型图的设计以及前端界面设计。

目前关于Fimga也出了很多AI的功能，其中 通过Figma Make工作模式可以通过对话的形式直接生成高质量的UI界面，并且可以进行多次对话修改。整体生成的效果还是挺不错。 简单介绍下Figma目前的六种工作模式：

1、Design
核心功能模块，用于 UI 设计和组件构建。绝大多数产品原型和视觉稿都在这个模式中完成。**MCP 只能识别 Design 模式中的元素。**
2、FigJam
协作白板工具，适合头脑风暴、流程图、会议记录等场景。更偏向产品经理或团队沟通使用。
3、Slides
用于创建演示文稿（类似 PowerPoint），适合快速将设计内容转化为展示材料。
4、Buzz
Figma 的协作动态模块，可用于评论、讨论与通知提醒，更适合团队协作时使用。
5、Site
用于构建可视化网页或文档站点，适合文档管理、组件库发布等需求。
6、Make
最新的 AI 生成界面工具，通过提示词或对话，**自动生成高质量 UI**，是目前 AI 设计最关键的入口

本文主要涉及到 Make 和 Design模式的使用，以下将具体介绍使用过程以及转换过程。

一、Figma Make模式，只需要通过自然语言就可以生成精美的UI设计模版。

（1）通过MAKE 工作模式，可以借助AI进行UI设计原型生成，而且MAKE还自带了Reasoing 的过程。示例如下：

设计一个 智能监控系统，分别兼容移动端和pc端。中间是一个实时的监控界面，然后两边是一些功能按钮，如果有异常 会出现报警 之类的

我这里是通过一句话的简单描述，就得到了当前的这个界面。总体感觉还是比较强大，整体界面功能样板、排版以及整个组件之间衔接都比较协调。美观、大气。

（2）MAKE模式还提供了结合实际页面中的内容，进行特性组件选择性生成，针对UI局部样式的修改做的非常细致。

二、将Make生成的UI转换为 Figma Design 模式为后续MCP调用做准备。

官方并没有给出具体的转换组件，通过不断的探索，我们找到一个chrome插件，可以先将make模式的初稿生成一个.h2d格式文件，最后再desgin 中，进行导入即可。

1、插件下载安装，如何安装 html.to.design Chrome 扩展程序？

添加扩展 点击“添加到 Chrome”。

将出现一个弹出窗口，其中包含有关浏览器扩展可以访问的内容的详细信息…单击“添加扩展”继续。

2. 运行扩展程序来捕获您的第一个网页

3、 在 Figma Design 中打开 html.to.design 插件、

（1）新建一个 Design。

（2） 在 Figma Design 中打开 html.to.design 插件

（3）拖放使用 Chrome 扩展程序捕获的 .h2d 文件，或者如果您使用了 Chrome 扩展程序中的“发送到 Figma 插件”选项，则只需转到“扩展程序”选项卡。

（4）### 🎉 在 Figma 中编辑您的网页设计！ 您的 Figma Make 项目已转换为可编辑的 Figma 图层。

三、Augment 配置 FIgma MCP 插件

（1）Augment 的安装就不多说了，本人是通过vs code进行集成的，同样也可以使用cursor进行集成。

mcp配置代码如下：

{
"mcpServers": {
"Framelink Figma MCP": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"figma-developer-mcp",
"–figma-api-key=Your Figma ApIkey,通过官网去注册一个",
"",
"–stdio"
]
}
}
}

Figma MCP 服务安装成功之后，会显示其服务中的一些接口调用方法。

（2）现在Figma Design中将设计稿的内容复制出来，如下图所示：

然后将其链接，复制到Augment中，就可通过MCP服务自动获取该设计稿的所有item元素。

至此，通过Augmet 调用 Figma Make 生成的设计稿过程就结束了，后续就是结合自身的业务逻辑，进行个性化设计。其中Augment也可以外接其他的MCP，比如MYSQL、MONGODB以及其他的工具。帮助我们快速的根据总体设计，建表、存储等。

四、总体效果

总体，整个项目是通过Flutter进行编写的，利用其跨平台的能力以及YOLOv11的相应模型算法，开发出了安卓、IOS以及windows桌面端的家庭行为监控系统。目前已经将windows进行了适配，后续将具体进行功能完善：

我们运行一下，看看还原度如何吧：

总体效果还是不错，还原度挺高。

总结

本文主要的内容是在使用AI Coding 开发的过程，怎样使得前端设计更加的简单、便捷质量更高！着重介绍了以下几点：

（1）设计模式：通过Figma Make工作模式，可以以交互的形式进行UI的整体生成，并可以根据特定的组件进行单独修改，较为方便、便捷且生成质量较高。

（2）模式转换：将Figma Make 转为Design设计稿，可以直接进行修改并且为后续MCP的调用做准备。

（3）整合输出：最后通过Augment进行整合输出，完成整个效果的开发。

希望上述的描述以及教程，对您在AI Coding实际开发过程中，对前端界面的一键式生成、美化、设计有一定的帮助！！