如何利用 Claude Code 构建价值 1 万美元的动画网站

中介公司为一个这样好看的简历网站收费 5000 美元

我只花了 2 小时就建好了。以下是具体方法

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

我用的是自己的简历网站作为例子：我实际使用过的参考资料、我实际发送的提示词、我实际遇到并修复的 bug

无需任何编程经验

第 1 步：安装设计技能

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

• 前端设计 - 由 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

将模式选择器切换到自动模式，这样 Claude 就不会在每一步都请求许可

第 2 步：寻找参考

不要凭空描述你梦想中的网站。让 Claude 看看你想要什么。

对于我的简历网站，我使用了 Awwwards 上的 Il Capo Production 作为主要参考

1awwwards. com/sites/il-capo-production

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

我实际使用它的方式如下：

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

• 1.png - 首屏区域
• 2.png - 首屏下方的区域（作品以视频 + 标题/描述的形式展示）
• 6.png - 页脚和网站底部
• 11.png - 单个项目页面
• 12.png - 加载屏幕

对于作品集页面（展示全部作品列表的页面），参考素材中没有合适的内容。我去了 Pinterest，找到了一种类似风格的不同布局，然后单独截图作为 11.png

不要试图完全复制一个网站。从每个网站中借用有效的东西

把所有内容放入项目中的一个 /reference 文件夹中

第 3 步：编写构建提示词

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

以下是我为简历网站使用的确切提示词：

要复制的内容：

1/ui-ux-pro-max
2Build a premium personal portfolio website for a frontend developer. It should look expensive,
3modern, and technically impressive, with elegant animations that load well on any device.
4Use the design references from the reference folder: 1.png is the hero section, 2.png is the
5section right below the hero showing a work in a video + title/description format, 6.png is
6the footer / bottom of the site, 7.png is the portfolio page with the full list of works,
711.png is an example of an individual project page when opening any work from the portfolio,
8and 12.png is the loading screen. In the hero section, place me in the center using me.png.
9For all work/project image placeholders, use example.png.
10
11Ask me any clarifying questions you need before building.

最后一行是关键

Claude 会停下来问 4-6 个关于风格、字体、章节、动画级别、内容语气的问题。你的回答将成为整个网站的基础

回答时尽量具体。你在这里越精确，后面的来回沟通就越少

你回答后，Claude 会花大约 5 分钟规划，然后花大约 10 分钟构建。第一次输出已经很扎实了

第 4 步：首屏动画

一张普通的照片放在黑暗的首屏正中央是很无聊的

当用户移动鼠标时，必须有点什么发生

针对我的简历网站，我想到了手电筒的点子：

• 整个区域是黑暗的
• 默认情况下我的照片几乎看不见
• 光标像手电筒一样——它"照亮"了我
• 第二层只是一张同一照片的提亮、暖光版本

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

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

Claude 一次就完成了。效果完全如所描述的那样——用户移动光标，照片在他们指向的地方亮起。

第 5 步：审查——修复不起作用的地方

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

我第一次构建后列出的问题：

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

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

以下是一些需要修复的问题。请处理所有问题： 1. [描述问题 1] 2. [描述问题 2] 3. [描述问题 3]

一次性发送所有内容很重要

结果：

第 6 步：打磨

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

根据以下标准审查此网站，并对需要改进的地方诚实作答： - 字体排印（是否使用了被过度使用的 AI 字体如 Inter？） - 颜色（调色板是克制的还是杂乱的？） - 层次结构（文本大小是否正确引导视线？） - 动画（流畅且有意为之，还是生硬且随机？） - 移动端（是否真正为手机设计，而不仅仅是缩小？） - 文案（是克制且具体，还是泛泛的 AI 填充内容？）

Claude 会对每一点进行评分。通读一遍，同意或不同意每项，然后将你想要修复的点集中到一个提示词中，一次性发送。

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

结果

你最终得到一个扎实的网站。并非完美——但不错。

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

从这里开始迭代。每天找到一件可以改进的事情并修复它