大家好，我是陌晨。

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

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

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

所以个人网站，它来了。

![](https://developer.qcloudimg.com/http-save/yehe-11172170/425d83290bc33a193f37260b986af8a4.png)

![](https://developer.qcloudimg.com/http-save/yehe-11172170/2559034ca6c4709dfe4ff1f5043ce0d7.png)

## 是什么？

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

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

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

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

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

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

## 再说长什么样

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

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

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

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

![](https://developer.qcloudimg.com/http-save/yehe-11172170/b82419b8884231c8cadf999329bbfa38.png)

## 交互花了更多力气

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

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

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

![](https://developer.qcloudimg.com/http-save/yehe-11172170/f7dbe5c1ad92280e7515f7f181ddf408.png)

## 怎么用？

装了 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，仓库里都写了出处。

如果你感兴趣，欢迎评论区留言【个人网站】。

我是陌晨，下次见。


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

手把手教你用skill做一个专属个人网站

开发工具

前端

人工智能

陌晨的AI个人网站生成器：为ClaudeCode等Agent打造的内容塑形工具，先读文章再定版式，自动生成栏目与风格。内置手绘小狗交互，支持搜索筛选与位置记忆。一条命令生成纯静态站，无需API Key，免费自部署，GitHub开源。

代码解释

Markdown

GitHub

Agent

JSON

腾讯云双十一大促

lexiang

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

手把手教你用skill做一个专属个人网站-腾讯云开发者社区-腾讯云

手把手教你用skill做一个专属个人网站

手把手教你用skill做一个专属个人网站

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐