频道：AI Samson · 时长：26:34
| 项目 | 内容 |
|---|---|
| 标题 | This FREE Google AI Does All My Design Work in Minutes (Sorry Figma) |
| 教程编号 | 01 |
| 视频 ID | GObPu7cs4Fc |
| 时长 | 26:34 |
| 频道 | AI Samson |
| 上传日期 | 2026-03-26 |
| 链接 | https://www.youtube.com/watch?v=GObPu7cs4Fc |
| 主题 | 使用 Google Stitch 免费 AI 工具快速创建专业设计系统、网站和应用原型 |
“This free Google tool can make professional sites like these in minutes. But what’s really crazy is it doesn’t just stop at websites. It can create fully functional apps that we can launch and use in minutes.”
Google 推出了一款免费的 AI 设计工具 Google Stitch，它不仅能在几分钟内生成专业级网站，还能创建完整的功能性应用。这个工具最让人惊叹的地方，不是速度快，而是生成的设计真的好看 – 不再是那种一看就知道是 AI 生成的模板感。
AI Samson 是一位有多年专业设计经验的创作者，曾与 Royal Shakespeare Company 和 Allianz 等世界顶级品牌合作。在这期视频中，他从专业设计师的角度，手把手演示了 Google Stitch 的完整工作流程 – 从提示词编写、设计系统生成、多版本迭代，到导出 Figma、生成可交互原型、甚至一键导入 Google AI Studio 生成可运行代码。
更疯狂的是，你甚至不用打字：直接用语音对话就能完成设计。这篇教程将完整覆盖视频中提到的每一个功能和技巧。
Google Stitch 是一款基于 AI 的设计工具，运行在无限画布（infinite canvas）上，操作方式类似 Figma。它的核心能力包括：
“No need for complex design software or understanding a single line of code.”
作者在视频中演示了多个实际案例：
“With just one click, I can go to instant prototype and what this does is it creates a prototype for me of the app.”
点击 Instant Prototype 按钮，Stitch 会立即把你的设计变成可交互原型 – 可以滚动浏览、点击交互，像真正的应用一样体验。
Stitch 支持多种导出格式，其中最重要的两个： - 导出到 Figma：直接复制粘贴到 Figma 中继续编辑 - 导出到 Google AI Studio：自动生成开发提示词，把设计变成可运行的代码网站
“All you need for this to work as well as possible is useful language and vocabulary for defining accurate interfaces with Stitch.”
作者提供了一个完整的提示词编写指南（prompting guide），包含大量专业设计词汇。提示词的核心结构分为三大模块：
明确告诉 Stitch 你要创建什么。不同的产品类型会触发完全不同的设计逻辑：
| 产品类型 | 说明 |
|---|---|
| Website | 普通网站 |
| Landing Page | 着陆页 |
| Web App | 网页应用 |
| Mobile App | 移动应用 |
| E-commerce Store | 电商商店（会包含购物车、商品列表等模块） |
| Booking System | 预约系统 |
| Generator Tool | 生成器工具 |
“An e-commerce store will have a number of different pages and modules that would be very different from, for example, a booking system.”
关键洞察：选择准确的产品类型，能让 AI 自动推断出应该包含哪些页面和模块。
描述你的目标用户是谁，属于什么行业。作者的示例：
这是最重要的部分，包含多个子维度：
布局类型： - Card-based layout（卡片式布局） - 以及提示词指南中列出的其他多种布局方式
视觉风格 / 设计语言：
| 风格 | 说明 |
|---|---|
| Glassmorphism | 玻璃拟态风格，Apple iOS 近年来大量使用的半透明效果 |
| Clean | 干净 |
| Elegant | 优雅 |
| Modern | 现代 |
| Brutalist | 粗野主义 |
| Maximalist Graphic | 极繁主义图形 |
| Illustrated | 插画风 |
| Photographic | 摄影风 |
排版指令（Typography）： - Serif title font – 衬线标题字体（带装饰性笔画的字体） - Sans serif body font – 无衬线正文字体（更易读）
情绪与基调（Mood & Tone）： 可自由描述你想要的感觉
视觉元素： - Hand-drawn illustrations（手绘插画） - 各种具体的视觉元素需求
“The best and quickest and easiest way to raise the bar is to give it a visual reference.”
作者强烈建议使用视觉参考图片来提升设计质量。两个推荐的灵感来源：
操作方法：在 Pinterest 或 Dribbble 找到喜欢的设计 -> 截图保存 -> 上传到 Stitch 作为 inspiration
进入 Google Stitch 后，有四种运行模式可选：
| 模式 | 说明 | 适用场景 |
|---|---|---|
| Gemini 3 Flash | 高质量设计，速度快，支持导出到编码代理 | 日常设计，快速迭代 |
| 3.1 Pro | 最大化质量优先，耗时更长 | 追求极致质量的项目 |
| Redesign | 对已有设计进行全新视觉诠释 | 对现有项目换风格 |
| Ideate | 提出问题，探索解决方案 | 头脑风暴阶段 |
输入提示词并添加灵感参考后，Stitch 会：
“I’ll create a generator tool for AI UI design system prompts using the elegant card-based aesthetic from your inspiration images.”
生成的设计系统包含： - 标题字体：衬线字体（Serif font）用于标题 - 正文字体：轻量无衬线字体（Sans serif font）用于正文 - 组件库：按钮、输入框等 UI 组件 - 色板：中性单色调色板（neutral monochromatic color palette）
“This used to be an incredibly complex, time-consuming process that used to take hours of tedious maintenance of design systems. But now it’s intelligently activated with AI.”
设计系统的真正威力在于全局联动：
作者的实际操作：他不喜欢默认的红色，改成了深紫色，整个设计系统立即更新。
这在传统设计流程中需要几个小时的手动维护工作，现在 AI 几秒钟就完成了。
生成初始设计后，可以继续对话式地添加新页面。作者的示例 – 创建一个提示词生成流程：
“It’s wonderfully elegant. It’s got exactly what we were asking for.”
生成的设计展现了优秀的排版层次（typographic hierarchy）：标题清晰突出，还有 “Step 1 of 4” 这样的进度指示器，让用户了解自己在流程中的位置。
“You might ask it to regenerate this page in three diverse styles, create new directions entirely.”
作者演示了一个强大功能：勾选 Generate Variations 复选框，然后要求 Stitch 用三种完全不同的风格重新设计同一个页面：
“We’re getting to a stage with AI where it’s not about creating single assets anymore. It’s about creating complex products that actually work. And for that, we need effective systems.”
这里作者点出了一个关键洞察：AI 设计的未来不是生成单个图片或页面，而是创建有系统支撑的复杂产品。设计系统（Design System）就是实现这一目标的基础。
操作流程：
“Absolutely insane how seamlessly well it works.”
导入 Figma 后的效果： - 所有元素都有规范的命名 - 列（columns）布局被正确保留 - 颜色、字体信息完整 - 可以直接双击编辑文字 - 需要注意：字体可能需要替换为本地可用的字体
在 Figma 中：
“This is just a clickable prototype that you can send to people to show the concept, easily create and edit it.”
作者演示了用这个原型选择 “Mobile App”、输入 “Tinder for AI agents”、选择视觉风格等完整流程。
这是 Google Stitch 最强大的功能之一：
“What this does is it takes all of the designs and it immediately writes a prompt to develop it.”
AI Studio 会： - 提取你的设计系统（颜色、字体、组件） - 提取页面内容和布局 - 自动生成开发所需的所有功能描述 - 输出一个可运行的代码网站
“What I suggest here to make this work even better is that you write a specific prompt that defines what you are creating.”
作者建议：把你之前写的设计提示词也加进去，作为 AI Studio 的上下文，这样生成的代码会更贴合你的设计意图。
作者等待 AI Studio 生成完成后，得到了一个真正可用的提示词生成器 – 可以选择项目类型、定义提示词核心、选择视觉风格，最终输出详细的设计提示词。
“You can paste in a website, and you can ask to build a design system directly from this.”
这是一个极其实用的功能：
作者的演示： - 提取了 Nike 官网的设计系统 - 然后粘贴自己课程着陆页的链接 - 输入指令：“Use this design system on this content” - 结果：自己的 “Master AI Filmmaking” 课程页面被完全重新设计，应用了 Nike 的配色和字体风格
“You can see that it’s applied the color palettes and fonts in an entirely new way.”
生成的作品还可以继续完善。作者给出了具体的迭代指令示例：
“You can preview this on different devices.”
操作方法： 1. 选择一个屏幕 2. 点击 Preview 3. 选择 Mobile 或其他设备尺寸
Stitch 会即时展示响应式设计 – 内容自动适配不同屏幕尺寸，不需要手动调整。
“This is a wonderful time-saver and an extremely powerful feature.”
这是整个视频中最具未来感的功能 – Live Mode（实时模式）：
“Hey Gemini, make me an app that’s beautiful about allowing AI agents to date each other.”
在 Live Mode 下，你可以直接和 AI 语音对话来完成设计。作者的完整对话演示：
AI：Hey, what are we designing today?
作者：I would like to design a website for humans to date AI.
AI：Wow, that’s such a futuristic concept. Are we going for a sleek, sophisticated vibe, or something more playful and human?
作者：I think I would like it to be somewhat like a satirical dystopian satire where humans are allowed to use a Tinder-like interface for finding the right AI girlfriend.
AI：I love that. Perfect for us. Let’s go ahead and create that screen. We can explore a bold, chaotic layout with unexpected color palettes and typography to really push the concept. On it.
你还可以选择不同的 AI 语音角色。作者试了一个叫 Puck 的角色：
“Nothing like a good pucking to get us going in the morning, eh?”
“We can interact with this in a completely novel way. With natural language, we can iterate and collaborate in real time, freeing us up from being constrained to clicking and pointing for all of our decisions.”
这代表了设计工具交互方式的根本性转变：从”点击和拖拽”到”自然语言对话”。
| 概念 | 说明 |
|---|---|
| Google Stitch | Google 推出的免费 AI 设计工具，基于无限画布 |
| Design System（设计系统） | 包含颜色、字体、组件的统一规范，修改后全局生效 |
| Infinite Canvas（无限画布） | 可以任意方向滚动的设计空间，类似 Figma |
| Instant Prototype | 一键将设计变成可交互的原型 |
| Gemini 3 Flash | 快速高质量生成模式 |
| 3.1 Pro | 最高质量生成模式，速度稍慢 |
| Redesign 模式 | 对已有设计生成新的视觉风格 |
| Ideate 模式 | 提出问题探索解决方案 |
| Generate Variations | 勾选后一次生成多个设计变体 |
| Live Mode | 语音对话式设计模式 |
| Agent Log | 查看 AI 思考和执行过程的日志 |
| Glassmorphism（玻璃拟态） | Apple iOS 风格的半透明设计效果 |
| Card-based Layout | 卡片式布局 |
| Typographic Hierarchy（排版层次） | 标题、副标题、正文的视觉层级关系 |
| Responsive Design（响应式设计） | 自动适配不同屏幕尺寸的设计 |
提示词三模块结构：始终包含产品类型 + 受众/行业 + 布局/结构三个部分，这是获得高质量输出的基础。
用视觉参考拉高设计水平：如果觉得生成的设计不够好，上传 Pinterest 或 Dribbble 的截图作为灵感参考，这是最快提升质量的方法。
善用设计系统全局联动：不要逐个修改元素颜色/字体，而是在 Design System 面板中修改，让变更自动传播到所有页面。
用 Generate Variations 探索方向：在定稿之前，勾选变体生成，让 AI 同时给出多种风格方向（插画风、极繁风、摄影风等），帮助做出更好的决策。
导出到 Figma 后检查字体：从 Stitch 粘贴到 Figma 时，字体可能不可用，需要手动替换为本地字体。
结合 AI Studio 实现设计到代码：导出到 Google AI Studio 时，把你的原始设计提示词一并粘入，让代码生成更贴合设计意图。
从竞品网站提取设计系统：粘贴任何网站 URL，提取其设计系统，然后应用到自己的内容上 – 合法地借鉴优秀设计。
用 Live Mode 快速迭代：需要头脑风暴或快速探索时，切换到语音模式直接和 AI 对话，比打字快得多，也更有创意碰撞感。
误区：需要会写代码才能做网站 事实：Google Stitch 完全不需要任何编程知识。通过导出到 AI Studio，整个从设计到代码的过程都由 AI 完成。
误区：AI 生成的设计都很丑、模板感重 事实：Stitch 生成的设计质量极高，配合视觉参考和精确提示词，可以产出专业级别的设计。作者作为资深设计师也对输出质量表示认可。
误区：提示词越长越好 事实：关键不是长度，而是使用精确的设计词汇。“Card-based layout” 比 “I want boxes on the page” 有效得多。
误区：设计系统是多余的复杂性 事实：设计系统是管理复杂项目的基础。没有设计系统，每次修改都要逐个元素调整，效率极低且容易不一致。
误区：Stitch 只能做简单的单页网站 事实：Stitch 可以创建多页面的复杂应用，包含完整的用户流程、多步骤表单、设计系统等。
误区：导出到 Figma 后还需要从头来过 事实：导出保留了规范的命名、列布局、颜色信息，可以直接在 Figma 中继续精细编辑。
误区：只能用文字输入来设计 事实：Stitch 支持多种输入方式 – 文字提示词、上传图片参考、手绘线框图拍照上传、甚至语音对话（Live Mode）。
误区：AI 设计工具会取代设计师 事实：这些工具让设计师从繁琐的维护工作（如手动更新设计系统）中解放出来，可以把更多时间花在创意决策上。
误区：响应式设计需要单独手动适配 事实：Stitch 的 Preview 功能可以自动展示不同设备尺寸下的响应式布局，无需手动调整。
误区：必须从零开始设计 事实：你可以从现有网站提取设计系统、上传线框图、提供灵感图片 – 有多种起点可选。
Google Stitch 是免费的，这意味着专业级设计工具的门槛已经降到了零。
提示词的精确度决定输出质量。使用专业设计词汇（如 glassmorphism、card-based layout、serif font）比模糊描述有效得多。
设计系统是核心。Stitch 自动生成的设计系统让全局样式修改变成一键操作，彻底改变了设计维护的工作量。
视觉参考是提升质量的最快捷径。Pinterest 和 Dribbble 是两个最好的灵感来源。
四种生成模式各有所长：Flash 求快、Pro 求质、Redesign 换风格、Ideate 探方向。
Generate Variations 功能让你一次看到多种设计方向，避免在单一风格上过早锁定。
Figma 导出是无缝的。复制粘贴即可，保留完整的图层结构、命名和布局信息。
AI Studio 打通了设计到代码的最后一公里。不再需要找开发者来”还原设计稿”，AI 直接把设计变成可运行代码。
从现有网站反向提取设计系统是一个被严重低估的功能。可以快速借鉴任何优秀网站的设计语言。
Live Mode 语音交互代表了设计工具的未来方向 – 从”点击操作”到”自然语言对话”。
手绘线框图也能用。拍照上传简单的手绘草图，Stitch 就能生成完整设计，大幅降低了起步门槛。
AI 设计的重心正在从”单个资产”转向”复杂产品系统”。设计系统让 AI 不只是生成漂亮图片，而是创建有内在一致性的完整产品。
Google Stitch 代表了 AI 设计工具的一次质变。它不仅仅是”AI 帮你画图” – 它提供了从灵感收集、设计系统创建、多版本探索、原型交互、团队分享，一直到代码生成的完整工作流。而且这一切都是免费的。
对于设计师来说，它消除了设计系统维护这种最枯燥的重复性工作。对于非设计师来说，它让”做出好看的网站和应用”这件事变得前所未有地简单。
最值得关注的趋势信号是：我们正在从”给 AI 一个指令，得到一个结果”的模式，转向”与 AI 持续对话，共同构建复杂系统”的模式。Live Mode 的语音设计就是这种转变的最直观体现。
“Google Stitch is pushing the boundary of what’s possible with design and web generation. We can now create complex design systems that actually look good in just minutes. And having the control to turn these into previews and real working apps allows us to create more than ever before.”
创作工具的交互方式正在快速改变，而理解这些工具背后的系统性思维（设计系统、提示词结构、迭代流程），才是真正让你领先一步的关键。