# Personal Site Builder

> 把个人简历、社交媒体、作品集和日常产出，做成一个可直接部署的个人网站。先访谈收资料并核实证据，再按「网站目标 × 内容深度」定信息层级（求职 / 作品集 / 个人介绍 / 个人记录 / 咨询获客 / 内容创作者），然后定视觉风格生成静态站点，最后浏览器验收、经授权后部署。视觉风格可以从内置的 6 套里选、按品牌对标，或**由用户提供的参考网址、截图、设计规范中提取**。当用户说"做个人网站"、"个人主页"、"简历做成网站"、"personal website"、"portfolio 网站"、"about me 页面"、"把我的简历和社交媒体做成网站"、"重做我的个人站"、"照着这个网站的风格做我的主页"、"参考这个站的设计"时触发。

- Skill: `spacezephyr/personal-site-builder` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add spacezephyr/personal-site-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/spacezephyr/personal-site-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: spacezephyr (https://skillmd.com/u/spacezephyr)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/spacezephyr/personal-site-builder

---


# 个人网站生成器

把「一份简历 + 一堆链接 + 散落的产出」变成一个有信息结构、有视觉风格、能直接部署的静态网站。

产出物：一套纯静态 HTML/CSS/JS（无构建、无框架、单文件 CSS），可直接部署到 Cloudflare Pages / Vercel / GitHub Pages。

## 核心原则

- **顺序不可颠倒**：先内容 → 再结构 → 再视觉 → 最后代码。不要一上来套模板或问颜色字体。
- **区分四类信息**：用户确认的事实 / 来源原文摘要 / AI 起草的文案 / 待确认的推断。不编造经历、数字、客户、评价、身份和合作关系。
- **默认保护隐私**：公开手机号、住址、私人邮箱、客户材料前必须单独确认。
- **不为填满模板造空栏目**：资料不够就降低内容深度，或列出缺失项，不用占位案例凑数。
- **给带推荐的选项**：每个决策点给 2–3 个有实质差异的方案 + 明确推荐，不把选择全甩给用户。
- **部署是对外发布动作**：只有用户明确授权才执行。

## 工作流

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

---

### ① 定边界

先判断是**新建**还是**改造已有站**。

- 有项目：先读目录结构、现有页面、内容来源、构建命令、部署配置和 git 状态，沿用已有技术栈和设计约束，不要另起炉灶。
- 新建：默认轻量响应式静态站；只有确实需要 CMS、登录或动态数据时才引入框架或后端。

然后只问一句定方向的问题：

> 「这个网站主要给谁看？看完你希望他做什么？」

不要在这一步问颜色、字体、动画。

### ② 收资料

读 `references/intake.md`（内含最小启动资料、渐进提问顺序、内容实体字段、证据分级、隐私规则、可抓取来源表）。

要点：

- **起步回复要轻**。用户已经说了手上有什么，第一条回复就只请他把这些发过来；读完第一批再问下一个问题。**每次只追问一个最影响下一步的问题**，不要甩十几项表单。
- **能读的先读**，别问。简历（Read / docx / pdf skill）、GitHub、博客、公众号文章（WebFetch）、需登录的平台（claude-in-chrome）。遇到登录墙、验证码、反爬**立即停止**，改请用户提供导出文件、文本、链接清单或截图。
- **数字优先于形容词**，且只用可验证口径。「10 款产品、5 万用户、近 200 个 Skill」胜过「经验丰富」；无法验证的不要补估值。
- 跨平台重复内容**合并为一个内容实体**，保留多个来源链接；信息冲突时保留两个版本请用户确认。

收完输出一份**资料清单确认**（已有 / 待确认 / 缺失 / 建议补），用户确认后再进下一步。

### ③ 定信息层级

读 `references/architectures.md`。用**双轴**决策：

**轴一 · 网站目标**（选一个主目标，最多加一个次目标）

| 用户资料主要是 | 主目标 |
|---|---|
| 工作经历、技能、学历，要投简历 | 求职转化 |
| 项目 / 设计 / 摄影 / 视频，视觉物料多 | 作品集展示 |
| 一段人生故事 + 兴趣 + 价值观，没什么成品 | 个人介绍 |
| 长期写的文章 / 读的书 / 走的路，想留档 | 长期记录 |
| 想接咨询、约稿、辅导、商单 | 咨询获客 |
| 公众号 / X / 小红书 / 播客，有粉丝和内容资产 | 创作者主页 |
| 上线过产品、开源项目，想让人用/买 | 独立开发者 |

**轴二 · 内容深度**（由资料量决定，不由愿望决定）

- `L1 名片层` — 单页，只要身份 / 定位 / 主行动 / 3 个代表链接。资料少或要快速上线。
- `L2 证明层` — 首页 + 项目/经历详情页。需要个人贡献、过程、结果、媒体素材。
- `L3 内容系统层` — 首页 + 详情 + 分类索引 + 归档 + 持续更新机制。需要稳定内容源和更新意愿。

**资料撑不到 L2 就先上 L1；没有持续更新能力就不要选 L3。**

按 `architectures.md` 的模板输出 **2–3 套真有差异的方案**（差异必须来自访问者任务，不能只是栏目改名），每套写明：适合谁 / 首屏承诺 / 主行动 / 导航 / 首页顺序 / 用到哪些现有素材 / 还需补什么 / 主要取舍。**明确推荐一套**，用户确认后再进视觉。

### ④ 定视觉风格

**先问一句：「有没有你看着喜欢的网站或设计？有的话把链接或截图发我。」** 有参考物比让用户从形容词里挑准得多。

三条路径，按用户手上有什么选：

1. **用户给了参考网址 / 截图 / 设计规范** → 读 `references/style-extraction.md`。首选用 claude-in-chrome 打开参考站，跑里面那段脚本采样真实的 computed style（字体栈、色值、圆角、阴影、容器宽度），亮/暗各采一遍；打不开或需登录就退到截图分析。**提取气质，不做整站克隆**，不拿 Logo、文案、插画和独创版式。
2. **用户说了品牌名**（「做成 Notion 的感觉」「Apple 风」）→ 调用 **brand-design-md** skill 拉取 DESIGN.md，映射到 `site.css` 的 `:root` 变量。
3. **用户没有参考物** → 读 `references/visual-styles.md`，从 6 种内置风格里给 2–3 个方向 + 推荐理由，每种都带可直接粘贴的 CSS 变量值。

用户给了多个参考站时，先问「最想要哪一个的感觉？其他的具体喜欢哪一点？」——多数人是喜欢 A 的排版 + B 的配色，直接做交集会得到一个四不像。

用户提到 WordPress / Framer / Webflow / Notion 时，借鉴其信息组织和气质即可，**不要假装生成对应平台的主题或项目**。

不管走哪条路，最后都只改 `:root` 变量，不重写 `site.css` 的组件部分。选定后再写代码。

### ⑤ 生成站点

起手复制 `assets/starter/`：

- `site.css` — CSS 变量 + 排版基线 + 卡片/列表组件，亮/暗双主题。**改风格 = 改 `:root` 变量，不要重写整个文件。**
- `nav.js` — 单文件注入的固定顶栏（深色切换 + 滚动隐藏），顶部配置区改 `SITE_NAME` / `LINKS` / `THEME_KEY`。其内联 CSS 里的 `760px` 要和 `site.css` 的 `--max` 保持一致。
- `index.html` — 首页骨架，section 按方案增删。

必须满足：

- 首屏出现**本人姓名或常用称呼 + 定位 + 一个主行动**；主行动只有一个，次行动最多一个。
- 导航反映已确认的信息架构，不照抄平台模板栏目；条目 4–6 个。
- 作品优先讲**问题 / 我的角色 / 做法 / 结果**，不只放缩略图。
- 社交链接说明**在这个平台能看到什么**，不只排一堆图标。
- 每页独立 `xxx/index.html`，共用 `/site.css` 和 `/nav.js`；不引 CDN、框架、构建步骤。
- `<title>`、`<meta name="description">`、favicon、分享图齐全；外链 `target="_blank" rel="noreferrer"`。
- 桌面 + 移动都能顺畅浏览；键盘可完成主流程；语义结构和 alt 完整；支持 `prefers-reduced-motion`。
- 图片用真实作品/人物/截图；缺图先要素材，生成的图必须标明是生成素材。
- 不把「这是我的个人网站」「以下是我的作品」这类提示语当设计。

中文排版：行高 ≥ 1.7，段间距 ≥ 18px，字体栈保留 `PingFang SC`。需要更强的前端设计能力时调用 **frontend-design** skill。

### ⑥ 验收

读 `references/delivery-checklist.md`，逐项过。至少验证：

- 首页、导航、详情页、外链、主行动
- 360 / 390 / 768 / 1280 / 1440 五档宽度
- 最长姓名和标题不溢出；空内容、图片加载失败、外链失效的表现
- 控制台无影响使用的报错；无意外横向滚动和布局重叠
- 亮/暗两套都可读（对比度 ≥ 4.5:1）
- **站内没有残留的 TODO 占位、虚构数字、测试链接**
- 公开的信息与用户确认过的清单一致

用 `python3 -m http.server` 起本地预览，或用 claude-in-chrome 截图，让用户发布前确认。

### ⑦ 授权后部署

**先说明**将发布到哪里、是否公开、用哪个仓库/账号、会改哪些域名或环境变量，**拿到明确授权再执行**。

- 已有项目沿用现有部署方式；新静态站优先 Cloudflare Pages / Vercel / GitHub Pages（构建命令留空，输出目录设为站点根目录）。
- 先构建 → 再发布 → 再**访问生产 URL 验证**关键内容。预览成功 ≠ 自定义域名生效。
- 不把密钥、简历原件、平台导出数据打包进站点。

## 最终交付说明

简洁列出：选定的目标与内容深度 / 已实现的页面和关键内容 / 访问地址 / 验证结果 / 尚未公开或待补充的内容。不要用长篇复述掩盖没做完的代码、验收或部署。

## 反面清单

- ❌ 首页塞满所有内容——首屏 3 秒说清「你是谁 + 你能干嘛 + 怎么找你」，其余全部降级
- ❌ 「热爱技术，追求卓越」式空话——换成可验证的事实和数字
- ❌ 用户没提供就替他编经历、编项目、编数字、编客户评价
- ❌ 一次甩十几个问题；或跳过资料确认和方案确认直接写代码
- ❌ 资料不够却硬上 L3，用空博客和占位案例撑场面
- ❌ 复杂动画、渐变堆砌、每个 section 一种字体——个人网站的可信度来自克制
- ❌ 把参考站整站扒下来改个名字——提取的是配色/排版/间距的气质，不是 Logo、文案、插画和独创版式
- ❌ 未经授权就 push / 部署 / 公开联系方式