personal-site-builder

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

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

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

安装

下载该技能包并解压拷贝到对应的 agent 的 skill 文件夹中（Claude的技能包存放路径为：~/.claude/skills/）。

或者使用 git

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（字体栈、色值、圆角、阴影、容器宽度），亮/暗各采一遍，再映射到变量。比肉眼看图猜色准得多。打不开或需登录时退到截图分析。

提取的是气质：配色关系、排版节奏、间距尺度、分区方式。不拿 Logo、文案、插画、图标和独创版式，也不做整站克隆。

说一个品牌名——「做成 Notion 的感觉」「Apple 风」，会调用 brand-design-md 拉取该品牌的设计规范再映射到变量。

案例

examples/ 里有五个完整站点，共用一份 base.css，每个只加几十行 style.css：

案例	目标 × 深度	风格
`resume/`	求职转化 × L2	极简黑白（带打印样式，可 Cmd+P 存 PDF）
`portfolio/`	作品集展示 × L2	杂志大标题
`consulting/`	咨询获客 × L2	编辑排版（衬线 + 首字下沉）
`garden/`	长期记录 × L3	暖色手作
`maker/`	独立开发者 × L2	Bento 卡片仪表盘

本地预览：

cd examples && python3 -m http.server 8000

案例中的人物、经历、产品和数字全部为虚构，仅用于演示信息架构与视觉差异。

几条硬约束

不编造经历、数字、客户、评价、身份和合作关系
遇到登录墙、验证码、反爬立即停止，改请用户提供导出文件
默认不公开住址、私人电话、客户内部数据、家庭关系
部署是对外发布动作，只有明确授权才执行
不生成冒充真实个人或组织的页面
从参考站提取风格时不做整站克隆，不复制 Logo / 文案 / 插画 / 独创版式

License

MIT