Personal Site Builder — Development skill for Claude Code

personal-site-builder

一个 Claude Code / Claude Agent Skill：把**个人简历、社交媒体、作品集和日常产出**，做成一个可直接部署的静态个人网站。

它不是模板套壳。它先跟你把资料收干净、给证据分级，再根据「网站目标 × 内容深度」定信息架构，然后选视觉风格，最后才写代码——并且在发布前逼你过一遍隐私清单和验收清单。

① 定边界 → ② 收资料 → ③ 定信息层级 → ④ 定视觉风格 → ⑤ 生成 → ⑥ 验收 → ⑦ 授权后部署

安装

git clone https://github.com/SpaceZephyr/personal-site-builder.git ~/.claude/skills/personal-site-builder

然后在 Claude Code 里直接说「帮我做个人网站」「把我的简历做成网站」，或者 `/personal-site-builder`。

它和「让 AI 直接给我写个人主页」的区别

	直接让 AI 写	这个 Skill
资料	你给什么用什么，缺的它自己编	证据四级分类，缺的标出来问你，不编经历和数字
结构	套一个通用模板	七类目标 × 三级深度，资料撑不住就降级，不造空栏目
视觉	「现代简约风」	六套风格给到可直接粘贴的 CSS 变量值；也可从你给的参考网址采样真实样式
隐私	简历上有什么就放什么	默认不公开住址/电话/客户数据，发布前列清单让你逐项确认
交付	生成完就结束	五档宽度验收 + 发布门 + 生产 URL 验证

结构

SKILL.md                        七步工作流、核心原则、生成约束、反面清单
references/
  intake.md                     最小启动资料、渐进提问、内容实体字段、证据分级、隐私规则、抓取来源表
  architectures.md              七类网站目标 × 三级内容深度、方案输出模板、组合规则
  visual-styles.md              六套视觉风格（含 CSS 变量）、品牌映射、平台参考、图像与动效规则
  style-extraction.md           从参考网址/截图/设计规范里提取风格：浏览器采样脚本、映射表、边界
  delivery-checklist.md         开发前 / 内容 / a11y / 响应式 / 技术 / 发布门 / 发布后
assets/starter/                 可直接跑的起手代码：site.css + nav.js + index.html
examples/                       五个完整案例（人物全部虚构）

七类网站目标

目标	适合	首屏第一句在讲
求职转化	正在找工作 / 转型	目标岗位 + 求职状态
作品集展示	设计师、摄影师、创作者	作品主张
个人介绍	想要一个稳定的个人入口	常用称呼 + 一句定位
长期记录	持续写作 / 做项目 / 记录生活	现在在做什么
咨询获客	顾问、教练、自由职业者	为谁解决什么问题
创作者主页	多平台发布内容	创作主题 + 可验证数字
独立开发者	上线过产品、有开源项目	做了几个 / 还活着几个

三级内容深度

• L1 名片层 — 单页。身份 / 定位 / 主行动 / 三个链接
• L2 证明层 — 首页 + 详情页。需要个人贡献、过程、结果、素材
• L3 内容系统层 — 首页 + 详情 + 分类索引 + 归档 + 更新机制

资料撑不到 L2 就先上 L1，不用占位案例凑数；没有持续更新能力就别选 L3。

六套视觉风格

极简黑白 · 编辑排版 · 终端极客 · Bento 卡片 · 杂志大标题 · 暖色手作。

每套在 `references/visual-styles.md` 里都给了完整的 `:root` 变量值。换风格 = 改变量，**不重写 CSS**。

也支持另外两条路径：

**给一个参考网址**——「照着这个站的风格做我的主页」。它会用浏览器打开参考站，采样真实的 computed style（字体