夜雨聆风hihi大家，我是小船。
最近刚做完了自己的个人作品集网站。
它是一个文件浏览器风格的网站：打开后先出现开机动画，输入密码后进入文件树，点开不同文件夹，就能看到我的工作经历、项目案例和联系方式。
现在这个网站已经部署上线了，以后我只要把网址发给别人，对方就可以直接打开。
这次做完之后，我最大的感受是：AI Agent 确实降低了个人网站的技术门槛，但真正难的地方，反而变成了：你能不能把自己讲清楚。
因为个人网站不是把 PDF 简历换成网页排版。
它更像是一个轻量作品集。别人点进去之后，看到的不只是你的经历，还有你对 AI 工具的理解、你的审美判断，以及你组织信息、表达自己的方式。
所以这篇就想分享一下，我是怎么用 AI 做出这个网站的。
整个流程大概可以拆成 6 步。
1、先找到一款适合自己的 AI 工具
对于小白老来说说，如果你想用 AI 做个人网站，第一步是先选一个你顺手的 AI 工具。
国内可以试试 Kimi Work、秒哒、Workbuddy 这类偏低门槛的工具，国外当然就是 Claude Code、Codex、Cursor 这类 Coding Agent了。
这次我是用的 Kimi Work 先做完基础的工具，更精细、高级的的动态效果等等就用了Codex。
如果你只是想快速做出来，用低门槛工具就够了；但如果你想让网站真的有自己的风格，后面最好还是用 Agent 继续改结构、动效和细节。
2、先找视觉参考，确定视觉主题
很多人做个人网站，会直接把PDF 简历丢给 AI，然后说： “帮我生成一个个人作品集网站。”
但我这次做完之后发现，更好的顺序其实是反过来的：先找视觉参考，再整理内容。
因为个人网站不是把简历换一个排版，它更像是给自己的简历换一个表达容器。
你可以先想清楚：这个网站应该像什么？是一本杂志？一个个人档案？一个文件浏览器？
这个选择会直接影响后面所有东西，比如页面怎么排、文案怎么写、交互怎么做，都会被这个视觉方向影响。
我这次最后选的是文件夹的结构。
因为我觉得文件树、目录、工作台这些元素，很符合我想表达的状态：它有一点技术感，但没有特别冰冰冰；有一点 AI 工具的气质，但又不是纯开发者页面。
这里也推荐几个找视觉参考的网站：
Pinterest：适合找氛围感参考图，素材很多，但它只能用于灵感收集，不能直接复制提示词。 
21st：适合找组件和页面结构参考，有些设计可以直接复制 prompt，但是一天只能免费复制2次。 
Superdesign：更适合找“整站级”的视觉风格提示词，比如配色、字体、布局、组件气质这些会被打包成一套完整方向。有些可以直接复制使用，适合拿来给 Agent 做第一版视觉约束，但目前可参考的风格数量相对少一些。 
这里最关键的一点是：不要一上来就让 AI “自由发挥”，最好先给它一个视觉锚点，节省反复修改、调整大问题的，这样就只需要调整UI 或者文案这种细节了。
3、根据之前的PDF简历，生成符合视觉主题的内容
确定视觉方向之后，再把自己的 PDF 简历发给 AI。但这时候不要只说：“帮我把简历整理成个人网站。”
一定要让它结合你前面确定好的视觉风格，比如我会说得更具体一点：
我想做一个文件浏览器风格的个人作品集网站。请根据我的简历，帮我生成一套适合这个视觉结构的网站目录、页面层级和对应文案。文案不要太像传统简历，要像一个可以被浏览的个人档案。如果你只是让 AI 整理简历，它很容易生成一套很标准的模板化结构。
但如果你先给它一个视觉方向，它就会顺着这个主题来组织内容。
比如我的网站里，内容就可以变成这样：
xiaochuan/README.mdexperience/ai-growth.mdexperience/tech-media.mdprojects/hackathon.tsxprojects/xhs-platform-growth.jsonlearning/codex-guide.mdresume.pdfcontact.json
这时候，简历就不是被简单搬到网页上，而是被重新翻译成一套更适合浏览的网站结构。
我觉得个人网站最怕的不是不好看，而是看起来和你没关系。
简历是线性的，但网站不是。
它可以有路径、有层级、有隐藏彩蛋，也可以有一点点你自己的审美和脾气。
4、让 AI 帮你把设计意图翻译成 prompt
这一步我觉得是整个流程里很关键的一步。很多人写 prompt，会直接写：“帮我做一个好看的个人网站。”
但“好看”太抽象了，AI 很容易自由发挥，最后做出来可能哪里都对，但哪里都不像你。
我的做法是，先把参考图发给 AI，让它帮我总结视觉提示词。比如它会帮你提炼出：整体风格、配色、字体、布局、组件形态、动效方向这些关键词。
然后我再在这个基础上微调细节，而不是直接拿它生成。
我的 prompt 大概分成三部分。
第一部分是身份和风格定位：我告诉它，我想要一个“极简文件浏览器风格的个人作品集网站”。
视觉上是白底、大留白、细黑线、浅灰边框。中文用霞鹜文楷，英文和代码部分用 JetBrains Mono 等宽字体。
第二部分是交互细节：希望它有文件树结构，点击文件后右侧弹出预览；打开网站时有开机动画；进入前有密码输入环节。
第三部分是情绪要求：我给它的关键词是：安静、克制、有技术感，但不要冷冰冰的。
5、继续优化 UI 细节和动效
这一步很多人会跳过，但它基本决定了你的网站是 70 分，还是 90 分。
得到一个基础版网站之后，可以再针对于一些细节继续优化。
我分成了三类，分别是整体结构参考、具体 UI 细节、动效参考。
比如页面布局可以怎么优化，窗口按钮怎么做符合整体风格，开机动画的进度条怎么跑。
主要用的还是 Pinterest、21st、Superdesign、Dribbble 这些网站。找到合适的参考之后，可以直接截图喂给 AI，让它照着这个方向继续改。
但我后来发现，动效真的不用加太多。一方面是太费时间了。做着做着很容易从“做个人网站”，变成“我再给它加一个特效”。另一方面，个人网站最重要的还是内容和气质。动效只要能让打开、切换、浏览这些动作更顺一点，就已经够了。
5、和 AI 一起疯狂修改
很多人以为 AI 做东西是一步到位的，其实不是，我这个网站大概迭代了四十几轮。
比如最开始的键盘太卡通，我就直接告诉它：不要 cartoon，不要 toy keyboard。
后来我又找了真实 MacBook 键盘的照片，让它往真实硬件的质感靠。
我觉得和 AI 协作最重要的一点是：你要比 AI 更清楚自己想要什么，不要只说“不太对”。
你要尽量说清楚：哪里不对，为什么不对，要往哪个方向改。
反馈越具体，AI 越能接近你想要的结果。
6、最后部署上线
代码确认没问题之后，我把它打包成静态文件，上传到阿里云 OSS，再绑定自己购买的域名。
整个部署过程大概 10 分钟。
如果不知道怎么部署，也可以直接问 AI，它会按流程一步步告诉你。
