Claude Design 终极指南：从零到变现

---

核心观点速览

1. Claude Design 是品牌操作系统，不是设计工具。 它的核心不是"生成一张图"，是"记住你的品牌​"。
2. 访问路径特殊： 不在 Claude 桌面端，要去 claude.ai/design 单独打开。
3. 三屏工作流： 中屏 Claude Design + 左屏 Claude 桌面（用来写 prompt 和整理资料）。
4. Design System 是一次投入的基础设施。 正确配置品牌标识、颜色、字体、logo 和风格注释 = 之后每次创建的一致性。
5. Claude Skills 已经内置进 Design 里。 专门针对动画、交互原型、front-end design 等的专业 skill。
6. Design → Claude Code 的 handoff 是关键转换。 Design 负责设计，Code 负责部署——两者必须串起来才是完整产品链。
7. Memory System 决定你的 Claude 有多懂你。 这比工具本身更重要。
8. 商业变现机会清晰存在： landing page 代设计、template 库、个人 OS 模板、startup monthly retainer。

---

一、为什么这是 Claude 近期最重要的更新

作者开场就给出他对 Claude Design 的定位：

"I think this is the most important update that Claude has shipped in a long, long time." （我认为这是 Claude 很久以来最重要的一次更新。）

为什么这么说？ 因为在 Claude Design 之前，Claude 做的主要是语言智能（聊天、写代码、写文档）。Claude Design 第一次让 Claude 变成视觉智能——而视觉智能直接冲击的是图形设计、品牌营销、前端开发等百亿美元级市场。

作者在 10 分钟内做出的东西

• AI Edge 的完整官方网站（有动画、hover 效果、注册表单、付款区、证言区）
• VC pitch deck（如果 AI Edge 要融资会怎么推销）
• 移动应用 UI（AI agent operator 的完整界面：配对、任务流、语音指令）
• 个人 OS 仪表板（其他人做的——一个集成日历、邮箱、健康数据、时区、财务的 personal dashboard）
• 商业仪表板

要点： 这些在几个月前要一个设计团队做几周、花几千美元。现在一个人 10 分钟完成。

---

二、访问和工作流的三个非显而易见的细节

1. 不在 Claude 桌面端

这是最多人踩的坑。你打开 Claude Desktop 找不到 Design。Design 是一个独立的网页：

访问地址： claude.ai/design

2. 三屏工作流

作者演示了他的实际工作环境：

• 中屏： Claude Design（设计的主战场）
• 左屏： Claude Desktop（生成 prompt、存放 memory、查找参考）
• 右屏： Claude Code 或 Cursor（最后的部署环节）

为什么要分三屏？ Claude Design 本身不是一个写 prompt 的好地方——你需要一边写一边参考你的 brand guidelines、参考别人的网站、参考你之前的对话。把这些分到不同屏幕，效率是单屏的 3 倍以上。

3. Token 是独立计算的

"Your tokens from Claude Design are actually separate from your tokens on the Claude app itself." （你在 Claude Design 的 token 和 Claude 应用本身的 token 是分开算的。）

警告： 就算你订阅了 Claude 的 $200 Max Plan，Claude Design 的 token 会很快用完。作者建议超出限额后切到"按量付费"模式，同时——

"Don't just go crazy experimenting. Try and be quite efficient with only creating things that you need." （不要疯狂实验。尽量高效——只创造你真正需要的东西。）

---

三、Design System：最重要但最被忽略的一步

这是整篇教程的核心： 你能否把 Claude Design 用好，90% 取决于你 Design System 配得好不好。

Design System 里要填什么

作者演示了一个真实例子——"Meridian Coffee and Smoke"（一个虚构的社区咖啡 + 烧烤店）：

必填：

1. 公司名称 + 一句话介绍（blur） ：用 Claude 或 ChatGPT 帮你生成一份"系统级品牌描述"，然后复制粘贴过来
2. GitHub 链接（可选）：如果做高级设计（比如基于现有代码库做前端），这个很重要
3. 本地代码文件夹链接（可选）：让 Claude Design 可以从你的 codebase 学习
4. 字体和 logo：上传
5. 颜色系统（color system）
6. 品牌身份注释（brand notes） ：
   • 我偏好简洁还是繁复的 UI
   • 偏好亮色还是暗色主题
   • 强调色的偏好（比如"橙色作为 accent color"）
   • 偏好圆角还是直角
   • 想要模仿的其他品牌
   • 书写语调（tone of voice）

为什么必须先做 Design System

作者的警告：

"Getting things right up front is going to make all of your outputs way better and going to save you much more time down the track." （一开始就把事情做对，会让你之后所有的输出好得多、节省大量时间。）

如果不做 Design System 就直接开始：

• 每次生成的输出风格不一致
• Claude 不知道你要什么感觉
• 你在 prompt 里不得不反复写"用我的 logo、我的颜色、这种风格..."
• 一个月后你会后悔没有一开始就花 30 分钟设置

Skill MD 文件：Claude Design 的"记忆"

作者透露一个关键机制：

"Every single time you work on a project, Claude Design creates a skill MD file, which is what every future project reads to stay on brand." （每次你做一个项目，Claude Design 都会生成一个 skill MD 文件——这就是未来每个项目读取以保持品牌一致的东西。）

这就是 Design System 的持久化记忆机制。 每次你做项目时给的反馈、你采用的决策、你偏好的版本——这些都被保存到 skill.md，下次 Claude Design 都读取。用得越多、越懂你。

配置时的 4 个 Claude 会问的关键问题

"Claude often asks about audience, primary action, tone, and fidelity. These four questions drive 80% of the output quality." （Claude 经常问 4 个问题：目标受众、主要动作、语调、保真度。这 4 个问题决定了 80% 的输出质量。）

如果你看到这些问题：不要点"decide for me（让我来决定）"。 这是 Claude 在逼你思考。花 2 分钟回答清楚，比回头反复修改快得多。

---

四、创建第一个设计：从 Wireframe 到 High Fidelity

Prototype 模式

在 Claude Design 里：

1. 点击左侧 Prototype → New Prototype
2. 选择 Design System（你之前创建的）
3. 选择类型：
   • Wireframe：只做结构草图。没有品牌、没有细节，只是骨架。适合探索布局。
   • High Fidelity：生产级别的设计。适合最终输出或想一步到位时。

作者建议：

• 新想法/多方案探索 → 先 Wireframe
• 已经想清楚 → 直接 High Fidelity

Prompt 的层级

Claude Design 支持多种输入方式：

• 文字描述：最常用
• 截图：给它一个参考网站，让它"反向工程 + 加我的风格"
• 草图：你在 iPad 上画一个布局，扫描上传
• 其他网站：把 URL 发给它，"把这个网站的感觉移植到我的品牌上"

Claude Skills 已经内置

作者展示了 Claude Design 里可以直接用的 skills：

• Animated video motion design（动画视频动作设计）
• Interactive prototypes（交互式原型）
• Deck creation（演示文稿）
• Front-end design（前端设计）
• Wireframe creation（线框图）
• Canva export（导出到 Canva）

这些 skills 不是通用 Claude——是为 Design 场景专门优化过的。

---

五、移动应用 UI：让 Claude Design 真正惊艳的地方

作者自己的案例：AI Edge Operator——一个通过手机控制 AI agent 的移动应用。

他做了什么

只用几个 prompt，生成了：

1. App 入口页 + 配对流程（和你的 AI agent 节点配对）
2. Mission Control（任务控制台） ：显示 researcher、writer、editor、publisher、analyst 等 agent 的实时状态
3. Writer agent 的具体界面
4. 任务队列
5. 语音模式（让你可以通过语音给 agent 发指令）
6. 通知系统

这里真正重要的洞察

"It's not a live site. You can't click a button and make this a functioning website." （这不是一个可运行的网站。你不能点一个按钮让它变成真网站。）

Claude Design 只做设计层。要让它变成真实产品：

• 网站：需要 Claude Code 实现 + Vercel 部署 + 买域名（GoDaddy）
• 移动应用：需要 Claude Code 实现 + React Native/Flutter 编译 + App Store 上架

但这个限制恰恰是它的优势： 它让你专注在设计决策上，而不是和代码/部署扯皮。** 设计和工程是两个不同的思维模式——Claude Design 把它们清晰分开。**

非创业者也能用：Personal OS 趋势

作者透露了一个趋势——很多人开始做个人操作系统仪表板：

• 整合日历、邮箱、健康数据、时区的 dashboard
• 财务追踪器（股票 + 加密货币 + 建议）
• 高级 to-do list（有优先级、blockers、分类）
• 饮食追踪应用
• 个人理财应用

作者在做的 Personal OS： 把他的 Obsidian memory、股票投资组合、加密货币仓位、AI agent 进度、日程、社群动态整合在一个自己做的 dashboard 里。

---

六、Pitch Deck：让 PowerPoint 成为历史

作者的示例

他用 Claude Design 给 AI Edge 做了一份假想的 pitch deck：

• 标题："The AI-Native AI Edge Media and Product Company"
• 核心论点："The next generation of AI companies won't be built by engineers, they'll be built by operators with distribution."（下一代 AI 公司不是工程师建的，是有分发能力的运营者建的。）
• 市场数据、竞争分析、增长路径

对比传统 PowerPoint：

• PowerPoint 要花几天设计模板、调整颜色、对齐元素
• Claude Design 在你的 brand system 下 5 分钟生成一份"专业设计工作室"级别的 deck

适用场景（作者认为这是"最多人会用到的场景"）

• PowerPoint 演示：公司内部汇报
• 投资人 pitch：融资文档
• SOP 和流程文档：代替枯燥的 Google Docs
• 报告：周报、月报、业绩报告

---

七、连接 Claude Code：从设计到部署的桥梁

这是整个流程最关键但最容易被忽略的一步。

三种 Handoff 方式

1. Handoff to Claude Code（推荐）：

   • 在 Claude Design 点击 Share → Handoff to Claude Code
   • 复制命令
   • 粘贴到你的 Claude Code 终端
   • Claude Code 现在拥有这个设计的完整上下文

2. Claude Code Web：

   • 在线版 Claude Code，直接连接
   • 适合不想装本地 Claude Code 的人

3. Download as ZIP：

   • 把设计下载为 zip 文件
   • 手动拖到 Claude Code 的工作目录

重要限制：一次只能传一个设计

"Every single time you want to send a final design, you need to click share in the top right corner. You need to export it and you need to send it to Claude Code." （每次你要发送一个最终设计，都要点右上角 share、export，然后发送给 Claude Code。）

Claude Code 不会自动访问你的所有设计。 这是一个刻意的设计决策——确保每次传输都是有意识的。

Canva Export：分发层

如果你的 deck 要给团队成员修改：

• Handoff to Claude Code → 工程和技术团队
• Export to Canva → 营销、社交媒体、非技术团队成员

Canva 导出的真正价值： 让团队成员不必有 Claude 订阅就能用上 Claude Design 生成的模板。

---

八、Memory System：AI 时代最重要的技能

作者把最重要的一段留在最后：

"Claude is really only as good as its memory. Your main focus should be how do you actually keep track of your memory system." （Claude 只和它的记忆一样好。你的主要重心应该是：你怎么管理你的记忆系统。）

为什么 Memory 比工具重要？

原因： Claude、GPT、Gemini 这些工具会继续变化、升级、甚至被替代。但如果你的"个人数据 + 偏好 + 项目历史"都储存在 Claude 黑箱里，你就被锁死了。

作者的解决方案：

• 用 Obsidian 作为"第二大脑"—— 本地 Markdown 文件，自己完全拥有
• 用 Claude Co-work 自动更新 Obsidian 文件（每次重要对话后，让 Claude 把新信息归档）
• 你可以把相关 memory 片段复制到任何 AI 工具——Claude、GPT、Perplexity 都能用

替代方案

• Super Memory：专门的记忆管理扩展
• Openclaw：自动更新的记忆系统

为什么这在 Claude Design 场景特别重要

实操步骤：

1. 你要建一个网站
2. 告诉 Claude Code：​"Hey, I'm creating a website based on my brand. Look through my memory files in this folder and tell me all of the things that are relevant for Claude Design."
3. Claude Code 从你本地 memory 挑出：你的 tagline、你的价值主张、你过去的客户证言、你的定价、你的品牌色调偏好
4. 你把这些全部复制到 Claude Design 的 prompt
5. 输出质量直接跳一个级别——因为不再是"一个通用的 AI 做你的品牌"，而是"读了你所有档案的 AI 做你的品牌"

---

九、商业变现机会：Claude Design Arbitrage

作者列出的几个机会

1. Landing Page 代建服务（Agency Arbitrage）

• 创业者没时间做自己的官网
• 你用 Claude Design + Claude Code 几小时做一个
• 收费 $500-$5000
• 关键差异化： 能"端到端（end-to-end）" 交付——很多人会 prompt 但不会 Vercel 部署。

2. Template Library（模板库）

• 做一个真正好用的"Personal OS"模板
• 挂在 Gumroad/Lemon Squeezy 卖 $5-$50
• 需要： 好的 TikTok/Twitter 分发渠道

3. Startup Monthly Retainer（创业公司月度设计服务）

• 小公司付 $500-$2000/月
• 你每月给他们出几个新设计（登陆页、邮件模板、社交卡片等）
• 边际成本低，续费率高

4. Content Creation（内容创作变现）

• 像 AI Edge 一样，自己做 Claude Design 教程赚广告
• 高度依赖个人品牌

作者没说但隐含的机会

5. Personal OS 咨询服务

• 作者自己在做 Personal OS
• 他提到"有兴趣看我的 Personal OS Prompt 的在 description 下载"
• 意味着： 这类"帮高管/CEO 搭建个性化 dashboard"的 1:1 咨询服务，市场才刚开始。

---

十、作者给的"反常识"最佳实践

1. Clarifying Question 是个好事，别跳过

大多数人的错误： Claude 问"audience 是谁？" 你按"decide for me"。

正确做法： 花 30 秒回答。你给的信息越具体，输出越准。

2. 不要光靠 prompt，提供素材

• 上传 PDF brief
• 上传草图
• 上传 Figma 文件
• 上传 logo

越多素材 → 越好的输出。

3. Token 不够时的策略

• 不要开 new prototype 实验各种风格——每个新 prototype 都从头烧 token
• 在同一个 prototype 里迭代——Claude 记住之前的决策，token 复用
• 如果必须实验，先低保真（Wireframe）再高保真

4. 始终记住：Design 和 Code 是两件事

• Design 阶段：让 Claude 自由发挥，给你多个选项
• Code 阶段：给 Claude Code 明确的约束——"不要改设计，只实现部署"

---

附录一：实操 Checklist（新用户第一天）

• 访问 claude.ai/design
• 创建你的第一个 Design System
  • 公司名 + 一句话介绍
  • 上传 logo
  • 定义颜色方案（至少主色 + 辅色 + 背景）
  • 选字体
  • 写 brand notes（偏好、语调、参考品牌）
• 创建你的 Obsidian（或任何 Markdown）memory 文件夹
• 搭建 Claude Desktop + Claude Design 的双屏工作流
• 做第一个 prototype（建议从 wireframe 开始）
• 学会 handoff 到 Claude Code
• 尝试用 Claude 问 clarifying questions 时真实回答（不要点 "decide for me"）

---

附录二：金句收录

"I think this is the most important update that Claude has shipped in a long, long time." 我认为这是 Claude 很久以来最重要的一次更新。 ——AI Edge

"Claude Design is a brand operating system. It is not a design tool." Claude Design 是品牌操作系统。它不是设计工具。 ——AI Edge

"You want to use your Claude chat to plan. You want to use Claude Design to generate the designs. You want to use Claude Code to actually ship something." 用 Claude chat 做规划。用 Claude Design 生成设计。用 Claude Code 真正发布东西。 ——AI Edge

"Every single time you work on a project, Claude Design creates a skill MD file, which is what every future project reads to stay on brand." 每次你做一个项目，Claude Design 都会生成一个 skill MD 文件——这就是未来每个项目读取以保持品牌一致的东西。 ——AI Edge

"Claude often asks about audience, primary action, tone, and fidelity. These four questions drive 80% of the output quality." Claude 经常问 4 个问题：目标受众、主要动作、语调、保真度。这 4 个问题决定 80% 的输出质量。 ——AI Edge

"Claude Designs. Claude Code ships." Claude 设计。Claude Code 发布。 ——AI Edge

"Claude is really only as good as its memory. Your main focus should be how do you actually keep track of your memory system." Claude 只和它的记忆一样好。你的主要重心应该是：你怎么管理你的记忆系统。 ——AI Edge

"The next generation of AI companies won't be built by engineers, they'll be built by operators with distribution." 下一代 AI 公司不是工程师建的，是有分发能力的运营者建的。 ——AI Edge

---

附录三：时间线索引

• [00:00] 开场：Claude Design 是 Claude 最重要的更新
• [01:00] 可以做什么（网站、pitch deck、移动 UI、个人 OS、商业仪表板）
• [02:30] 视频结构预告（个人 / 专业 / 创业者视角）
• [03:00] Design System 介绍
• [03:30] 访问路径：claude.ai/design（不在 Desktop）
• [04:00] 三屏工作流
• [05:00] Design System 配置详解
• [06:00] 品牌身份注释（brand notes）的重要性
• [07:00] Prototype 创建流程
• [08:00] Wireframe vs High Fidelity 选择
• [09:00] Claude Skills 内置
• [11:00] 作者的 Meridian 餐厅完整品牌案例
• [13:00] Claude Code handoff（第一次介绍）
• [14:00] 移动 UI：AI Edge Operator 案例
• [15:00] 个人 OS 趋势
• [16:00] Pitch Deck 场景
• [17:00] 普通个人怎么用（personal dashboard / financial tracker）
• [19:00] 配置的最佳实践
• [20:00] Token 使用警告
• [21:00] Claude Designs, Claude Code Ships
• [22:00] Handoff 三种方式
• [23:00] Canva Export 给非技术团队
• [24:00] Memory System 的重要性
• [25:00] Obsidian / Super Memory / Openclaw
• [26:00] 商业变现机会（agency、template library、monthly retainer）
• [27:00] 下一期预告：Personal OS 深度视频

---

报告结语

这期 AI Edge 的教程最有价值的不是"Claude Design 能做什么"——是"怎么把它变成日常工作流程的一部分​"。

最关键的三个认知：

1. Design System 是一次性投入、长期复利的基础设施。 花 30 分钟配置一次，之后每个项目都省 30 分钟。一年下来是 200 小时的差距。
2. Claude Design + Claude Code + Memory System 是"三件套"。 单独用任何一个效果有限，三个连起来才是 10 倍生产力。
3. Memory System 的价值高于任何具体工具。 工具会变、会升级、会被替代，但你的个人数据和偏好应该永远在你自己的 Markdown 文件里。

最大的风险： 如果你看完这期视频，觉得"酷但我现在没空设置"——然后 3 个月后才动手，你错过的是 3 个月本来可以让 Claude Design 越来越懂你的复利。今天设置 Design System 的 30 分钟，是这整个生态里最高 ROI 的 30 分钟。