personal-site-builder

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

personal-site-builder

★ 21 Open GitHub ↗

把个人简历、社交媒体和作品集做成可直接部署的个人网站 · Claude Skill

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# personal-site-builder

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

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

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

## 安装

```bash
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](https://github.com/SpaceZephyr/brand-design-md) 拉取该品牌的设计规范再映射到变量。

## 案例

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

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

本地预览：

```bash
cd examples && python3 -m http.server 8000
```

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

## 几条硬约束

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

## License

MIT

personal-site-builder

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README