YT 学习笔记

17 分钟用 Google AI Studio 2.0 搭站:设计蓝图 + 本地迭代 + Outlier 策略

29分钟阅读下载 MD

封面

Jack Roberts · 28:01 · 发布 2026-05-26 · 8.6万次观看(截至抓取) · 观看原视频

🔥 观众最高回放 06:43 — 演示用 Firecrawl 把 rocket.new 的品牌身份、字体、配色抽成结构化 brief,作为后续”喂给 AI Studio 一次性出站”的输入文件。

主旨

把 Google AI Studio 2.0 作为「可视化出站机」、把 Claude Code 作为「对话式编辑器」,用一份基于灵感站抽出的 design blueprint 一次性出站、下载后回到本机做截屏式迭代,再用 outlier 策略研究本细分赛道前五/末五的共性来生成改稿 action plan,让 17 分钟里产出的网站从”长得漂亮”升级到”会转化”。

核心论点

  1. “出站快”不等于”出站好”——大多数站一推就崩是因为根本没有 design brief——AI 需要的是结构化的”什么算好”,而不是一句 vibe prompt。(→ 详解1)
  2. AI Studio 适合一次性出骨架,Claude Code 适合对话式编辑——前者出多文件项目、后者接管代码与本地 dev server,各自用其所长。(→ 详解2)
  3. 网站DNA 不是复制设计,是提取设计 architecture——理解 box/层级/typography 才能跨四五个灵感站叠加出”我自己的风格”。(→ 详解3)
  4. Design Blueprint = 把灵感站压成 brief/scaffold/tokens 三件套——Firecrawl 抽完跑一遍,一次性拿到四份说明书,之后可以甩进任何 AI 工具复刻。(→ 详解4)
  5. Outlier 策略用”行业前五 vs 末五”代替”我审美”——roofers 在德州所有人首屏都放屋顶图,这条规律比你自己瞎想可靠得多。(→ 详解5)
  6. 首页三要素:H1(≤ 7 词)+ 信任徽章 + 清晰 offer stack——超过这个就要砍,核心是 “do not make me think”。(→ 详解6)
  7. Hero 区图像→视频 用同一张起止帧做 Kling 3.0 8 秒循环——比静态图更有动感但不会喧宾夺主,且视频文件大小要担心加载速度。(→ 详解7)

知识点详解

1. 为什么大多数站会被”一推就崩” 00:00

开篇用一句把行业现状钉死:00:45 “Most websites fall apart like season 8 of Game of Thrones”——花哨、第二天客户一动手就毁。同段铺出”目标观众到底要什么”的隐含问题,而博主自称给出的解法方向是”用 AI Studio 新系统 + 真正会转化为买家的设计”。

作者把”好的网站”具象化为一句:00:55 “all in one shot by the way. Look how balanced, look at the white space, look how beautiful this is”——一次性出站、白空间均衡、不堆元素。这是审美锚,也是后面 21 个小节反复回望的对照系。

整套方法框架:00:41 “I’m going to save you so much time with what’s changed and what you need to know”——博主承诺”省下我踩过的坑”,同时预告会演示怎么 reverse engineer 自己所谓”网站 architecture”。换句话说,本片价值是节奏比单点深度——读者需要的是”路线图”,不是某一招的独家心法。

2. AI Studio 一次性出骨架 + Claude Code 接管迭代 01:09

01:09 起解释 Google AI Studio 2.0 到底是什么:01:23 “powered by Gemini 3 Pro”——用的是 Gemini 3 Pro 系列;进一步:02:13 “Gemini 3.5 flash for free” + 01:41 “do two projects completely for free”——免费额度已经够两个项目起步。

AI Studio 角色:可以全栈、能标注、可上云、可以从 Anti-Gravity 导出 (01:44 “things that you can do with AI Studio before going to build”)。博主结论是先用 AI Studio 出”长得好看”的框架,再用 Claude Code 做后续修改:02:28 “it has access to a very broad design library, and its whole purpose and strategy is to design something that looks freaking gorgeous”——AI Studio 的强项是设计库广、产物视觉强。

但有一个硬限制:04:26 “AI now can effectively build anything if you tell it what good looks like”——光给 prompt 不够,得告诉它”什么是好”。这是后面整张 design blueprint 的存在理由。

3. 三种建站路径:模板/从零/提取DNA 03:11

03:11 介绍三种 build 路线:模板、从零、提取 DNA。第一种会被迅速否决:03:16 别人模板意味着 03:19 “they look super generic”——所有人长得一样,品牌识别度为零。

第二种(从零跑):03:21 “build from scratch. That is going to involve you going back and forth like a 12-round boxing fight trying to get it look perfect”——来回十几轮拉扯,效率低。

第三种即博主走法:03:32 “you can build the DNA of a website”——理解你欣赏的那个网站为什么好,然后复刻”好”的本质而不是外观。

04:06 “I love the white space in this design” 这一类个人偏好无法被 AI 显式枚举,所以我们要把它转成可读规则——这一步就是后面 design blueprint 的目的。

4. 用 Firecrawl 做品牌研究并产出 design brief 04:56

本节是本片 Design Blueprint Method 的核心。05:54 “I built this inside the community. With [a skill I] call the design blueprint extractor”——博主把这件事封成一个 Claude Code Skill,可从 Skool 社区下载。手动做法是:06:32 “I use Firecrawl for this. It’s a tool that you can use completely for free and it just enables you to extract brand identities and tons of typography”——直接用 Firecrawl 抓目标站的结构化信息。

Blueprint extractor 实际产出四件套:09:00 “you will get four basically files that come out”——一份是 09:03 “builderbrief.md, which kind of just is all of the information about the website”。

具体操作是 06:59 把目标 URL(本片用 rocket.new)丢给 Firecrawl,再问答交互:07:03 “just go ahead and click enter”——交互式问”一行描述/产品”,例如 08:12 “we help businesses build beautiful websites”。

博主把”在喂 AI 前先预防式收敛” 总结:08:40 “get this slight little little pre you know”——预防成本远低于事后返工。

四件套的另一侧:09:16 “scaffold.html, which is kind of like, ‘Look, this is kind of how you want to break down the website. So, now you have a scaffold that we can give to Gemini to make our website look freaking awesome’“——HTML 骨架直接喂给 Gemini,等于把”什么是好”具象化成可见的页面结构。

5. 喂给 AI Studio 出骨架 + 局部 amend 08:27

07:24 进 “extracting the brand identity for rocket.new”——选案例站。进 AI Studio 后是 07:23 “It’s a real popular theme that’s emerging”——dotted-line 主题正流行,可叠加进自己的站。

08:37 “we want to look how the website looks, not just generic. So, it’s really worth understanding”——前后呼应收尾,把 blueprint 当作”避免 generic”的最便宜防线。

喂完 AI Studio:10:28 “we get a website that looks a little bit something like this”——产物是多文件项目,但 11:26 “but it’s not crazy”——AI Studio 的内置发布流不值得深入,有更深的设计/转化层需要。

10:39 现场点 “download the website” 按钮把它打成 zip——这是从”在线预览”搬到”本机代码”的接力点。

6. 拉进 Claude Code 跑本地、做截屏式迭代 11:32

下载完 zip 后 12:04 “drop it into Claude”——把整包交给 Claude Code。接着 12:34 “AI’s made this stuff way more accessible”——AI 让这种”在本地起服务、用自然语言对话式改”成为门槛极低的事。

启动方式是 13:08 “Look how it just opens up in a local host 3000”——dev server 跑起来,随时把修改迭上去,12:59 “now we’ve got the rest of the stuff that we can optimize”——剩下的都是微调。

这种 “把站点搬迁出 SaaS,变成自己的产物” 是 11:43 一段口播想强调的工程意义:本地拥有代码,可以接进 Antigravity / Claude Code / Codex 等任何 IDE,等于拿到了 portability。

7. Hero 区:Ghibli 风格图 → 局部 amend → 8 秒视频 13:20

进 Hero Image 段落:13:21 “We can use anything for this”;13:24 博主用 Hexfield 出图——一句 prompt 把”火箭起飞”做成背景。落到工程:13:28 “you can paste any rules around it”——把图丢给 Claude,指令是”做这张图的背景,保留线条但留出文字对比”。

13:45 首版已可用,但博主追求细节:14:49 “I think it’s worth taking just one or two minutes”——hero 资产值得花一两分钟打磨。

14:22 火箭位置偏右 → 用 Claude 反向 18:05 用 Kling 3.0 把它做成 8 秒循环视频(同帧起止)。逻辑:16:01 “We could make it similar”——视觉一致性。

8. 视频加载速度是隐性转化率 19:33

视频替换完图后:19:33 “speed is an important factor on your website”——清晰的工程经验。19:39 “If your website takes too long to load, people are really freaking impatient”——加载超过 19:39 “If it takes 15 business days, they will leave”——博主粗估一个耐心阈值(口播中说的就是”15 business days 这种离谱”作为修辞,工程上仍以秒计)。

博主把这件事具体落到:[19:29 起] 应该用 PageSpeed Insights / GTmetrix 实测,根据 Lighthouse 指标压视频文件大小——是一个”视频做完了不等于发布完成”的工程结论。

9. Outlier 策略:研究行业前五 vs 末五 21:41

21:40 “this is actually understanding how do we turn the viewers into buyers”——这是全片后半段的钩子。从这开始,博客想补全”漂亮但不会转化”的另一半。

[21:40-22:04] 提出 outlier strategy:22:04 “we look at up to 12 different websites. And we are going to analyze those websites in terms of like, what are the top five doing? And what are the worst five doing”——挑赛道里的 Top 5 与 Bottom 5,分析他们各做对了/做错了什么。

22:08 “what are the top five doing”——例如 roofers 在德州:[22:08] “every single roofer in Texas showcases beautiful roofs within the first page”——共性规律比个人审美可靠。

24:05 “you don’t need to reinvent the wheel. Understanding psychologically and just based on our outlier performance from these incredible websites that are already converting, we know we can just identify the commonality and trends and then literally cherry-pick the best components for us”——把行业里最好的共性抽出来,做减法,免得自己造轮子。

10. 跑 Outlier Research Skill、读生成的 blueprint 22:42

实操做法是博主把 outlier 也封成了一个 Claude Code Skill(同在 Skool 社区)。23:35 “It’s going to ask you some questions”——Skill 一上来就问”竞争对手是谁、地理范围、要 blueprint 包含哪些页”。

博主跑完一遍后演示产物:[27:18] “look at this. No AI mention on anywhere in the page for this company. Really interesting insights”——读出来的 blueprint 会指出”这类网站里没有 AI 字样”,由此给出后续改稿方向。

11. 首页必杀技:别让我想 24:34

24:45 “websites are not read, websites are glanced at. Do not take their attention for granted”——扫描不是阅读。

落地到 H1 限制词数:25:43 “this H1, I don’t want to be any longer than seven words”——七年到老:7 词上限。其他要素:25:28 “We need to include things like testimonials”——加社会证明。

信任部分两种做法:26:03 “Why are you credible? We can do this by either showing additional logos like hey, these are the companies that we work with. If you don’t have that credibility, what you can do instead is built with platforms you love”——无大客户时换技术栈 logo 做信任背书。

最终结论反复回扣:13:26 + 全文多处 “Do not make me think. Do not make me engage my critical system one brain. I need to be chimp brain”——首页要让用户进入 chimp brain(条件反射级),不进入慢思考。

12. 收尾:让 blueprint 反推改稿 action plan 26:29

最后一段把 outlier 产物接回当前站:[27:18] “could you create for me an action plan of all the stuff that we should change on our current website”——把”行业最佳实践”反向投射到自己现有站上,得到改稿清单。

这是闭环的核心——Outlier 策略 不是用来写新站的,是用来评审已有站的对齐度。

可执行步骤

  • 进 Google AI Studio 2.0 注册,确认能用 Gemini 3.5 Flash 模型(免费档起步)。
  • 选 1 个你欣赏的站点(本片用 rocket.new),用 Firecrawl 或 design blueprint extractor 把 brand identity/typography/spacing 抽成结构化 brief,产出 builderbrief.md、scaffold.html、tokens 三件套。
  • 把 brief + scaffold 喂给 AI Studio,写一句 prompt(目标客户 + offer + 风格). 让 AI Studio 出多文件项目骨架。
  • 在 AI Studio 内做局部 amend(remix 按钮 / 笔图标点 H1 改文案),作为”初稿”即可,深改不必在 AI Studio 内做。
  • 点 Code → Download as zip,把整个项目搬到本地。
  • 在本机用 Claude Code 加载解压文件,执行”open this up in local host”——Claude Code 自动起 dev server 并通过 localhost:3000 打开预览。
  • Hero 区:用图像生成服务(博主演示用 Hexfield)做一张能当背景的图,丢给 Claude Code 作为 hero section background,要”留出文字对比区”。
  • 不满意?让 Claude Code 反向生成 amend prompt,你把 prompt 喂回图像生成器做二版——循环 1-2 次挑最合适的。
  • Hero 进一步上动效:用 Kling 3.0 等工具做同帧起止 8 秒循环视频。视频替换前先量文件大小,避免影响首屏加载速度。
  • 跑 Outlier Research Skill(下载或自制 skill):给”赛道关键词 + 地理范围 + 想要的页型(首页/价格/特性)“,抽到 top-5/bottom-5 共性分析(blueprint)。
  • 把”信息密度”压回基础三件套:H1 ≤ 7 词、信任徽章(logos or “built with X”)、清晰 offer stack;其他都删。
  • 用 “do not make me think” 自检首屏——任何人扫一遍能不能在 3 秒内知道这是干啥的、为什么可信、怎么开始。
  • 把 outlier blueprint 喂回 Claude Code,要求产出”针对当前站的改稿 action plan”,按优先级逐条实施。

关联

  • 进阶:本片在「本地拥有代码 + 自然语言迭代」上是 CMS 笔记 的前置篇——后者讲”再加一层 CMS 让客户自助改”,本片讲”先把好看且转化的站造出来”,二者衔接方式是先按本片跑出 hero + 转化骨架,再把同一份代码接进 CMS 笔记的 MongoDB + Vercel 流水。同作者、同工具栈、不同交付深度。
  • 互补:Firecrawl 在 Claude Code 三个浏览器 agent 工具速览 被定义为抓取/浏览器自动化的子功能;本片把 Firecrawl 独立抽出作为 design blueprint 的输入源——前者把它当”抓取工具”,本片把它当”灵感转结构化 brief 的桥梁”,两者覆盖了 Firecrawl 在 agent 工具链里的不同切入面。
  • 印证:本片”先有 brief 再喂 AI” 与 Hermes Agent 笔记里”用 Firecrawl 抽市场数据再让 Claude 分析”的形态一致——都是把”非结构化网页 → 结构化 brief → AI 高质量输出”作为通用流水线,本片把同一流水线专用于”设计”这一垂直场景。
  • 互补:首页 “do not make me think” 与 7 万站审计笔记 里的 四个转化问题框架(你是谁/做什么/为什么可信/怎么联系)同源——前者是 chimp brain 的口语版,后者是结构化清单版,本片给你直觉、前一篇给你核校表,两篇合用即可给首屏做一遍体检。
  • 进阶:本片”用 Firecrawl 抽结构 + AI 一次性出站 + Claude Code 接管迭代”是 LightRAG 笔记 把外部能力接入 Claude Code 的另一具体形态——后者讲”图谱”,本片讲”网页结构化”,两者都属于”让 Claude Code 不再只凭 prompt 盲输出”的实战证据。
  • 进阶:Fable5改写网站设计 独立提出同一手法(Design DNA:抽参考站的设计语言而非外观再重建);本片是该方法论的首次成形(用 DNA Extraction 命名、给出叠加多站的具体做法),那篇补的是”用 Fable 5 + skill 自动化抽取”的执行细节。先读本片懂方法,再读那篇看怎么工具化。
  • 复现:Fable 5 七级建站 的 Level 7 复用本片的 Design DNA / Design Blueprint / Scaffold (HTML) / Chimp Brain 一整套设计方法,把”提取设计语言再重建”做成官网级 one-shot;本片是这套方法的首次成形,那篇是它在七级递进里的落点。

一手来源与延伸

术语

  • Design Blueprint(本片用语,把目标站拆成 builderbrief.md + scaffold.html + tokens 的可喂 AI 结构化产物)
  • DNA Extraction(从欣赏的网站里抽出它的 design architecture,而非外观;4-6 个灵感站叠加出自己的风格)
  • Scaffold(HTML 骨架文件,等于”什么是好”在结构层面的可见化)
  • Local Host(本片语境指 localhost:3000 等 dev server 预览站点,不发布到云先在笔记本跑)
  • Outlier Strategy(挑赛道里 Top 5 与 Bottom 5 各 5 个网站,分析共性规律反哺设计)
  • Chimp Brain(本片用语,指用户扫描首页时所处的快思考/直觉级认知模式,与系统二思考相对)
  • H1 ≤ 7 词(本片给的首页标题硬上限,过此即砍)
  • Offer Stack(列出”你会得到这些”的清晰清单,本片强调首页必须有)
  • Hexfield(博主用作图像生成的工具实例,非赞助;同类工具可替代)
  • Kling 3.0(博主用作 hero 图转视频的 AI 视频工具,8 秒循环)
  • rocket.new(本片用作 blueprint 来源的具体网站示例)
  • Anti-Gravity(Google 的 agentic IDE,博主演示时作为 AI Studio 导出入口之一)
  • Trustpilot(博主点名的”信任信号”来源类比,展示社会证明可用第三方平台而非自建)

金句

“Most websites fall apart like season 8 of Game of Thrones.” (00:45) — 一句话锁定本片要解决的问题:看起来漂亮 = 客户一动手就崩。

“AI now can effectively build anything if you tell it what good looks like.” (04:26) — 这是 design blueprint 这一整套机制的存在理由。

“Do not make me think. Do not make me engage my critical system one brain. I need to be chimp brain.” (26:17) — 全文反复回扣的首页铁律。

“you don’t need to reinvent the wheel.” (24:05) — outlier 策略存在的全部理由,也是本片区别于”凭审美拍脑袋”派的设计哲学。

立场与利益

  • 与利益同向:“用 AI Studio 2.0 + Firecrawl + Hexfield + Kling 3.0 + Claude Code 这条产品线”恰好对应 meta description 给出的 affiliate 链接(Firecrawl 专属短链、Skool 社区、Glaido 语音等),工具组合在被描述成”零成本闭环”,但未给出”换掉其中一两个会怎样”的对比论证;采信前自问”如果只用 AI Studio + Claude Code 不接中间服务呢”。
  • 利益中性:“先做 design blueprint 再喂 AI”、“本地 dev server 跑站点自然语言迭代”、“outlier 策略查行业共性”、“首页 H1 ≤ 7 词”——这些都属于视觉/工程常识,与他卖什么无关,可独立验证,直接采信。
  • 与利益反向:博主在结尾直接露 [27:18] “could you create for me an action plan of all the stuff that we should change”——也就是承认”他演示的那一版仍是半成品,需要 action plan 才能算真正可用”,而不是宣称他的方法已经能直接”卖站”,这点比他其他频道普遍”用一次就行”的卖课话术更诚实,采信时高看一眼。

价值定位

  • 适合谁:已经在 vibe coding、想把”建一个能转化的站”标准化为流水线的从业者(自由职业/小工作室),也适合没做过站、想看一份”完整 0→1 实战”而非”某一招的心得”的初学者。
  • 解决什么:把”好看但不会转化”和”代码能跑但视觉一塌糊涂”两边各补齐一半——AI Studio 解决后者、outlier 策略解决前者、Claude Code 居中做迭代。
  • 认知 vs 实操:认知层面是”design blueprint 是 AI 一次性出站质量的真正杠杆 / outlier 比审美更可靠 / chimp brain 是首页唯一目标”;实操层面是 12 个 checkbox,每步都有具体工具和文件产物,但每一步独立成本都不低(尤其第二、三、四步要搭环境、调 API、看视觉),建议边看边照着做,不要指望看完就能复刻。
  • 与 CMS 笔记 重叠但本片独有:CMS 笔记专讲”客户能改不崩”,本片专讲”上线前站要做对”——前者是交付层(赚钱之后),本片是产物层(赚钱之前);两者共享 Firecrawl / Claude Code / 本地迭代这三件套,但本片独有 AI Studio 出骨架、Hero 图/视频链、Outlier 策略 这一段”上线前”。

自检问题

  1. 为什么大多数网站”一推就崩”?博主用什么机制让 AI 在出站时就知道”什么是好”? 答案:因为大多数站没有 design brief,只有一句 vibe prompt;博主用 Firecrawl/design blueprint extractor 把灵感站的结构(typography/层级/节奏)抽成 brief 与 scaffold,让 AI 知道”什么是好”再一次性出站。00:4504:26
  2. AI Studio 2.0 与 Claude Code 在这套流水线里各自负责哪一段?为什么不让 AI Studio 做完全部迭代? 答案:AI Studio 出多文件项目骨架(广设计库、视觉强),Claude Code 接管代码与本地 dev server(自然语言对话式迭代)。AI Studio 内置迭代体验不佳且编辑器深度有限,所以导出 zip 跨过接力棒。01:0911:32
  3. 博主识别到”DNA Extraction”和”从零搭”两种方式各自的限制各是什么?为什么他最终选 DNA? 答案:从零跑会变成 12 轮来回拉扯;模板会变成烂大街的样板脸;DNA 抽的是设计 architecture(白空间/层级/typography)而非外观,可叠加 4-6 个灵感站形成自有风格。03:11
  4. Outlier 策略具体怎么跑?为什么它在”漂亮但不会转化”这一节是更可靠的路子? 答案:挑赛道 top 5 与 bottom 5 各 5 个网站,分析他们做对了/做错的共性(roofers 都把屋顶放首屏之类),把行业里已验证的规律反哺到自己的站上。比个人审美可靠是因为它用群体数据代替单点偏好。21:41
  5. “Do not make me think” 在首页落到哪三条具体要素?每条要素各自的硬上限或等价替代是什么? 答案:① H1 ≤ 7 词,过此必砍;② 信任徽章(客户 logos 优先,无大客户则换”built with X 平台”做技术栈信任);③ 清晰 offer stack(列出”你会得到这些”),其他要素全删。13:26

关系图谱

反向链接