从安装设计技能、搜集参考素材、撰写构建提示，到实现聚光灯光标动画、逐轮审查修复，再到精修打磨，这份完整指南带你零编程基础也能上手。本文整理、翻译自 monokern X 文章。 （前情提要：Claude Code 新推 /goals 指令：分离执行与评估，避免 AI 代理偷懒说谎 ） （背景补充：实战：手把手教你用 7 个 Agent 将 Vibe Coding 升级为专家级开发流程）
本文目录
Toggle
代理商收费 5,000 美元才能打造一个看起来这么精良的作品集网站。
我在 2 小时内完成了自己的。以下是完整过程。
这是真正的实作记录，不是通用模板指南。
我用自己的作品集作为范例：我实际使用的参考素材、我实际发送的提示、我实际遇到并修复的 Bug。
不需要任何编程经验。
默认情况下，Claude 的设计输出是平庸的。相同的字体、相同的排版、相同的扁平外观。两个技能可以解决这个问题。
将这段贴入 Claude Code：
Install this skill: github.com/anthropics/skills/tree/main/frontend-design
出现提示时允许变更，全局安装。
Install this plugin using NPM: github.com/nextlevelbuilder/ui-ux-pro-max
将模式选择器切换到 Auto 模式，这样 Claude 在每个步骤就不会询问你是否允许。
不要凭空描述你理想中的网站，而是让 Claude 看到你想要的样子。
我的作品集使用了 Awwwards 上的「Il Capo Production」作为主要参考。
awwwards.com/sites/il-capo-production
那个深色、电影感的风格正是我想要的。
以下是我实际的使用方式：
我没有截整页并说「帮我做这个」，而是逐区块截取我喜欢的部分：
至于作品集页面（列出全部作品的页面），参考网站没有符合的版型。我去 Pinterest 找到了一个风格相近的不同排版，并单独截图命名为 11.png。
不要试图完全复制某个网站，从每个网站中借鉴好的部分。
把所有素材放入项目内的 /reference 文件夹。
在提示的开头使用 /ui-ux-pro-max 来启用设计技能。
这是我为作品集使用的确切提示：
复制用提示：
/ui-ux-pro-max 为一位前端开发者打造一个高端个人作品集网站。它应该看起来昂贵、现代且技术印象深刻， 并具有在任何设备上都能流畅加载的优雅动画。 使用 reference 文件夹中的设计参考：1.png 是英雄区块，2.png 是英雄下方的区块 （以视频 + 标题/描述格式展示作品），6.png 是页脚/网站底部，7.png 是列有全部作品 的作品集页面，11.png 是从作品集点开任何作品时的单个项目页面范例，12.png 是加载画面。 在英雄区块中央，使用 me.png 放置我的照片。 所有作品/项目图片占位符使用 example.png。 在开始构建之前，请问我任何需要澄清的问题。
最后一行是关键 Claude 会停下来问 4-6 个关于风格、字体、版面、动画程度、内容语调的问题，你的回答将成为整个网站的基础。
回答时要具体，这里越精确，后面的反复沟通就越少。
你回答之后，Claude 花约 5 分钟规划，再花约 10 分钟构建，第一次输出已经相当扎实。
在深色英雄区块中央放一张普通照片是无聊的 用户移动鼠标时必须有些事情发生。
我为自己的作品集想到了聚光灯创意：
我向 Claude 描述了这个概念并请它开发实现：
「在英雄区块中，我想要一个手电筒/聚光灯光标效果。深色背景。我的照片默认几乎不可见。当光标在区块上移动时，它充当聚光灯——通过跟随光标的柔边圆形遮罩，揭示照片下方更明亮、暖色的版本。半径 100-150px，柔和的羽化边缘。请实现这个效果。」
Claude 一次就做出来了。效果完全如描述——用户移动光标，照片在他们指向的地方亮起来。
在进行正式品质检查之前，先自己滚动浏览网站，记下所有感觉不对劲的地方。
我在第一次构建后的清单：
把所有问题记下来，然后一次性发送：
「以下是几个需要修复的问题，请全部处理：\ [描述问题 1]\ [描述问题 2]\ [描述问题 3]」
「以下是几个需要修复的问题，请全部处理：\
一次性发送所有问题非常重要。
明显的 Bug 修复后，进行结构化品质检查。将这段贴入 Claude：
「请对照以下标准审查这个网站，诚实指出哪些地方需要改进： — 排版（我们是否使用了 Inter 这类被过度使用的 AI 字体？） — 色彩（配色方案是克制的还是杂乱的？） — 层次结构（文字大小是否能正确引导视线？） — 动画（流畅且有意图，还是跳动且随意？） — 移动版（是真正为手机设计的，还是只是缩小的桌面版？） — 文案（克制且具体，还是通用的 AI 填充语？）」
Claude 会对每个要点打分。通读后，对每个要点表示同意或不同意，然后将你想修复的问题整理成一个提示，一次性发送。
不同意的要点不要让它修复。你比它更了解自己的网站。
你最终会得到一个扎实的网站。不完美——但够好。
第一次构建时有些事情不会完全正确，也许移动版需要再过一遍，或某个动画感觉稍有偏差，这是正常的。
从这里开始迭代。每天找一件事改善并修复它。
13.57万 热度
127.29万 热度
54.51万 热度
383.68万 热度
5548.99万 热度
如何用 Claude Code 打造 1 万美元等级的网站与动画效果
从安装设计技能、搜集参考素材、撰写构建提示，到实现聚光灯光标动画、逐轮审查修复，再到精修打磨，这份完整指南带你零编程基础也能上手。本文整理、翻译自 monokern X 文章。
（前情提要：Claude Code 新推 /goals 指令：分离执行与评估，避免 AI 代理偷懒说谎 ）
（背景补充：实战：手把手教你用 7 个 Agent 将 Vibe Coding 升级为专家级开发流程）
本文目录
Toggle
代理商收费 5,000 美元才能打造一个看起来这么精良的作品集网站。
我在 2 小时内完成了自己的。以下是完整过程。
这是真正的实作记录，不是通用模板指南。
我用自己的作品集作为范例：我实际使用的参考素材、我实际发送的提示、我实际遇到并修复的 Bug。
不需要任何编程经验。
第一步：安装设计技能
默认情况下，Claude 的设计输出是平庸的。相同的字体、相同的排版、相同的扁平外观。两个技能可以解决这个问题。
将这段贴入 Claude Code：
出现提示时允许变更，全局安装。
将这段贴入 Claude Code：
将模式选择器切换到 Auto 模式，这样 Claude 在每个步骤就不会询问你是否允许。
第二步：寻找参考素材
不要凭空描述你理想中的网站，而是让 Claude 看到你想要的样子。
我的作品集使用了 Awwwards 上的「Il Capo Production」作为主要参考。
那个深色、电影感的风格正是我想要的。
以下是我实际的使用方式：
我没有截整页并说「帮我做这个」，而是逐区块截取我喜欢的部分：
至于作品集页面（列出全部作品的页面），参考网站没有符合的版型。我去 Pinterest 找到了一个风格相近的不同排版，并单独截图命名为 11.png。
不要试图完全复制某个网站，从每个网站中借鉴好的部分。
把所有素材放入项目内的 /reference 文件夹。
第三步：撰写构建提示
在提示的开头使用 /ui-ux-pro-max 来启用设计技能。
这是我为作品集使用的确切提示：
复制用提示：
最后一行是关键
Claude 会停下来问 4-6 个关于风格、字体、版面、动画程度、内容语调的问题，你的回答将成为整个网站的基础。
回答时要具体，这里越精确，后面的反复沟通就越少。
你回答之后，Claude 花约 5 分钟规划，再花约 10 分钟构建，第一次输出已经相当扎实。
第四步：英雄区块动画
在深色英雄区块中央放一张普通照片是无聊的
用户移动鼠标时必须有些事情发生。
我为自己的作品集想到了聚光灯创意：
我向 Claude 描述了这个概念并请它开发实现：
Claude 一次就做出来了。效果完全如描述——用户移动光标，照片在他们指向的地方亮起来。
第五步：审查修复
在进行正式品质检查之前，先自己滚动浏览网站，记下所有感觉不对劲的地方。
我在第一次构建后的清单：
把所有问题记下来，然后一次性发送：
一次性发送所有问题非常重要。
第六步：精修打磨
明显的 Bug 修复后，进行结构化品质检查。将这段贴入 Claude：
Claude 会对每个要点打分。通读后，对每个要点表示同意或不同意，然后将你想修复的问题整理成一个提示，一次性发送。
不同意的要点不要让它修复。你比它更了解自己的网站。
结果
你最终会得到一个扎实的网站。不完美——但够好。
第一次构建时有些事情不会完全正确，也许移动版需要再过一遍，或某个动画感觉稍有偏差，这是正常的。
从这里开始迭代。每天找一件事改善并修复它。