AI时代有手就能实现前端零代码(Figma Make + Figma MCP)

一：Figma Make

1.1 简介

Figma Make是Figma官方推出的AI原生设计功能，深度集成于Figma编辑器中，无需额外安装插件或切换平台，即可实现"Prompt→UI界面/Code"的即时生成。

产品特性	适用场景
支持关联Figma组件库，生成符合团队设计规范的页面	0~1，快速搭建产品原型
支持自然语言对生成的设计稿进行微调	1~n，对已有页面进行修改迭代
支持设计稿二次编辑	快速生成可交互的demo
支持一键发布查看demo	设计稿前端通过Figma MCP生成前端页面
协作便捷，支持团队内协同

1.2 步骤

1.在 Figma 内打开 Figma Make → 2.关联组件库 → 3.输入描述需求 → 4. 生成完毕 → 5. 可以继续通过 Prompt 继续调整，或者在 Figma 文件中编辑

1.2.1 在 Figma 内打开 Figma Make

1.2.2 关联组件库

1.2.3 输入描述需求

复制代码

生成适配1440x900分辨率的企业级PC中台UI，统一采用「顶部导航栏+左侧侧边栏+中间内容区」经典布局全局规则
1.左侧新增「人员信息管理」一级菜单，选中高亮;
2.列表编辑跳转详情页，详情页返回按钮回列表;
3.仅展示迁移岗位人员数据，列表顶提示:"非迁移岗位人员请用XMS操作"(灰色);
4.仅店长/经理/厂长/主管/库房经理可见「离职」按钮，点击弹确认弹窗(确认/取消);
页面1(人员信息管理列表页，复用工程师档案布局)：
-字段:米聊号、姓名(新增)、手机号(前3+后4，中间****)、身份证号(仅前4，其余****)、实名认证/工作状态、小米工龄;
-功能:顶部搜索(米聊号/姓名)+筛选(实名认证/工作状态);行右侧默认「编辑」，指定角色加「离职」;

Prompt书写技巧

提示词结构：

1、生成分辨率 + 2、页面布局描述 + 3、页面功能信息结构展示 + 4、页面样式（字号、间距）

基础规范

规范类别	详细描述
生成分辨率	生成适配 1440×900 分辨率的企业级 PC 中台 UI
页面布局描述	统一采用「顶部导航栏 + 左侧侧边栏 + 中间内容区」经典布局
页面功能信息结构展示	页面 1（人员信息管理列表页，复用工程师档案布局）

全局规则

规则编号	规则描述
1	左侧新增「人员信息管理」一级菜单，选中高亮
2	列表编辑跳转详情页，详情页返回按钮回列表
3	仅展示迁移岗位人员数据，列表顶提示："非迁移岗位人员请用 XMS 操作"（灰色）
4	仅店长 / 经理 / 厂长 / 主管 / 库房经理可见「离职」按钮，点击弹确认弹窗（确认 / 取消）

页面详情

字段信息

字段名	描述
米聊号	-
姓名	新增
手机号	前 3 + 后 4，中间 ****
身份证号	仅前 4，其余 ****
实名认证 / 工作状态	-
小米工龄	-

功能信息

功能类别	详细描述
搜索功能	顶部搜索（米聊号 / 姓名）
筛选功能	筛选（实名认证 / 工作状态）
操作按钮	行右侧默认「编辑」，指定角色加「离职」

样式规范

样式类别	详细描述
表格样式	表头加粗，奇偶行背景（浅灰 / 白），hover 行背景加深，行高适中

设计规范

规范类别	详细描述
控件样式	按钮、输入框、下拉框等遵循 HiUI Design 5.0 规范，圆角适中， hover / 点击状态有明显视觉反馈
文字样式	标题字号 16px 加粗，字段标签字号 14px，内容文字字号 14px，提示文字字号 12px 灰色
间距规范	模块间距 24px，字段间距 16px，内边距 16px，保证页面整洁有序

1.4.4 生成完毕

直接生成了可交互的还有完整的前端代码。

1.2.5 可以继续通过 Prompt 继续调整，或者在 Figma 文件中编辑。

点击选择按钮（左边最下面Point and edit），选中单个元素直接编辑(例如选中表头：身份证号)，或者输入提示词编辑。

复制代码

身份证号前4位明文，后4位明文，中间用*表示

1.2.6 复制设计 copy design

将生成的UI设计稿粘贴到自己的页面中。

1.2.7 发布

将生成的页面发布后其他人员可以访问。

二：Figma MCP

2.1 开启开发模式

在底部工具栏切换到dev mode。

2.2 设置Figma MCP

在Figma右侧面板中开启MCP server。

选择客户端，这里选择Cursor。

配置Cursor，需要认证（会自动打开认证页面，确认即可），认证成功后会显示绿点。

javascript 复制代码

{
  "mcpServers": {
    "Figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

认证成功后Figma右边属性面板会显示所认证的客户端。

2.3 复制设计稿地址

复制页地址（页面要打开dev mode）如https://www.figma.com/design/gTsa9ZAvH6Vh5cmsmNLYP2/人员信息管理?node-id=0-1\&m=dev

2.4 创建前端项目并实现设计稿页面

在Cursor打开一个空的文件夹如figma-demo，输入以下提示词，静等佳音。

javascript 复制代码

使用vue + typescripe + npm 创建一个vue项目，
并使用Figma mcp 实现该页面https://www.figma.com/design/gTsa9ZAvH6Vh5cmsmNLYP2/%E4%BA%BA%E5%91%98%E4%BF%A1%E6%81%AF%E7%AE%A1%E7%90%86?node-id=0-1&m=dev,
实现完成后运行该项目

三：学习资源

Figma 从入门到精通 https://edu.mioffice.cn/clientcn/course/5408
Figma 从入门到进阶 https://edu.mioffice.cn/clientcn/course/5327
Figma 基础教程 https://edu.mioffice.cn/clientcn/course/17921