一句话摘要
用 Claude Code 搭建带动画效果的高品质网站教程。
如何在 Claude Code 里搭建一个价值 $10,000 级别的带动画网站 2026年6月28日 · 6 分钟阅读 · 查看原文 ↗ Claude Design AI Automation
代理商做一个这么好看的 portfolio（作品集）网站要收 $5,000。
我用 2 小时搭好了我的。具体方法如下。
这是真实的完整走一遍——不是一份泛泛的模板指南。
我用我自己的作品集做例子：我实际用过的参考、我实际发送过的提示词、我实际踩到并修掉的 bug。
不需要任何编程经验。
第 1 步：安装设计技能（Design Skills）
默认情况下，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 作为主要参考。
awwwards. com/sites/il-capo-production
暗黑、电影感的氛围正是我想要的。
我是怎么实际用它的：
我没有把整个页面截图然后说"给我做这个"。我一段一段地来，只抓取我喜欢的部分：
1.png——hero 区域
2.png——hero 下方那一块（作品以视频 + 标题/描述的形式展示）
6.png——页脚和网站底部
11.png——单个项目页面
12.png——加载画面
对于作品集页面（那个展示完整作品列表的页面），参考里没有任何合适的东西。我去 Pinterest，找了一个风格相近但布局不同的，单独截图存成 11.png。
不要试图照抄一个网站。从每个里借来有用的部分。
把所有东西放进你项目里的一个 / reference 文件夹。
第 3 步：写构建提示词
用 /ui-ux-pro-max 作为提示词开头，来激活设计技能。
这是我作品集用过的确切提示词：
直接复制：
/ui-ux-pro-max
为一个前端开发者搭建一个高级的个人作品集网站。它应该看起来昂贵、
现代、技术上有亮点，配有优雅的动画，在任何设备上都能流畅加载。
使用 reference 文件夹里的设计参考：1.png 是 hero 区域，2.png 是
hero 正下方以视频 + 标题/描述格式展示作品的那一块，6.png 是
页脚/网站底部，7.png 是展示完整作品列表的作品集页面，
11.png 是从作品集打开任何作品时的单个项目页面示例，
12.png 是加载画面。在 hero 区域，把我放在正中央，使用 me.png。
对于所有作品/项目图片占位符，使用 example.png。
在构建之前，把你需要澄清的任何问题都问我。
最后一行是关键。
Claude 会停下来，问 4-6 个关于风格、字体、板块、动画程度、内容语气的问题。你的回答会成为整个网站的基础。
回答时要具体。你在这里越精确，后面的来回就越少。
你回答之后，Claude 会花大约 5 分钟规划，然后大约 10 分钟构建。第一次输出就已经很扎实了。
第 4 步：Hero 动画
一张普通照片放在暗色 hero 的正中央，很无聊。
当用户移动鼠标时，需要发生点什么。
对于我的作品集，我想出了手电筒的点子：
整个板块是暗的
默认情况下我的照片几乎看不见
光标像手电筒一样——它"照亮"我
第二层只是同一张照片的加亮、暖色调版本
我把这个概念描述给 Claude，让它去开发和实现：
> 在 hero 区域，我想要一个手电筒/聚光灯光标效果。暗色背景。默认情况下我的照片几乎看不见。当光标在板块上移动时，它像聚光灯一样——通过一个跟随光标的柔边圆形遮罩，显示出下方照片更亮、暖色调的版本。半径 100-150px，柔和的羽化边缘。实现它。
Claude 一次就建好了。效果完全如描述的那样运作——用户移动光标，照片在他们指向的地方亮起来。
第 5 步：复查——修掉不灵的地方
在跑正式的质检之前，先自己把网站滚一遍，把所有觉得不对劲的地方记下来。
第一次构建后我的清单：
路由之间的页面过渡很生硬——需要平滑的淡入淡出
手电筒效果有明显的延迟，跟不上光标
有些元素溢出，在屏幕上放不下
字体和参考不符——比 Il Capo 的美感更普通
把所有东西写下来。然后一次性发出去：
> 这里有几件需要修的东西。请全部处理：
>
> 1. [描述问题 1]
>
> 2. [描述问题 2]
>
> 3. [描述问题 3]
一次性全部发出很重要。
结果：
第 6 步：打磨（Polish Pass）
明显的 bug 修掉之后，跑一次结构化的质检。把这个粘贴给 Claude：
> 对照这些标准审查这个网站，并诚实地指出哪些需要改进：
>
> - 排版（我们是不是在用像 Inter 这样被用滥的 AI 字体？）
>
> - 颜色（配色是克制的，还是乱七八糟？）
>
> - 层级（字号是否正确地引导视线？）
>
> - 动画（平滑且有意图，还是卡顿又随机？）
>
> - 移动端（真的是为手机设计的，而不是只是缩小？）
>
> - 文案（克制且具体，还是泛泛的 AI 填充？）
Claude 会逐项打分。通读它，对每一项表示同意或不同意，然后把你想修的那些收集到一个提示词里，一次性全部发出。
不要让它修你不同意的点。你更了解你的网站。
结果
你最终得到一个扎实的网站。不完美——但不错。
有些东西第一次构建时不会完全对。也许移动端布局需要再过一遍，或者某个具体动画感觉略有不对。这很正常。
从这里开始你不断迭代。每天找一件要改进的事，然后修掉它。标签：# X # Claude # Design # AI # Automation # Guide 相关文章 10 Claude Skills. The Complete Map. A skill is a folder Claude reads on demand. Not a prompt. Not an agent. Not a plugin. A markdown file plus a few supporting files that live in a specific directory, that Claude loads when the task ca… Claude AI Automation Design
原文参考：https://maxed.wiki/posts/how-to-build-a-10-000-level-website-with-animations-in-claude-code/ （Maxed.wiki，本页为站内中文整理）