AI 设计日报 · 2026.03.31

今日头条

本周发布 · 设计系统 · Figma Make

工具更新 · Figma Make

Figma Make Kits：把你的设计系统「喂」给 AI

Figma 正式推出 Make Kits，设计系统团队可将 npm 包、私有代码库、Figma 变量/Token 一次性打包，让 Make 在生成原型时自动调用真实组件，告别「AI 乱用样式」的噩梦。

本周发布 Figma 读全文 →

热度

本周发布 · Figma Make

Figma Make Attachments：把 PRD 直接丢给 AI 就够了

Make 新增 Attachments 功能，支持直接上传 PDF、Markdown、代码文件、图片等，AI 以此为上下文生成原型，再也不用把需求文档手动复制粘贴进 Prompt。

设计工具详情 →

编辑观点

下次写需求文档时顺手导出 PDF，直接 Attach 给 Make，比写 Prompt 更省力，输出也更贴近真实需求。

🔥 热度 85 详情 →

深度资讯

🔥 Beta 开放 · Figma MCP

🔥 Figma MCP Agent 写入 Canvas 进入 Beta：AI 直接操作你的设计文件

通过 Figma MCP Server，Cursor、Claude Code、Copilot CLI 等 AI 编码工具现在可以直接在 Figma 画布上创建和修改设计资产，读取你的组件库后用真实 Token 构建界面，设计与开发的边界正在消失。

编辑推荐：提前注册 Beta，连接 Cursor 试试读全文 →

工具集成 · FigJam

FigJam × Microsoft 365 Copilot：会议记录秒变流程图

FigJam 与 Microsoft 365 Copilot 深度集成，可直接引用 Teams 消息、Word 文档、邮件内容，一键生成流程图、甘特图、时序图，协作效率大幅提升。

趋势洞察详情 →

开源模型 · Google

Google Gemma 4 开源：单卡 H100 跑出前沿水准

Google 发布 Gemma 4 系列开源模型，单张 80GB H100 即可运行，性能媲美 20 倍体量的模型，Apache 2.0 协议比 LLaMA 更宽松，设计工具本地 AI 集成门槛大幅降低。

工具更新详情 →

今日工具

🎨Figma Make🔥 本周最热

📎Make Attachments✨ 新发布

🤖Figma MCP Agent✨ Beta

🌐FigJam Copilot🔗 集成

🚀Google Gemma 4✨ 开源

🇨🇳腾讯 Ardot本月上线

✨Gamma Imagine新功能

🖊️Figma AI规范生成

📐Adobe Firefly v27更新

本周发布Figma Make

Figma Make Kits：把你的设计系统「喂」给 AI

编辑观点

今天就去试！把你们的 Design Token 打包成 Kit，下次让 Make 生成页面时直接用真实色板和组件，省去反复校正的时间。Make Kits 支持 npm 包、私有代码库、Figma 变量/Token，一次配置全团队受益。

名词解释

Make KitsFigma Make 的设计系统集成包，允许团队将 npm 代码包、私有库和 Figma 变量/Token 打包发布，供 Make AI 在生成原型时直接引用，确保输出符合品牌规范。

Design Token设计系统中最小的设计决策单元，如颜色值、字号、间距等，以变量形式存储。Make Kits 可以直接导入 Figma 中定义的 Token，让 AI 生成的界面自动使用正确的设计规范。

怎么用

做新功能原型时

在 Figma Make 中创建 Kit，导入你们的 npm 组件库和 Token，发布后所有成员生成的原型都会自动使用真实设计系统，无需手动替换占位组件

团队协作出原型时

管理员在 Figma Organization 设置中发布 Make Kit，所有成员在 Make 对话框里就能看到并使用，统一出图标准，告别「每个人风格不一样」的问题

可直接使用的 Prompt 点击复制

请基于以下设计系统规范生成一个移动端登录页原型：主色 #FF6B35，圆角 8px，字体 PingFang SC，按钮高度 48px，输入框带浮动 Label 动效。要求符合 iOS 安全区域，包含手机号+验证码两种登录方式，底部有「新用户注册」入口。

本周发布Figma Make

Figma Make Attachments：把 PRD 直接丢给 AI 就够了

编辑观点

下次写需求文档时顺手导出 PDF，直接 Attach 给 Make，比写 Prompt 更省力，输出也更贴近真实需求。支持 PDF、Markdown、代码文件、CSV、图片、视频等格式，几乎覆盖所有项目文档类型。

名词解释

Attachments（上下文附件）Figma Make 的文件附加功能，允许用户将 PRD、品牌规范、代码文件、图片等直接上传到 Make 对话，AI 以此为上下文生成更贴合项目实际的原型和界面。

PRD（产品需求文档）Product Requirements Document，描述产品功能、用户故事、交互逻辑的文档。将 PRD 作为 Attachment 上传给 Make，可以让 AI 直接理解需求背景，生成更准确的设计稿。

怎么用

做竞品分析或需求评审后

将竞品截图和 PRD 文档一起 Attach 到 Make，输入「参考附件中的竞品风格和需求文档，生成首页改版方案」，Make 会综合两份材料输出更精准的设计稿

需要用真实图片替换占位图时

把产品实拍图或品牌素材作为 Attachment 上传，Make 会直接把这些真实图片用到生成的原型里，而不是用灰色占位块

可直接使用的 Prompt 点击复制

我上传了竞品截图和产品需求文档，请参考竞品的信息架构和我们的需求，生成一个电商首页改版方案。要求：突出促销 Banner、商品瀑布流、底部导航栏，风格参考竞品但更简洁，色调使用我们品牌的主色。

Beta 开放Figma MCP

🔥 Figma MCP Agent 写入 Canvas 进入 Beta：AI 直接操作你的设计文件

编辑观点

提前注册 Beta！如果你用 Cursor 写代码，现在可以让它同时帮你在 Figma 里生成对应的设计稿，Design-to-Code 变成了 Code-and-Design 同步。支持 Augment、Claude Code、Codex、Copilot CLI、Cursor、Factory、Firebender、VS Code、Warp 共 9 款工具。

名词解释

MCP Server（模型上下文协议服务器）Model Context Protocol 的服务端实现，允许 AI 工具（如 Cursor、Claude Code）通过标准化协议读写外部应用数据。Figma MCP Server 让 AI 能直接操作 Figma 文件中的图层、组件和变量。

Skills（Figma Agent 技能文件）用 Markdown 写的「给 Agent 的工作说明书」，描述你的设计系统规范、组件命名规则、常见设计模式——Agent 读完后就知道「这个团队的设计是怎么做的」，生成结果更符合标准。

怎么用

用 Cursor 开发新功能时

在 Cursor 中连接 Figma MCP Server，输入「根据我们的设计系统，在 Figma 中创建一个用户资料页的设计稿，包含头像、昵称、统计数据三个区块」，AI 会直接在你的 Figma 文件里生成符合规范的设计

想让 AI 生成符合设计系统的界面时

先在 Figma 中写好 Skills 文件（描述你的组件规范），然后在 Claude Code 里说「按照 Skills 文件里的规范，帮我生成一个数据看板页面」，输出会直接用你的真实组件

可直接使用的 Prompt 点击复制

连接 Figma MCP，基于我们的设计系统（已在 Figma 中定义了 Primary/Secondary 颜色变量和 Button/Card 组件），生成一个数据看板页面设计稿，包含：顶部统计卡片×4、折线图区域、数据表格，风格简洁专业。

工具集成FigJam

FigJam × Microsoft 365 Copilot：会议记录秒变流程图

编辑观点

下次开完需求评审会，直接把会议记录丢给 Copilot 生成流程图，比手画快 10 倍。FigJam 现在可以引用 Teams 消息、Word 文档、邮件内容，几乎覆盖了所有会议场景的输入来源。

名词解释

Microsoft 365 Copilot微软将 GPT-4 级 AI 集成到 Office 全家桶（Word/Excel/Teams/Outlook）的 AI 助手，可理解和生成文档、邮件、会议摘要等内容，现已与 FigJam 打通，可直接在 FigJam 中引用 Office 内容生成图表。

FigJam 图表类型Copilot 可在 FigJam 中生成流程图（Flowchart）、甘特图（Gantt Chart）、时序图（Sequence Diagram）、状态图（State Diagram）四种类型，覆盖大多数产品设计和项目管理场景。

怎么用

做项目流程梳理时

在 FigJam 中打开 Copilot 插件，粘贴需求文档或 Teams 会议记录，选择「生成流程图」，Copilot 会自动识别步骤和判断节点，生成可编辑的标准流程图

需要快速出用户旅程图时

把用户访谈记录或产品文档粘贴给 Copilot，让它生成时序图，再在 FigJam 里手动补充情绪曲线和痛点标注，比从零开始画快很多

可直接使用的 Prompt 点击复制

根据以下需求描述生成用户注册流程图：用户进入注册页 → 填写手机号 → 发送验证码 → 验证成功 → 填写基本信息 → 提交 → 系统审核（通过/拒绝）→ 发送结果通知。要求包含判断节点和异常分支（验证码错误、手机号已注册）。

开源模型Google

Google Gemma 4 开源：单卡 H100 跑出前沿水准

编辑观点

关注一下！Gemma 4 的开源意味着更多设计工具可以低成本集成本地 AI，未来 Figma 插件跑本地模型不再是梦。Apache 2.0 协议对商业应用非常友好，中小团队可以直接拿来用。

名词解释

Apache 2.0 协议一种宽松的开源软件许可证，允许用户自由使用、修改、分发代码，包括商业用途，无需开放修改后的源代码。相比 Meta LLaMA 的社区许可证，Apache 2.0 对商业应用更友好。

Gemma 4Google 发布的第四代开源 AI 模型系列，单张 80GB H100 GPU 即可运行，性能媲美 20 倍体量的模型，支持函数调用（Function Calling），适合边缘设备和本地部署场景。

怎么用

评估 AI 工具集成方案时

下载 Gemma 4 的 4B 指令微调版本，在本地测试设计描述转 JSON 结构的能力，如果效果满足需求，可以用它替代 API 调用，降低成本并保护数据隐私

想给 Figma 插件加 AI 能力时

用 Gemma 4 的 4B 模型作为本地推理引擎，开发「设计规范检查」「颜色无障碍建议」等插件功能，无需调用外部 API，用户数据不出本地

可直接使用的 Prompt 点击复制

将以下设计描述转换为结构化 JSON 组件树：一个移动端商品详情页，顶部是轮播图（3张），下方是商品名称（大标题）、价格（红色强调）、规格选择（标签组）、数量选择器、加入购物车按钮（固定底部）。