当知识沉淀变得稀缺，个人网站成了展示审美与判断的新载体。本文介绍一个专为 Claude Code、Codex 等 Agent 设计的 Skill，它不套模板，而是先读懂你的内容，再决定网站该长成什么形状。从纸感排版到会呼吸的小狗，作者用细节诠释了「审美即判断」的产品哲学。

当知识获取变得越便捷，自己沉淀的文本就越稀缺，所以目前我喜欢使用Obsidian知识库做内容沉淀。

好处是：便于agent检索，了解你。

但我发现，单纯的内容露出还不够，你还需要被包装，被抛头露面，被与众不同。且要有审美。

所以个人网站，它来了。

是什么？

它不是一个建站模板，也不是又一个拖拽工具，它是一个 Skill，给 Claude Code、Codex 这类能读文件能写代码的 Agent 用。

你把文章、笔记、简历、项目资料丢给它，它先读懂这些，再决定网站有几个栏目、每栏放什么、首页怎么开场。

市面大部分工具解决的是怎么排，这个东西解决的是你的内容该长成什么形状。

用模板是先有格子再往里塞，塞不下就删。

它是反过来，先看你有多少东西，再按分量裁版型。有作品上作品卡，有文章配搜索和分类，有产品做问题和流程。

材料里写着六个项目，它才给六个位置，只有一篇文章，它不会硬造一个空荡荡的作品集。

再说长什么样

一张纸，上面有很浅的格子线，细到不凑近看不见。主标题炭黑，桌面端最大一百四十像素，一屏一句话。正文压在七百五十六像素里，一行六七十字，眼睛不用来回扫。强调色只有一种浅黄，只在选中和关键动作上出现，其余黑白灰。

字距、行高、留白、分隔线透明度，差一点就散了。

我为什么坚持这样。因为审美不是装饰，审美是你的判断长什么样。别人第一眼看的不是内容，是这个人有没有分寸。

我见过太多 OPC 的站，产品挺好，页面七个配色三种字体一堆渐变按钮，看完只记得花。

交互花了更多力气

栏目能切，地址栏能直接跳到某一节。文章能搜能筛，读完点返回，回到刚才的位置，搜索词和条件都还在。很多站返回就回到顶，你得重搜一遍。

还有个我舍不得删的东西，一个手绘操作员和一条小狗。操作员会呼吸眨眼，眼睛跟着鼠标走。小狗的头会转向你，能拖着放，双击归位，刷新还在原地。

听着像玩具，但我留着有理由。一个人的站，人气装不出来。放正装照那是简历，放一个会看你的小狗，那是活人。

怎么用？

装了 Claude Code 或 Codex 的，一行命令。

1npx skills add mochenai/mochen-website-design –skill mochen-website-design

装完说一句，把内容粘进去或者给文件路径，它会读材料、组栏目、生成页面，起个本地服务让你先看。

不想装 Skill 也能跑。仓库里有纯生成器，Python 3.9 以上就行，不装第三方库，不要 API Key。

1git clone https://github.com/mochenai/mochen-website-design.git2cd mochen-website-design3 4python3 skills/mochen-website-design/scripts/build_site.py \5 –input skills/mochen-website-design/assets/example-content.json \6 –output work/my-site-v1

跑完校验，起服务。

1python3 skills/mochen-website-design/scripts/validate_site.py work/my-site-v12python3 -m http.server 8787 –bind 127.0.0.1 –directory work/my-site-v1

打开 127.0.0.1:8787。输出目录必须是新的，它会拒绝覆盖，宁可报错也不偷偷改你的文件。

它吃 JSON、Markdown、TXT。PDF、Word、图片先让 Agent 提文字。生成的是纯 HTML 加 CSS 和 JS，没有后端，丢到 GitHub Pages 或任何静态托管上就能跑。

两个边界

个人用、自己学、非商业项目随便，收费建站和给客户交付不行。

设计参考了 oiloil.org 的纸感和排版，小狗组件来自 Mr-xue 的 Gaze-Dog，仓库里都写了出处。