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 直接给我写个人主页」的区别

结构

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：

本地预览：

cd examples && python3 -m http.server 8000

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

几条硬约束

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

License

MIT