“以前做UI设计要么花钱雇设计师，要么自己啃Figma啃半年。现在AI直接让这件事变了——你只需要会说话。” — 牛马翻身计划
上周一个朋友找我，说他在做一个自媒体图文创作小程序，到了”设计UI”这步直接傻眼——不会Figma，找外包报价直接3万起步，我说”你去学Figma吧”，他看了两眼教程直接关掉了。
我给他发了一个链接，不到一天，他把整套UI原型做出来发给我，质感还不差。
那个链接就是：stitch.withgoogle.com。
今天这篇，就是帮你把Stitch从头到尾用明白，目标是：看完这篇，你今天就能用Stitch做出一套小程序UI原型。
一、Stitch是什么？为什么2026年突然火了
坐好，我帮你讲明白。
Google Stitch是Google Labs推出的AI设计工具，2025年5月在Google I/O大会首次亮相，底层跑的是Gemini 2.5 Pro/Flash模型。
说人话：你用中文描述你想要什么界面，它直接给你生成出来——高保真UI图 + 可用的HTML/CSS代码，一步到位。
它的前身是一个叫Galileo AI的创业公司，2022年成立，2025年被Google收购并改造升级，整合进Google自家的AI生态。简单理解就是：一家做AI设计的创业公司被Google吃掉了，然后用Gemini喂了一遍，变成了现在的Stitch。
Stitch 输入与输出Stitch支持的输入方式：
- 文字描述（中英文都行）
- 上传图片/截图（竞品截图、手绘草图）
- 语音输入（新功能，直接开口说）
Stitch输出的内容：
- 高保真UI设计图
- 可直接用的HTML + Tailwind CSS代码
- 可导出到Figma的设计文件
然后说重点——完全免费。
Beta阶段每月有 350次标准生成 + 200次专业生成 的免费额度，对于个人项目来说完全够用。用Google账号登录就行，不需要注册新账号，不需要绑卡。
Stitch就是那种让你第一次用完会感叹”怎么以前没有这个”的工具。
二、2026年3月刚更新了什么——为什么现在入手正当时
就在2026年3月18日，Stitch发布了迄今为止最大规模的一次更新，几乎是从底层重新构建了整个产品。
这次更新我认为是它从”好用”到”真的打到设计师饭碗”的分界线。核心有这几件事：
1. AI原生无限画布
整个设计过程在一个画布上完成，图片、文字、草图、代码全部可以拖进来当上下文。不再是”生成一张图然后重来”，而是一个持续演进的工作空间。
2. Design Agent（设计代理）
翻译：这个Agent能看懂你整个项目，不是只盯着当前一个页面。
你说”把首页的配色方案更新成深色”，它会把首页、详情页、购物车页全部同步更新，保持一致性。以前需要你一张一张手动改，现在一句话搞定。
3. Voice Canvas（语音画布）
由Gemini Live驱动，真的可以对着屏幕说话操控设计。“给我换三种菜单风格看看”——它实时生成，你边看边说，边改边聊。对于脑子里有想法但打字慢的人来说，这个功能相当炸。
4. Vibe Design（氛围设计）
以前设计UI要先画线框图，Vibe Design反过来——从感受和目标出发。
你不需要说”左边导航栏宽240px”，只需要说”用户打开就感觉清爽轻松”，它自己推导设计语言。
5. 直接编辑（Direct Edits）
AI生成的东西不会100%满意，这很正常。现在可以直接点击任意文字元素手动修改，也可以换图片、调间距——不用重新写Prompt，就像用Word一样直接改。
重新试试之前Stitch的问题是”生成完就没法精调”，这次更新彻底解决了这个痛点。如果你之前试过Stitch但体验不好，现在值得重新试一次。
三、Stitch vs Figma：到底谁该用哪个
这个问题很多人纠结，我直接给你一张表：
| Google Stitch | Figma | |
|---|---|---|
| 价格 | 完全免费 | $12/人/月起 |
| 上手难度 | 零门槛，会说话就行 | 需要学习，有一定曲线 |
| AI能力 | 原生AI，核心功能 | AI为辅助插件 |
| 输出格式 | HTML + Tailwind CSS | 设计稿，通过插件导出代码 |
| 团队协作 | 基础功能 | 行业标杆 |
| 设计精细度 | 适合快速原型 | 适合复杂设计系统 |
| 与对方互通 | 可导出到Figma | 可接收Stitch文件 |
有一个数据你可以感受一下：Stitch新功能发布当天，Figma股价下跌了8.8%。
但我不认为Figma要完了——Stitch抢的是那批还没进入Figma的人：产品经理、独立开发者、创业者、学生，这些人以前没有设计工具，现在有了Stitch，根本不用再去学Figma。
而且Stitch和Figma可以搭配用：在Stitch里快速出原型，然后通过官方插件导出到Figma做精细化和开发标注。这是目前很多团队的最优工作流。
泼一盆冷水泼一盆冷水： Stitch对平台特定规范不是很敏感。你直接说”设计微信小程序”，它给出的有可能是iOS风格或者Material Design风格，而不是符合微信设计规范的样式。需要在Prompt里额外说清楚，我在下一章会教你怎么写。
四、实战：从0开始用Stitch设计自媒体图文创作小程序
好了，终于到了你最想看的部分——我直接用真实案例带你走一遍。
这次的目标是：基于 baoyu-skills（一个自媒体AI创作工具集），设计一款自媒体图文创作小程序的UI。全程截图，一步一步看。
Step 0：进入Stitch，登录
打开 stitch.withgoogle.com，用Google账号登录，进入主页。
界面很干净，直接点「New project」开始。动手之前建议先想清楚：小程序是什么类型、目标用户是谁、有没有竞品截图可以上传作参考。
Step 1：用Claude先帮你生成设计Prompt
最大的坑：很多人第一条Prompt就写”帮我设计一个小程序”。这样生成出来的东西要么是通用模板，要么乱得一塌糊涂。
我的做法是：先让Claude帮我写一条专业的Stitch设计Prompt。
把你的小程序需求告诉Claude，让它生成一条结构清晰、包含设计规范的Prompt。这样输入给Stitch的质量会高很多。
好的 Stitch Prompt 结构好的Stitch Prompt结构： 功能定位 + 目标用户 + 视觉风格 + 平台规范 + 页面列表。
特别要加上「符合微信小程序设计规范，页面宽度375px，底部Tab导航栏」——不说清楚，它容易生成iOS或Web风格。
Step 2：选模型，提交生成
把Prompt粘贴进Stitch，选择应用类型，模型选 Gemini 3.1 Pro（质量最高），点击提交，等待生成。
生成速度大概1-2分钟，取决于页面数量。
Step 3：查看生成的UI设计图
Stitch会一次性生成多个页面的UI设计，整齐地排列在画布上。
第一眼看到这个画面，你大概会有两种反应：「哇这也太好看了吧」或者「有几个地方不太对」。
两种都正常——接下来就是迭代的时候了。
Step 4：通过对话批量修改UI
不满意的地方，直接在对话框里说。Design Agent会理解你的意图，批量更新所有相关页面，不需要你一张一张手动改。
例如：
- 「把整体配色改成更深沉的风格，适合夜间使用」
- 「所有页面的底部Tab栏图标换成线条风格」
- 「卡片圆角统一改成16px，更现代」
一句话，全部页面同步更新。
调色技巧调色技巧： 如果你有品牌色，直接告诉Stitch具体的HEX色值，比如「主色调改成 #6B4FE0」，它会精准执行，不会自己乱发挥。
Step 5：选择 AI Studio构建，看实际效果
UI设计确认后，Stitch提供几种导出路径。这里我选择使用AI Studio构建，直接把UI变成可运行的App原型。
点击后会跳转到Google AI Studio，带着你的设计文件过去。
Step 6：在AI Studio里Build，等待完成
进入AI Studio后，点击 Build 按钮，AI会根据Stitch的UI设计自动生成前端代码，稍等片刻。
Step 7：查看效果，细化需求
构建完成后，右侧可以直接点 Preview 实时预览效果。
第一次生成的App可能有些地方不尽人意——这很正常。在左侧对���框里，尽可能细致地描述你的需求，AI Studio会根据你的描述实时更新预览。越具体越好，不要说”改好看一点”，要说”首页的卡片间距太大，改成12px，背景色改成白色”。
关于小程序适配关于小程序适配： AI Studio生成的是Web App代码，不能直接在微信小程序里运行。如果你的最终目标是微信小程序，有两条路：一是把Stitch设计稿导出到Figma，让开发1:1还原成WXML/WXSS；二是把AI Studio的原型作为参考，用微信开发者工具重新实现。
五、三件事，今天就能开始
学完了，该你了。不要收藏吃灰。
第一件事：现在打开Stitch试一下
去 stitch.withgoogle.com，用Google账号登录，输入你第一个小程序的想法，5分钟内你会看到它能做什么。
第二件事：用我给你的Prompt模板
照着第四部分的流程走，先让Claude帮你生成一条结构清晰的Prompt，再提交给Stitch。好的Prompt = 功能定位 + 目标用户 + 视觉风格 + 平台规范。
第三件事：先做首页，再扩展
不要一开始就让它生成十个页面。先把首页做对，风格定稳，再用Design Agent扩展其他页面。这是质量最高的路径。
以前”会设计”是一门技能，现在”会描述”才是真本事。
Stitch不会让设计师失业，但会让那些没有设计师却有好想法的人，终于有机会把想法变成看得见的东西。
— 牛马翻身计划
如果这篇对你有用，点个在看或转发给也想做小程序的朋友。有问题欢迎在评论区问，我看到会回复。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时