文章目录一、Stitch是什么二、建一个项目三、模型选择四、设计系统五、三种改稿方式六、生成、预览和导出七、一次完整的实战八、哪些活它接不了以前给项目做界面设计我们一般是先画低保真草图十几个页面做下来最快要3天如果业务复杂的1周也完不成。画完交给设计师做高保真UI还得排队至少要等1周才能拿到设计图。后来试了谷歌的Stitch。我把界面需求写一段需求给到Stitch它自己就把稿出了什么地方需要修改也是通过对话就行。这次我拿手上一个真实的移动端项目完整跑了一遍从空项目到13个页面、深色浅色两套一共26屏用了4天中间那两步都省了。今天把这套流程和我踩过的坑一起讲一讲感兴趣的可以接着往下看。一、Stitch是什么Stitch是Google Labs里的一个实验项目2025年5月在Google I/O上发布底层跑的是Gemini模型。它的前身是谷歌收购的一家做文字生成界面的公司叫Galileo AI。最早那版功能很基础只能按描述出一张静态稿。后面又更新了几轮现在这套是带无限画布和多页面生成的版本页面之间能连起来做原型。它的用法跟你熟悉的设计工具不太一样。你不需要从空白画布开始一个个拖控件把想要的界面描述出来它就给你一版高保真稿。目前完全免费Google账号登录就能用地址是https://stitch.withgoogle.com。二、建一个项目打开首页左边是项目列表分我的项目和与我共享两个标签。中间是输入框底下可以选应用还是Web做移动端就选应用。右侧两个按钮一个是以您的设计为基础一个是空白项目。第一次用直接点空白项目。图Stitch首页的项目列表和新建入口建完项目建议先去设置里关一个开关。点右上角头像进设置有一项允许用于训练AI模型默认是开着的。你要是不希望自己的设计内容被拿去训练把它关掉。同一页还能看到今日用量。我用的这版是按天算额度每日400次可以用很久了我整个App的13个页面、两套风格做完额度都没用完。图设置页里的训练开关和每日额度三、模型选择输入框右边有个模型下拉框速度这档用的是Gemini 3.5 Flash-Lite适合快速协作质量依然出色。均衡这档用的是Gemini 3.8 Flash官方说明是兼顾速度与品质。图模型下拉框里的两个档位我基本一直用均衡档。13个页面的量用均衡档完全跑得动换速度档也快不了多少。输入框左边的加号可以上传文件也能直接贴网站网址。手上有现成的截图或者竞品页面丢进去让它当参考比纯文字描述准一些。图输入框支持上传文件和网址四、设计系统点输入框右下角的设计系统图标能看到几个选项DESIGN.md、以您的设计为基础、新建。下面列着你之前用过的设计系统再往下是Stitch自带的预设比如Alexandria、Bauhaus。图设计系统可以沿用已有的风格以您的设计为基础这个选项你可以理解成先给项目定了一套装修风格后面每间屋子都照着来。主页面调好的配色和字体新建页面时直接挂在这套规则下面不用每页重新描述一遍。DESIGN.md是一份给AI看的设计规则文档里面写着颜色、字体、间距这些约定。这东西跟项目里那份给新人看的开发规范一个道理把规矩写清楚后面谁来做都照着它。它能从Stitch导出喂给Claude Code、Cursor这类编码工具读也能反过来导进来。它还有个从网址导入品牌规范的功能把网站地址贴进去它会去抓颜色和字体。这个我还没试过。五、三种改稿方式在画布上选中一个页面顶部的Modify菜单里有三条路。修改这条直接对话就行。你说把按钮圆角改小一点“换成深色主题”它就在原图上改。注释这条是我用得最多的。点开之后可以在页面上直接框选元素然后在旁边写一句话。我遇到过一次标题文字挤成两行的排版问题就是框住那个标题写了句文字出现了排版异常它自己调过来了。这种指哪打哪的改法比用文字描述位置靠谱得多。图Modify菜单里的三种改稿方式图框选元素直接写批注第三条是改DESIGN.md动的是全局规则。这份文档一改后面生成的页面全部跟着变。单个元素还有更细的操作。在元素上点一下会弹出修改元素里面是修改文本、利用AI修改、删除三个选项。只想改一句文案用这个比重新生成整页快得多。图单个元素的修改选项六、生成、预览和导出Generate菜单里的东西比我想的多。即时原型把这个页面按用户流程往下推自动生成下一个该出现的页面。页面串起来之后能点着走一遍给人演示的时候比翻静态图直观。变体于当前页面出一版不同的方案方便对比。重新生成换个方向再做一版。预测性热图给页面叠一层用户注意力分布的示意。无障碍功能审核检查对比度这类可访问性问题。App Store素材资源直接生成上架要用的那套图。图Generate菜单里的功能预览可以切设备尺寸Mobile那档是390×884跟设计稿的尺寸对得上。它还能出个二维码手机扫一下直接在真机上看效果。图切换设备尺寸预览页面导出这块选项不少Figma、AI Studio、MCP、Netlify、Lovable、Bolt、zip包还有直接把代码复制到剪贴板。图导出格式里的一长串选项我自己试过导出Figma。进去之后每个组件、每段文字都是分层的Auto Layout也打好了设计师接手能直接改。代码给的是HTML加Tailwind的写法语义标签清楚本地打开就能跑。这份代码拿来当起点没问题直接上生产还差点意思。它是纯HTML还需要按照项目规范进行调整比如我这边用的Vue我就改成成Vue。另外它不会给你开发接口和状态管理这些所以这些都得自己搞。源码在界面上能直接看右上角有个复制按钮整份一键下载。图导出的源码和复制按钮七、一次完整的实战说回开头那个项目。是一个交通行业的移动端应用系统名叫移动特勤信号优先系统。页面一共13个。登录、首页监控各占一页任务相关的有5页从列表和详情一直到提交、路线编辑、编辑任务消息和个人中心加起来3页剩下的系统设置、服务器设置和设备注册再占3页。而且每个页面都要出深色和浅色两套加起来26屏。第一天我先把设计系统定下来。主页面用哪套配色、什么字体圆角和间距取多少这些确认好之后后面新建的页面都挂在同一套规则下面出来就是统一的。这步别省。要是每页都单独描述一遍风格颜色和字重很容易四处漂最后还得回头统一。接下来两天集中把页面铺完。画布左侧是设计会话区它会告诉我这一轮改了什么。左下角是智能体日志我对着页面提的每条要求都记在里面。图画布上的多页面工作区图左侧设计会话和智能体日志到第三天13个页面、深色浅色一共26屏全部出完额度根本用不完。最后一天没在生成新页面全在对着两套稿的细节。深色版和浅色版是分开生成的颜色能跟着设计系统走但同一种状态用什么色、按钮圆角取多大、卡片之间留多少间距两边还是会有出入。我把两套稿并排摊在画布上一页一页比对把不一样的地方挑出来改掉。这一天没产出任何新界面可少了它交出去的两套稿看着就不像一个系统里的东西。图13个页面两套风格摊在画布上过程里也有反复改不到位的情况。有个页面的内容我连着改了5、6次输出还是没到我要的效果最后换了个说法重新描述才调过来。还有一种情况更让人头疼有时候只改一个很小的细节之前已经改好的页面又回到了修改之前的样子。这种只能对着日志把那几处再改一遍。成品在这里。深色和浅色各一套下面是深色版的。图深色版的登录、首页监控、任务列表和任务详情图深色版的任务提交、路线编辑、编辑任务和系统消息图深色版的个人中心、个人信息、系统设置、服务器设置和设备注册浅色版是同样的13个页面配色和字重全部换过一遍。图浅色版的登录、首页监控、任务列表和任务详情图浅色版的任务提交、路线编辑、编辑任务和系统消息图浅色版的个人中心、个人信息、系统设置、服务器设置和设备注册这些页面里有地图路线这种要画节点的界面也有设备注册那种全是表单的。八、哪些活它接不了1它做不了后端。生成的全是前端界面接口和登录校验都得自己写。2它不出原生App代码。想直接拿到OS或者Android的工程文件现在还不行。3团队协作这块比较弱。没有多人同时编辑也没有插件生态跟Figma这些年的积累不在一个量级。4它还在Google Labs阶段。功能和免费政策都可能变现在好用不代表一直这样。5复杂动效和微交互还是得人来做。6两套风格之间不会自动同步。改深色版的一处颜色浅色版不会跟着变得自己两边都过一遍。7最后是我的吐槽。他们这个产品有bug有些地方地方改5-6次都改不过来比如地图上行的定位点的样式、样色、文本统一问题。驯化AI的过程很痛苦简直就是1天生成3天改的节奏。有疑问的话可以在评论区留言交流。觉得有用的话欢迎点赞关注。参考资料Google Stitch官方地址本文为原创文章遵循 CC 4.0 BY-SA 版权协议转载请附上原文出处链接和本声明。