--- title: 'Claude Design 2.0 五级攻略:从界面到本地 Open Design 与 GLM 5.2 自托管全栈' video_id: 58CQM6I6DZg url: https://youtu.be/58CQM6I6DZg title_en: "Claude Design 2.0 Just Changed Everything..." channel: Jack Roberts published: 2026-06-28 duration: "15:02" topics: ["AI 编程与建站", "Claude Code 工作流", "MCP 与工具调用", "模型与能力"] noted: 2026-07-08 value: A views: '10.2万' --- [![封面](https://i.ytimg.com/vi/58CQM6I6DZg/maxresdefault.jpg)](https://youtu.be/58CQM6I6DZg) > Jack Roberts · 15:02 · 发布 2026-06-28 · 10.2万次观看(截至抓取) · [观看原视频](https://youtu.be/58CQM6I6DZg) > 🔥 观众最高回放 [08:16](https://youtu.be/58CQM6I6DZg?t=496) — 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-claude-design-20-是什么--四个大变化-0002|→ 详解1]]) 2. **五级不是平行选项,而是「能用 → 协同 → 智能扩展 → 代码化 → 自托管」的递进,前一级能力会被下一级继承放大**——这一条决定了选哪一档用,而不是看心情切。([[#2-五级体系的全景|→ 详解2]]) 3. **Level 1 的关键在「Claude 桌面里能开 Claude Design」**——不用切到 web 端,在桌面 app 的 chat 下拉点 design 即可开一条新终端,把网站/幻灯/动画装进同一上下文。([[#3-level-1认识工具的物理形态-0133|→ 详解3]]) 4. **Level 2 的 GitHub repo + 截图 + 设计系统三件套让 Claude 在指定品牌内做产出,「edit on canvas」把改字/换色从「让 AI 重建 context」降为「点元素改值」**——后者是这次升级 token 友好的机制根因。([[#4-level-2在品牌内做协同设计-0242|→ 详解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-level-3-续图像生成器补足-firecrawl-短板-0736|→ 详解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-zip-handover-fix真正能用的对接姿势-1054|→ 详解10]]) ## 知识点详解 ### 1. Claude Design 2.0 是什么 + 四个大变化 [00:02](https://youtu.be/58CQM6I6DZg?t=2) 作者开篇定位工具:[00:02](https://youtu.be/58CQM6I6DZg?t=2) "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](https://youtu.be/58CQM6I6DZg?t=49) "effectively, it is Claude's answer to creating beautiful design"——Anthropic 自己拿出的设计产品形态,作者称 Opus 4.8 是当前地表最强的设计 agent 之一。 四个大变化打包在一段口播里:[01:07](https://youtu.be/58CQM6I6DZg?t=67) "they have done four big things"——四项关键升级。第一条且最大:[01:13](https://youtu.be/58CQM6I6DZg?t=73) "First of all, and this is the big one, credits go further"——信用额消耗减低,这是老用户最大的痛点。 剩下三条作为配套增量打包:[01:28](https://youtu.be/58CQM6I6DZg?t=88) "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](https://youtu.be/58CQM6I6DZg?t=93) [01:33](https://youtu.be/58CQM6I6DZg?t=93) "this is the very first level which is knowing exactly what the tool physically is"——理解工具本体的物理形态是 Level 1。 Claude Design 在两个地方能打开:web 端从侧边栏的 design 入口进;桌面端则 [01:51](https://youtu.be/58CQM6I6DZg?t=111) "click on this code button, click on copy"——Claude Code 桌面 app 在 chat 下拉里点 design 就会启动一条新终端。点开后会看到 [02:02](https://youtu.be/58CQM6I6DZg?t=122) "just one for basically Claude design and one for Claude itself"——Claude Design 与 Claude 在桌面里并列为两个独立入口。 接口上能选的设计形态包括 prototypes / website / animation / frames。左侧项目管理把全部过往项目放在 [02:19](https://youtu.be/58CQM6I6DZg?t=139) "All your projects live underneath"——所有项目一处管。设计系统字段允许加载已有品牌系统或清空重起,模型字段允许选择(后文 Level 5 会展开如何用 GLM 5.2 替代 Opus 4.8)。 老用户对 token 消耗的 PTSD 被作者特别安抚:[02:09](https://youtu.be/58CQM6I6DZg?t=129) "I know many of us have PTSD credit PTSD from using Claude design"——这次升级的核心动机之一就是修这件事。 ### 4. Level 2:在品牌内做协同设计 [02:42](https://youtu.be/58CQM6I6DZg?t=162) Level 2 解决的问题是「不是裸需求,而是要做有品牌和物料的设计」。开始的口播 [02:42](https://youtu.be/58CQM6I6DZg?t=162) 引出 [02:45](https://youtu.be/58CQM6I6DZg?t=165) "We can give it a GitHub repo"——把 GitHub 仓库作为设计守则来源直接喂给 Claude。 产物的可二次编辑性是这一级的差异化:[02:51](https://youtu.be/58CQM6I6DZg?t=171) "we can even take that stuff, push it out to PowerPoint, PDF, Miro, Figma"——导出兼容 Office 三件套与主流设计协作工具。这条让 Claude Design 与「只产 PNG 截图」的同类工具拉开差距。 实操链是 LaCroix 案例演示:[03:12](https://youtu.be/58CQM6I6DZg?t=192) "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](https://youtu.be/58CQM6I6DZg?t=216) "you can drop in Figma files, you can drop in images"——Figma 文件与图片都能进。设计守则被吸收后产出物能反哺原仓库的视觉:[04:22](https://youtu.be/58CQM6I6DZg?t=262) "The first thing that's come up here"——首版幻灯就把 repo 里的方/圆元素复刻出来。 ### 5. Level 2 续:画布直编辑 = token 友好的机制根因 [05:18](https://youtu.be/58CQM6I6DZg?t=318) [05:18](https://youtu.be/58CQM6I6DZg?t=318) "the edit feature"——画布编辑是这一节的主轴。 更具体的展开:[05:46](https://youtu.be/58CQM6I6DZg?t=346) "we can edit everything in detail just like you would do in a Figma"——画布侧栏可调字体/颜色/层级,像在 Figma 里做设计。侧栏所有元素都暴露出来让用户直接调。 机制意义重大:以前改一个字都要让 Claude 重建整段 context,大量烧 token;现在可以局部直改,token 消耗降一档。这与第 1 节提到的 [01:13](https://youtu.be/58CQM6I6DZg?t=73) "credits go further"形成机制上的因果呼应——画布直编辑是 credit 友好这一升级点的具体实现路径。 这条对「AI 设计工具值不值得付费」是一个分水岭:不直编辑的同类工具,改一个标点都要让 AI 全跑一次,使用成本指数级上升。 ### 6. Level 3:用内置连接器接外部数据 [06:21](https://youtu.be/58CQM6I6DZg?t=381) [06:21](https://youtu.be/58CQM6I6DZg?t=381) "we can actually use our inbuilt connectors that we already have in Claude code"——Claude Design 直接复用 Claude Code 已有的 [[MCP]] 连接器体系,不需要重新配。 可接的范围:[06:27](https://youtu.be/58CQM6I6DZg?t=387) "we could scrape information about competitors or our websites"——爬竞品或自家网站的结构化信息;还可以在 Claude Design 内直接生图,只要在 Claude Code 里接上图像生成 API。 品牌身份抓取的杀手锏:[07:08](https://youtu.be/58CQM6I6DZg?t=428) "extract the brand identity"——用 Firecrawl Interact 把对方网站的 logo/字体/配色抓下来,产出匹配其视觉语言的新设计。实操中作者对 Glaido 站点做了一次:[07:31](https://youtu.be/58CQM6I6DZg?t=451) "just deselect my design system here just for argument's sake"——故意清空设计系统,只用 Firecrawl 抓来的 brand identity 驱动。 作者点出 Firecrawl 的实际价值:[08:11](https://youtu.be/58CQM6I6DZg?t=491) "not every website is built for AI"——很多站没为 AI 爬取做优化,Firecrawl 把 HTML 噪音过滤掉只留结构化信息,[08:15](https://youtu.be/58CQM6I6DZg?t=495) "with tools like Firecrawl, we can actually get the right information way faster"。 ### 7. Level 3 续:图像生成器补足 Firecrawl 短板 [07:36](https://youtu.be/58CQM6I6DZg?t=456) [07:36](https://youtu.be/58CQM6I6DZg?t=456) "For creating images itself, you could use Higgsfield"——Higgsfield 走图片/视频/动效一条龙,作为多模态生成入口。[07:38](https://youtu.be/58CQM6I6DZg?t=458) "You could use something called Kia AI"——Kia AI 是作者口播里称的「最便宜」选项。 作者点出选型判断:[07:42](https://youtu.be/58CQM6I6DZg?t=462) "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](https://youtu.be/58CQM6I6DZg?t=530) [08:50](https://youtu.be/58CQM6I6DZg?t=530) "we are keeping this 100% real"——这是本片最直白的元认知点。 [08:55](https://youtu.be/58CQM6I6DZg?t=535) "to Cloud Design itself is just the ability to effectively edit it"——Claude Design 本质是「能编辑 + 能导出」的界面层。底层模型则是同一个:[09:03](https://youtu.be/58CQM6I6DZg?t=543) "Cloud Design is using the Claude Code model underneath"——与 Claude Code 共用底层 Opus 4.8。 这条决定你 Level 4 之后会不会卡死:既然底层是同一个,回传 Code 端不是新世界,只是把编辑形态从「画布操作」换成「代码 + 终端」。任何在 Claude Design 跑出来的东西理论上都能在 Claude Code 里复刻,反之亦然。 实操侧对应的演示:[08:37](https://youtu.be/58CQM6I6DZg?t=517) "this is so freaking decent" + [08:43](https://youtu.be/58CQM6I6DZg?t=523) "We've even got the logo, which I think is freaking amazing"——Firecrawl 抓完品牌后 Claude Design 还原的 logo/字体/配色被作者当场肯定。 ### 9. Level 4:把设计回传给 Claude Code [09:46](https://youtu.be/58CQM6I6DZg?t=586) [09:46](https://youtu.be/58CQM6I6DZg?t=586) "we can send it to Claude code"——官方提供 send 通道,但作者明确不推荐 web 端对接,推荐在桌面 app 里走。 [09:54](https://youtu.be/58CQM6I6DZg?t=594) "there's been some complaints about it's not a clean crisp integration"——作者主动承认 send 通道对资产类文件不可靠。实际拿到手的有两条路径:复制 prompt 让 Claude Code 端下载对应文件路径,或者下载 zip。 [10:07](https://youtu.be/58CQM6I6DZg?t=607) "just feed it as much as you can"——作者建议把全部资源都塞进 prompt,别让 Code 端再去拉。 [10:37](https://youtu.be/58CQM6I6DZg?t=637) "Claude has gone ahead and designed this"——演示中,Claude Code 端拿到的设计被成功扩展为带视频嵌入的单页网站。 ### 10. Zip handover fix:真正能用的对接姿势 [10:54](https://youtu.be/58CQM6I6DZg?t=654) [10:54](https://youtu.be/58CQM6I6DZg?t=654) "extracting the zip"——zip 才是稳的。原因 [11:02](https://youtu.be/58CQM6I6DZg?t=662) "the integration is a little dicey"——send 通道对视频/资产类文件会丢东西;zip 携带完整文件树,Claude Code 端能识别全部资源。 [11:06](https://youtu.be/58CQM6I6DZg?t=666) "take it from the zip"——从 zip 拿而不是从 send 通道拿。演示里 Claude Code 的反馈原文就承认了 [11:12](https://youtu.be/58CQM6I6DZg?t=672) "just bear in mind when you do download it as a zip"——zip 是它建议的导入方式。 实操固定三步:[11:26](https://youtu.be/58CQM6I6DZg?t=686) "you always want to extract the zip"——下载 zip → 解压核心代码 → 在 Claude Code 端 link up。作者明确表态 [11:37](https://youtu.be/58CQM6I6DZg?t=697) "make sure you're going ahead and actually downloading it"——目前阶段 zip 才是最干净的。 [09:43](https://youtu.be/58CQM6I6DZg?t=583) 作者在演示里也直接表态 "We don't want to do that"——明确不演示 send 通道的失败样,直接走 zip。 ### 11. Level 5:用 Open Design 跳出单一模型 [12:03](https://youtu.be/58CQM6I6DZg?t=723) [12:03](https://youtu.be/58CQM6I6DZg?t=723) "we can head over to open design"——Open Design 是社区开源复刻 Claude Design 形态的免费项目。 [12:08](https://youtu.be/58CQM6I6DZg?t=728) "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](https://youtu.be/58CQM6I6DZg?t=761) "you can pick all the things that you want to connect with"——Claude Code / ChatGPT / Codex 都能接。 [12:46](https://youtu.be/58CQM6I6DZg?t=766) 作者示例用 ChatGPT 20 美元订阅也接得上——这意味着 Claude Design 形态的「画布+编辑」范式不是 Anthropic 独占。 ### 12. Level 5 续:GLM 5.2 作为 Opus 的 1/6 成本替代 [14:24](https://youtu.be/58CQM6I6DZg?t=864) [14:24](https://youtu.be/58CQM6I6DZg?t=864) "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](https://youtu.be/58CQM6I6DZg?t=868) 是这一句的精确收尾。模型路径走 terminal 而不是 Claude 桌面 app。 这条是「model routing」的典型落地:Opus 做总调度,GLM 5.2 跑 Open Design 里的设计迭代。Opus 信用额烧光后还有 GLM 5.2 这条命脉。 [14:14](https://youtu.be/58CQM6I6DZg?t=854) "something to bear in mind is if you do use open or tip"——Open Design 在导出能力上的限制是必须知道的边界。 ### 13. Open Design 跟 Claude Design 的差异边界 [14:16](https://youtu.be/58CQM6I6DZg?t=856) [14:16](https://youtu.be/58CQM6I6DZg?t=856) "you can't export it like into PowerPoint. That is Claude design only"——Open Design 不支持 PPT 导出,这条功能锁死给 Claude Design。 [14:18](https://youtu.be/58CQM6I6DZg?t=858) 收尾强调 "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 用尽后的设计迭代兜底模型 ## 关联 - 印证:与 [[2026-07-05-Claude Fable 5 七级建站：从聊天框到 design extraction 一键出片]] 的「design extraction」同源——本片 Level 3 用 Firecrawl 抓品牌身份(08:43 拿到 logo 与字色),对方 Level 7 让 Claude 从欣赏的站抽 typography / 配色 / 间距再做新设计。方法论上互为佐证,差异在工具链(本片走 Firecrawl,对方走 Claude 自身的视觉解析)。 - 印证:与 [[2026-03-30-Claude Code 三个浏览器 agent 工具速览]] 的 Firecrawl Interact 同源——本片把 Firecrawl 作为内置 connector 通过 [[MCP]] 接入 Claude Design 来抓品牌,印证 Firecrawl 在「网页 → 结构化信息」这条路上的价值。 - 互补:与 [[2026-06-12-Fable5改写网站设计：三级闯关与Max-then-Medium用法]] 互补——本片讲的是「怎么把外部品牌物料喂 Claude Design」(Firecrawl 抓品牌 + GitHub 仓库守则),对方讲的是「怎么让设计系统级地复用」,两条都是品牌化设计但走的轴不同。 - 进阶:与 [[2026-06-23-GLM 5.2 开源模型逼近旗舰模型的成本实测与接入指南]] 同通道——本片用 GLM 5.2 跑 Open Design 替代 Opus 4.8 的 1/6 成本路径,场景从「跑 agentic 任务」挪到「跑设计迭代」。读 Greg 那篇先建立成本预期,本片再讲用法。 - 进阶:与 [[2026-06-30-Sonnet 5 上线性能逼近 Opus 4.8]] 同根——Sonnet 5 押在 Anthropic 自家性价比线,本片押在第三方开源 GLM 5.2。两份都是「Opus 4.8 之外的可选主模型」,选哪个看自己模型路由策略。 - 进阶:与 [[2026-06-22-Claude Code七级速通：从聊天到Sub-agent共享大脑]] 同根——本片演示了 Claude Code 桌面 app 里可以同时开 Claude Design 与 Claude 本身两条终端,适合读完 Claude Code 七级速通后想接入设计工作流的人。 ## 一手来源与延伸 - 视频引用了 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](https://youtu.be/58CQM6I6DZg?t=543))——本片最锋利的元认知:Claude Design 与 Claude Code 共用底层模型,前者是后者加了一层「画布 + 导出」的皮。直接化掉「该用 Design 还是 Code」的纠结——按产物形态选,别按模型选。 > "the integration is a little dicey" ([11:02](https://youtu.be/58CQM6I6DZg?t=662))——作者对官方 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](https://youtu.be/58CQM6I6DZg?t=864))——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](https://youtu.be/58CQM6I6DZg?t=662) "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 用光后还有设计迭代能力。