外包公司收 5000 美元做一个作品集网站。开发者 monokern 用 Claude Code 两小时做完，视觉和交互不输专业团队。
这不是又一个“AI 做网站”的营销话术。这是一次完整的工程实录：用了哪些技能插件、写了什么提示词、踩了什么坑、怎么修的 bug。
真正改变的不是“AI 会做网站”，而是设计能力的定价权正在从外包团队转移到懂得驾驭 AI 的个人开发者手中。
01 问题的起点：Claude 默认审美是平庸的
直接让 Claude Code 做网站，输出是可用的，但设计是平庸的。
同样的字体（Inter 到处都是）、同样的布局（卡片 + 网格）、同样的扁平风格。能用，但不值钱。
monokern 的解决方案是给 Claude 装上设计技能：
安装完成后，把 Claude Code 切换到 Auto 模式，让它不再每一步都请求权限，直接执行。
这背后的逻辑是：AI 的审美天花板不是模型能力，而是它被训练时见过的设计样本分布。装技能插件，就是在运行时注入更高质量的设计先验。
02 参考图的正确用法：不是“抄这个”，而是“借这几处”
monokern 没有给 Claude 一个完整网站说“做成这样”。
他去 Awwwards 找到 Il Capo Production 这个案例，截了 5 张局部图：
作品集页面的布局在 Il Capo 上找不到合适的，他又去 Pinterest 找了另一个类似风格的布局，单独截图作为 11.png。
所有截图放进项目的 /reference 文件夹。
关键不是“找一个完美参考”，而是“从多个来源拼出你要的东西”。
这和传统外包的区别在于：外包团队会要求你先确定一个完整的设计方向，然后报价、出稿、改稿。而 Claude Code 的工作方式是你可以在构建过程中随时替换局部参考，成本几乎为零。
03 提示词的结构：先问问题，再动手
monokern 的构建提示词以 /ui-ux-pro-max 开头，激活设计技能。
然后他描述了：
最后一句是关键：
Ask me any clarifying questions you need before building.
Claude 会停下来，问 4-6 个问题：字体偏好、动画强度、内容语气、色彩方向。
你的回答会成为整个网站的设计基础。
这和传统开发的区别在于：需求不是一次性冻结的文档，而是在对话中逐步具体化的共识。
Claude 花 5 分钟规划，10 分钟构建。第一版输出已经可用。
04 交互的关键：hero 区的手电筒效果
静态照片放在暗色 hero 区中间，是无聊的。
monokern 想了一个“手电筒”交互：
他把这个概念描述给 Claude,Claude 一次实现成功。
这种交互的价值不是炫技，而是让用户的注意力被设计引导，而不是被内容堆砌。
传统外包团队做这种效果，需要前端开发单独写 JavaScript，调试光标跟随的性能，处理移动端降级。成本至少多 500-1000 美元。
Claude Code 一次生成，零额外成本。
05 迭代的节奏：先自己看，再让 Claude 审
第一版构建完成后，monokern 没有立刻让 Claude 做质量检查。
他先自己滚动浏览，记下所有感觉不对的地方：
然后把所有问题写成一条消息，一次性发给 Claude。
不要一个问题修一次。批量发送，让 Claude 在同一个上下文中处理所有修改，避免前后矛盾。
修完 bug 后，再让 Claude 做结构化质量检查：
Review this site against these criteria and be honest about what needs work:
• Typography (are we using overused AI fonts like Inter?) • Color (is the palette restrained or all over the place?) • Hierarchy (does text sizing guide the eye correctly?) • Animation (smooth and intentional, or choppy and random?) • Mobile (actually designed for phones, or just shrunk?) • Copy (restrained and specific, or generic AI filler?)
Claude 会逐项打分。你读完后，只修你同意的部分。
不要让 Claude 替你做审美判断。你比它更了解你的网站应该是什么样子。
06 结果：不是完美，是“足够好，且可以持续改进”
最终输出是一个可用的、视觉不错的网站。
不是完美的。可能移动端布局还需要再调一次，某个动画的时机还差一点。
但这是正常的。
从这里开始，你每天找一个细节改进，持续迭代。
真正改变的是：设计外包的护城河——“只有专业团队才能做出这种质量”——正在被“懂得驾驭 AI 的个人开发者”打穿。
成本从 5000 美元降到 2 小时。
原文来源 https://x.com/monokern/status/2071246711222055363