Claude Design：从副业项目到百万用户可视化工作台的成长之路
Claude Design 从 Anthropic 内部的副业项目起步，逐步成长为服务百万用户的可视化工作台，展示了 AI 原型工具走向核心产品的过程。
Claude Design如何从副业成长为百万用户的可视化工作台
引言
Claude Design最初是为应对Anthropic内部一次令人不适的变化而产生的务实回应。
2025年秋季，产品设计师Nate Parrott是唯一与两位工程师共同开发Visual Studio Code扩展Claude Code的设计师。他们的目标是将Claude Code基于终端的功能整合到图形界面中，让普通用户能更轻松地理解和使用。
该团队于9月底发布了测试版。随后，Claude Opus 4.5在11月问世，Parrott身边的工程师们开始以前所未有的速度交付成果。
而他自己的设计流程并未以同样的速度加快。
Parrott没有坐等工作流程重新平衡，而是利用业余时间构建了一个小工具来帮助自己跟上节奏。这个副业最终发展成为Claude Design——Anthropic Labs的一款产品，上线首周就有超过一百万人使用。
这个故事不仅仅是关于一款AI设计产品的走红。它展示了一方面，AI如何在其他团队之前先加速团队中的某个环节，从而产生新的瓶颈；另一方面，受到这种不平衡影响的人们又如何利用同样的技术来重新设计自己的工作方式。
工程加速先于设计
最初的团队规模很小：两名工程师和一名产品设计师。
在Opus 4.5发布之前，他们的工作节奏基本同步。工程和设计可以共同推进一个功能，没有哪个职能会持续领先于另一个。
新模型上线后，这种平衡被打破了。
工程师可以利用Claude Code实现、测试、修改并交付更多工作。而Parrott仍以大致之前的速度进行设计，这使得设计成为了流程中较慢的环节。
这揭示了AI应用的一个更广泛的影响。
AI并不会让每个角色都得到同等程度或同时的改进。一个公司可能会看到软件实现加速，但产品策略、设计评审、法律审批、内容、测试或客户支持却保持不变。
结果并不总是立即的岗位替代。更常见的是，其首要影响是相关联的工作流程之间出现错配。
当工程速度提升时，组织中的其他部分必须回答新的问题：
- 设计能否在实现启动前探索足够多的方向？
- 产品经理能否足够迅速地做出决策？
- 评审人员能否评估更大数量的变更？
- 品牌标准能否跟上更快的生产节奏？
- 在开发者承诺构建之前，团队能否达成一致？
Parrott的应对之道是为流程中成为瓶颈的环节创建一个工具。
初次尝试：让AI"去做设计"
Claude Code主要基于文本，因此Parrott最初将其视为
将设计视为另一项文本任务。
他将终端输出复制到 Claude 中，添加了界面截图，描述了功能，并让模型进行设计。
结果令人失望。
问题不在于 Claude 缺乏视觉或编码能力。这个请求没有给模型提供任何强有力的媒介来表达、测试和修改视觉创意。
聊天中的设计描述仍然只是一个描述。它无法被点击、调整大小、添加动画，也无法作为一个可操作的流程来体验。
帕罗特将这个副项目实验了大约一个月。转折点在于，他不再要求 Claude 抽象地生成“一个设计”，而是要求它创建 HTML。
HTML 成为视觉画布
HTML 通常被视为网站的格式，但帕罗特认识到它可以作为一种广泛的视觉和交互媒介。
一个网页可以包含：
- 布局和排版。
- 运动和动画。
- 交互控件。
- 可点击的原型。
- 图表和图示。
- 幻灯片式的序列。
- 视频和音频。
- 表单和产品流程。
- 同一创意的响应式版本。
这使得 HTML 成为连接对话和视觉工作的有用桥梁。
帕罗特创建了一个分屏界面：
- 左侧是与 Claude 的对话。
- 右侧是实时 HTML 预览。
当用户描述一个更改时，Claude 会更新底层页面，结果就会显示在画布上。
这比生成静态图像更有用，因为输出可以像产品一样运作。按钮可以工作，过渡效果可以运行，原型可以包含多个状态，而无需手动绘制和链接每个屏幕。
仅有 HTML 还不够
一个技术上可用的原型可能仍然看起来千篇一律或不协调。
帕罗特认为，产品设计依赖于理解每个决策背后的产品和品牌。一个知道如何创建 HTML 的模型，并不会自动知道哪些字体、颜色、组件、间距规则和视觉原则属于 Anthropic。
因此，他将 Anthropic 的视觉系统提炼到工具的工作上下文中。
这包括：
- 排版。
- 颜色选择。
- 现有资产。
- 界面组件。
- 布局模式。
- 设计原则。
这一改变使得生成的作品看起来不再像随机的 AI 界面，而更像是属于 Anthropic 产品家族的一部分。
这个内部实验后来成为了 Claude Design 的核心功能。
在入门过程中，Claude Design 可以分析源代码，如代码库、设计参考、幻灯片、文档、截图、Logo、调色板和排版规范。然后，它会生成一个可复用的设计系统，包含颜色、排版、组件等元素。
以及布局模式。
对于团队版和企业版组织，系统可面向整个团队发布。管理员能够审批标准系统并限制编辑权限，确保项目与公司规范保持一致。
原型在Anthropic内部传播
Parrott将HTML工作流与Anthropic品牌语境整合成一个小型内部原型。
产品设计师开始用它制作交互式原型。
在传统点击式工作流中，设计师可能需要绘制每个屏幕的每种状态并手动连接。而借助内部Claude Design原型，设计师只需提供素材、说明预期行为，并让Claude实现体验效果。
每个结果都会生成可共享链接。
这改变了原型的定位。它不再只是设计应用中的私有文件，而是成为同事之间可以打开、点击、讨论和修改的共享文档，其运作方式与共享文档如出一辙。
决定性时刻发生在Anthropic实验室的一次场外活动中。
Parrott目睹与会者利用该工具为创意提案环节制作演示幻灯片——有时甚至是在会议进行中、即将轮到自己展示前匆忙完成。
这种自发性采用让实验室团队确信，这个副项目切实解决了实际需求。Claude Design获得了专属团队支持，从非正式内部实验正式转型为产品。
为何Anthropic实验室是天然孵化地
Anthropic实验室于2026年1月进一步扩展，专门孵化基于Claude新兴能力的实验性产品。
该团队专为独特的产品开发模式而设：
- 在模型能力边界搭建粗粝实验。
- 让真实用户尽早尝试。
- 观察用户反复选择的工作流程。
- 为证实有效的实验增配人员和基础设施。
- 将成功创意扩展为可靠产品。
Anthropic指出Claude Code正是这条路径的早期范例：从研究预览起步，六个月内成长为Anthropic所称的十亿美元级产品。
Claude Design遵循相似发展轨迹：
- 单人构建的副项目。
- 被内部设计师采纳。
- 同事将其用于创作者未预设的用途。
- 内部提案会证实存在明确需求。
- 实验室调配资源。
- 以研究预览形式公开发布。
- 随后进入测试阶段。
这种自下而上的路径至关重要，因为AI原生产品往往难以提前明确规格。模型能力快速迭代，用户能发现原始团队未曾预见的工作流程。
在本案例中，由于人们持续将其用于视觉传达而非仅限界面原型，该产品的外延得以不断扩展。
从产品原型到视觉沟通
Claude Design最初被定位为产品设计工具。
但这一描述很快显得过于狭隘。
团队开始用它创建：
- 交互式产品原型
- 线框图和模型图
- 设计探索方案
- 提案演示文档
- 演示幻灯片
- 着陆页
- 可打印单页文档
- 营销素材
- 电子邮件
- 动画效果
- 社交媒体视觉内容
代码驱动的视觉实验。
Parrott 将该工具描述为位于生产级产品设计之上一个层级。其核心作用是帮助团队在投入开发之前探索和沟通创意。这种区分带来了更清晰的职责划分：
| Claude Design | Claude Code |
|---|---|
| 早期视觉探索 | 生产软件开发 |
| 原型与概念测试 | 实现与仓库管理 |
| 演示与视觉沟通 | 代码修改、测试与部署 |
| 开发前达成一致 | 方向确定后开发 |
| 可编辑画布与视觉控件 | IDE 及终端编码工作流 |
这两款工具可协同使用，但并非相互替代。
在 Claude Design 与 Claude Code 之间切换
Anthropic 新增了设计与代码之间的双向工作流。在 Claude Code 中使用以下命令：
/design-sync
可将现有设计系统导入工作流，使视觉工作基于组织当前组件展开。使用命令：
/design
可在终端创建、编辑和同步 Claude Design 项目。团队可以从任一方向启动工作。
从 Claude Design 开始
- 探索多种视觉方向
- 构建真实的交互原型
- 收集反馈并达成团队一致
- 打包成果以便交接
- 在 Claude Code 中继续实现
从 Claude Code 开始
- 基于现有应用或组件库开展工作
- 同步设计系统
- 将代码转化为实时视觉原型
- 在 Claude Design 中精细化调整
- 将更新后的设计方向带回代码工作流
这比简单地将截图交给开发人员、要求其还原预期行为要可靠得多。交接内容可包含运行中的原型及相关设计上下文，而不仅是一张平面图像。
设计系统成为日常使用核心
Claude Design 的早期流行表明，仅靠生成能力远远不够。团队需要该工具在项目间保持一致性，并尊重既有品牌体系。Anthropic 重构了设计系统导入工作流，使用户能够从以下来源引入一个或多个系统：
- GitHub 仓库
- 代码库与组件库
- 设计参考
- 演示文稿
- 文档
- 截图
- 原始品牌资源
Claude 使用这些组件进行构建，对照系统检查输出结果，并在展示前纠正不一致之处。这使得该工具在日常工作中更具实用性。一次性生成的 AI 落地页或许令人印象深刻，但在真实企业中难以落地。系统感知型工作流可以让组织从现有选择起步，而非每次从头创建新的视觉语言。
直接编辑减少不必要的提示
Claude Design 的测试版包含直接画布控制功能。用户可执行以下操作：
- 选择元素
- 编辑文本
- 拖拽重新定位
- 调整对象大小
- 修改颜色
- 调整间距
- 对齐元素
- 添加行内评论
- 要求 Claude 对设计全局应用变更
这一点之所以重要，是因为提示操作并非
每次调整的最佳界面。
用户无需撰写数句话，即可将标题稍向左移或缩小卡片宽度。通过直接操作完成小型视觉修正往往更快捷。
Parrott 建议使用 Claude 进行广泛探索和结构性更改，然后手动处理最终的小调整。
直接编辑还能避免在那些肉眼更容易判断的改动上消耗模型令牌。
导出并在其他工具中继续创作
Claude Design 可将作品导出为：
- PPTX
- 独立 HTML
- 项目文件夹
- 内部可共享链接
Anthropic 还提供了连接器，可将作品发送至其他创意和开发工具。
官方连接器列表包括 Adobe、Base44、Canva、Gamma、Lovable、Miro、Replit、Vercel 和 Wix，未来还将增加更多目标平台。
目标并非取代每个专业工具。
演示文稿可在 Claude Design 中开始创作，然后在 Gamma 或 Canva 中继续。概念可移至 Miro 进行协作。原型可进入 Replit、Vercel、Lovable 或 Wix 进行进一步构建和部署。
Claude Design 充当早期视觉工作空间，帮助创意以更少的手工重建进入下一个合适的工具。
Claude Design 不适用的场景
Claude Design 具有明确的局限性。
它并非图像生成模型
Anthropic 表示 Claude Design 没有专门的图像模型。
因此，它不适合生成最终标志或从头创建原创图像素材。
用户应携带现有标志、产品图片、插图、摄影作品和品牌资产。
Claude 能在更大的视觉构图内安排和使用这些素材。
它并非生产级软件平台
Claude Design 可创建交互式原型和代码驱动的视觉作品，但 Anthropic 建议使用 Claude Code 进行生产级软件开发。
原型可传达预期体验，但未必满足安全性、可访问性、测试、可维护性、性能、后端可靠性或生产部署的要求。
它无法取代审美判断
Claude 可快速生成众多选项。
但必须由人来决定哪个方向合适、哪些细节显得平庸、作品是否传递了正确理念、应删除哪些内容、以及原型是否已准备好影响生产。
设计师的角色不再局限于手动制作每个变体，而是转向设定方向、构建系统、判断质量以及协调团队。
更有效使用 Claude Design 的实用方法
1. 在提示前先思考
一段清晰的简报通常比反复修正模糊的请求能带来更好的结果。
定义受众、目标、内容、期望感受、
在要求 Claude 构建之前，先明确约束条件和输出格式。
2. 描述视觉方向
缺乏引导时，AI 系统可能会回归到常见的审美风格。
明确指定字体、色彩、参考案例、情绪板，以及作品应避免或接近的示例对象。
3. 构建可复用设计系统
上传真实的品牌示例，而非仅提供抽象规范。
一个完整的落地页、演示文稿或界面，比单独的色彩列表更能清晰地展现品牌的视觉特征。
4. 生成多个方向
要求提供多个选项并进行对比。
提高生成速度的目的并非接受首个答案，而是在最终决定前探索更多可能性。
5. 文字不足时使用草图
手绘布局能比冗长的文字说明更高效地传达空间关系。
6. 先画线框图再补充细节
当核心问题是结构或流程时，应从低保真线框图入手。
这样能让模型专注于层级与交互，而非装饰性样式。
7. 最后一公里手动处理
通过直接编辑完成最终的对齐、间距、尺寸微调等视觉调整。
8. 为 Claude 提供真实产品上下文
接入现有代码库、设计系统、组件和界面，能帮助 Claude 产出与真实产品相契合的作品。
谁能使用 Claude Design？
Claude Design 目前处于测试阶段，适用于以下版本：
- Claude Pro
- Claude Max
- Claude Team
- Claude Enterprise
相关订阅方案即可使用，功能消耗账户的 Claude 使用额度。
对于企业组织，Claude Design 默认关闭，需要管理员在组织设置中启用。
Anthropic 表示，组织范围共享允许设计保持私密状态，可凭链接让同事查看，或开放供协作编辑。
产品可用性与套餐条款可能变化，团队应在围绕其标准化工作流程前，查阅当前的 Claude Design 页面和帮助文档。
常见问题
什么是 Claude Design？
Claude Design 是 Anthropic Labs 推出的产品，支持通过对话和直接编辑创建并完善视觉作品。它可以生成原型、演示文稿、落地页、单页作品、动画、营销素材以及其他基于 HTML 的交互式成果。
Claude Design 由谁创建？
最初的内测原型由 Anthropic 产品设计师 Nate Parrott 开发。在 Claude Code 将工程团队的交付速度提升至超过其现有设计工作流后，他将其作为个人副项目创建了该工具。
Claude Design 真的达到了一百万用户吗？
Anthropic 表示，Claude Design 上线首周使用人数超过一百万。该数据发布于 Anthropic 2026 年 6 月的产品更新中。
Claude Design 如何使用 HTML？
Claude 将视觉作品生成为交互式网页内容，而非仅仅描述设计或输出静态图像。HTML 为布局、控件、动画、原型、幻灯片及其他视觉体验提供了灵活的创作画布。
Claude Design 可以使用现有品牌系统吗？
可以。
它可以分析代码库、组件库、演示文稿、文档、截图、标志、色彩、字体及其他素材，生成可复用的设计系统。团队和企业用户可发布共享系统供项目使用。
Claude Design 能创建标志吗？
Anthropic 表示 Claude Design 不包含图像生成模型，不适合创建标志。现有标志和图像素材应上传并在设计中使用。
Claude Design 与 Claude Code 有何区别？
Claude Design 适用于早期构思、原型设计、视觉沟通和团队对齐。Claude Code 是实施和维护生产级软件的推荐工具。
哪些计划包含 Claude Design？
Claude Design 目前以公测版形式向 Pro、Max、团队和企业用户提供。企业管理员需先启用，组织成员方可使用。
相关工具
- Claude Design：Anthropic 的可视化工作空间，用于原型、演示文稿、着陆页及品牌创意工作。
- Claude Code：Anthropic 的编码代理，用于仓库工作、实施、测试和软件开发。
- 模型上下文协议：用于连接 AI 应用与外部工具、服务和数据的开放协议。
- Canva：可接收 Claude Design 可编辑作品的协作设计平台。
- Miro：与 Claude Design 相连的协作可视化工作空间，便于团队完善和统一。
- Vercel：Web 开发和部署平台，是 Claude Design 的连接目标之一。
相关链接
- Nate Parrott 的 Claude Design 回顾：创作者的第一人称叙述，讲述产品如何诞生及他如何使用它。
- Claude Design 介绍：Anthropic 的正式发布公告，涵盖功能概览、计划可用性和导出选项。
- Claude Design 百万用户更新：Anthropic 的更新，涉及首周采用情况、设计系统、Claude Code 同步、编辑和连接器。
- 设置 Claude Design 系统：导入品牌素材和发布可复用团队设计系统的官方说明。
- Anthropic Labs 介绍：Anthropic 对 Claude Design 背后实验性产品孵化团队的解释。
- VS Code 中的 Claude Code：Parrott 最初协助设计的图形化 Claude Code 界面官方文档。
- Claude Opus 4.5 介绍：2025 年 11 月发布的与工程加速相关的模型版本。
在帕罗特的故事中有所描述。
摘要
Claude Design 的诞生源于一位设计师需要跟上两位工程师的速度——在 Claude Opus 4.5 发布后，这两位工程师的产出效率大幅提升。
内特·帕罗特的突破在于，他不再要求 AI 将设计作为抽象答案来生成，而是给 Claude 提供了一个 HTML 画布，嵌入了公司的品牌体系，并将结果设计成交互式且易于分享的形式。
随着内部开始采用这款工具，这个原本的副业项目演变成了 Anthropic Labs 的正式产品。Claude Design 上线第一周用户数即突破一百万，并逐步扩展为一个创作空间，支持原型设计、演示文稿、落地页、动效、单页简介以及其他视觉沟通内容。
这款产品并非要取代生产级编码、专业图像生成或人类设计判断。它的价值体现在更前期的环节：探索更多方向、将想法落到实处、促进团队共识、将更成熟的概念交给负责最终落地的工具与人员。
随着 AI 让实现过程越来越快，设计师最有价值的工作正在向上游转移——从逐一绘制每一个界面，转向选择正确方向、定义系统体系、帮助团队就“应该构建什么”达成一致。