如何利用ai构建个人主页

随着各类大模型在前端上的发力（刷分），尤其最近使用了kimi之后，发现确实对于前端来说，已经可以产出比较好看的页面了。目前我也是使用 AI 重构了我自己博客的页面，趁机重新捡起来这个好久也没有维护的博客网站。所以，想要写一个这样的分享，来给大家聊一聊如何使用 AI 来构建个人博客，并且替换原来的那些博客模板。

首先，对于程序员来说，写前端代码时，如果你本质上不是一个前端程序员，可能会出现代码无法维护的情况。除非做的是一个不需要后续维护的界面，而且出了 bug它的损失也相对比较容易接受。

因此博客这种静态页面，写到后面就会暴露不可维护的缺点，显得没有那么大。相比于使用 AI 去修改博客模板的做法，自己从头构建有几个好处：

1. 不会被之前的那些博客模板干扰到，带来的额外 context 实在是太多了。但是对于 AI 来说，或者说对于自己用的场景来说，很多多余的预设功能是没有必要的。
2. 如果你看到了那些感觉比较好的网站，可以让 AI 来尝试复刻。
3. 相比于已有的一些模板的约束，AI 的空间就可以做出一些非常个性化的效果。

博客结构

相比于让 AI 生成所有的 HTML 文件，我更推荐使用 Markdown，先把文字写下来，之后再用脚本把 Markdown 的格式和文字转换成 HTML 页面。具体的推荐布局可以参考我的博客源代码。

这么做的优势显而易见：你可以把实际的代码和最终的显示效果分开来。此外，如果你想要换一个主题的话，原先已经实现的博文内容就可以保持不变。与此同时，你在博客里编辑markdown文件要比编辑 HTML 文件简单得多。

选择主题

如果你对于自己网站的交互或者设计有比较高的要求，而不只是满足简单的交互和动画，那首先，你需要挑选一个适合自己的网站作为参考的目标。例如，在这个合集里，有很多网站的设计规范，你可以挑选最符合你要求的，将它发给你使用的大模型，让大模型先给你跑出一个最初的版本。以此为基础，继续打磨自己后续的个性化内容。

当你需要个性化自己的网站的时候，也可以在某些特定的特效或者交互结合的合集网站里去找一些灵感，常见的有鼠标动画、翻页动画等等。

对于没有特别想要的目标网站，或者也并不想做一个花里胡哨的博客的情况，可以考虑先把网站的基础风格先定下来，以此为基础再来扩展，包括后续的设计、交互以及配色等等。例如，我的主页就是来自这个页面里来自于xAI的 design.md。然后将这个特定的设计规范交给某个特定用来做设计的 skill，例如我使用的就是Huashu Design。例如，以下就是我和这个 skill 交互的prompt：

审核我的仓库，这是一个个人博客网站。现在我不想用默认模板了，请结合Design.md，帮我重新设计这个网站。我希望网站简洁，并且独特。原先的banner图之类的可以不用。你在Review的过程中发现任何疑问都可以直接问我，不需要做任何预设。

之后 Claude （我用的是 Claude Code）就会给我三个设计，让我从中选择。以下就是我最终选中的设计，它也成了这个博客网页的基础：

方向 C · 顶级定制
逻辑：最佳设计师 —— Karl Gerstner《Designing Programmes》的程序化设计（不设计版面，设计一套程式：定一条规则，版面是内容代入规则后被算出来的）
母题：环 + 刻针。全站一条规则：angle = (月−1)×30° + 日，一个圆 = 一年，360° = 12 个月

后续修改和维护

对于纯 Vibe coding 选手来说，尽量就需要避免自己手改代码。此时，使用特定的skill就很重要了。一般情况下，我推荐使用 Playwright Skill。这个 skill 可以让 AI 直接操作浏览器截图，并且审视自己的修改是否生效，以及修改得对不对。让 AI 能够及时地获取反馈也是非常重要，能够省下很多的时间。

总结

用 AI 构建个人主页，关键得把内容层和表现层拆开：文章继续用 Markdown 维护，页面风格则先抽象成一套清晰的设计规则。之后再让 AI 生成页面、小步修改，并且用浏览器截图反复验收。这样博客后续要换主题、补交互或者修样式时会轻松的多。