# Claude Design
**作者**: HyperFrames
**日期**: 2026-07-26T01:07:48.000Z
**来源**: [https://x.com/HyperFrames_/status/2081184676430160379](https://x.com/HyperFrames_/status/2081184676430160379)
---
# Day 20 of 30: Hyperframes with Claude Design
Nineteen days of this series have started from the same place: the design already exists. HyperFrames captures a website, reads the brand out of the pixels, and writes it into a FRAME.md. That works because somebody already did the design work.
Day 20 covers the other half: when the design does not exist yet. Anthropic has a tool for exactly that moment, and because of one convenient fact about how it works, it plugs straight into a HyperFrames pipeline.
## What Claude Design is
Claude Design is Anthropic's design tool, live at claude.ai/design as a research preview for Pro, Max, Team, and Enterprise plans. You describe what you want, Claude designs it on a canvas, and you refine it the way you would in a design tool instead of a chat window: click an element and leave an inline comment, drag the sliders it spawns for color and type size, or just edit the thing directly.
Two details make it different from every "AI makes you a mockup" tool before it:
- It has taste. The model behind it is trained for design work, and it shows. Layouts, spacing, and type come out considered instead of generated. It is the closest thing yet to Figma for non-designers, but simpler: no artboards to learn, no pen tool, just intent and iteration.
- It learns your brand first. During onboarding, Claude Design builds a design system for your team by reading your codebase and design files. Every project after that automatically uses your colors, your typography, your components.
## The unlock
Everything it produces is on-brand by construction instead of by correction.
Our HeyGen design system already lives in it: the ABC Solar Display and TT Norms Pro families, the full color token set, and about forty real components, from buttons to player controls. So when we ask Claude Design to ideate a frame, a title card, or an end screen, it is not guessing at HeyGen's look. It is composing with the same pieces our product ships with.
## Using it with HyperFrames
Here is the part that makes this a video story and not just a design story: Claude Design projects are real HTML and CSS. And HyperFrames renders video from HTML. There is no translation layer between the two.
So the workflow is four steps:
1. Give it your design system. Onboarding builds one from your codebase and design files, or sync an existing component library from Claude Code with /design-sync.
2. Ideate in Claude Design. Describe the frames you want. Comment, slide, and nudge until the taste is right. This is the Figma-for-non-designers step.
3. Download the project. What comes out is not a screenshot of a design. It is the design: working HTML, CSS, fonts, and tokens.
4. Hand it to Claude Code. Because HyperFrames speaks the same language, the downloaded design is not a reference to recreate. It is source material. Claude Code drops it into the composition and animates it: the layout becomes the scene, the components become the cast.
Design tool on one side, video tool on the other, and the border between them disappears because both sides are HTML.
The real run
We did this for Day 20 itself. One sentence into Claude Design, with the Prism design system and the day's background pattern attached:
```
make me a 15 sec sizzle animation for HeyGen HyperFrames Day 20 Claude Design. using our brand fonts and colors
```
Before touching the canvas it asked the questions a producer would ask: where the video will live, what aspect ratio, how to use the uploaded pattern, tone, typography, audio. We answered the ones that mattered (a landing page loop, 1:1 square, the pattern as the background, no audio in the file so music can come in post) and told it to decide the rest.
What came back was a 15 second, 1080 by 1080 looping sizzle in four beats: a grid of twenty frames lighting up one by one, the HYPERFRAMES title in ABC Solar Display, a counter rolling to Day 20, and the HeyGen lockup end card. TT Norms Pro Mono for the film chrome, Prism blue accents, the pattern tinted toward brand blue. It even shipped its own Tweaks panel: pattern opacity, accent color, and a film-chrome toggle.
Exporting is one click. Share, then Export, and you get the MP4 next to the thing this whole day is about: the entire project as HTML.
That downloaded HTML project is what goes to Claude Code next. One honest note from our run: the export's background flickered. Claude Design's player restarts the pattern video in every scene and its exporter steps through the video frame by frame, so the bed never settles. Keep that in mind, because fixing it is exactly what the handoff is for.
## The final output
We handed the downloaded project to Claude Code and rebuilt it as a HyperFrames composition. Same four scenes, same type, same easings. One structural change: the pattern video becomes a single continuous background layer that plays once under the whole cut instead of restarting in every scene. HyperFrames owns media playback at render time, so the bed is frame-exact. Measured frame to frame, the old export's background jumped at every scene cut. This one holds steady for the full 15 seconds.
Output:
## The pro move: teach Claude Design to speak HyperFrames
Everything above used Claude Design out of the box, which is why the export needed a rebuild on the way in. There is an official shortcut. HyperFrames ships an instruction file, claude-design-hyperframes.md, built for exactly this pairing.
Attach that file in a new Claude Design chat along with your brief, screenshots, and brand assets. It hands Claude Design pre-valid HyperFrames skeletons with the structural rules already embedded, so the model spends its taste on palette, typography, scene content, and GSAP motion instead of on format. What comes back is a ready HyperFrames project: index.html, preview.html, README.md, and DESIGN.md.
Download it and refine in Claude Code (or Cursor):
```
npx skills add heygen-com/hyperframes
npx hyperframes lint
npx hyperframes preview
```
Three tips from the official guide:
- Attachments beat everything. Screenshots and brand guides steer the design harder than pasted text, and both beat URLs.
- Do not judge motion in the pane. The in-pane preview scrubber is unreliable; preview locally.
- Claude Design does not lint. Run npx hyperframes lint locally to catch structural issues before you render.
⭐ If this series is useful, star the HyperFrames repo.
- Claude Design: claude.ai/design · announcement
- Official pairing guide: Claude Design for HyperFrames
- Install the skills: npx skills add heygen-com/hyperframes
Day 20 down. 10 to go.
## 相关链接
- [HyperFrames](https://x.com/HyperFrames_)
- [@HyperFrames_](https://x.com/HyperFrames_)
- [11K](https://x.com/HyperFrames_/status/2081184676430160379/analytics)
- [FRAME.md](http://frame.md/)
- [Claude Design](https://claude.com/product/design)
- [claude.ai/design](https://claude.ai/design)
- [claude-design-hyperframes.md](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md)
- [star the HyperFrames repo](https://github.com/heygen-com/hyperframes)
- [claude.ai/design](https://claude.ai/design)
- [announcement](https://www.anthropic.com/news/claude-design-anthropic-labs)
- [Claude Design for HyperFrames](https://hyperframes.heygen.com/guides/claude-design)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [9:07 AM · Jul 26, 2026](https://x.com/HyperFrames_/status/2081184676430160379)
- [11.3K Views](https://x.com/HyperFrames_/status/2081184676430160379/analytics)
- [View quotes](https://x.com/HyperFrames_/status/2081184676430160379/quotes)
---
*导出时间: 2026/7/26 14:50:13*
---
## 中文翻译
# Claude Design
**作者**: HyperFrames
**日期**: 2026-07-26T01:07:48.000Z
**来源**: [https://x.com/HyperFrames_/status/2081184676430160379](https://x.com/HyperFrames_/status/2081184676430160379)
---
# 30 天挑战第 20 天：使用 Claude Design 的 Hyperframes
这个系列的前十九天都始于同一个前提：设计已经存在。HyperFrames 抓取网站，从像素中解读品牌，并将其写入 FRAME.md。这套流程之所以有效，是因为别人已经完成了设计工作。
第 20 天涵盖了另一半情况：当设计尚不存在时。Anthropic 有一款专门为此时刻准备的工具，并且由于它运作方式的一个便利特性，它能直接接入 HyperFrames 流水线。
## 什么是 Claude Design
Claude Design 是 Anthropic 的设计工具，现已在 claude.ai/design 上线，作为 Pro、Max、Team 和 Enterprise 计划的研究预览版。你描述你想要的东西，Claude 在画布上设计它，然后你像在设计工具中而不是在聊天窗口中那样进行优化：点击元素并留下内联评论，拖动它生成的颜色和字号滑块，或者直接编辑该元素。
有两个细节使其不同于此前所有的“AI 制作 mockup（原型图）”工具：
- 它有品位。其背后的模型针对设计工作进行了训练，这一点显而易见。布局、间距和字体呈现出来是经过深思熟虑的，而不是被“生成”出来的。它是目前最接近非设计师版的 Figma 的东西，但更简单：无需学习画板，没有钢笔工具，只需意图和迭代。
- 它先学习你的品牌。在入门阶段，Claude Design 通过读取你的代码库和设计文件为你的团队构建一个设计系统。此后的每个项目都会自动使用你的颜色、字体和组件。
## 解锁点
它生成的一切在结构上就是符合品牌调性的，而不是通过修正得来的。
我们的 HeyGen 设计系统已经存在于其中：ABC Solar Display 和 TT Norms Pro 字体家族、完整的颜色 token 集，以及约四十个真实组件，从按钮到播放控件。因此，当我们要求 Claude Design 构思一个帧、标题卡或结束画面时，它并不是在猜测 HeyGen 的外观。它是在使用我们产品发货时所用的相同积木进行创作。
## 将其与 HyperFrames 结合使用
这就是使其成为一个视频故事而不仅仅是一个设计故事的部分：Claude Design 项目是真正的 HTML 和 CSS。而 HyperFrames 从 HTML 渲染视频。两者之间没有翻译层。
因此工作流程分为四步：
1. 输入你的设计系统。入门阶段会根据你的代码库和设计文件构建一个，或者使用 /design-sync 从 Claude Code 同步现有的组件库。
2. 在 Claude Design 中构思。描述你想要的帧。评论、拖动滑块和微调，直到感觉对味。这是“非设计师版 Figma”步骤。
3. 下载项目。输出的不是设计的截图。它就是设计本身：可运行的 HTML、CSS、字体和 token。
4. 移交给 Claude Code。因为 HyperFrames 使用同一种语言，下载的设计不是用来复刻的参考资料。它是源材料。Claude Code 将其放入合成中并制作动画：布局变为场景，组件变为演员。
一边是设计工具，另一边是视频工具，而它们之间的界限消失了，因为两边都是 HTML。
实际操作
我们为第 20 天本身做了这件事。在 Claude Design 中输入一句话，附上 Prism 设计系统和当天的背景图案：
```
make me a 15 sec sizzle animation for HeyGen HyperFrames Day 20 Claude Design. using our brand fonts and colors
```
在接触画布之前，它问了一个制片人会问的问题：视频将在哪里播放、什么纵横比、如何使用上传的图案、基调、字体、音频。我们回答了关键的问题（落地页循环，1:1 正方形，图案作为背景，文件中无音频以便后期配乐）并让它决定其余部分。
返回的是一个 15 秒、1080x1080 的循环炫酷视频，分四个节拍：二十个帧的网格逐个点亮，ABC Solar Display 字体的 HYPERFRAMES 标题，滚动到 Day 20 的计数器，以及 HeyGen 锁屏式结束卡。用于胶片铬质感的 TT Norms Pro Mono，Prism 蓝色点缀，图案色调倾向品牌蓝。它甚至自带了一个 Tweaks（调整）面板：图案不透明度、强调色，以及一个胶片铬质感的开关。
导出只需点击一次。分享，然后导出，你就会得到 MP4，旁边放着这一整天的主题所在：整个项目作为 HTML。
那个下载的 HTML 项目接下来就是要交给 Claude Code 的东西。我们要诚实记录一次运行中的情况：导出的背景闪烁了。Claude Design 的播放器在每个场景重新启动图案视频，而它的导出器是一帧一帧地遍历视频，所以底层背景从未稳定下来。请记住这一点，因为修复它正是交接的目的。
## 最终输出
我们将下载的项目交给 Claude Code，并将其重建为 HyperFrames 合成。相同的四个场景，相同的字体，相同的缓动。一个结构性的改变：图案视频变成一个单一的连续背景层，在整个剪辑过程中播放一次，而不是在每个场景重新启动。HyperFrames 在渲染时拥有媒体播放控制权，所以底层背景是逐帧精确的。逐帧测量，旧导出的背景在每个场景剪辑处都会跳动。这一个则在完整的 15 秒内保持稳定。
输出：
## 专业操作：教 Claude Design 说 HyperFrames 语言
以上所有内容都使用了开箱即用的 Claude Design，这就是为什么导出内容在导入时需要重建。有一个官方的快捷方式。HyperFrames 附带了一个指令文件 claude-design-hyperframes.md，正是为这种配对构建的。
在新的 Claude Design 聊天中附上该文件，连同你的简报、截图和品牌资产。它向 Claude Design 提供预验证的 HyperFrames 骨架，其中已嵌入结构规则，因此模型将其品位花在调色板、字体、场景内容和 GSAP 动效上，而不是花在格式上。返回的是一个现成的 HyperFrames 项目：index.html、preview.html、README.md 和 DESIGN.md。
下载它并在 Claude Code（或 Cursor）中优化：
```
npx skills add heygen-com/hyperframes
npx hyperframes lint
npx hyperframes preview
```
来自官方指南的三个提示：
- 附件胜过一切。截图和品牌指南比粘贴的文本更能引导设计，而两者都胜过 URL。
- 不要在窗格中判断动效。窗格内的预览擦动器不可靠；请在本地预览。
- Claude Design 不会 lint。在本地运行 npx hyperframes lint 以在渲染前捕获结构问题。
⭐ 如果这个系列有用，请给 HyperFrames 仓库点星。
- Claude Design: claude.ai/design · announcement
- 官方配对指南：Claude Design for HyperFrames
- 安装 skills：npx skills add heygen-com/hyperframes
第 20 天完成。还剩 10 天。