颠覆原型设计!Figma Make 实测:AI 真的能帮你写完前端吗?

颠覆原型设计!Figma Make 实测:AI 真的能帮你写完前端吗?

一、什么是 Figma Make?

Figma Make 是 Figma 于 2025 年在 Config 大会上推出的 AI 驱动的 “Prompt‑to‑App” 工具,可将自然语言描述或现有 Figma 设计稿转换为可交互原型、网页或 Web App,而且支持通过聊天式界面进行迭代修改 (Figma, Figma学习中心)。
它基于 Anthropic 的 Claude 3.7 模型,能结合设计稿元数据生成代码,并允许逐元素编辑样式与交互逻辑 。


二、主要功能与用法亮点

  • 对话式 AI 聊天界面:你可以直接“对话”让 AI 根据提示生成 UI,附加已有 Figma 设计稿以控制视觉风格 (Figma学习中心, Figma)。
  • 导入设计稿生成代码:支持将 Figma 框架粘贴进聊天窗口,AI 基于这些设计自动生成对应的 React/Vue/Flutter 或标准前端代码 (Figma学习中心)。
  • 元素级迭代控制:点击画布中的元素,即可针对该元素提出修改如字体、颜色、交互动效等提示进行调整 (rogerwong.me)。
  • 互动原型与代码预览:AI 生成预览界面可测试 hover、弹窗等交互效果,同时可查看后端可用代码 (nocode.mba, rogerwong.me)。
  • 发布功能(仅全座席订阅用户):部分订阅用户能够将原型发布成 URL 访问的 Web App (The Verge)。
  • AI 积分系统:开放给所有用户试用,但完整功能与无限使用权仅限 Full‑Seat 用户;其他用户有 AI 积分限制 (The Verge)。

三、优点分析

  • 高效原型生成:极大节省了传统提案与原型制作时间,尤其适合快速验证想法。
  • 设计稿还原较高:在结构清晰的设计系统下,生成结果与原始设计对齐度较高,甚至能捕捉 hover 状态等互动逻辑 。
  • 团队协作便捷:设计师与开发者可在同一对话/文件中共同编辑和查看生成结果,实现边设计边编码的协作流程。
  • 未来愿景明确:Figma 致力于将 Make 打造成设计与开发打通的枢纽工具,未来还可能整合可访问性检查、分析反馈、设计系统同步等能力。

四、局限与挑战

  • 不稳定的视觉质量:对于未使用 auto-layout 的“快速草图”设计稿,生成效果可能混乱,字体样式、布局常常不准确 (forum.figma.com)。
  • 决策逻辑偏差:AI 有时会替换设计元素(如将 radio 改为 select),甚至未询问便擅自决定,需更多交互与确认机制 (LogRocket Blog)。
  • 复杂交互与业务逻辑局限:当前还不能生成支付流程或复杂状态管理等业务逻辑,需要人工干预完善代码。
  • 生成代码需优化:自动生成的代码偶有冗余样式、性能问题和可访问性短板,需额外优化处理 。

五、适用人群与场景推荐

场景适合人群说明
快速原型 & 概念验证UI/UX 设计师,产品经理快速把草图或想法转为可交互原型
简单交互页面生成设计者/非技术人员比如登录页、展示页、促销页等
团队协作与设计系统校验跨职能设计+开发团队可提升设计一致性并减少交接误差
AI-assisted 可访问性/QA 自动化未来潜在场景当前仍在预研,实现机制尚未完善

六、发展前景 & 建议

  • 模型与流程优化需加强:增强对复杂 UI 结构和状态逻辑的理解,加入“选择确认”机制以避免 AI 擅自改动设计意图。
  • 开放插件与集成能力:未来可与代码仓库、设计系统管理工具、分析平台深度联动,实现一边设计一边上线的闭环流程。
  • 提升可访问性与质量检测能力:若能集成自动 W.C.A.G 检测与性能优化建议,将大大增强生产可用性。
  • 增强代码输出质量:生成更加简洁、可维护、模块化的前端代码,甚至支持企业风格定义与定制输出。

总结

Figma Make 是一次具有开创性的尝试,它承载了 Figma 将设计、原型与代码三者融合的野心,从“设计驱动开发”出发,探索未来协作的新模式。尽管目前仍处于初期阶段,存在设计解析不准确、逻辑处理欠缺、代码需人工优化等局限,但它已经展现出极大的潜力和愿景。

如果你需要快速验证产品概念、加快设计迭代,或探索 AI 协助开发的可能性,Figma Make 都值得一试。建议在使用时搭配严格的设计系统、设计审核与代码评审,并密切关注未来 Figma 的模型升级与功能拓展。


参考文献

Read more

【AIGC】AI工作流workflow实践:构建日报

【AIGC】AI工作流workflow实践:构建日报

workflow实践 * 引言 * 实现步骤分析 * 实践 * 创建 dify workflow 应用 * 创建工作流内部节点 * 1、设置输入字段 * 2、创建两个LLM节点 * 3、设置结束节点 * 运行工作流 * 结语 引言 工作流 workflow 是现在 LLM 很重要的一个概念,因为对于一个模型来说,非常复杂的问题很难一次性完美解决,而且可能需要很多别的辅助工具。而工作流就是将这些工具和模型组合起来,形成一个完整的解决方案。今天我们来做个工作流实践,帮助读者理解工作流。我们来构建一个帮助我们写日报的工作流。在帮助我们完成日报的填写的同时,我们需要它进行 AI 味的去除,免得出现别人一看就是 AI 写出来的文章的情况。 实现步骤分析 1. 我们需要一个可以构建工作流的平台,这边我们选择 dify 2. 我们需要模型根据我们提供的今天做的事情去自动生成日报 我们需要对刚才生成的文章进行 AI 味的去除 实践 创建

多模态模型Qwen3-VL在Llama-Factory嵌套量化QLoRA训练+测试+导出+部署(Ollama/LMDeploy)全流程--以具身智能数据集open-eqa为例

多模态模型Qwen3-VL在Llama-Factory嵌套量化QLoRA训练+测试+导出+部署(Ollama/LMDeploy)全流程--以具身智能数据集open-eqa为例

前期环境配置等准备可参考教程: 多模态模型Qwen3-VL在Llama-Factory中断LoRA微调训练+测试+导出+部署全流程--以具身智能数据集open-eqa为例 这里数据来源 Open-EQA 多模态具身智能数据集,经过处理每个样本八张图片,划分为训练-验证集和测试集。 若对下载和处理open-eqa数据集代码有兴趣,可以通过网盘分享的文件:OpenEQACode.zip 链接: https://pan.baidu.com/s/1DqmIp1Xw6HJPX77O-iOXdQ?pwd=dgn8 提取码: dgn8 如果不方便下载和处理open-eqa数据集,可以通过网盘分享的文件:OpenEQA8s.zip 链接: https://pan.baidu.com/s/1_6G4YwI5tmYXUSDLssJ13A?pwd=hfvw 提取码: hfvw 1.微调训练 有cuda显卡可以执行pip install unsloth可以安装Unsloth加快训练和推理 执行pip install tensorboard安装保存完整训练过程的数据,避免中断只能部分曲线

AI编程工具对比:Cursor、GitHub Copilot与Claude Code

AI编程工具对比:Cursor、GitHub Copilot与Claude Code

文章目录 * AI编程工具对比:Cursor、GitHub Copilot与Claude Code * 一、产品定位与核心架构 * 1.1 Cursor:AI原生IDE的代表 * 1.2 GitHub Copilot:代码补全的行业标杆 * 1.3 Claude Code:终端Agent的革新者 * 二、核心功能深度对比 * 2.1 代码生成与理解能力 * 2.2 自动化与工作流集成 * 2.3 隐私与数据安全 * 三、成本效益分析 * 3.1 定价模式对比 * 3.2 投资回报比 * 四、适用场景与用户画像 * 4.1 最佳应用场景 * 4.2 用户反馈摘要 * 五、

小白也能玩转AI绘画:Z-Image-Turbo孙珍妮模型入门指南

小白也能玩转AI绘画:Z-Image-Turbo孙珍妮模型入门指南 你是不是也刷到过那些超好看的AI生成明星图,心里痒痒的,觉得“这玩意儿好酷,但我肯定搞不定”?别急着划走,今天我要带你玩转的,就是一款专门生成明星孙珍妮图片的AI绘画模型——Z-Image-Turbo孙珍妮模型。它最大的特点就是简单,简单到就像你平时用手机APP一样,点点按钮就能出图。 这个模型是基于一个叫“Z-Image-Turbo”的强大AI绘画引擎,专门训练了生成孙珍妮风格图片的能力。它已经打包成了一个“镜像”,你可以把它理解为一个已经装好所有软件、设置好所有参数的“软件包”。你不需要懂复杂的代码,也不需要自己训练模型,只要按照步骤启动它,就能立刻开始你的AI绘画之旅。 这篇文章,就是你的专属“说明书”。我会用最直白的话,手把手带你从零开始,把这个模型跑起来,并教你如何写出好的描述,生成你心目中的“孙珍妮”。 1. 环境准备与快速启动 首先,你需要知道,这个模型已经部署在了一个叫“ZEEKLOG星图”的平台上。这意味着你不需要自己准备昂贵的显卡,也不用折腾复杂的安装过程,一切都在云端为你准备好了。