YT 学习笔记

Claude Design 2.0 五级攻略:从界面到本地 Open Design 与 GLM 5.2 自托管全栈

28分钟阅读下载 MD

封面

Jack Roberts · 15:02 · 发布 2026-06-28 · 10.2万次观看(截至抓取) · 观看原视频

🔥 观众最高回放 08:16 — Firecrawl 抓取品牌身份后,Claude Design 首次展示成品的那一秒:字体边缘、配色、品牌 logo 被还原到位。

主旨

围绕 Claude Design 2.0 的「五级使用体系」做端到端走查:从认识工具物理形态,到用 GitHub 仓库/参考图/设计系统做品牌内协同设计,再到用 Firecrawl 等内置连接器接外部数据,再把设计回传 Claude Code 继续代码化,最后用本地 Open Design + 任意模型(含 GLM 5.2)绕开 Opus 信用额瓶颈。

核心论点

  1. Claude Design 2.0 修了两个最致命的旧痛点:credit 消耗与画布直编辑——这是把老用户拉回来的关键,新加的「引入设计系统 + 双向设计」是配套增量。(→ 详解1)
  2. 五级不是平行选项,而是「能用 → 协同 → 智能扩展 → 代码化 → 自托管」的递进,前一级能力会被下一级继承放大——这一条决定了选哪一档用,而不是看心情切。(→ 详解2)
  3. Level 1 的关键在「Claude 桌面里能开 Claude Design」——不用切到 web 端,在桌面 app 的 chat 下拉点 design 即可开一条新终端,把网站/幻灯/动画装进同一上下文。(→ 详解3)
  4. Level 2 的 GitHub repo + 截图 + 设计系统三件套让 Claude 在指定品牌内做产出,「edit on canvas」把改字/换色从「让 AI 重建 context」降为「点元素改值」——后者是这次升级 token 友好的机制根因。(→ 详解4)
  5. Level 3 用 Firecrawl 抓品牌身份是「用别人已完成的视觉语言」打法的具体落地——很多站没为 AI 爬取优化,Firecrawl 把 HTML 噪音过滤后只留结构化信息;Higgsfield / Kia AI 这样的图像生成器补 Firecrawl 不会直接产图这件事。(→ 详解5-6)
  6. Level 4 的「zip handover fix」是本片最实战的一条:Claude Design → Claude Code 的官方 send 通道对资产类文件不可靠,zip 才是稳的——这条独立于产品好不好用,是流程稳定性的关键。(→ 详解7)
  7. Level 5 的 Open Design + 任意模型 + GLM 5.2(1/6 价格) 是「不被单一模型绑架」的关键兜底——Opus 信用额烧光后还有 GLM 5.2 这条命脉,且 Open Design 是开源、免费、本地跑。(→ 详解8-9)
  8. 「Claude Design = Claude Code 模型 + 画布编辑 + 多种导出格式」是本片最值得记住的元认知——共用了 Opus 4.8 底层,这决定了你按「产物形态」选工具,而不是按模型选。(→ 详解10)

知识点详解

1. Claude Design 2.0 是什么 + 四个大变化 00:02

作者开篇定位工具:00:02 “Claude code is the world’s number one design agent and they just dropped Claude design 2.0”——把 Claude Code 称为「设计 agent 第一名」,Claude Design 2.0 是其上的新版本。设计形态涵盖 prototypes / websites / animation / frames,首周拿到约一百万用户。

工具本质是 00:49 “effectively, it is Claude’s answer to creating beautiful design”——Anthropic 自己拿出的设计产品形态,作者称 Opus 4.8 是当前地表最强的设计 agent 之一。

四个大变化打包在一段口播里:01:07 “they have done four big things”——四项关键升级。第一条且最大:01:13 “First of all, and this is the big one, credits go further”——信用额消耗减低,这是老用户最大的痛点。

剩下三条作为配套增量打包:01:28 “you can bring in design systems, you can design both ways and you can even edit on the canvas”——引入设计系统、双向设计、画布直编辑。这条把本片后面要展开的「edit on canvas + inbuilt connectors + 回传代码」三件事全锚定在「升级点」这一节上。

2. 五级体系的全景

本片自创的递进框架:Level 1(界面)→ Level 2(协同)→ Level 3(连接器)→ Level 4(回传代码)→ Level 5(自托管)。不是平铺选项,而是按「先认识工具 → 在品牌内做事 → 接外部数据 → 代码化 → 跳出单一模型」的顺序层层放大。

每级不是替代上一级,而是叠加——Level 1 决定你能不能进得去,Level 2 决定你在不在品牌里,Level 3 决定你能不能接外部知识,Level 4 决定你能不能从「设计稿」走到「会转的系统」,Level 5 决定你能不能在 Opus 用光后还继续干。

3. Level 1:认识工具的物理形态 01:33

01:33 “this is the very first level which is knowing exactly what the tool physically is”——理解工具本体的物理形态是 Level 1。

Claude Design 在两个地方能打开:web 端从侧边栏的 design 入口进;桌面端则 01:51 “click on this code button, click on copy”——Claude Code 桌面 app 在 chat 下拉里点 design 就会启动一条新终端。点开后会看到 02:02 “just one for basically Claude design and one for Claude itself”——Claude Design 与 Claude 在桌面里并列为两个独立入口。

接口上能选的设计形态包括 prototypes / website / animation / frames。左侧项目管理把全部过往项目放在 02:19 “All your projects live underneath”——所有项目一处管。设计系统字段允许加载已有品牌系统或清空重起,模型字段允许选择(后文 Level 5 会展开如何用 GLM 5.2 替代 Opus 4.8)。

老用户对 token 消耗的 PTSD 被作者特别安抚:02:09 “I know many of us have PTSD credit PTSD from using Claude design”——这次升级的核心动机之一就是修这件事。

4. Level 2:在品牌内做协同设计 02:42

Level 2 解决的问题是「不是裸需求,而是要做有品牌和物料的设计」。开始的口播 02:42 引出 02:45 “We can give it a GitHub repo”——把 GitHub 仓库作为设计守则来源直接喂给 Claude。

产物的可二次编辑性是这一级的差异化:02:51 “we can even take that stuff, push it out to PowerPoint, PDF, Miro, Figma”——导出兼容 Office 三件套与主流设计协作工具。这条让 Claude Design 与「只产 PNG 截图」的同类工具拉开差距。

实操链是 LaCroix 案例演示:03:12 “Hey there, I’d like to use this repository, this GitHub repo, and this image to design for me three beautiful slides”——一句自然语言把 repo + 图片 + 任务三件套交给 Claude。Claude 会先反问几个设计维度的取舍(投资人路演 / 大胆活泼等)再产出幻灯。

中间产物的输入灵活性:03:36 “you can drop in Figma files, you can drop in images”——Figma 文件与图片都能进。设计守则被吸收后产出物能反哺原仓库的视觉:04:22 “The first thing that’s come up here”——首版幻灯就把 repo 里的方/圆元素复刻出来。

5. Level 2 续:画布直编辑 = token 友好的机制根因 05:18

05:18 “the edit feature”——画布编辑是这一节的主轴。

更具体的展开:05:46 “we can edit everything in detail just like you would do in a Figma”——画布侧栏可调字体/颜色/层级,像在 Figma 里做设计。侧栏所有元素都暴露出来让用户直接调。

机制意义重大:以前改一个字都要让 Claude 重建整段 context,大量烧 token;现在可以局部直改,token 消耗降一档。这与第 1 节提到的 01:13 “credits go further”形成机制上的因果呼应——画布直编辑是 credit 友好这一升级点的具体实现路径。

这条对「AI 设计工具值不值得付费」是一个分水岭:不直编辑的同类工具,改一个标点都要让 AI 全跑一次,使用成本指数级上升。

6. Level 3:用内置连接器接外部数据 06:21

06:21 “we can actually use our inbuilt connectors that we already have in Claude code”——Claude Design 直接复用 Claude Code 已有的 MCP 连接器体系,不需要重新配。

可接的范围:06:27 “we could scrape information about competitors or our websites”——爬竞品或自家网站的结构化信息;还可以在 Claude Design 内直接生图,只要在 Claude Code 里接上图像生成 API。

品牌身份抓取的杀手锏:07:08 “extract the brand identity”——用 Firecrawl Interact 把对方网站的 logo/字体/配色抓下来,产出匹配其视觉语言的新设计。实操中作者对 Glaido 站点做了一次:07:31 “just deselect my design system here just for argument’s sake”——故意清空设计系统,只用 Firecrawl 抓来的 brand identity 驱动。

作者点出 Firecrawl 的实际价值:08:11 “not every website is built for AI”——很多站没为 AI 爬取做优化,Firecrawl 把 HTML 噪音过滤掉只留结构化信息,08:15 “with tools like Firecrawl, we can actually get the right information way faster”。

7. Level 3 续:图像生成器补足 Firecrawl 短板 07:36

07:36 “For creating images itself, you could use Higgsfield”——Higgsfield 走图片/视频/动效一条龙,作为多模态生成入口。07:38 “You could use something called Kia AI”——Kia AI 是作者口播里称的「最便宜」选项。

作者点出选型判断:07:42 “But I think is probably the cheapest way to do it”——一旦把 API key 接到 Claude 体系里,这个图像生成能力就成了 Claude 设计的「原生素材来源」。

这两条都靠 Claude 桌面的 connect API 打通,即把图像生成能力作为 MCP server 暴露给 Claude。跟上一节的 Firecrawl 是同一接入范式:用 MCP 喂进来,Claude 就能在设计里直接消费。

8. 元认知明牌:Claude Design = Claude Code 模型 + 编辑 + 导出 08:50

08:50 “we are keeping this 100% real”——这是本片最直白的元认知点。

08:55 “to Cloud Design itself is just the ability to effectively edit it”——Claude Design 本质是「能编辑 + 能导出」的界面层。底层模型则是同一个:09:03 “Cloud Design is using the Claude Code model underneath”——与 Claude Code 共用底层 Opus 4.8。

这条决定你 Level 4 之后会不会卡死:既然底层是同一个,回传 Code 端不是新世界,只是把编辑形态从「画布操作」换成「代码 + 终端」。任何在 Claude Design 跑出来的东西理论上都能在 Claude Code 里复刻,反之亦然。

实操侧对应的演示:08:37 “this is so freaking decent” + 08:43 “We’ve even got the logo, which I think is freaking amazing”——Firecrawl 抓完品牌后 Claude Design 还原的 logo/字体/配色被作者当场肯定。

9. Level 4:把设计回传给 Claude Code 09:46

09:46 “we can send it to Claude code”——官方提供 send 通道,但作者明确不推荐 web 端对接,推荐在桌面 app 里走。

09:54 “there’s been some complaints about it’s not a clean crisp integration”——作者主动承认 send 通道对资产类文件不可靠。实际拿到手的有两条路径:复制 prompt 让 Claude Code 端下载对应文件路径,或者下载 zip。

10:07 “just feed it as much as you can”——作者建议把全部资源都塞进 prompt,别让 Code 端再去拉。

10:37 “Claude has gone ahead and designed this”——演示中,Claude Code 端拿到的设计被成功扩展为带视频嵌入的单页网站。

10. Zip handover fix:真正能用的对接姿势 10:54

10:54 “extracting the zip”——zip 才是稳的。原因 11:02 “the integration is a little dicey”——send 通道对视频/资产类文件会丢东西;zip 携带完整文件树,Claude Code 端能识别全部资源。

11:06 “take it from the zip”——从 zip 拿而不是从 send 通道拿。演示里 Claude Code 的反馈原文就承认了 11:12 “just bear in mind when you do download it as a zip”——zip 是它建议的导入方式。

实操固定三步:11:26 “you always want to extract the zip”——下载 zip → 解压核心代码 → 在 Claude Code 端 link up。作者明确表态 11:37 “make sure you’re going ahead and actually downloading it”——目前阶段 zip 才是最干净的。

09:43 作者在演示里也直接表态 “We don’t want to do that”——明确不演示 send 通道的失败样,直接走 zip。

11. Level 5:用 Open Design 跳出单一模型 12:03

12:03 “we can head over to open design”——Open Design 是社区开源复刻 Claude Design 形态的免费项目。

12:08 “it runs locally on your computer and you can power it with any model you want to”——本地运行,模型随你挑。

走通流程:在 Claude Code 里「下载并 open in localhost」这个 repo,点 local coding agent 选对接的模型——12:41 “you can pick all the things that you want to connect with”——Claude Code / ChatGPT / Codex 都能接。

12:46 作者示例用 ChatGPT 20 美元订阅也接得上——这意味着 Claude Design 形态的「画布+编辑」范式不是 Anthropic 独占。

12. Level 5 续:GLM 5.2 作为 Opus 的 1/6 成本替代 14:24

14:24 “you can also use GLM 5.2, which is around the same performance as Opus 4.8, but 1/6 of the cost”——同档性能、六分之一价格。

14:28 是这一句的精确收尾。模型路径走 terminal 而不是 Claude 桌面 app。

这条是「model routing」的典型落地:Opus 做总调度,GLM 5.2 跑 Open Design 里的设计迭代。Opus 信用额烧光后还有 GLM 5.2 这条命脉。

14:14 “something to bear in mind is if you do use open or tip”——Open Design 在导出能力上的限制是必须知道的边界。

13. Open Design 跟 Claude Design 的差异边界 14:16

14:16 “you can’t export it like into PowerPoint. That is Claude design only”——Open Design 不支持 PPT 导出,这条功能锁死给 Claude Design。

14:18 收尾强调 “Claude design only”——在导出格式这一项上,Open Design 与 Claude Design 是不对称的。

代价换来的回报是开源 + 任意模型:在 Claude 信用额爆掉之后,设计迭代不会停。两条工具的组合(Claude Design 做有 PPT 需求的关键稿,Open Design 做日常迭代)是实操上最稳的搭配。

可执行步骤

  • 在 Claude 桌面 app 的 chat 下拉里点开 Claude Design,熟悉 prototype / website / animation / frames 四个类型
  • 准备一份 GitHub 仓库(放品牌规则或设计守则),用「repo + 一句自然语言需求」起一个幻灯/动画/网页
  • 用「点击画布元素 + 在侧栏改字体/颜色」的方式做局部调整,绕开让 Claude 重建整段 context
  • 把设计回传到 Claude Code 时,统一走「下载 zip → 解压 → 在 Code 端 link up」路径,不直接用 send 通道
  • 把 Open Design repo 在本地 localhost 跑起来,接 GLM 5.2 作为 Opus 用尽后的设计迭代兜底模型

关联

一手来源与延伸

  • 视频引用了 Firecrawl(https://firecrawl.dev/)与 Glaido(作者自家产品,演示中作为品牌身份抓取的目标站)——这两个是视频里实际演示并点名的服务,均见 description。
  • 视频提到的 Open Design 仓库与 Jack Roberts 的 GitHub 设计原则仓库均未在 description 给出具体 URL,只通过 Claude Code 复制粘贴演示,具体仓库路径不由本片给出(不收录未验证的具体 URL)。

术语

  • Claude Design 2.0:Anthropic 的设计产品,基于 Opus 4.8 模型,主打品牌一致的幻灯/网页/动画生成
  • Five Levels:本片自创的递进框架(界面→协同→连接器→代码回传→自托管)
  • Edit on canvas:在画布上直接点选元素并调字体/颜色/层级,免去让 Claude 重建 context
  • Inbuilt connector:Claude Design 复用 Claude Code 的 MCP 连接器,无需重新配置
  • Zip handover fix:把 Claude Design 的产出打包成 zip 在 Claude Code 端解压,绕过 send 通道的资产丢失问题
  • Open Design:社区开源复刻 Claude Design 形态的免费项目,本地运行、模型可换
  • GLM 5.2 1/6 cost:本片主张的 Open Design 兜底模型选项,同 Opus 4.8 性能 1/6 价格的智谱开源模型

金句

“Cloud Design is using the Claude Code model underneath” (09:03)——本片最锋利的元认知:Claude Design 与 Claude Code 共用底层模型,前者是后者加了一层「画布 + 导出」的皮。直接化掉「该用 Design 还是 Code」的纠结——按产物形态选,别按模型选。

“the integration is a little dicey” (11:02)——作者对官方 send 通道的诚实吐槽,直接驱动了「走 zip 才是真稳」的工作流。认短板不藏是信任建设的标志,采信折扣最低。

“you can also use GLM 5.2, which is around the same performance as Opus 4.8, but 1/6 of the cost” (14:24)——Level 5 价值最具体的锚点:Opus 用光后还有一条便宜但同档的活水,跑 Open Design 不会因为信用额墙而停。

立场与利益

本频道主理人在 description 给出 Firecrawl(bit.ly/4aHCD8A)、Glaido(bit.ly/4eGoI3R)、ALL Systems(bit.ly/4kol0y5)、Free Resources(bit.ly/3RNNDLa)四条带 affiliate/referral 性质的短链。视频中明确点名推荐 Firecrawl 用于品牌抓取(07:36 段),并把 Glaido 站点作为品牌身份抓取演示目标(07:08 段)。同时作者在视频中明示自卖「Claude Code Masterclass」课程,把 Level 3 之后的复杂度引导到「看课学」。

  • 与利益同向,采信前需外部印证:“Firecrawl 是最便宜最高效的品牌抓取工具”——直接对应 description 的 Firecrawl 短链,口播里也明说 “the cheapest way to do it”。交叉验证靠 Firecrawl Interact 在其他课里的实测。
  • 与利益同向,采信前需外部印证:“design system 接入 + 双向设计 + edit on canvas 是这次升级最值得用的三项”——对应官方更新说明的话术。验证靠其它渠道对 Claude Design 2.0 升级点的报道。
  • 与利益反向,采信折扣最低:作者主动承认 11:02 “the integration is a little dicey” 且直接给出 zip 兜底——这条不利于他卖课程(承认了官方通道的不成熟),可信度单独标高。
  • 利益中性,按内容采信:Open Design 仓库与 GLM 5.2 跑本地——与作者自家产品无关,纯做技术建议,无变现关联。

价值定位

  • 适合谁:已在用 Claude Code 且想给品牌做幻灯/动画/网页的人;以及 Opus 信用额被 Claude Design 烧光、想找便宜兜底模型的人。
  • 解决什么:把 Claude Design 2.0 的升级点(credit 友好、edit on canvas、Firecrawl 抓品牌)用五级递进组织成可执行工作流,并把「设计 → 代码」与「设计 → 自托管模型」的两条扩展路径都铺出来。
  • 认知 vs 实操:偏实操,每级都有可点开的操作链(喂 repo / 点 edit / 抓 Firecrawl / 下 zip / 跑 Open Design),认知价值主要在「Design 是 Code 的皮 + 导出层」这一元认知。
  • 与 2026-07-05-Claude Fable 5 七级建站：从聊天框到 design extraction 一键出片 重叠:本片独有 Level 1-3 的「edit on canvas + Firecrawl connector + 双向设计」组合(Level 3 几乎全片独讲),对方独有 Level 5 起的 design extraction(本片不涉)。两条在「怎么抓品牌」这件事上互证但走不同工具链。

自检问题

  1. Claude Design 2.0 与 Claude Code 的本质关系是什么?为什么这条会影响「选 Design 还是 Code」的决策? 答案:详解 8。Claude Design 本质是 Claude Code 的画布 + 多格式导出层,二者共用 Opus 4.8 底层模型。选 Design 还是 Code 看产物形态——需要画布操作/PPT 导出走 Design,需要接数据库/复杂逻辑走 Code。
  2. Level 3 的「Firecrawl 抓品牌身份」为什么不等同于「把对方网站 URL 直接喂给 Claude」? 答案:详解 6 与 7。很多网站没为 AI 爬取做优化,直接把 URL 喂 Claude 会塞满 HTML 噪音;Firecrawl 过滤后只留结构化信息,字体/配色/字体边/字体结构提取更稳。Higgsfield / Kia AI 这样的图像生成器补的是 Firecrawl 不直接产图片的短板。
  3. 把 Claude Design 的设计回传到 Claude Code 时,为什么走 zip 比走官方 send 通道更稳? 答案:详解 10。官方 send 通道对视频/资产类文件会丢东西(zip 携带完整文件树)。zip 兜底三步:下载 → 解压核心代码 → 在 Code 端 link up,作者明确说「the integration will pick up as time goes on」,但现阶段 zip 是最干净的路径。
  4. Level 5 的 Open Design + GLM 5.2 与 Claude Design 各自的优势与适用场景是什么? 答案:详解 11-13。Claude Design 强在 PPT 导出、画布编辑、品牌系统接入;Open Design 强在开源、本地跑、模型可换、绕过 Opus 信用额。GLM 5.2 跑 Open Design 给「同 Opus 性能 + 1/6 价格」的兜底,Opus 用光后还有设计迭代能力。

关系图谱

反向链接