最近网上到处都是用 Claude Design 做的网站。效果确实好看，而且不用碰 Figma 或 Adobe。下面这个流程是我试下来最顺手的一套——从创建设计系统到部署上线，大概 10 分钟。
用到的工具
| 工具 | 用途 | 费用 |
|---|---|---|
| Claude Design | 视觉设计和原型生成 | Claude 订阅 |
| Claude Code | 代码编写和构建 | Claude 订阅 |
| VS Code / Anti-gravity | 代码编辑器 | 免费 |
| Next.js | 前端框架 | 免费开源 |
| GSAP | 页面动画库 | 免费 |
| GitHub | 代码托管 | 免费 |
| Vercel | 网站部署 | 免费 |
第一步：创建设计系统
在 Claude Design 侧边栏点击 "Design"，进入 Design Systems 标签页。我们需要先创建一个设计系统，这样所有页面才能保持统一的品牌风格。
这里有个捷径：getdesign.md 提供了 68 个知名品牌的完整品牌套件（字体、颜色、标题样式等），包括 Airbnb、Apple、Binance 等。选一个你喜欢的，把 Design.md 标签下的内容全部复制。
回到 Claude Design，粘贴到 Additional Notes 里，填上项目名称，点击生成。大约 5 分钟，设计系统就建好了——包括图标、按钮组件、字体族、营销 UI Kit 等，可以直接复用。
第二步：生成多页面网站
设计系统就绪后，回到首页选择 Prototype，命名项目，选择刚才创建设计系统，模式选 High Fidelity（高保真），点击 Create。
光有设计还不够，还需要页面结构。这里我用了一个技巧：去 durable.com 找一个喜欢的页面布局截图。我选了一个营销机构网站的模板，截图保存。
回到 Claude Design，上传截图，然后用自然语言描述需求：
"帮我做一个 5 页的代理公司网站，包括首页、服务页、联系页、关于页和案例研究页。使用我创建的 Claude 设计系统做品牌风格，同时参考上传的截图做页面结构。"
生成完成后，每一页的风格是统一的——颜色、字体、组件都来自设计系统，但页面布局参考了截图的结构。
第三步：编辑和替换占位内容
生成的页面会有很多占位符（默认人名、默认图片等）。修改很简单：
点击 Comment 按钮，然后选择页面上要修改的元素，告诉 Claude 换成什么就行。比如"把这张占位图换成这张照片"，几秒钟就换好了。
如果想精细调整，可以用 Edit 按钮修改具体属性（颜色、字号、字体），或者用 Draw 按钮在页面上圈出要修改的区域，直接描述要改什么。
第四步：添加动画
目前页面还是静态的。接下来要加动画。
先导出设计：选择 Export → Handoff to Claude Code，复制生成的代码。
打开 VS Code（或 Anti-gravity），安装 Claude Code 扩展，登录账号。新建一个空文件夹作为项目目录。
把刚才复制的代码粘贴进去，然后追加一段关键指令：
"请用 Next.js 构建这个网站，并使用 GSAP 库在合适的地方添加动画。动画要多、要好看，但不要过于花哨。读取 claude.md 文件，一次性完成构建。"
这里的 claude.md 文件相当于给 Claude Code 的指令手册，告诉它该怎么写代码。把它放在项目根目录下，Claude Code 就会按照里面的规范来构建。
运行后，Claude Code 会一次性生成完整的 Next.js 网站，并加上 GSAP 动画——文字飞入、按钮上浮、数字滚动、品牌 Logo 滑动，效果直接拉满。
在浏览器里打开 localhost 链接就能预览。
第五步：部署上线
目前网站只在本地运行。要让别人也能访问，需要两步：推送到 GitHub，部署到 Vercel。
推送到 GitHub：
在 GitHub 上创建一个新仓库（建议设为私有），复制初始化命令。回到 Claude Code，告诉它："请把这个项目的所有代码上传到 GitHub。" 刷新 GitHub 页面，代码就在那里了。
部署到 Vercel：
在 Vercel 上创建免费账号，点击 "Add New Project"，连接 GitHub 账号，导入刚才的仓库。框架预设选择 Next.js，点击 Deploy。几十秒后网站就上线了。
Vercel 会给你一个 xxx.vercel.app 的免费域名。如果想用自己的域名，在 Vercel 的 Domains 设置里导入（支持 GoDaddy、Namecheap 等），或者直接通过 Vercel 购买。
一些想法
这套流程跑下来，最让我意外的是 GSAP 动画的效果。在 demos.greensock.com 上可以看到大量示例，直接告诉 Claude 你想要哪种动画，它就会帮你实现。
也有几个需要注意的地方：
- 生成的占位内容需要手动替换，不然看起来很模板化
- 动画虽然方便，但加太多页面会变卡，适度就好
- claude.md 文件的质量直接影响最终代码质量，值得花时间调好
总体来说，如果你需要做营销网站、作品集、或者快速验证一个产品页面，这个流程够用。不需要碰 Figma，不需要写代码，描述清楚你想要的东西就行。
常见问题
Claude Design 和 Claude Code 有什么区别？
Claude Design 负责视觉设计和原型，Claude Code 负责写实际的前端代码。两者配合才能完成从设计到部署的完整流程。
不会写代码也能做吗？ 可以。整个过程主要通过自然语言描述需求，Claude 完成代码编写。只需要会下载软件、复制粘贴命令。
整个流程免费吗？ GitHub 和 Vercel 免费，Next.js 和 GSAP 开源免费。Claude Design 和 Claude Code 需要 Claude 订阅。