| 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 套真有差异的方案（差异必须来自访问者任务，不能只是栏目改名），每套写明：适合谁 / 首屏承诺 / 主行动 / 导航 / 首页顺序 / 用到哪些现有素材 / 还需补什么 / 主要取舍。明确推荐一套，用户确认后再进视觉。
④ 定视觉风格
先问一句：「有没有你看着喜欢的网站或设计？有的话把链接或截图发我。」 有参考物比让用户从形容词里挑准得多。
三条路径，按用户手上有什么选：
- 用户给了参考网址 / 截图 / 设计规范 → 读
references/style-extraction.md。首选用 claude-in-chrome 打开参考站，跑里面那段脚本采样真实的 computed style（字体栈、色值、圆角、阴影、容器宽度），亮/暗各采一遍；打不开或需登录就退到截图分析。提取气质，不做整站克隆，不拿 Logo、文案、插画和独创版式。
- 用户说了品牌名（「做成 Notion 的感觉」「Apple 风」）→ 调用 brand-design-md skill 拉取 DESIGN.md，映射到
site.css 的 :root 变量。
- 用户没有参考物 → 读
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 / 部署 / 公开联系方式
