personal-site-builder

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

个人网站生成器

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

产出物：一套纯静态 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 / 部署 / 公开联系方式