heyalphonse.com：和 AI 一起搭起来的个人网站

为什么做

我想要一个能长期更新的地方：放工作里形成的判断、参加过的活动，也放摄影和自己做的小东西。它还要能被搜索引擎和 AI 读懂，让别人搜到「我是谁、在想什么」。

怎么做的

1. 先整理素材。 让 AI 读完了我电脑里 900 多份学校时期的简历、申报材料、演讲稿和照片，再加上近两年的工作记录，列出可以用、不能用（隐私和保密）的内容。
2. 逐条确认设计。 定位、视觉、结构、语言、技术方案都是一条条问答确认下来的。视觉前后改了三版：第一版是「咨询报告 × 摄影画廊」，上线后我自己不满意；第二版换成纯白底、一套无衬线字体的画廊风格，干净但偏静；第三版参考了 Motion Sites 上的动效网站，就是现在这版：暗色首屏，大字和人物形象叠在一起，往下滚动时白色内容区像卡片一样盖上来。
3. 人物形象和动效。 首屏的人物是 AI 参照我的照片生成的，前后换过皮克斯风、毛毡风，最后定为更抽象的潮玩风头肩像，再用脚本去掉背景。动效用 GSAP 和 Lenis 实现：字母依次升起、招呼语逐字打出、顺滑滚动；系统开启「减少动态效果」时会全部关闭。
4. 写代码和发布。 网站用 Astro 生成纯静态页面，内容全部是 Markdown 文件，推送到 GitHub 后由 Vercel 自动发布。
5. 后台、收录和检查。 接入 Sveltia CMS，在浏览器里就能写文章、传照片；加上站点地图、结构化数据和给大模型读的 llms.txt；最后写了一个自动检查脚本，每次发布前在电脑和手机两种尺寸下把全站每个链接和按钮都点一遍。

学到的

• 最花时间的是把需求讲清楚。 和 AI 协作时，写代码反而快；每一个「差不多就行」，最后都要回来补。
• 视觉要靠一轮轮看出来。 我很难一开始就说清想要什么样，往往看到具体页面才知道哪里不对。与其一次定稿，不如尽快做出能看的版本，再一轮轮改。
• 页面好看，不等于每个按钮都能点。 动效和交互越多，越需要自动化检查兜底，而不是靠肉眼。