personal-site-builder-cn

name	personal-site-builder-cn
description	将用户的简历、照片、个人简介、项目经历和链接整理为可公开访问的高质量个人网站，重点适用于求职展示、个人品牌展示、作品集展示、SEO 优化，以及面向中国大陆访问约束下的务实部署方案。适用于用户希望把原始简历材料转成个人网站、需要网站内容架构、需要高质量设计参考、需要兼顾免费、简单和中国访问的部署思路，或希望从策划到上线端到端完成个人网站交付的场景。

Personal Site Builder CN

使用这个技能，将零散的个人材料整理成一个高质量、可公开访问、适合求职或个人展示的个人网站，并在中国大陆访问约束下选择务实的上线方案。

核心规则

1. 把任务当成产品交付问题，而不是单纯做一个页面。
2. 同时优化六个结果：第一印象、信息清晰度、版式协调性、交互顺滑度、加载速度、后续维护成本。
3. 第一版坚持静态优先，只在确实提升表达效果的地方加入交互。
4. 默认承认“免费、简单、中国大陆访问很稳”这三件事无法同时拉满，必须尽早说明取舍。
5. 默认保护隐私，避免公开手机号、家庭住址、证件信息、涉密项目细节等敏感内容。
6. 默认使用中文优先表达，除非用户明确要求英文或双语。
7. 不要把站内说明性文字、实现说明、素材说明、AI 味文案放进最终页面。
8. 不要在后续迭代里堆叠互相冲突的样式规则；每轮调整都要以当前成品为基线收口，而不是继续追加失控覆盖。

当前成品导向

当前这套技能应优先复用以下成品思路：

• 桌面端首页以“左侧信息 + 右侧抽象能力视觉”作为默认首屏，不强制要求放人物形象照。
• 移动端首页改为更紧凑的单列或窄双列首屏，优先保证标题、摘要、结果卡和快捷操作可读。
• 使用轻量但有记忆点的科技感/品牌感视觉，不走模板式白底简历站路线。
• 将“拨打电话 / 打开简历”做成明显行动入口，桌面端可用按钮，移动端可结合悬浮快捷操作。
• 简历默认支持网页版打开，例如 resume.html，而不是只提供 PDF 下载。
• 开场动画不是全端强制展示；优先在触屏或移动端启用，桌面端可直接进入主页。
• 联系区默认使用紧凑二维码呈现，避免大边框、大卡片和过高末屏。

工作顺序

1. 接收资料并整理成结构化内容；若资料不全，则通过问答补齐第一版。
2. 明确受众、目标、语言范围、风格和隐私边界。
3. 先完成网站信息架构，再开始写界面代码。
4. 在需要最新信息时，搜索当前设计参考和部署方案。
5. 选择一个有记忆点、但仍适合简历阅读的视觉方向。
6. 以 SEO、性能、移动端表现和桌面端协调性为一等公民完成实现。
7. 先用最简单可行的公网方案上线，再根据大陆访问效果决定是否升级方案。

默认建站策略

• 优先选择静态站或以静态渲染为主的网站。
• 优先使用 Next.js 或 Astro，除非当前仓库上下文明显更适合别的栈。
• 优先自托管静态资源，尽量减少第三方脚本依赖。
• 第一版优先选择有免费额度的部署平台。
• 避免依赖中国大陆容易失败或不稳定的资源，例如 Google Fonts、YouTube 嵌入和不必要的海外分析脚本。
• 如果需要网页版简历，优先输出独立的 resume.html 或等价页面，而不是只依赖附件下载。
• 如果要给自动化代理执行，优先把站点做成无需构建、可直接上传的静态目录。

设计与版式标准

• 首屏必须在几秒内说明用户是谁、目标岗位是什么、核心价值是什么。
• 桌面端首屏默认采用左右布局：左侧文字与行动入口，右侧为形象照或抽象能力视觉模块；若人物照不够好或不适合当前风格，可优先使用抽象能力视觉。
• 桌面端不能出现大片无意义空白；元素尺寸、间距、卡片密度和容器宽度必须随视口自适应调整。
• 所有页面都要同时兼顾大屏、常见笔记本窗口和移动端，不允许只在单一分辨率下好看。
• 标题和小标题必须是自然完整的词组或句子，不要出现生硬断词或不完整短句。
• 设计必须有明确概念，不要产出模板味很重的白底卡片式作品集。
• 页面末屏要特别控制留白，不要出现高耸的空卡片、空容器或过度拉长的联系区域。
• 移动端要优先保证：导航不拥挤、主题切换不压布局、首屏标题不失控换行、摘要不碎裂、按钮不堆叠失衡、结果卡与标签可读。
• 联系区二维码默认做成紧凑、弱装饰、接近内容本体大小的模块，不做巨大卡片背景。

内容与文案标准

• 对“个人定位”“职业经历”等高敏感职业内容，优先保留用户原始表述；未经允许不要擅自重写价值判断。
• 可以做压缩、分层、折叠和排版重组，但不要改写核心事实和用户自述口径。
• 首页主标题要简洁，避免冗长、空泛、AI 味强的表达。
• 优先展示最强项目、最硬结果、最重要身份标签，例如工作年限、岗位方向、评委身份、党员身份等。
• 分类展示素材时，使用真实分类名，例如个人照片、活动海报、专业证书。
• 如果用户材料不完整，也要能先根据问答生成首版网站结构和占位文案，再逐步替换完善。
• 不要把“你提供的素材已纳入站内”这类过程话术输出到最终页面。

交互标准

• 默认可加入：开场转场、滚动进度、导航高亮、悬停反馈、卡片轻微倾斜、图片灯箱、分类切换、悬浮快捷操作。
• 交互必须服务内容，而不是喧宾夺主。
• 开场动画若存在，应支持点击按钮、滚轮、触屏或键盘进入，并确保按钮点击可用。
• 开场动画应根据设备策略启用：桌面端可默认跳过，移动端或触屏设备可默认显示。
• 资料展示区可使用分类切换与点击放大，但分类默认聚焦用户最需要展示的素材。
• 可加入电话/简历等悬浮快捷入口，但必须避免遮挡主要内容，移动端位置尤其要谨慎。
• 联系区的二维码如果保留，应避免大边框和过高容器；默认以紧凑、方正、弱装饰方式呈现。
• 职业经历的展开收起交互要按设备适配：桌面端可悬停展开，移动端应默认展开或用更明确的点击机制。

SEO 与性能标准

• 实现语义化标题结构、元信息、canonical、sitemap、robots、OG 标签和结构化数据。
• 允许用户自定义网站名称、Title、Description、Keywords，并同步到浏览器标题、OG 和站内品牌位。
• 以 Core Web Vitals 和真实移动端行为为目标优化性能。
• 图片要压缩，并在合适场景下使用现代格式。
• 在可行范围内把 LCP、INP、CLS 控制在当前良好阈值内。
• 使用自然、准确的 alt 文本和关键词布局，不做堆砌。
• 最终部署前要同步线上真实地址到 canonical、og:url、sitemap 等字段。

部署决策规则

从最简单且满足“公网可访问”的路径开始：

• 第一选择是免费静态托管，例如 Cloudflare Pages、GitHub Pages、Netlify 或 Vercel。
• 如果用户要求更强的中国大陆访问稳定性，要明确说明国内托管通常意味着 ICP 备案，不再是最简单免费的路径。
• 如果用户要求“你帮我部署”，则准备好代码、配置和精确步骤；只有在用户提供账号或权限后再实际执行。
• 如果部署到 Cloudflare Worker/Pages 后线上地址与预设地址不同，必须提醒用户同步修改 SEO 地址。
• 如果是给自动化代理使用，优先把站点做成“无需构建、可直接上传”的静态目录。

资料接收清单

收集或从简历中提炼：

• 姓名和可选英文名
• 目标岗位和受众
• 个人标题语和简短介绍
• 简历正文
• 项目列表，包含角色、动作、结果、技术栈
• 技能列表
• 联系方式和外部链接
• 照片和截图
• 语言要求：中文、英文或双语
• 喜欢的风格关键词和参考网站
• 平台约束：GitHub 账号、域名、部署偏好

输出约定

按需产出：

• 网站结构和内容大纲
• 适合网页呈现的文案改写或文案压缩方案
• 设计方向摘要及参考依据
• 当前仓库中的实现代码
• 部署方案和上线步骤
• 关于中国大陆访问取舍的简短说明
• 如果资料不完整，则先输出问答补齐清单和可运行首版

给第三方使用

把这个技能分享给别人时，建议对方按以下顺序使用：

1. 先把简历、项目、照片、证书、联系方式放到一个单独项目目录。
2. 如果资料不完整，就直接通过问答给出岗位方向、经历、项目、技能和风格偏好。
3. 明确告诉代理：需要中文优先、求职导向、移动端正常、中国可访问、免费部署。
4. 让代理先输出网站结构和第一版内容，再开始实现。
5. 完成后用静态目录上传到 Cloudflare 或等价平台。

给自动化代理使用

如果要给“小龙虾”这类自动化代理使用，默认假设它至少具备以下能力：

• 读取本地目录和文件
• 修改和创建项目文件
• 运行命令或脚本
• 打包静态目录
• 操作浏览器或调用上传流程
• 记录部署后的真实公网地址

若缺少其中任一能力，应先说明限制，再退化为“生成代码 + 生成部署说明”的模式。

可分享性

• 这个技能可以分享给其他使用 Codex 类本地代理的人，只要对方能读取技能目录并按技能说明执行。
• 即使别人不提供完整简历，也可以通过该技能先由代理提问、梳理、生成首版个人网站。
• 如果要给其他自动化代理使用，例如能读取本地文件、执行命令、操作浏览器和上传静态目录的代理，则这套技能也适合迁移；但需要目标代理支持本地文件读取、文件编辑、静态站打包和网页上传流程。

References

• 复用工作流见 references/workflow.md
• 复用提示词模板见 references/langgpt-prompt.md