Software 2.0

体验Google Stitch的四大新功能

admin -

Stitch几天前推出了重大更新，我的社交媒体feed是这样的：

  • "Google Stitch vs. Figma。结束了。"*
  • "Google的新vibe design工具太疯狂了。"*
  • "设计师要完蛋了吗？"

我从Galileo AI时代就开始使用Stitch了，那时Google还没收购它。看着它自去年12月以来发展得如此之快，真是令人震惊。

我在另一篇文章中解释了Stitch的设计工作流，但考虑到这些升级，我想在今天给出一个详细的演示并分享我的印象。

让我们开始吧。

0. 概述

Google Stitch是一个AI驱动的设计平台，可以从提示词生成高保真界面。使用Google账户即可免费使用。

我认为它是一个非常鼓舞人心的"vibe design"工具，市场上很少有产品能做到Stitch所做的。对于设计头脑风暴来说特别容易使用。

不过，作为设计师，我经常希望Stitch能为我们的专业用途提供更多严谨性。但随着这些最新升级，对于结果有更多控制的潜力巨大。

在本文中，我将介绍最令人兴奋的功能。

1. 快速原型设计

在这次升级之前，这个功能非常基础，所以我很少使用。正如我在另一篇文章中提到的，我经常将Stitch中的界面导出到Google AI Studio进行进一步原型设计。但现在Stitch内部提供了更多功能。

你右键点击一个界面（或者你可以称之为画框），然后选择"Instant Prototype"（即时原型）。

或者，当你选择一个界面时，顶部会出现一个工具栏。然后你可以点击"Generate"（生成）并从那里选择"Instant Prototype"。

接下来，你会被拉入一个专门的原型设计视图，这很棒，消除了所有干扰。

1.1 生成原型

从左侧面板中，你可以选择画布上的另一个现有界面，或者要求Stitch想象一个新界面作为流程的一部分。

此外，得益于几周前推出的"Direct Edit"（直接编辑）功能，你甚至可以选择界面的一个组件，并对该特定组件有四个操作：

  • 点击此组件后想象一个新界面
  • 连接到现有界面
  • 用AI修改
  • 编辑文本

不过需要注意的是，这种想象可能非常"富有想象力"。对于快速构思来说快速且直观，但同样，作为设计师，我通常追求更高的精度和每次生成背后的意图，所以我仍然希望能有更多控制。

也就是说，你始终可以使用界面底部的"Edit with AI"（用AI编辑）功能，在那里你可以提供具体指令。

1.2 分享原型

另一个有趣的功能是，如果你在"Share Project"（分享项目）设置中启用公开分享原型，其他人也可以查看和重新混合设计。

除了可分享的链接外，你还可以生成二维码，这使得在手机或iPad上查看可点击原型非常方便。

我用手机测试了一下。很方便，能看到响应式设计。我也可以在手机上点击浏览原型。

2. 设计系统

这是另一个令人兴奋的功能。过去，Stitch可以根据现有设计的风格生成东西，但我们无法控制它。现在有了创建和定制设计系统的方法。

所以如果你在Stitch中选择界面，你可以点击"Modify"（修改）在下拉菜单中找到"Design System"（设计系统），然后你可以通过三个选项创建设计系统：

  • 从零开始创建新设计系统
  • 从你选择的界面创建
  • 从网站导入

2.1 从你选择的界面创建

我跳过"从零开始"选项，因为它与从选定界面创建选项非常相似。

有两个面板：

  • Theme（主题）：你可以在那里创建调色板。
  • DESIGN.md：你可以提供自定义指令。

很高兴看到DESIGN.md在那里，这也是其他AI工具的趋势。它为人们使用特定指令来控制结果开辟了更多潜力。

创建后，我喜欢的是你会看到设计风格面板自动创建并放置在画布上供参考。

2.2 从网站导入

我对这个功能很兴奋，但当我试用时，它还有bug。Stitch思考了很长时间，结果出现了这条消息：

"看起来我在尝试从网站创建该自定义设计系统时遇到了临时技术限制。"

3. AI原生画布

3.1 导航

与之前左侧面板相比，这是一个重大变化。

它有一种"智能体感"，我花了一段时间才适应。

与其他AI工具典型的聊天记录面板不同，它会自动将你的聊天记录分解成线程。当你点击一个线程时，涉及该线程的设计界面也会自动高亮显示。

3.2 上下文

现在Stitch也更智能了，因为代理可以看到画布上的所有界面，这解锁了更多机会和用例。

例如，我问了一个提示词来测试它的能力：

根据我的提示历史和画布上的界面生成PRD。

然后文档被创建为一个界面并自动放置在画布上。所以现在画布可以在一个地方拥有不同类型的资源：

  • 设计
  • 设计系统
  • 文档
  • 原型

而且AI代理可以看到画布上的所有内容。

我对这个全能画布的愿景很感兴趣，因为它们都应该成为上下文的一部分，而不是不同资源被隔离在不同地方。

4. 直接编辑

这实际上是几周前首次推出的。但这是一次重大升级，所以让我在这里也用例子带你了解一下。

当你在Stitch中选择一个界面（画框）时，你可以点击顶部热栏中的"Modify"（修改），并从三个选项中选择。

针对特定组件编辑选择Edit（编辑），对于模糊编辑选择Annotate（注释）。

原文链接: My hands-on walkthrough of Google Stitch's biggest upgrades yet

汇智网翻译整理，转载请标明出处