颠覆原型设计！Figma Make 实测：AI 真的能帮你写完前端吗？

优质文章学习记录

— 5 min read
颠覆原型设计！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

VsCode 远程 Copilot 调用 Claude Agent 提示 “无效请求”？参数配置错误的修正

解决 VsCode 远程 Copilot 调用 Claude Agent 提示“无效请求”问题 当在 VsCode 中通过远程 Copilot 调用 Claude Agent 时，若出现“无效请求”错误提示，通常与参数配置错误有关。以下方法可帮助排查和修正问题。 检查 API 密钥配置 确保 Claude Agent 的 API 密钥已正确配置在 VsCode 设置中。打开 VsCode 的设置文件（settings.json），验证以下参数是否完整： "claude.apiKey": "your_api_key_here"
【薅羊毛教程】LLaMaFactory 不用本地跑！免费 GPU，一键微调大模型

【薅羊毛教程】LLaMaFactory 不用本地跑！免费 GPU，一键微调大模型

一、环境 之前介绍过本地部署LLaMaFactory微调平台（https://blog.ZEEKLOG.net/m0_73982863/article/details/159208213?spm=1001.2014.3001.5501），如果你还在为设备问题而烦恼，那就来薅羊毛吧（手动狗头）。 首先注册魔搭社区，绑定个人阿里云账号即可，详情见：https://www.modelscope.cn/my/mynotebook ；然后就可免费获得36小时GPU环境。 8核：CPU有8个核心，主要负责数据的调度和预处理；32GB：内存，数据从硬盘加载后会暂时存放这里；显存24G；（比我自己的老古董好多 T-T） Ubuntu 22.04：Linux操作系统； CUDA 12.8.1：英伟达的并行计算平台。12.8版本意味着它支持最新的RTX

Qwen-Image-Edit-2511与Stable Diffusion对比，谁更适合编辑？

Qwen-Image-Edit-2511与Stable Diffusion对比，谁更适合编辑？ 图像编辑正从“修图工具”走向“语义级视觉重构”，而选择一款真正适合编辑任务的模型，远比选生成模型更考验工程直觉。Qwen-Image-Edit-2511 和 Stable Diffusion（尤其是 SDXL Turbo、SDXL Refiner 及其编辑插件如 Inpaint Anything、ControlNet+Inpainting 工作流）常被拿来比较——但它们本质不同：一个是原生为编辑而生的端到端架构，另一个是以生成为核心、靠插件和提示工程“改造”出编辑能力的通用扩散模型。 本文不谈参数、不列FID分数，而是聚焦一个最朴素的问题：当你手头有一张产品图、一张人像、一张工业设计稿，需要精准替换背景、保持人物不变地换装、给机械结构添加透视线、或让多人合影在风格迁移后仍不“串脸”——哪款工具能让你少调参、少试错、少返工？我们用真实编辑任务说话。 1. 设计哲学差异：编辑即目的，还是生成的副产品？

GitHub Copilot 教程

文章来源：https://vscode.it-docs.cn/docs/copilot/overview.html GitHub Copilot 为 Visual Studio Code 增加了多代理开发功能。规划好你的方法，然后让AI代理在项目中实现并验证代码变更。并行运行多个代理会话：本地、后台或云端。从一个中心视角管理所有角色。内联建议、内联聊天和智能行为会帮助你完成整个编码流程。 代理与代理会话 代理端到端地处理完整的编码任务。给代理一个高级任务，它会将工作拆分成步骤，编辑文件，运行终端命令，调用工具，并在遇到错误或测试失败时自我纠正。每个任务都运行在一个代理会话中，这是一个持续存在的对话，你可以跟踪、暂停、继续或交接给另一个代理。 重要 你们组织可能在VS Code中禁用了代理。请联系你的管理员以启用此功能。 从中央视图管理会话 并行运行多个代理会话，每个会话专注于不同的任务。聊天面板中的会话视图为你提供了一个统一的地方来监控所有活跃会话，无论是本地运行、后台还是云端运行。查看每次会话的状态，切换，查看文件变更，