top of page

Google Stitch 将 AI 设计演示转化为 Figma 焦虑

6月16日
讀畢需時 9 分鐘

Google Stitch 本周发布,作为一款 AI 画布,可将文本提示转化为交互式设计原型。

此次发布立即给依赖 Figma 进行日常迭代的设计师带来了压力。许多人现在在思考,当 AI 工具能够跳过早期步骤时,他们现有的设置是否仍有意义。

Google Stitch 位于更广泛的 Google Labs 环境中,并直接连接到其他 Google AI 服务。用户输入屏幕或流程的简短描述,然后系统会生成可编辑的组件,这些组件的行为类似于真实界面。

这种方法与 Figma 在一个明显方面不同。Figma 从空白画布和手动放置开始,而 Google Stitch 从生成的输出开始,然后由设计师进行细化。

提示到原型的流程

设计师输入一个目标,例如“健身应用的结账屏幕,包含支付选项和进度条”。Google Stitch 会在几秒钟内返回一个可工作的演示。

输出包括布局建议、颜色令牌和基本交互逻辑。用户随后可以拖动元素或编辑文本,而无需从零开始。例如,描述金融科技产品多步骤入职流程的提示会生成带有滑动手势、条件按钮和模拟 API 响应的占位符数据的屏幕。设计师报告称,与在 Figma 中的传统线框会话相比,每个初始概念可节省 45-60 分钟。

在 X 上流传的早期剪辑显示,该工具能够处理响应式状态和简单动画。演示看起来足够精致,可以在利益相关者会议中分享。在一个广为流传的示例中,一家 B 轮初创公司的产品经理提示了一个包含变体选择器和添加到购物车微交互的电子商务产品详情页;生成的原型通过了内部审查,无需任何手动布局工作。

该系统还利用 Google 的 Gemini 模型自动推断无障碍要求。对比度、ARIA 标签和键盘导航路径默认添加,这是 Figma 用户通常通过单独插件或手动审核来处理的功能。这种内置合规层减少了从探索到可测试工件的摩擦。

使用该工具的团队描述了一种混合节奏:上午用于提示多个发散概念,下午则专注于将最强的元素合并为一个方向。速度鼓励更广泛的探索;设计师曾经一天产生三个选项,现在在收敛之前 regularly 测试八到十个变体。

除了单屏提示外,Stitch 还支持链式流程,模拟完整的用户旅程。设计师可以从 SaaS 仪表板的顶级提示开始,然后跟进细化,例如“为管理员与贡献者添加基于角色的视图”,而无需重置画布。每次迭代都会保留之前的交互状态,允许增量复杂性,而不会出现 Figma 中管理数十个画板副本时常见的版本扩散。这种链式功能在产品需求每天变化的敏捷环境中特别有价值。

第二个具体演练涉及旅行预订移动流程。提示“带有日历选择器、价格过滤器和地图集成的航班搜索界面”会生成四个链接屏幕,包括动画过渡和模拟后端调用返回真实结果。设计师可以在会话中切换深色和浅色模式,模型在整个旅程中保持令牌一致性。这种即时性将过去需要一个下午的资产组装压缩到不到五分钟的提示细化。

与 Google 更广泛 AI 生态系统的集成

Google Stitch 直接连接到 Vertex AI 和 Google Cloud 存储,允许提示原型从生产端点拉取实时数据。设计师可以在演示期间引用实际用户配置文件或库存水平,而不是依赖静态模拟。这种能力使其区别于孤立的原型工具,并提高了早期验证会话的质量标准。根据 Google,实时数据连接现在已成为快速原型工作流程的标准。

画布还可一键将组件导出到 Google 的 Material 3 库。当提示引用存储在共享 Google Sheet 中的品牌颜色时,令牌值保持同步。已经投资于 Google Workspace 的较大组织无需额外配置即可立即受益。

开发者可以将生成的交互逻辑分叉到 Android Studio 或 Flutter 项目中。交接包括间距、排版比例和动画曲线的注释规范,在许多情况下将传统设计师-工程师翻译期从几天缩短到几小时。当原型引用实时库存数据时,导出的 Flutter 代码包含占位符 API 客户端存根,开发者可以用最少的编辑将其替换为生产端点。

其他连接扩展到 Google Analytics 和 Firebase。提示可以包括性能阈值,例如“针对 3G 加载时间优化在两秒以下”,Stitch 会建议符合这些指标的简化布局或延迟加载模式。这种数据驱动的生成层帮助团队将早期概念与可衡量的业务目标对齐,而不是仅凭美学直觉。

一个更深入的集成示例显示 Stitch 引用了公司现有的 BigQuery 用户行为数据集。提示“推荐减少 55 岁以上用户流失的入职屏幕”会生成三个变体,侧重于更大的点击目标和更简单的语言;每个变体都带有直接从历史数据中提取的预测完成率。

技术架构和模型选择

Stitch 的核心结合了 Gemini 的多模态推理和专门针对界面生成调整的扩散管道。该模型首先将提示解析为分层组件树,然后应用从数百万个 Material 和 Android 界面中学习到的布局先验。令牌级控制允许团队锁定特定的品牌变量,使输出永远不会偏离规定的字体或间距比例。

由于该系统在 Google 的沙箱画布内运行,即使对于五屏流程,延迟也保持在三秒以下。熟悉底层 API 的工程师指出,Stitch 公开了 Vertex AI 中可用的相同参数旋钮,让高级用户可以调整温度和 top-p 值,以增加或减少生成布局中的惊喜。

Figma 用户面对转变

Figma 长期以来一直占据界面设计的默认位置。其实时协作和组件库已成为行业标准,如 The Verge 所述。

Google Stitch 尚未匹配这些深度功能。它反而专注于项目开始时的速度。这种狭窄的焦点造成了当前的焦虑。

花费数小时构建初始探索的团队现在看到了更快达到相同点的途径。问题在于后期工作还有多少需要 Figma,或者整个流程是否会改变。几个设计系统团队已经开始并行轨道:一个组使用 Stitch 进行快速概念验证,而另一个组维护规范的 Figma 库用于生产资产和设计系统治理。

企业账户报告了对版本控制的焦虑。Figma 的分支和文件历史已深深嵌入受监管行业所需的审计流程中。Stitch 当前的保存机制依赖于 Google Drive 修订版,缺乏许多团队已经习惯的细粒度组件级差异。

然而,心理转变可能比技术差距更重要。曾经花费数月完善布局基础的初级设计师现在想知道提示制作是否会成为主要技能。相比之下,高级设计师将 Stitch 视为随时可用的研究助手,它能提出他们自己不会考虑的非常规布局想法。

比较分析:Stitch 与 Figma 核心功能

Figma 擅长详细的组件架构、自动布局约束和允许多个贡献者同时编辑的多玩家光标。Google Stitch 目前支持最多四名同时编辑者,并且缺乏跨断点的比例调整等高级约束。

另一方面,Stitch 的生成优势可以从一个句子创建整个响应式网格。提及“仪表板的平板和移动断点”的提示会立即生成三个链接画板,具有适当的列数。Figma 用户仍必须手动复制和调整框架,或依赖通常需要额外设置的社区插件。

对于超过十人的团队,协作深度仍是 Figma 的优势。然而,许多组织在项目的前 20% 期间只需要轻量级反馈。Stitch 的评论和共享链接与 Google Chat 集成,在无需每个利益相关者打开 Figma 的情况下提供足够上下文。

早期采用者的真实案例研究

一家健康科技初创公司用一次 90 分钟的 Stitch 会话取代了两天的启动研讨会。设计主管在利益相关者观看直播时输入了八个不同的提示;最终合并的原型导出到 Flutter,并在当天下午交给工程师。该公司报告称,比上一个项目提前两周达成内部共识。

一家运行受监管重新设计试点的企业银行使用 Stitch 进行面向客户的流程,同时保留其 Figma 文件作为设计系统的单一事实来源。每周审计将 Stitch 输出与系统令牌进行比较,发现 42 个屏幕中只有七个令牌需要手动更正。

设计团队的实际影响

早期采用 Stitch 的团队报告称,每周将 15-20% 的时间从线框绘制重新分配到用户测试和利益相关者对齐。时间节省在多周项目中累积,使产品团队能够在承诺高保真构建之前进行额外一轮可用性研究。

设计经理正在修改职位描述,以包括提示工程流利度。作品集审查现在要求候选人演示 AI 生成的原型,并解释他们随后进行的细化。这种变化比静态模型审查更清楚地揭示了解决问题的能力。

预算讨论也发生了转变。以前为每位承包商分配许可席位的组织现在评估临时 Stitch 访问加上较小的 Figma 核心团队是否足够。早期试点表明,短期项目的席位数量减少了 10-15%。

局限性和风险

生成的原型带有通常的 AI 弱点。当用户偏离建议流程时,复杂逻辑路径经常中断。

跨屏幕的组件一致性也需要手动清理。即使在相同提示之后,颜色和间距有时也会在视图之间漂移。这些差距意味着该工具仍需要熟练的设计师来完成将要发布的作品。它加速了早期草稿,而不是最终生产资产。

其他担忧包括当提示引用专有功能时的数据泄露风险。尽管 Google 提供了企业控制,但许多法律团队尚未完成审查。可能改变生成逻辑的提示注入攻击仍然是一个未经测试的攻击面。

过度依赖该工具也可能削弱新设计师的基础布局直觉。应对此风险的团队会在每个冲刺中安排故意的“仅手动”日,以保留核心工艺技能。

对设计教育和技能发展的影响

设计学校已经在更新课程以应对 Stitch 等工具的到来。曾经以铅笔和纸张线框图开头的工作室课程,现在纳入了提示优化工作坊,学生们学习用自然语言指定布局约束、交互逻辑和无障碍要求。教职员工表示,掌握提示迭代的学生在一个学期内完成的迭代次数,超过了以往学生在整整一年中实现的次数。

大型组织内部的职业发展项目也反映了这一转变。内部训练营现在包含评估 AI 生成组件的品牌一致性和技术可行性的模块。之前专注于像素级完美执行的设计师,正在接受再培训,转而担任策展人,评估、组合并扩展机器生成的方向。

对设计工具市场的经济影响

采购部门的许可谈判现在将“AI 画布额度”与传统席位并列为单独项目。分析师预测,到 2027 年,AI 辅助原型设计市场可能达到 12 亿美元,这将从纯手动工具中转移支出,数据来源于 Bloomberg。Figma 已开始提供自己的生成式功能测试版,这表明订阅定价可能很快会同时捆绑人工驱动和提示驱动的容量。

常见问题

Stitch 是否完全取代 Figma?

不会。它加速了初始探索和验证,但缺乏生产交接所需的成熟组件系统、版本历史和广泛协作功能。

Stitch 如何处理品牌指南?

用户可以引用共享的 Google Sheets 来获取颜色、排版和间距令牌,模型会在提示中出现这些约束时遵守它们。

现有 Figma 文件会怎样?

它们保持不变。如果团队选择继续在 Figma 中进行下游工作,可以通过标准图像或组件粘贴工作流将 Stitch 输出导入 Figma。

团队在下一季度关注什么

Google 尚未发布使用数据或定价细节。观察者将关注设计机构和产品团队的采用数量。

Figma 已在自己的路线图中宣布了新的 AI 功能。这些更新与 Google Stitch 功能的直接比较将明确实际差异。

企业安全审查也很重要。许多组织对设计工作实施严格的访问规则,新的 AI 画布必须通过这些检查才能更广泛使用。

需要跟踪的信号仍然简单。如果团队开始通过 Google Stitch 路由早期概念,仅在交接时移至 Figma,工作流压力就会增大。如果大多数人仍从第一次点击就默认使用 Figma,焦虑就会消退。

接下来关注什么

关注 Google Labs 和 Figma 博客的公告,了解功能对等更新。关注在 Config 和 Google I/O 等会议上分享的设计系统案例研究。跟踪您自己组织内招聘模式和工具预算的变化,这是持久工作流演变的最可靠指标。对于探索互补 AI 驱动文档工具的团队,remio 等资源提供了实用参考。

 
 

免费开始使用

一款本地优先的AI助手

为了获得更好的人工智能体验,

remio 目前仅支持Windows 10+ (x64)M-Chip Mac

你的 AI 工作伙伴

remio 一起高效工作

规划、创作、交付

一站式完成

bottom of page