做原型不用Figma了？Claude Design 实测，一句话出交互原型

推荐语

Claude Design让原型设计变得前所未有的简单，一句话就能生成交互式原型，产品经理和设计师的福音来了！

核心内容：
1. Claude Design的六大核心应用场景解析
2. 从零开始创建读书App首页的完整体验过程
3. 与传统设计工具Figma的对比优势和使用建议

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

朋友们，两天前 Anthropic 扔出来一个新产品，叫 Claude Design。

我用一个晚上把它跑了一遍。

毕竟 Claude Code 真的很好用，所以想看一下他新出的产品是什么样的？

按照Anthropic的说法，他们的产品是对于具有想法但没有设计背景的创始人、产品经理和营销人员来设计的。

一、Claude Design 是什么？

在聊具体体验之前，先花一分钟把它的底是什么交代清楚。

Claude Design 是 Anthropic Labs 在 4 月 17 日发布的研究预览产品，背后跑的是最新的 Claude Opus 4.7。Pro、Max、Team、Enterprise 用户都能用。它的额度跟你平时用的 Claude 聊天、Claude Code 是完全分开算的，也就是说你在 Design 这边怎么折腾，都不会影响你聊天的那个额度。

按 Anthropic 官方公告的说法，它能覆盖六个主要场景。

第一个是真实原型。设计师可以把静态设计稿转成可交互的原型，用于收集反馈或做用户测试，过程中不需要走代码审查或 PR 流程。

第二个是产品线框图和设计稿。产品经理先在里面画出功能流程，之后可以交接给 Claude Code 去实现，也可以分享给设计师继续完善。

第三个是设计探索。设计师可以针对同一个需求，快速生成多个方向的版本。

第四个是演讲稿和演示文稿。创始人或客户主管可以从一份粗略的大纲生成完整的、符合品牌风格的演讲稿，导出成 PPTX 或发送到 Canva。

第五个是营销宣传物料。营销人员可以做落地页、社交媒体素材和活动视觉，之后再邀请设计师接着修饰。

第六个是前沿设计。任何用户都可以在里面生成带语音、视频、着色器、3D 以及内置 AI 的代码驱动型原型。

看完这六个场景，作为一个产品经理，我最想试的是前两个组合起来的场景，做一个带交互的 App 原型。

二、做一个 App 原型

打开网站的第一印象

打开 claude.ai/design 的第一眼，就跟我预想的不一样。

我以为会像 ChatGPT 那样，丢给我一个大输入框，让我噼里啪啦敲字。结果不是。

左上角先让我选项目类型，Prototype、Slide Deck、From Template 三选一。选完项目类型，又让我选模式，Wireframe（线框图）或者 High Fidelity（高保真）。

 我直接选了 High Fidelity。然后进入编辑页，又出现三个选择，用现有资产开始、用白板画草图、或者直接对话。我选了最简单的对话。

我选了最简单的第三种，直接输入了一句话：

帮我设计一个读书 App 的首页。需要包含：顶部搜索栏、推荐书单轮播、正在阅读的进度卡片、底部导航栏（首页/书架/发现/我的）。整体风格简洁温暖，主色调用浅棕色。

输入需求之后

我以为点击发送，它就会直接开干。结果 Claude 反过来问了我几个问题：

 每个问题都有几个选项给我选。如果我没想法，可以直接点 Decide for me（你帮我决定）；如果我有自己的想法，也可以手动写一个。

我回答完点击 Continue，它才开始真正动手。

这个环节体验还不错。感觉就像一个设计师或前端工程师坐在我旁边，先把关键要点敲定了再动手。出来的第一版基本就贴着我的预期，不用反复调整。

几秒钟后，初版出来了。

改设计有四种方式

初版大概率不会完全满足你。这时候我发现 Claude Design 的修改能力设计得特别细，总共四种改法，精度和使用场景各有分工。

方式一：聊天修改

第一种是聊天修改，最基础。你直接在对话框里说「把底部导航改成 5 个 Tab」「整体配色换深色」，跟你平时用 AI 没区别。这个没啥好说的。

方式二：内联评论（Comments）

这个就有意思了。点击右上角 Comments，页面里所有元素都变成可点击的。你点中某个按钮，留一句「这个间距再大一点」，它就只改这个按钮。

这一步让我省了很多事。过去用自然语言描述「把左边第二个图标往下移一点」，AI 经常把右边第二个图标给你挪了。现在你直接点中它说话，想让它理解错都难。

方式三：在设计稿上涂鸦（Draw）

点右上角 Draw，调出画笔工具，你可以直接在设计稿上圈画、标注、写字。

比如我框住一块图片区域，写一句"这里换成圆角，带一点阴影"，点击 Send，AI 就按我的涂鸦去改。适合那种嘴上说不清、手一画就明白的想法。

方式四：自定义滑块（Tweaks）

最精细的一种。点亮右下角 Tweaks，会出现一个微调框。Claude 会根据你当前这版设计生成可调节的参数，每个页面出现的选项都不一样。

 比如，我尝试了一个发票扫描的APP，就给我生成连一个不同主题色的自定义，屏幕上实时就能看到变化，不用等 AI 重新生成。设计不一样，滑块也跟着变，拖一下就能实时看到效果，不用等 AI 重新生成。

这个真挺好的，它不只是给你出了一张图。它利用AI在理解你这张图里，哪些维度最可能被调整，然后把调整这件事的速度，直接给到你挑选。

导出

设计改满意之后，我以为导出就是下载个图片或者 PDF 完事，结果点开一看，选项多到我愣了一下。

六种导出方式。

PDF、PPTX、ZIP 源文件、独立 HTML、发送到 Canva、交接给 Claude Code。

其中两个我特别想说。

一个是 PPTX。导出来的是真正可编辑的幻灯片，每页有独立的文本框。你同事拿到可以直接改文字、换图片，不用重新做。这对我这种经常要给老板做产品评审的场景，太友好了。

另一个是 Claude Code 交接，这个最让我兴奋。

你在 Design 里做完原型，点一下，它帮你打包成一个叫「交接包」的东西，丢给 Claude Code。然后 Claude Code 能把你这个原型直接变成可以跑的前端代码。

也就是说，从「我有一个想法」到「这个想法变成可以上线的产品」，中间你不用换任何工具。

你也可以通过分享链接发给同事，还能设置查看、评论或编辑的权限。

设计系统

我一开始也没注意到这个功能，后来发现它可能是团队场景里最有用的一个设计。

如果你每次都要重新告诉 Claude “我们品牌用蓝色、用这个字体、按钮是圆角的”，会很烦。

设计系统就是解决这个问题的。你设置一次，之后每个新项目都自动套用你的品牌规范。

支持多种输入源：

• 代码库
  ：它能直接读你现有项目的 CSS/样式文件，提取配色和字体
• 设计文件、原型截图
  ：Figma 截图、历史设计稿都行
• PPT 或文档
  ：品牌手册、VI 指南之类的
• 单独素材
  ：Logo、配色方案图、字体样本

Claude 自动提取

上传完后，Claude 会自动帮你提取出：

• 配色方案（主色、辅色、强调色）
• 字体规范（字体、字号、字重）
• UI 组件（按钮、卡片、导航栏等可复用的模式）
• 布局模式（间距、网格、页面结构）

先用一个测试项目验证效果。满意了就打开"Published"开关，团队成员新建项目就会自动套用这套设计系统。

后面品牌升级要换色、换字体的时候，在组织设置里点"Remix"按钮就能更新。

三、使用建议

Claude Design 现在有几个限制，你用之前得知道。

它没有可复用组件。Figma 里你能做一个按钮组件全局复用，这里还不行。

它没有版本历史，你改错了没法回退到上一版。

它的动画支持有限。

它的协作现在是链接分享加权限设置，还没有实时多人协作。

它的内联评论偶尔会消失，官方标注的已知问题。

另外还有个比较现实的门槛，它不是免费的。要用你得有 Claude 付费订阅，Pro 起步 20 美金一个月。额度按订阅计划给，每 7 天重置。

四、最后

作为一个产品经理，体验完我感触挺深的。

以前做产品原型，要么自己学 Figma或Axure（学习成本不低），要么找设计师帮忙排期（等个三五天），要么用 草图 凑合画一下（效果一言难尽）。Claude Design 把这件事变成了"打字聊天"，10 分钟出一个像样的交互原型，这个效率提升是实打实的。

我觉得它不会取代专业设计师。复杂的品牌设计、系统级的组件库管理、像素级的视觉打磨，这些事情还是需要专业的人来做。Claude Design 真正省掉的是"找朋友帮忙画个草图"、"自己在 PPT 里拼凑一个原型"这些场景。

最让我兴奋的一点是 Claude Design 到 Claude Code 的打通。原型做完，一键交接给 Claude Code 生成前端代码，从想法到能跑的产品，中间不用换工具。对创业者和小团队来说，这个价值很大。

现在还是 Anthropic Labs 的实验产品，功能肯定会快速迭代。趁着研究预览阶段多玩玩，等正式版出来你手里就有故事可讲了。