Anthropic 在 2026 年 4 月 17 日推出 Claude Design，一个让用户用 prompt 生成网站、幻灯片、原型的实验性工具。官方公告发布 24 小时内在 X 累积超过 10 万赞，Figma 股价当天下跌 9%，社区直接开始玩「It is so over」梗。
这篇整理 Claude Design 的功能定位、实际使用流程、以及跟 v0、Lovable、Figma Make 这些既有工具的差异。内容来自官方公告、社区实测分享和开发者社区讨论。
两分钟出一个网站是真的
Claude Design 最大的价值在于压缩「从想法到 demo」的时间。 它没打算取代谁，定位是加速器。
社区分享的典型流程：把想做的网站概念丢进去（包含主题、素材、色调偏好、layout 期望），按下 generate，两分钟后拿到一个能跑的 React 网站，hero 区块、分类 tag、内容 grid 都有。
对第一次做网站的人会是救星。过去要先在 Figma 拉 wireframe、再找 designer 弄色票、再请工程师写 code，整条链跑完可能一周。Claude Design 把这段压到十分钟以内。
开发流程被它推了一把
在 Claude Design 之前，用 Claude Code 写网站的流程通常是：脑袋里想半天要什么配色、哪些模块、导航怎么放，然后在代码里慢慢堆。视觉感要在脑中模拟，思考负担重。
Claude Design 加进来之后可行的流程：
- 先用 Claude Design 生出基础架构。色调、排版、模块都先对齐
- Export 出文件（完整网站或 wireframe 都行）
- 丢回 Claude Code 调细节。动画、互动、数据串接都在这步处理
两个工具接棒。Claude Design 处理「视觉想像」，Claude Code 处理「功能实践」，各自做自己擅长的事。Claude Code 细节整理在 Claude Code 完整教程。
它支持 Figma import，本来就有 Figma 文件的话可以直接导进来继续做。对已经有设计资产的团队来说门槛很低。
缺点：成品还是需要人收尾
「能跑」跟「好看」中间还有一段距离。色调要不要再灰一点、标题的字重对不对、hover 状态怎么处理、留白节奏顺不顺，这些细节目前 AI 还不太会帮忙收。
开发者社区的形容很精准：「这工具现在 bug 很多，但它在预告方向」。设计师社区的反馈也类似：设计系统上传功能很强，但生出来的 UI 常常是半成品感，需要人再收一次尾。
换句话说，Claude Design 能帮忙完成 80 分的起点，但要从 80 到 95 还是需要人的判断。没有网页设计经验的话，生出来的成品可能会有说不上哪里怪的尴尬感。
一个 tip：用 AI 写 prompt 给 AI
对「怎么下 Claude Design 的 prompt」毫无头绪时，可以先去跟另一个 AI（Claude、ChatGPT、Gemini 都行）说：「请帮忙写一份用 Claude Design 做 X 类型网站的完整 design prompt，包含配色、字体、layout、互动细节。」
把产出的 prompt 再贴回 Claude Design，成品质量会明显提升。背后的逻辑是：一个清晰的结构化 prompt 对 AI 生成质量的加成，远大于在工具里反复 tweak。 前置十分钟写好 prompt，抵得上后面半小时的微调。Prompt 的写法整理在 提示词完整指南。
跟 v0、Lovable、Figma Make 差在哪
社区目前的共识：
- v0.dev：设计美感、速度快，适合做品牌原型。优点是成品视觉强，缺点是需要 Vercel 生态。
- Lovable：早期想法快速成形，但维护性差，容易变「vibe-coded 堆屎山」。
- Bolt.new：快速前端，全栈整合弱一点。
- Figma Make：设计师向协作工具，pixel-perfect 没问题，但跟 code 的连接弱。
- Claude Design：强项在「看懂你要什么」和「设计系统整合」。用的是 Opus 4.7 vision model，不只生 code，会先理解再生成。跟 Claude Code 的 handoff 很顺。
开发者社区的观察：Claude Design 跟 v0、Lovable 最大的差别在出发点。v0 把重点放在出 code，Claude Design 把重点放在「先看懂」。一个能听懂用户意图的工具，跟一个按命令生东西的工具，长期使用感差很多。Claude Code vs Cursor 的对比可以再看 Claude Code vs Cursor。
Figma 会死吗
发布当天 Figma 股价跌 9%，社区疯玩「It is so over」梗。从产品定位看，这是过度反应。
Figma 的强项在于协作和pixel-perfect 控制。团队里设计师、PM、工程师一起看一个文件、留评论、切版，这块 Claude Design 目前没有要碰。
更合理的剧本是：Figma 的定位会从「设计的起点」变成「设计的中继站」。起点被 Claude Design 抢走，但中间的精修、协作、handoff 这块 Figma 还有位子。
关键在 Anthropic 的整体布局。Claude Design 放进产线一起看：
- Design（Claude Design）：想法到 demo
- Code（Claude Code）：demo 到 production
- Agent（Claude API）：production 上线后的自动化
这是一条完整的创造产线。Figma、Lovable、Vercel 各自守一块，Anthropic 打的是整条链。
适用场景
综合社区实测整理：
- 适合的场景：从想法到 demo 的前期阶段、做 wireframe 跟客户对齐、内部工具快速原型、写博客文章时顺手做配图 demo
- 不适合的场景：品牌官网最终版、需要 pixel-perfect 的页面、需要复杂动画的互动
它是一个加速器，不要拿来当终点用。把它当 Figma 的替代品会失望，把它当「从 0 到 1 的省时工具」会很顺手。
接下来会关注的方向
Anthropic 的 Labs 产品线最近持续有新东西（Imagine、Skills、Agent SDK），Claude Design 只是其中一个。值得观察的是这些工具之间的整合：Design 出来的文件丢进 Code 会多顺、Code 跑完丢给 Agent 会怎么运作。
整条产线真的跑起来的那天，独立开发者跟小团队的生产力会再上一个台阶。
延伸阅读
小企鹅的经验
Claude Design 还没进日常工作流。这篇从产品定位、社区实测、官方公告整理而来，没有把它写成第一手体验。要看主力工具的踩坑分享，可以看 Claude Code 完整教程 和 提示词完整指南。
常见问题
Q: Claude Design 是什么？
Anthropic 在 2026 年 4 月 17 日推出的实验性工具，让用户通过 prompt 生成网站、幻灯片、原型。使用 Claude Opus 4.7 vision model，能先理解意图再生成，支持 Figma import 和 Claude Code handoff。
Q: Claude Design 会取代 Figma 吗？
不会完全取代。Claude Design 擅长「从想法到 demo」的前期加速，Figma 仍在 pixel-perfect 控制和协作这块具有优势。更合理的定位是：Figma 从「设计的起点」变成「设计的中继站」。
Q: Claude Design 跟 v0、Lovable、Bolt 差在哪？
v0 重视出 code 的美感速度、Lovable 偏早期想法快速成形、Bolt 强在全栈前端。Claude Design 的差异化在「先看懂再生成」和设计系统整合，加上跟 Claude Code 的 handoff 很顺。
Q: 新手能直接用 Claude Design 做出好看的网站吗？
能做出「能跑」的网站没问题，但「能跑」跟「好看」之间还有距离。色调拿捏、动画节奏、细节视觉这些目前 AI 还不太会帮你收，需要一点网页设计经验才能从 80 分推到 95 分。
Claude Design 目前开放给所有 Claude 订户试用，免费版也能体验。官方页面：anthropic.com/news/claude-design-anthropic-labs
本文以 Anthropic 官方公告与公开社区讨论整理而成。
整理：Penna｜小企鹅 Penchan