Claude设计系统：从零搭建到批量生产

一、什么是 Claude Code Design？

Claude Code Design 是 Claude 在线应用（claude.ai）左侧新增的设计功能入口。Jack 将其定义为​"代码优先的可视化原型引擎"（code-first visual prototyping engine）。

核心逻辑很简单：当你把"好看"编程化之后，就可以在任何场景下自动生成符合标准的设计。 它由 Opus 4.7 模型驱动——Jack 称其为"目前地球上最强的模型"（the best model on the planet right now），其核心能力是弥合代码与美观设计之间的鸿沟。

在 Claude 的生态系统中，三者分工明确：

• Claude Design = 你的私人设计师
• Claude Code = 你的开发者
• Claude 的其他连接能力（邮件、外部工具等）= 连接你的世界

它能构建的东西几乎没有限制：线框图（wireframe）、高保真原型（high fidelity）、演示文稿、网站、应用组件、视频动画，"我们只受限于想象力"（we're only limited by our imagination）。

二、搭建你的专属设计系统——"反泔水模式"

这是整个视频最重要的部分。 Jack 称设计系统为你的"anti-slop mode"（反泔水模式）——如果不建立自己的设计系统，每次生成的设计都会和别人的看起来差不多。

搭建步骤

1. 点击左侧 "Setup Design System"
2. 填入公司名称和简介
3. 导入现有设计资产：
   • GitHub 仓库中的设计代码
   • Figma 文件（直接导出本地副本后上传）
   • 字体、Logo、品牌素材（建议在桌面建一个统一的 design 文件夹）
4. 写设计偏好笔记：例如 "I like to keep things simple and visually easy to understand. When I'm building things like presentations I like to do one point one slide, premium feel, but also very visually engaging using beautiful subtle animations."（我喜欢简洁、视觉友好的设计。做演示文稿时一页一个要点，有高级感，但视觉上要吸引人，用漂亮的微动效。）
5. 生成：大约5分钟完成

审核与迭代

系统生成后会进入逐项审核流程。Jack 展示了他的设计系统准确识别了：

• YouTube 频道使用的特定字体
• 主色调（蓝色和橙色）
• Logo 风格

关键发现：你可以像跟设计师沟通一样给反馈。 Jack 对渐变效果不满意，直接说"蓝色太多太橙了，我要蓝色在左下、橙色在右下、白色在中间、后面有点阵"——Claude 一次就改对了。

一个反直觉的建议："A bad design system is actually worse than no design system."（一个糟糕的设计系统实际上比没有设计系统更差。）如果你给的素材不够准确，等于在指导 AI 做错误的事。所以除非你确定要给的东西是对的，否则不如让 AI 自由发挥。

三、实战用例一：品牌演示文稿

Jack 使用自己的设计系统生成了一组商务演示文稿，提示词仅一句话：创建三张关于企业主如何用 AI 提升利润或效率的幻灯片，并要求使用 HTML 动画增加交互性。

效果：生成的幻灯片自动匹配了他的品牌色、字体和风格，具备动效交互。

他还展示了一个更酷的玩法——借用其他品牌的设计风格。以 ClickUp 为例：

1. 复制 ClickUp 网站的 URL 和截图
2. 用 HTML 提取工具获取网站源码
3. 将这些全部投喂给 Claude Design
4. 一次生成就得到了极其接近 ClickUp 风格的幻灯片

展示模式也很实用：直接点 "Present Mode" 就能全屏演示，或导出为 HTML 在浏览器中打开。

四、实战用例二：网站设计与发布

Jack 演示了从设计到上线的完整流程：

1. 在 Claude Design 中创建高保真网站原型：输入参考网站截图、HTML 和设计偏好
2. 实时修改：用画笔工具圈住不满意的区域，写文字反馈，Claude 立即调整
3. 导出到 Claude Code：点击 Export → Hand off to Claude Code → 复制命令
4. 在 Claude Code 桌面端粘贴命令：Claude Code 会自动获取设计文件
5. 本地运行：在 localhost 打开预览
6. 发布到 Vercel：一键部署上线

重要提醒：导出到 Claude Code 时是 HTML 格式，建议让 Claude Code 转换为更高级的前端框架（如 React/Next.js），这样可以获得更好的动画和设计效果。

五、实战用例三：嵌入式交互组件

这是一个容易被忽略但极有商业价值的用例。Jack 以投资回报率计算器（ROI Calculator）为例：

1. 从 Claude Design 的示例库中找到计算器模板
2. 用 Glider（AI 助手）改写提示词，使其适用于保险业务的 ROI 计算
3. 生成交互式计算器
4. 将 HTML 代码嵌入到已有网站中

应用场景想象：

• 保险/金融行业的收益预测器
• 客户演示时的实时数据展示工具
• 任何需要"让客户自己算一下"的互动组件

因为设计系统已预加载，所有嵌入组件自动匹配品牌风格，无需额外调整。

六、实战用例四：视频动画

Jack 用一句话生成了一段10秒的视频动画片头：

"Hey there. I'd like to create for me a brief 10-second animation for the below section of my video script. I want it to be minimalistic, beautiful HTML animations, simplistic, and almost like a black background. Very simple."（你好，帮我为以下视频脚本片段创建一个简短的10秒动画。要极简风格、漂亮的HTML动画，简洁，接近黑色背景。非常简洁。）

结果是一个精美的文字动画效果，可直接导出用于视频制作。这意味着内容创作者可以跳过 After Effects / Motion Graphics 的学习曲线，直接用文字描述获得视频片头。

七、批量化生产：从手工到自动化

这是整个视频的战略制高点。 前面的所有用例都是"手工模式"，真正的威力在于批量化。

路径如下：

1. 导出设计系统：在 Design Systems 页面选择你的系统 → 下载为 ZIP
2. 在 Claude Code 桌面端加载：上传 ZIP 或让 Claude 从最近下载中获取
3. 使用 Routines（例行任务）功能：设置本地或远程触发器
4. 构建自动化链条：例如，当在线文档中的视频脚本更新时，自动触发 Routine → 读取脚本 → 生成对应的视频动画 → 保存到桌面或发送给团队

Jack 明确指出："You can't really scale your design systems unless you actually understand how to use that routines function."（除非你真正理解 Routines 功能，否则无法真正规模化你的设计系统。）

规模化的上限：10个、20个、50个、甚至100个设计任务可以同时运行。

八、关键限制与成本考量

Token 消耗是最大的实际限制。 Opus 4.7 模型"极度饥渴"（really freaking hungry），$20/月的订阅可能只够每周做一两个大型动画设计。除非升级到 Max 计划，否则很快会触及用量上限。

Jack 还提到了设计能力 vs 设计易用性的区别——Claude Design 在两者之间找到了不错的平衡，但复杂设计仍需要多轮迭代。

设计心理学彩蛋：为什么好设计值得投入

Jack 在视频中穿插了一个关于设计重要性的解释，引用了系统一/系统二思维（System 1/System 2 thinking）：

• 系统二（理性脑）：分析、比较、权衡
• 系统一（直觉脑）：红色=危险，绿色=安全，快速做判断

好的设计让人少思考，快速做决定。 从"不买"到"买"的转化速度，设计是最大的加速器。这就是为什么花10分钟搭建一个好的设计系统，回报率极高。

金句收录

1. "Think of Claude Design as code first design and it's only ever going to get better." （把 Claude Design 想象成代码优先的设计，它只会越来越好。）

2. "Think of this as your anti-slop mode." （把它当作你的反泔水模式。）

3. "If you don't give or create your own design system, every design that you create is likely to look like more or less like everybody else's design." （如果你不创建自己的设计系统，你做出来的东西大概率和其他人的看起来差不多。）

4. "A bad design system is actually worse than no design system." （一个糟糕的设计系统实际上比没有设计系统更差。）

5. "The less that we can make people think, the better. The more quickly they're going to make decisions." （让人越少思考越好，他们做决定的速度就越快。）

6. "We're only limited by our imagination." （我们唯一的限制就是想象力。）

7. "You can't really scale your design systems unless you actually understand how to use that routines function." （除非你真正理解 Routines 功能，否则无法真正规模化你的设计系统。）

8. "Design capability and then how easy it is to design are two different things sometimes." （设计能力和设计的易用性有时候是两回事。）

时间线索引