嘿，朋友们，我是来自设计探索者社区的一名创作者。欢迎踏入我们的设计探秘之旅——这是一个专注于深度产品体验分享的媒体平台，我们的目标是揭秘全球千款卓越产品！
今天，我要与大家共同探讨的是我近期深入体验的一款产品——谷歌旗下的Stitch。期待这篇文章能为你带来新的见解。如果你觉得这篇文章对你有所帮助，别忘了分享给你的朋友们！
概述
Stitch 产品简介
Stitch是由谷歌实验室推出的一个创新原生AI设计工具。它通过接收自然语言指令、手绘的线框图或是界面截图，能够自动转换成可编辑的用户界面，并生成适用于生产环境的前端代码，从而有效连接设计与开发的流程。
与传统设计工具相较，Stitch的使用方式更为简便。你只需用自然语言描述产品的目标、应用场景或是视觉风格，它便能在短短几秒内为你提供多套界面方案，并支持通过对话形式持续迭代和优化。Stitch不仅提高了设计效率，更试图从源头改变设计的方式：从“手动绘制界面”转变为“用语言生成界面”。它就像一位不知疲倦的设计伙伴，助力你快速完成从无到有的设计探索阶段。
我如何安排了一次全面的产品体验？
为了深入探究 Stitch 的功能，我制定了一个详尽的体验计划。我打算通过模拟一个完整的业务流程，来检验这款以 AI 为核心的 UI 生成工具究竟拥有哪些强大能力，同时评估它是否能够满足我的基本使用需求。
业务场景设定
以远桥人力这家专注于出国劳务人力资源的公司为例。鉴于出国劳务人员英语交流存在障碍，公司迫切需要一个英语学习培训平台。在这个项目中，我的任务是为远桥人力打造一个面向出国劳务人员的英语学习平台，而我要借助 Stitch 完成的核心环节，便是课程学习部分。
设计目标确立
摒弃传统的 Figma 工具，我决定利用 Stitch 来实现远桥人力英语学习培训平台的核心流程，并确保开发工程师能够依据最小可行性产品（MVP）的设计方案顺利进行开发工作。
设计流程启动
一切准备工作就绪后，我们便可以开始使用 Stitch 来设计这个产品的 MVP 版本了。
用户登录验证环节
作为一名 Stitch 的新手用户，我最关心的问题是如何与它进行有效的交互。最初，我通过 ChatGPT 学习如何编写提示词，但很快发现，越直接简洁的提示词越能检验 Stitch 是否真正理解我的需求。
我的第一个提示词如下：
请为我设计一个用户登录验证流程，需要支持账号密码和手机号两种验证登录方式。但请记住，这是一个面向企业的业务场景，不需要任何第三方登录选项，页面设计需要简洁且专业。
大约过了20秒，界面就自动生成了。
说实话，这个结果让我感到非常惊喜：不仅生成速度非常快，而且结果与我的需求高度契合。然而，它也出现了一些关键性的错误，例如不必要地添加了谷歌等第三方登录选项，以及默认的英文界面输出。
接下来，我开始了第二轮的优化工作：首先，我强制要求整个界面全部采用简体中文显示，确保用户能够无障碍地进行操作。同时，我也对页面中不再需要的模块进行了明确的删除处理，以保持界面的整洁和高效。此外，我还加入了大量的截图，用以提供丰富的上下文信息，帮助 Stitch 更好地理解和适应我的需求。
在经过这一轮的调整之后，我们的登录页面已经达到了基本的要求，不过从视觉角度来看，它的张力似乎还是略显不足。面对这一挑战，我决定尝试使用 Stitch 提供的「变体」功能。具体操作是这样的：在选中画板之后，点击变体按钮，系统便会从布局、配色、图像、字体以及文案等多个角度，为我们提供多样化的设计方案。
我的期望是，能够得到一个视觉表现力更为突出的界面。
「变体」功能带来的惊喜确实不少。它能够在我们不满意当前方案时，迅速地提供多种可供探索的方向。
然而，经过几轮的迭代之后，我最终还是选择了更为保守的排版方案。原因非常直接：Stitch 在实现我心中所期望的效果上，还存在一定的难度。此外，我还尝试将平台的 logo 上传至系统中，希望能够自动将其嵌入到页面中，但遗憾的是，Stitch 目前还无法完成这一操作。
最终，我们完成了定稿。
课程学习界面解析
在浏览这个界面时，我发现其内容相对繁复，单纯依靠文字输入，AI在理解上可能会遇到一定的挑战。因此，在这个环节，我巧妙地引入了思维导图工具。
我首先将页面上的信息架构从顶部到底部逐一进行了详细的梳理，并且将课程列表的不同状态向Stitch进行了详尽的说明。这样的做法旨在确保Stitch输出的内容能够更加精确无误。
形成这种思考模式，很大程度上源于我与 ChatGPT 的日常交流，这让我逐渐养成了与人工智能工具互动的思维习性。
在创建页面时，我提出了以下要求：务必严格遵循我的信息框架来设计，同时特别留意使列表呈现出多种状态。
在观察结果方面，Stitch 表现出相当不错的理解力，输出的内容基本遵循了我的结构安排，页面的呈现效果也相当令人满意。在此，我再次强调“变体”的重要性：它最大的优势在于能够提供多样化的排版选择。当你处于既定的页面框架中感到灵感匮乏时，变体无疑能够为你提供不同方向的设计灵感，无论是追求时尚感、简洁风格还是丰富度。
对于课程学习首页的整体效果，我感到基本满意，但也经历了多次的调整。在这个过程中，我发现其实并不需要什么特别的技术，只需与 Stitch 保持持续的对话和沟通即可，这就像甲方对我们进行稿件修改时的情况：字体放大一些、图片放大一些，或者更换颜色、调整排版，通过逐步的修改，最终达到满意的效果。
但同时也需要指出，Stitch 的产品定位本身就是快速地将你的想法转化为界面，因此，我们不应期望它一次性就能做到完美，所以请不要在单个页面上投入过多的时间。
最终，我们完成了定稿。
课程信息页面
课程信息页面是一个集成了众多功能的综合性页面。用户进入后，便能在同一界面内浏览到视频、直播、练习以及测验等内容。
正如前文所述，在运用Stitch进行详情页设计时，运用思维导图来梳理页面的信息架构和各类状态，几乎是一项不可或缺的工作。在此，我要特别提醒一点：切勿一次性让Stitch生成多个页面，因为这样很难确保风格的一致性。尤其是在处理类似Tab这样的组件时，Stitch有可能会将每个页面都当作一个独立的单元来“重新设计”，最终导致页面样式杂乱无章。
尤为关键的是，对信息架构和多状态的梳理工作必须由我们亲自完成。Stitch的创造性非常强，千万不要尝试将这项至关重要的任务委托给AI——这亦是我本次深入体验中最为深刻的体会之一。你只需借助一个思维导图工具，将每个页面的信息结构拆解清晰、状态描述详尽，它便能以更高的精确度为你还原。
此外，我还想分享一个小窍门：由于涉及Tab页的切换，页面的头部和Tab的样式必须始终保持一致。因此，在生成新的Tab页面时，务必要先截图，并向Stitch明确指出“保持头部和Tab样式不变的情况下生成”。否则，它可能会重新设计，为你提供一套全新的样式。
【练习环节】
在课程详情页的初步设计定稿之后，我着手处理这个学习系统中最为繁复的功能模块——练习题的设计。
首先，我让 Stitch 进行了一次自由的创作，以此为基础，我获得了若干可供参考的样式。在国外的产品中，练习题这一环节颇为常见，例如多邻国、博树等平台，都提供了丰富的题型。对于这些产品的设计，我进行了深入的拆解和分析。如果你对此感兴趣，可以回顾我之前的相关内容。
文章标题：Stitch 产品体验手记 丨 短短6小时，打造逾百页作品，揭秘我的惊喜、不安与所思！
（文章第10/16部分，正文中间部分，以下为改写内容）
效果令人满意。在众多设计方案中，Stitch 显然对国外设计风格情有独钟。接下来的工作，便是针对各类题型的交互状态和细节进行精细调整。同时，还需确保所有练习题的头部和底部保持统一风格。
在此，我想特别强调口语题的设计细节。这里的交互设计十分细腻，若非亲身经历，恐怕难以洞察其中蕴藏的丰富微交互元素。
提示词：请保持页面头部和底部样式不变，为我生成一个新的题型——口语题。
在 Stitch 输出初版并经过调整后，我再次输入了新的微交互提示词。
提示词：请确保页面整体样式不变，输出用户点击录音按钮后的微交互效果，特别关注按钮和文字的变化。
Stitch 完美地理解了我的要求，输出的页面完全符合预期。
提示词：请保持页面整体样式不变，输出用户提交音频后的页面样式。技术层面，系统将上传用户的录制音频至云端进行评分。若得分超过60分，将弹出“你真棒”的Toast弹窗；若低于60分，则会提示用户可以再次尝试。
效果令人满意。对于同一流程的微交互设计，我认为 Stitch 的生成效果与我期望的高度契合，至少在保持一致性方面做得相当出色。
最终定稿
单元测试解析
在单元测试的环节，我们遇到了与练习题设计相仿的复杂性，同样需要精心设计多个流程的微交互。尽管这两个场景在表面上看起来颇为相似，但它们在细节上却存在着显著的差异。
在这个模块中，从列表页面开始就呈现出多种状态，因此，信息结构的清晰度显得尤为重要。只有这样，Stitch 才能更加精准地把握信息。随着写作的深入，我愈发感受到与 Stitch 的交互过程仿佛是在撰写一份产品设计开发文档：每一个细节都必须深思熟虑，以确保设计与开发团队都能够充分理解。
此外，对于测验和习题的呈现风格，我们需确保其保持统一，这对Stitch输出的一致性提出了挑战。以我在不改变头部样式的基础上，想要添加答题卡为例，我经过多次调试才成功实现。这样的处理既保证了产品演示的整体一致性，又避免了在文档中添加额外的备注来提示他人。
此外，我还想与大家分享一个关于考试提交流程的经验。无论用户是通过考试还是未能通过，系统都应当及时给出反馈。在用户查看考试结果页面时，我还需要进行更详尽的数据统计和考试表现分析。起初，Stitch在处理考试表现统计图的设计上表现不佳，无法准确理解我的需求。于是，我提供了更为详细的描述：X轴代表考试时长，Y轴代表答对题目的数量，并且需要将这一数据与其他学员的表现进行综合对比。
经过一番努力，Stitch最终生成的页面效果虽然并非完美无瑕，但已经更接近我心中的理想状态。
最终定稿
深入反思与归纳
我按照既定步骤，逐步完成了这个学习流程的设计。经过大约 6 个小时的不懈努力，我成功生成了超过 100 页的内容，其中 30 页达到了可定稿的标准。在此，我想和大家分享这次产品体验过程中的惊喜、焦虑以及我的所思所想。
惊喜之处
首先，我惊叹于 Stitch 的生成速度。我简直不敢相信，Stitch 能在短短 20 秒内完成我们过去可能需要 1-2 小时才能完成的界面设计任务。更令人惊喜的是，它的生成质量并不逊色，甚至在某些方面超越了初中级设计师的作品。无论是对齐、规整还是一致性，Stitch 的表现都超越了众多设计师。
其次，Stitch 的应用场景也让我感到震撼。从我的体验来看，Stitch 已经能够接入设计系统，抓取网址风格，并根据截图参考风格生成无限量的变体，仿佛一台不知疲倦的机器，可以持续不断地为我们工作。
最后，当我将 Stitch 生成的文件复制到 Figma 中时，它的自动布局和设计规范让我感到无比惊喜。如果没有这一步，Stitch 生成的界面对我而言几乎没有实际意义。然而，当我看到它如此规整的 Figma 布局时，我意识到二次加工的成本被大幅降低（我已经无法忍受那些非自动布局的设计稿了）。
焦虑之感
在深度体验了 Stitch 之后，我的焦虑感逐渐加剧。想象一下，过去我们评估设计工作效率时，产量一直是核心标准。我也一直将我的高产视为重要卖点，但与 Stitch 这种只需一句话就能生成多个页面的工具相比，哪个设计师还敢与之相比？在效率方面，我们似乎根本不在同一个维度。
再来说说设计品质。虽然 Stitch 目前的生成效果还有待提高，各方面的细节也难以达到较高水准，但最令人担忧的是，这样的工具还在不断迭代升级。它不知疲倦地进化，我们无法预测半年或一年后，它最终输出的作品是否会超越设计师的能力。一想到这里，我就会感到一阵阵的恐慌。AI，真的太可怕了！
深入思考
说实话，在感受到 Stitch 带来的生产力提升的同时，我也在思考这样的工具将如何重构产品设计流程，以及它将为我们带来哪些变化和启发。
首先，Stitch 可能会覆盖交互设计师 90% 的原型绘制工作。
如果你还在使用 Axure 来绘制原型，那么你可能真的需要重新认识 Stitch。在 AI 生成效率面前，传统的交互原型似乎已经落后了。我认为，原型绘制中大量重复、规范化的工作将会逐步被 Stitch 这类工具所替代。未来，我们只需要清晰地描述业务需求和场景，需求就能更快地被“可视化”。
其次，Stitch 生成的设计稿能否取代 UI 设计师？
我的答案是：不能。虽然 Stitch 生成的作品既快又“像那么回事”，但当我将其文件导入 Figma 后，我发现尽管它支持自动布局且足够规整，但与可直接投入生产的设计稿相比，仍存在一定差距。更重要的是，真正的设计品质源于审美判断、细节打磨以及整体一致性。如果对品质没有更高的追求，Stitch 或许能覆盖一部分 UI 工作。然而，要打造优秀的产品，UI 设计师依然不可或缺。
最后，我们该如何看待 Stitch 这样的 AI 工具？
就像 Stitch 的定位一样，它试图通过语言提示、手绘线框图和界面截图，快速生成可编辑的 UI，并打通设计与开发之间的断层。对于产品设计师来说，Stitch 不是敌人。它确实降低了界面设计的门槛，但一个成功的产品并非仅靠“拼界面”就能实现。真正的价值仍在于需求洞察、业务流程设计以及最终交互体验的整体把控。
我始终坚信，不论是 Figma 还是 Stitch，它们都只是帮助我们达成设计目标的辅助工具。回想20年前，我们依赖的是 Adobe Photoshop；15年前，Sketch成为了我们的新宠；而10年前，Figma的崛起又引领了设计界的新潮流。或许，我们正迈入一个全新的阶段，但始终如一的是，客户的需求和设计目标。
我们需要像AI一样去学习，不能因为工具的高效而麻痹了自己的思考。拥抱 Stitch，拥抱 AI，拥抱这场正在重塑我们生产力的变革！
