从设计到收钱：Stitch 2.0 × Claude Code 全流程实战
Claude Code + Stitch 2.0 Destroys Web Design (Figma Killer)
本报告由 AI 深度分析生成，基于视频完整字幕。
导读
Jack Roberts 是一位连续创业者，曾建立并出售过拥有 6 万名用户的技术公司，也卖过价值数千美元的定制网站。他的内容风格是"动手派"——不谈理论，直接演示怎么做。
这期视频发布于 Google Stitch 2.0 刚上线时，Jack 做了一件很多人没想到的事：把 Stitch 的"视觉设计"能力和 Claude Code 的"代码实现"能力拼在一起，从零到一现场建出一个有注册登录、有 Stripe 付款、能上线收钱的 VPN 类型网站。
核心论点：网站建设的瓶颈已经从"会不会写代码"变成了"会不会用工具组合"。Stitch 解决的是"怎么让它好看"，Claude Code 解决的是"怎么让它能用"，两者合并，就是一套不需要专业设计师、不需要专业开发者的完整产品线。
核心观点速览
- Stitch = "Vibe Design"——用感觉描述想要什么，AI 给你出设计，不受 HTML/CSS 语法限制
- Claude Code 不只是写代码的——它能帮你理解如何接入 Stripe、如何配置 Supabase，是一个懂技术的协作者
- 设计稿不是终点，是起点——Stitch 导出的 ZIP 是 Claude 的输入，不是最终产品
- DRIP 框架把混乱变成流程——设计→精炼→实现→发布，每一步有明确的工具和目标
- "Improvement Velocity"是评估工具最重要的维度——工具好不好不只看现在，要看它进化的速度
一、DRIP 框架：Jack 的四步建站方法论
Jack 把整个工作流归纳为一个四步框架，字母 DRIP 分别代表：
| 步骤 | 英文 | 工具 | 目标 |
|---|---|---|---|
| D | Design（设计） | Google Stitch 2.0 | 生成视觉稿、确定设计方向 |
| R | Refine（精炼） | Stitch 设计系统 | 锁定品牌色、字体、组件风格 |
| I | Implement（实现） | Claude Code + Anti-Gravity | 把设计变成真正能跑的应用 |
| P | Publish（发布） | Supabase + Stripe + Vercel | 接入后端、支付、部署上线 |
这个框架的价值不在于它有多精妙，而在于它把"建站"这件听起来复杂的事情拆成了每一步都有明确输入和输出的环节，降低了进入门槛。
二、D = Design：用 Stitch 做"氛围设计"
Stitch 是什么
Jack 把 Stitch 定义为 "Vibe Design"（氛围设计）——你描述一种感觉，它生成一个视觉结果，不受编程语言语法的约束。
这和直接让 Claude 写代码的根本区别在于：图像生成没有 HTML/CSS 的边界，它可以生成你脑子里任何你想象的东西，然后再反向工程成代码。
设计灵感从哪里来
在让 Stitch 开始生成之前，Jack 建议先准备 2-3 张截图作为参考：
- Godardly.com：精选的高质量网页设计库
- Dribbble.com：设计师作品平台，各类风格都有
- 21st.dev：React 组件库，可以按"本周最热"筛选
这些截图会作为"种子图片"传入 Stitch，告诉它你喜欢什么样的排版、交互感、配色。
具体操作流程
- 进入
stitch.withgoogle.com，选择 Web（横版） - 选择 Redesign 模式——先生成基础图像参考，再迭代
- 上传 2-3 张截图 + 写提示词（说明你想要什么样的网站、哪些元素是你关注的）
- 可以同时开多个标签并行生成，比较不同方向
- Stitch 生成后，自动创建设计系统（主色、辅色、字体组合）
- 在右侧 Design System 面板可以调整色板 seed color、修改字体
Jack 的一个颜色选择原则：做数据安全类产品用蓝色——"蓝色代表信任，这是你和数据打交道时想传递的第一感觉。" 不是随机选的，是跟产品定位对齐的。
Stitch 2.0 新增的能力
- 输入方式：截图 / URL / 提示词三种，可以混用
- 可以直接输入竞品网站的 URL，Stitch 读取内容后生成风格参考
- 支持对话模式——除了打字，你可以和它语音对话，实时调整设计方向
- HTML 可以直接在 Stitch 界面内点击 Modify 编辑文本
- 设计完成后一键导出 ZIP 包（包含
designer.md、HTML、CSS 等所有文件）
三、R = Refine：锁定设计系统
精炼阶段的核心任务是从多个生成变体中选出最好的一个，并固化成可复用的设计系统。
具体做什么：
- 比较多个生成变体，选定你最喜欢的排版和配色
- 进入 Design System 面板，确认颜色、字体
- 用 command 多选不同设计元素，让 Stitch 融合最好的部分（比如"把变体2的字体 + 变体1的图像 + 地图组件组合在一起"）
- 确认最终的品牌色（Jack 把紫色改成了蓝色）
为什么这一步重要：一旦你在 Stitch 里确定了设计系统，之后 Claude 生成的所有页面都可以复用这套系统，保持一致性。这就是 Jack 说的"spin up a million different pages using the exact same brand identity"。
四、I = Implement：Claude Code 把设计变成真正的应用
把 Stitch 导入 Claude Code 的两种方式
方式一：ZIP 导出（视频演示的方式）
- 在 Stitch 里多选你要导出的页面（按住 Command 选多个）
- 右上角 Export → 下载为 ZIP
- 在 Anti-Gravity（或 VS Code）里新建一个文件夹，把 ZIP 解压进去
- 打开 Claude Code，新建会话
方式二：MCP 连接（更强大但更复杂）
通过 Stitch MCP Server，让 Claude Code 直接操控 Stitch，可以批量生成、提取品牌标识，不需要手动导出。Jack 在视频里给出了连接方法的链接。
给 Claude Code 的第一个 prompt
Jack 示范的启动 prompt 是这样说的：
"Hey there, I've created a design within Stitch. You'll see all those files on the left-hand side. What I'd like to do is turn this into a gorgeous app using any of the libraries that you think are appropriate to make this an absolute standout app using the very best unique typographies as shown in the screen image. Install any libraries you require to do this. And once that's completed, I'd like it to open up for me in a local host."
关键点：不告诉它用什么技术栈，让它自己决定；要求它安装需要的所有依赖；要求最后在本地跑起来。这样它会把 HTML 升级成更专业的 React/Next.js 应用，而不只是改改样式。
用 21st.dev 追加组件
基础应用跑起来后，Jack 会去 21st.dev 找高质量的 React 组件（比如一个可以交互的 3D 地球组件），然后：
- 点击组件 → "Share Component" → 复制 prompt 或代码
- 回到 Claude Code，说"把这个组件加到 X 位置，让它融入现有设计"
- 粘贴代码或 prompt，让 Claude 集成进去
21st.dev 的"Best of the Week"是 Jack 最常用的来源——这些是社区投票最高的组件，质量有保障，直接拿来用比自己写要好得多。
五、P = Publish：接入后端、支付、上线
这是整个 DRIP 框架里技术含量最高的部分，但 Jack 的演示说明了一件重要的事：Claude 不只能写代码，它还能充当技术顾问，告诉你需要什么，并帮你一步步接好。
5.1 认证系统（Supabase）
Jack 让 Claude Code 集成 Supabase，实现用户注册/登录：
给 Claude 的 prompt：
"Integrate Supabase such that individuals can create a username, their name, and their password, and that is stored in Supabase. I would like you to connect to Supabase via the following token, and when an individual creates an account, store that with row-level security."
在 Anti-Gravity IDE 里，你可以直接通过 MCP 搜索 Supabase，找到配置入口，生成 Access Token，粘贴给 Claude，连接完成。
结果：用户可以注册、登录，刷新页面后仍保持登录状态，数据存在 Supabase 里并有行级权限安全控制。
5.2 支付系统（Stripe）
这是视频里最让人印象深刻的部分之一。Jack 让 Claude 集成 Stripe，流程是：
- 在 Stripe 后台创建产品（£10/月的订阅）
- 在 Stripe 开发者 API 页面获取：Secret Key + Public Key
- 把两个 key 提供给 Claude Code
- Claude 自己去 Stripe API 抓取产品 ID ——你只需要告诉它"这个产品是£10/月"，它会自己找到对应的 price_id
- 完成 Stripe Checkout 集成
Jack 的重要提示：
- 测试时用 sandbox 模式（卡号用 4242 4242 4242 4242）
- 上线时把 Stripe 切换到 live 模式，key 前缀从
pk_test_变成pk_live_ - Stripe webhook 需要在 Supabase Function 里处理，确保支付成功后更新用户的订阅状态
5.3 部署上线（GitHub + Vercel）
给 Claude Code 的 prompt：
"Go ahead and create a GitHub repo and publish this, then one-click publish it to Vercel. If you're not connected to GitHub, open this up with the CLI. If not, go ahead and do it. Then publish it to Vercel using the below token."
流程：
- 获取 Vercel token（vercel.com/account/settings/tokens）
- 获取 GitHub token（用 CLI 连接）
- Claude 自动完成：创建 GitHub repo → 推送代码 → 触发 Vercel 部署
- 最终得到一个
.vercel.app的正式 URL
持续部署：此后每次在 IDE 里改代码，Claude Code 推送到 GitHub 后，Vercel 会自动重新部署，几分钟内上线。
六、工具栈总览
| 类别 | 推荐工具 | 作用 |
|---|---|---|
| 视觉设计 | Google Stitch 2.0 | AI 生成设计稿 |
| 开发 IDE | Anti-Gravity | Claude Code 集成环境 |
| AI 编程 | Claude Code | 代码实现 + 集成指导 |
| 组件库 | 21st.dev / CodePen | 高质量前端组件 |
| 认证/数据库 | Supabase | 用户系统 + 数据存储 |
| 支付 | Stripe / Lemon Squeezy / Paddle | 订阅收款 |
| 邮件 | Resend | 注册确认 / 密码找回 |
| 代码托管 | GitHub | 版本管理 |
| 网站托管 | Vercel | 一键部署 |
七、Jack 的思维框架："Improvement Velocity"
Jack 提出了一个评估工具的核心指标：Improvement Velocity（进化速度） ——一个工具现在的能力有多强是一方面，更重要的是它以多快的速度在变好。
"What I always look at when looking at tools is what I call improvement velocity — how much is it improving and at what speed?"
他对 Stitch 的判断是：Google 在重度投入这个产品，设计的未来方向一定是 AI，而 Stitch 的迭代速度证明了这一点。
延伸思考：这个框架其实也适用于选择编程框架、AI 工具、SaaS 产品。在工具泛滥的今天，一个工具现在很好但停止进化，和一个工具现在稍逊但持续改进，后者往往是更好的赌注。
八、什么时候值得用这套工作流
适合的场景：
- 想快速验证一个产品想法，需要一个能演示的 MVP
- 给客户做落地页或展示网站，需要高设计质量
- 想搭建一个有订阅功能的 SaaS 工具，但不懂代码
- 需要给自己的业务快速上线一个注册系统
不适合的场景：
- 需要高度定制的复杂交互（Stitch 生成的设计有边界）
- 企业级项目，需要严格的代码审查和测试体系
- 已经有成熟技术团队的情况（这套流程更适合个人或小团队）
金句收录
"Think of Stitch conceptually as vibe design — that's the best way to think about it." 把 Stitch 理解为"氛围设计"——这是最准确的形容。——Jack Roberts
"The reason why it's great to start with image generation is because it's not limited to the confines of HTML or any coding language. It can literally just design and create for you anything you imagine." 从图像生成开始的好处是它不受 HTML 或编程语言的约束——它真的能生成你能想象的任何东西。——Jack Roberts
"We've brought this era of vibe design to the table. We can bring in different websites, image generation — this is really a step up." 我们把"氛围设计"时代带到了桌面上。可以导入网站、图像生成——这是真正的升级。——Jack Roberts
"What I always look at when looking at tools is what I call improvement velocity — how much is it improving and at what speed?" 我评估工具时看的核心指标叫"进化速度"——它在以多快的速度变好。——Jack Roberts
"Generally speaking, when you're doing these kinds of integrations, you can actually have Claude educate you through the connective process." 做这类集成时，你可以让 Claude 在连接过程中给你当老师。——Jack Roberts
"Fonts is one of the easiest ways to elevate the feel and vibe of anything." 字体是提升任何东西质感和氛围感最简单的方式之一。——Jack Roberts
时间线索引
| 时间 | 内容 |
|---|---|
| [00:00] | 开场：Google Stitch 2.0 + Claude Code 的组合价值 |
| [00:45] | DRIP 框架介绍 |
| [01:00] | D = Design：进入 Stitch，开始生成 |
| [01:40] | 设计灵感来源：Godardly、Dribbble |
| [02:35] | Stitch 2.0 新功能概览 |
| [03:20] | Stitch 生成效果展示，选择最佳变体 |
| [05:00] | R = Refine：设计系统面板，颜色调整 |
| [07:00] | 颜色选择逻辑：蓝色 = 信任 |
| [07:40] | 实时 AI 对话功能演示 |
| [11:40] | I = Implement：开始接入 Claude Code |
| [12:00] | 两种导入方式：ZIP vs MCP |
| [13:30] | 启动 Claude 会话，第一个 prompt |
| [14:45] | 21st.dev 组件库介绍 |
| [15:20] | 从 CodePen 获取 3D 地球组件 |
| [17:00] | P = Publish：开始接后端 |
| [18:30] | Supabase 集成：注册登录系统 |
| [20:00] | GitHub + Vercel 部署流程 |
| [21:45] | 上线验证：账号注册/登录测试 |
| [22:00] | Stripe 集成开始 |
| [23:10] | 创建 Stripe 产品，获取 API key |
| [24:30] | Claude 自动抓取 price_id |
| [25:45] | 测试支付流程（sandbox 模式） |
| [26:10] | 总结：完整链路跑通 |
评论
还没有评论，来第一个留言吧 ✨