一篇来自 CryptoComLearn 的实作指南展示了，用户即便没有编程基础，也可以借助 Claude Code 在约 2 小时 内完成一个高完成度的个人作品集网站。文中将传统代理商约 5,000 美元 的建��效果作为参照，重点不是空泛教学，而是完整公开了一次真实搭建过程：参考素材怎么选、提示词怎么写、动画怎么做、Bug 怎么修。
先装设计能力，再让模型看见目标风格
作者给出的第一步不是直接开写页面，而是先在 Claude Code 中安装两个能力模块。其一是 Anthropic 提供的 Frontend Design，用于改善默认设计输出中过于常见的字体、排版和文案问题；其二是 UI/UX Pro Max，文中称其包含 57 种界面风格、95 种配色方案、56 种字体搭配，可在建站过程中直接调用。作者还建议切换到 Auto 模式，减少每一步都要手动确认的打断。
接下来是准备参考素材。作者没有要求 Claude 直接“照着某个网站做一个”，而是把喜欢的部分按区块拆开截图，分别对应英雄区、作品展示区、页脚、单项目页和加载页，并统一放进项目中的 /reference 文件夹。主参考来自 Awwwards 上的 Il Capo Production，作品集列表页则额外从 Pinterest ��到了风格接近但排版不同的参考。
提示词决定首版质量，最后一句尤为关键
在正式生成页面前，作者建议在提示开头加入 /ui-ux-pro-max，以启用设计能力。随后用一段较长提示，把各张参考图分别对应到网站不同区域，同时说明头像图片、作品占位图等资源位置。文章强调，提示词最后加入“在开始建置之前，请问我任何需要澄清的问题”这句话很关键。
按原文描述，Claude 会先停下来提出 4 至 6 个 问题，围绕风格、字体、版式、动画程度和内容语调等细节确认方向。作者认为，这一轮回答越具体，后面返工越少。完成问答后，Claude 约花 5 分钟 规划，再用约 10 分钟 生成首个版本。
聚光灯游标动画是页面亮点
文章中最具体的交互案例，是英雄区的“手电筒/聚光灯”游标效果。作者希望深色背景中央的个人照片默认几乎不可见，鼠标移入后，随着游标移动，通过一个半径约 100-150px、���柔和羽化边缘的圆形遮罩，逐步显露下方更明亮、暖色版本的同一张照片。
作者直接把这一想法描述给 Claude，请其实现。按文中说法，这个效果一次就完成了：用户移动游标时，照片会在指向的位置被“照亮”。这部分也反映出原文的核心方法——不是抽象地下指令，而是把视觉机制、尺寸范围和层次关系讲清楚。
问题集中提交，再做一次结构化审查
首版完成后，作者没有立刻进入细节优化，而是先自己完整滚动浏览网站，记录不对劲的地方，包括路由切换生硬、聚光灯效果有延迟、部分元素溢出屏幕、字体气质和参考站点不一致等。文章特别提醒，这些问题应当 一次性整理后统一发送，而不是修一个提一个。
在明显 Bug 处理完后，作者又设计了一轮结构化检查，要求 Claude 按排版、色彩、层次、动画、移动端和文案几个维度逐项评分，并诚实指出不足。作者的做法是先通读这份评估，再对其中认可的问题集中发回修复请求；不认可的部分则不改。文章最后给出的结论很直接：第一次生成不会完美，但已经足��扎实，后续只需要持续迭代、逐项修整。