【笔记】Figma 和 AIGC（持续）
内容提要
本文介绍Figma与AIGC结合的应用现状。Figma是云端协作设计工具，支持多人实时编辑。当前AI能力包括：通过Chrome插件爬取网页生成Figma设计稿（复刻率达90%），以及用自然语言生成设计稿（如Figma AI、Google Stitch）。反向的Figma转代码功能也在发展，如Figma官方Sites和Figma MCP，但复杂场景仍需调整。整体AI辅助设计正快速进步。
延伸解读
复刻网页的实用路径
文章指出，通过Chrome插件抓取网页UI信息并导入Figma生成设计稿，目前对UI界面的复刻率可达90%，已具备实际应用价值。这一路径主要依赖开源工具如BuilderIO的html-to-figma，流程清晰：先抓取页面生成JSON文件，再在Figma中导入。对于需要快速还原现有页面的场景，这比手动重绘效率更高，但需注意复杂交互和动态内容可能无法完全还原。
AI生成设计稿的现状与局限
自然语言生成设计稿是当前热点，Figma官方AI和Google Stitch等工具已能输出可编辑的设计稿，但文章强调其能力目前仅适用于简单或通用场景，复杂页面仍需大量人工调整。这意味着设计师可以借助AI快速产出初稿，但最终效果依赖人工打磨。对于追求高保真或特定设计规范的项目，AI生成结果可能不够精准，需谨慎评估其适用性。
Figma转代码的成熟度差异
文章对比了Figma官方Sites和Figma MCP两种转代码方式，指出它们均适用于静态页面或官网场景，但复杂场景仍需代码调整。这表明当前AI辅助前端开发已能处理基础布局和样式，但涉及动态交互、复杂逻辑时，仍需开发者介入。对于快速搭建静态页面原型，这些工具可提升效率，但生产级代码仍需人工优化。
Q&A
Figma是什么？它有哪些主要功能？
Figma是一款基于云的协作式界面设计工具，支持多人实时编辑，适用于UI/UX设计、原型制作及设计交付。它提供矢量绘图、组件库、交互动画等功能，支持跨平台使用（网页/桌面端），实现团队高效协作与版本管理。
如何通过Chrome插件将网页复刻为Figma设计稿？
使用Chrome插件（如BuilderIO的HTML to Figma）爬取网页UI信息，生成JSON文件，然后在Figma中安装对应的Figma插件（如Builder.io的Figma插件），上传JSON文件即可生成设计稿。目前UI界面复刻率可达90%。
有哪些工具可以通过自然语言生成Figma设计稿？
Figma官方推出了Figma AI，Google推出了Stitch，此外还有各类Figma插件。用户只需输入一句话或一段话，即可生成设计稿，并支持复制到Figma中编辑或导出代码。
Figma设计稿转前端代码有哪些方式？目前效果如何？
主要有两种方式：Figma官方推出的Figma Sites，以及非官方的Figma MCP（如Framelink）。目前静态页面和官网场景可应用，复杂场景仍需代码调整，能力正在发展中。
Google Stitch是什么？它有什么特点？
Google Stitch是Google推出的设计Agent，只需输入一句话或一段话，即可输出生产级别的UI设计稿，并支持直接复制粘贴到Figma中进行二次编辑，或导出相应代码。
除了直接爬取网页，还有哪些方法可以生成Figma设计稿？
还可以借助Cursor/Windsurf等AI IDE，让模型分析代码并生成Figma设计稿，但需要模型支持多模态，一般可使用Claude 3.x/4。
