我在 Claude Design 上烧掉了 500 美元额外费用
Anthropic 发布了 Claude Design，每周的使用限制可不是闹着玩的。我一天就用完了 Max 20x 的配额，然后不断充值加购，就为了搞清楚到底怎么用才有效。
我会直接展示我做了什么（一个从零开始的完整品牌，叫 Tally），以及如何最大化你的使用额度，避免重蹈我那些昂贵的覆辙。
融资路演 PPT、落地页、移动应用原型、动画发布视频，全部部署到 Vercel 上线。一切保持品牌统一。一切只靠自然语言。
这是操作手册。
Claude Design 到底是什么
Anthropic 于 2026 年 4 月 17 日发布了 Claude Design，也就是 Opus 4.7 发布的第二天。
你可以把它看作是 Claude Code 的精致表亲，核心是视觉而非代码执行。同样的模型能力，不同的交互界面。
它运行在 Opus 4.7 上，这是目前视觉能力最强的模型。每次渲染后，Claude Design 都会截取输出截图，审视页面，找出任何问题，并在你看到之前就修复好。这个自我验证的循环就是它的杀手锏。
你可以用它构建原型（线框图或高保真）、幻灯片、落地页、动画宣传片、移动端模型以及短品牌视频。一切视觉相关的东西。
简单背景说明一下为什么这东西一出来就这么成熟。Krieger 在 Claude Design 发布前刚刚离开 Figma 董事会，加入 Anthropic 担任 CPO。产品的血统摆在那里。
套餐、限制以及为什么消耗这么快
Claude Design 是付费功能。Pro、Max 5x 和 Max 20x 套餐都有不同的每周配额，而且这个配额与你常规的 Claude 和 Claude Code 使用额度是分开的。
这起初让我有点措手不及。设计功能非常消耗 token，尤其是在 Opus 4.7 上。我用的 Max 20x 套餐每月 200 美元，光是做一个设计系统和一套融资路演 PPT，就用掉了每周配额的 30%。
如果你用完了，要么等每周重置，要么从你的账户余额中付费购买额外用量。加购是可行的，但如果不小心，费用会很高。
最大的误区是认为你应该总是从线框图开始。对于某些项目来说，这没错。但对于其他项目，纯粹是浪费。我为 Tally 的落地页生成线框图烧掉了 4% 的周配额，然后发现我其实早就知道自己想要什么布局了。我直接放弃了线框图，直奔高保真。一点也不后悔。
教训是：在打开 Claude Design 之前，先想清楚你要什么。你在 Design 里花掉的每一分钟构思时间，都是在消耗宝贵的会话额度。
每个项目都从设计系统开始
这是改变我一切的关键操作。
在 Claude Design 中，一个设计系统包含你的颜色、字体层级、间距规则、按钮样式、悬停状态、徽章、标签、卡片、输入字段和图标集。它会生成一个 Design.md 规范文件，成为之后所有项目的唯一事实来源。
我为 AI Automation Society 构建了一个设计系统，方法是把网站 URL 和 GitHub 仓库地址给它。它抓取了这两者的内容，提取了品牌 DNA，并产出了一个规范。我现在内部发布的每个视频、幻灯片和落地页都在复用这个规范。在团队套餐下，这个系统可以在整个组织内共享。
对于 Tally，我还没有网站。我给了它三样东西：
- 一个 Logo PNG 图片
- 一份 Markdown 格式的品牌概念文档，包含使命、受众、调色板和字体
- 一段关于按钮感觉的简短说明（“现代感，背后有轻微发光，非常精致”）
它花了 5 到 10 分钟生成了这个系统。第一版有问题，主要是 Logo 被微妙地重绘了，而不是原样保留。我给出了反馈（“Logo 显示不正确，请完全保持 PNG 原样”），然后它修复了。
有两点需要牢记。验证 Agent 是真实存在的。Claude Design 确实在审视自己构建的东西并自我修正。而且一旦系统锁定，你可以把整个东西导出为一个 zip 文件，交给 Claude Code。同一个品牌，两个不同的界面。
在聊天中构思，在 Design 中执行
这是最大化你会话使用效率的单一最大杠杆。
永远不要在 Claude Design 内部进行头脑风暴。Design 界面是用来执行一个已知的简报，而不是用来搞清楚简报应该是什么。
对于 Tally，我首先在常规 Claude 中构思了整个品牌。使命、受众、调色板、字体、Logo 概念、语气语调。等到我打开 Claude Design 时，我已经有了一份 372 行的 Markdown 文档，那就是完整的规范。
我还同时使用了 GPT Image 2 作为 Logo 和品牌指南的合作伙伴。Claude 设计了实际的品牌。GPT Image 2 模拟了 Logo 变体和一页的品牌指南视觉稿。它在特定字体上有些问题（Roboto Mono 和 Montserrat 都变形了），但布局足够可用，我只需通过 Canva 把官方字体替换进去就行。
融资路演 PPT 也是同样的模式。在打开 Design 之前，我先让常规 Claude 提供 PPT 大纲和市场调研。仅此一步就帮我节省了大约 8% 的周配额。
把 AI 当作专家来对待。每次对话只做一件事。不要要求设计工具同时兼任你的策略师。
从品牌到构建的流程
设计系统锁定后，我把同样的操作手册跑了六遍。
1️⃣ 投资人路演 PPT。使用幻灯片模式，加上品牌 Markdown 文档，再加上我在 Claude 聊天中构建的大纲。验证 Agent 自动发现了第 6 页和第 10 页的问题，并在我看到 PPT 之前就修复了。最终效果感觉就像真正的创始人可以拿着它走进 VC 会议室一样。
2️⃣ 落地页线框图。三个中等保真度的概念稿，大部分是浅色，一个深色。选“替我决定”这个选项，帮我挑出了三种截然不同的风格（编辑风、文档风、现代金融科技风）。对探索方向有用，但我已经知道自己想要什么了。事后看，这一步可以跳过。
3️⃣ 高保真落地页。从零开始。搭建了完整页面，包含首屏、每周摘要预览、对比表格、常见问题以及创始人寄语。我用 Kling 生成了一个 Logo 循环视频（起始帧：骨骼背景闪烁，结束帧：Tally 标记），然后把 MP4 丢进首屏区域，让它自动在右侧播放。效果生动，但不显沉重。
4️⃣ 品牌规范文档。从设计系统出发，两分钟搞定。以后任何新素材都能复用。
5️⃣ 移动端 App 原型。同样的方法，多种屏幕状态，暗色模式迭代。跳过线框图，直接上高保真。更快、更干净。
6️⃣ 使用 HyperFrames 技能制作发布视频。这是意外之喜。真正的动态图形。动画文字。场景切换。全在 Claude Design 里用一个 Prompt 完成，因为 HyperFrames（由创作者 Haegeon 开发）把动画原语注入了 Design。
每个输出都落在同一个视觉世界里，因为它们都从一个设计系统里提取素材。这就是关键所在。你不再是在做一次性设计。你是在搭建一个品牌机器。
编辑面板是低调的超能力
大多数人只用聊天面板。那是个 Token 黑洞。
Claude Design 在画布里有三个编辑面板，学会用这三个，就是一周烧完配额和一个月都用不完的区别。
- 编辑工具。直接点击任意元素。修改文字、颜色、尺寸、内边距。Claude 会直接应用修改，你不需要用 Prompt 描述。这是 App 里最省成本的编辑方式。
- 绘图工具。圈出屏幕上的某个区域，输入评论，发送。Claude 会截屏，看到你圈出的区域，然后执行操作。适合处理非元素类修改，比如“把这个渐变调亮一点”或“这个区域感觉太沉重了”。
- 调整面板。封面样式、背景纹理、强调色、幻灯片边框的预制变体。一键切换，整个演示文稿就更新了。当你还在探索方向、没确定最终方案时，这是巨大的会话节省器。
通用规则：如果能不用 Prompt 就改，那就别用 Prompt。
用 Claude Code 和 Vercel 交付上线
设计只是工作的一半。交付是另一半。
最终上线版本，我用了 Claude Design 的“交接给 Claude Code”流程。有两个选项：
- 点击分享 → 下载为 zip。解压到文件夹，在 VS Code 里打开，然后在里面运行 Claude Code。
- 点击“交接给 Claude Code”。它会生成一条命令。复制，粘贴到 Claude Code，它会自动拉取项目。
我录制那天第二个选项报了 404 错误。如果它坏了，就用 zip 文件。
从 Claude Code 开始：
1️⃣ 告诉它“这是一个网站项目，把它推送到私有 GitHub 仓库。”如果你已经授权 Claude Code 访问 GitHub，它会立刻推送。如果没有，Claude Code 会弹出授权流程。
2️⃣ 先在本地主机测试。localhost:3000（或其他端口）。确保网站能正常渲染，再推上线。
3️⃣ 连接 Vercel。用 GitHub 登录，点击添加新项目 → 选择仓库 → 点击部署。60 秒后，它就在一个真实域名上了。
烦人的地方：第一次部署时 Vercel 返回了 404，因为构建文件嵌套在文件夹里，而不是仓库根目录。Claude Code 立刻发现了问题，把入口文件重命名为 index.html，推送修复，Vercel 自动重新部署。又上线了。
如果你也这么做，还有两件事要注意：
- 部署前先测试移动端视图。Claude Design 默认针对桌面端优化。在 Chrome 里按 F12，切换到移动端模式，检查哪里出问题，然后告诉 Claude Code 修复。Claude Design 和 Claude Code 不会自动优化移动端，但只要你提要求，它们就会做。
- 本地主机 URL 只属于你一个人。如果你把 localhost:3000 发给别人，他们看到的是自己电脑上的内容。分享前一定要先部署。
如果你想换掉 .vercel.app 的 URL，自定义域名大概需要五分钟。Claude Code 可以带你一步步操作。
如何延长每周配额
这部分是大多数教程会跳过的。下面是我现在用的操作手册。
- 在普通 Claude 聊天里进行头脑风暴和列大纲。那是独立的配额限制。把那个聊天当作规划室。
- 在点击生成之前，先把一份紧凑的 Markdown 规范丢进 Claude Design。上下文给得越充分，后续迭代消耗就越少。
- 规划 Prompt 用 Opus 4.7。微调时切换到 Sonnet 4.6。只要规范写得紧凑，我在 Sonnet 4.6 上构建了完整的幻灯片和动画素材，质量没有下降。
- 在画布里编辑和微调。上面提到的三个编辑面板比任何 Prompt 技巧都更能节省会话。
- 用真实的设计名称做参考。“Linear 2023，密度更高”比“做得干净点”强。“现代金融科技风，浅色骨骼背景”比“做得极简”强。
- 告诉 Claude Design 你不想要什么。负面描述能帮你省掉一轮修正。
- 每个 Prompt 只提一个主要修改。大而全的 Prompt 通常只能实现 1 到 2 个要求，剩下的都会被忽略。
- 实时观察构建过程。待办列表和验证 Agent 能让你看到进展。如果方向不对，就停下来。让 Claude Design 沿着错误方向构建十分钟，是你可能犯的最昂贵的错误。
还有几个值得注意的小问题：
- 文件上传上限大概在30到40MB之间。别尝试丢进一个5分钟的视频。
- 长对话会污染上下文。我还没验证过
/clear是否真的能清空上下文窗口，但当对话变得冗长时，稳妥的做法是导出并重新打开一个新会话。
- 带有完整GitHub仓库的设计系统比仅有一个Logo和Markdown规范的设计系统消耗的Token多得多。给Claude Design它需要的，不多也不少。
如果撞墙了，就导出。压缩项目，丢进Claude Code，继续迭代直到你的Design配额重置。你不会丢失进度，只是切换了操作界面。
总结
Claude Design不是要取代Figma，而是填补从创意到交付品牌之间的空白。
在Chat中规划，在Design中执行，从Code交付。三个界面，一个工作流，一个设计系统将它们粘合在一起。
真正从中获得价值的人，不是把它当聊天框用的人，而是把它当作一个拥有自己上下文、自己的配额、以及在更大流程中扮演自身角色的专家。
完整视频中我一步步讲解了所有步骤。链接在第一条回复里。