Claude Design — 它是什么以及如何使用它

Anthropic 推出了 Claude Design：发布了什么，它与 Figma 和 Canva 有何不同，以及 Claude Code 交付捆绑包如何将设计到代码的过程整合到一个对话中。

Claude Design 已于昨日发布。

Anthropic Labs 的最新产品：与 Claude 协作创建设计、原型、幻灯片、单页文档和着陆页。由 Opus 4.7 提供支持。Pro、Max、Team 和 Enterprise 订阅者可在 claude.ai/design 使用。

Brilliant 高级产品设计师 Olivia Xu 提出的一个关键数字：“我们最复杂的页面，在其他工具中需要 20 多个提示才能重新创建，在 Claude Design 中只需 2 个提示。” Brilliant 的页面以密集的交互性而闻名。当一家设计前沿公司的设计师这样说时，这个工具的底层确实做了一些不同的事情。

最重要的功能：交付给 Claude Code。

当设计准备好构建时，Claude Design 会将所有内容（意图、组件、交互、设计系统上下文）打包成一个捆绑包，您只需一条指令即可将其传递给 Claude Code。Claude Code 会实现它。

这是 Figma 和 Canva 所不具备的部分。它们交付的是静态工件。Claude Design 交付的是结构化意图，另一个 AI 可以对其进行操作。过去需要一周来回的设计到代码循环变成了一次对话。

您的品牌在入职时就已构建。Claude 会读取您的代码库和现有设计文件，以学习您的颜色、排版和组件。每个项目都会自动使用该系统，并且您可以维护多个系统（营销网站、产品、投资者演示文稿）。您的品牌是学习而来的，而非配置的。

您可以从任何思考起点开始：文本提示、图像、DOCX / PPTX / XLSX 文件，或直接从您的代码库。需要了解的是网页捕获工具。将其指向任何 URL，它会从实时页面中抓取元素，因此您的原型看起来就像实际产品，而不是三个冲刺前就偏离的 Figma 近似值。

针对您的特定设计生成细化控件：对任何元素的内联注释、直接文本编辑，以及 Claude 为项目定制的间距、颜色和布局调整旋钮。在一个元素上进行正确的调整后，要求 Claude 将其应用于整个设计。

导出路径：作为内部 URL 共享、保存为文件夹，或导出为 PDF、PPTX 或独立 HTML。值得一提的是：导出到 Canva（Canva 首席执行官 Melanie Perkins 在发布帖子中有一段引言）。推送到 Canva 的设计对于非技术团队成员来说是完全可编辑的。当下一步是“营销需要调整这个”而不是“工程需要构建这个”时使用它。

团队使用它的目的，直接来自发布帖子：用于用户测试的静态模型原型、交付给 Claude Code 的产品线框图、粗略大纲的演示文稿，以及描述的着陆页。Datadog 的产品经理 Aneesh Kethini：“过去需要一周的简报、模型和审查回合之间的来回沟通，现在只需一次对话即可完成。”

本周末：将网页捕获工具指向一个实时网站，生成 3 个备选方向，选择一个并进行细化，然后将交付捆绑包通过一条指令导出到 Claude Code。潜在的用例是前沿设计：带有语音、视频、着色器、3D 和内置 AI 的代码驱动原型。

发布内容：Claude Design，Anthropic Labs 的研究预览版，由 Opus 4.7 提供支持，可在 claude.ai/design 供 Pro、Max、Team 和 Enterprise 用户使用。

与众不同之处：从您的代码库学习的设计系统、从您的实时网站抓取的网页捕获工具、自定义细化旋钮，以及一个将结构化意图而非静态工件交付给 Claude Code 的交付捆绑包。设计到代码的循环从一个冲刺缩短为一次对话。更深入的策略在第 2 到第 5 轨道中。