如何用 Claude Code 构建一个价值 1 万美元级别的动画网站

机构为一个看起来这么漂亮的个人作品集网站收费 5000 美元

我只花了 2 小时就建好了我自己的。具体方法如下

这是真正的实战指南——不是泛泛的模板教程

我用我自己的作品集作为例子：我实际用过的参考、我实际发出的提示词、我实际遇到并修复的 bug

不需要任何编码经验

步骤 1：安装设计技能

默认情况下，Claude 的设计输出很平庸。相同的字体、相同的布局、相同的扁平外观。两个技能可以解决这个问题

• Frontend Design — 由 Anthropic 构建。后台运行，阻止像 Inter 这样过度使用的字体，推动更大胆的布局，改善文案质量。

将此粘贴到 Claude Code 中：

安装此技能：github. com/anthropics/skills/tree/main/frontend-design

提示时允许更改。全局安装

• UI/UX Pro Max — 57 种界面风格、95 种配色方案、56 种字体组合。构建时直接调用它。

将此粘贴到 Claude Code 中：

使用 NPM 安装此插件：github. com/nextlevelbuilder/ui-ux-pro-max

将模式选择器切换到 Auto 模式，这样 Claude 可以在无需每一步都请求许可的情况下工作

步骤 2：寻找参考

不要从零开始描述你梦想中的网站。直接给 Claude 看你想要的效果。

我的作品集主要参考了 Awwwards 上的 Il Capo Production

我想要的就是那种黑暗、电影般的感觉

我实际使用的方式：

我没有截图整页然后说“给我做成这样”。我是一节一节地看，只抓取我喜欢的部分：

• 1.png — 首屏区

• 2.png — 首屏下方的部分（以视频+标题/描述的形式展示作品）

• 6.png — 页脚和网站底部

• 11.png — 单个项目页面

• 12.png — 加载屏幕

对于作品集页面（显示全部作品列表的页面），参考里没有合适的内容。我去了 Pinterest，找了一个风格相似但布局不同的页面，单独截图为 11.png

不要试图完全复制一个网站。从每个网站中借用你喜欢的部分

将所有内容放入项目中的 /reference 文件夹中

步骤 3：编写构建提示词

在你的提示词开头加上 /ui-ux-pro-max 以激活设计技能

以下是我为我的作品集使用的确切提示词：

复制以下内容：

最后一行是关键 Claude 会停下来问 4-6 个关于风格、字体、区块、动画级别、内容语气的问题。你的回答将成为整个网站的基础。

回答时请具体。你在这里越精确，后续的往返修改就越少。

回答后，Claude 会用约 5 分钟规划，再用约 10 分钟构建。第一个输出就已经很不错了。

步骤 4：首屏动画

一张普通的照片放在黑暗首屏的中心很无聊 当用户移动鼠标时，必须有一些效果呈现。

对于我的作品集，我想到了手电筒效果：

• 整个区域是黑暗的
• 我的照片默认几乎看不见
• 光标像手电筒一样——它能“照亮”我
• 第二层只是同一张照片经过提亮、暖色调处理后的版本

我把这个概念描述给 Claude，让它开发并实现：

在首屏区域，我想要一个手电筒/聚光灯光标效果。深色背景。我的照片默认几乎看不见。当光标移动到该区域上时，它就像一个聚光灯——通过一个跟随光标的软边圆形遮罩，露出下方更亮、更暖色调的照片版本。半径 100-150px，软羽化边缘。实现这个效果。

Claude 一次就构建完成了。效果完全如描述所示——用户移动光标，照片会在被指向的地方亮起来。

步骤 5：审查阶段——修复不工作的地方

在进行正式的质量检查之前，先自己滚动浏览网站，记下所有感觉不对的地方。

第一次构建后我的清单：

• 页面之间的过渡感觉突兀——需要平滑淡出
• 手电筒效果有明显的延迟，滞后于光标
• 有些元素溢出，无法在屏幕上正常显示
• 字体与参考不匹配——看起来比 Il Capo 的美学更普通

把所有问题写下来。然后一次性发送全部内容：

这里有几个需要修复的问题。请全部处理：

1. [描述问题 1]
2. [描述问题 2]
3. [描述问题 3]

一次性发送所有内容很关键

结果：

步骤 6：润色阶段

一旦明显的 bug 修复后，运行一次结构化的质量检查。将以下内容粘贴到 Claude 中：

根据以下标准审查这个网站，并诚实指出需要改进的地方：

• 排版（是否使用了像 Inter 这样过度使用的 AI字体？）
• 颜色（配色是克制的还是到处乱用？）
• 层次（文字大小是否能正确引导视线？）
• 动画（流畅且有意为之，还是生硬随意？）
• 移动端（真的为手机设计了，还是只是缩小了？）
• 文案（克制且具体，还是通用的 AI 填充？）

Claude 会对每个点打分。读一遍，对每个点表示同意或不同意，然后把你想要修复的点收集到一个提示中，一次性发送。

不要要求修复你不同意的点。你更了解自己的网站。

结果

最后你会得到一个不错的网站。不是完美——但足够好。

有些东西在第一次构建时不会完全正确。可能移动端布局需要再调整一次，或者某个特定动画感觉有点不对。这很正常

从这里开始迭代。每天找到一个要改进的地方并修复它。