| name | personal-site-builder-cn |
| description | 将用户的简历、照片、个人简介、项目经历和链接整理为可公开访问的高质量个人网站，重点适用于求职展示、个人品牌展示、作品集展示、SEO 优化，以及面向中国大陆访问约束下的务实部署方案。适用于用户希望把原始简历材料转成个人网站、需要网站内容架构、需要高质量设计参考、需要兼顾免费、简单和中国访问的部署思路，或希望从策划到上线端到端完成个人网站交付的场景。 |
Personal Site Builder CN
使用这个技能，将零散的个人材料整理成一个高质量、可公开访问、适合求职或个人展示的个人网站，并在中国大陆访问约束下选择务实的上线方案。
核心规则
- 把任务当成产品交付问题，而不是单纯做一个页面。
- 同时优化六个结果：第一印象、信息清晰度、版式协调性、交互顺滑度、加载速度、后续维护成本。
- 第一版坚持静态优先，只在确实提升表达效果的地方加入交互。
- 默认承认“免费、简单、中国大陆访问很稳”这三件事无法同时拉满，必须尽早说明取舍。
- 默认保护隐私，避免公开手机号、家庭住址、证件信息、涉密项目细节等敏感内容。
- 默认使用中文优先表达，除非用户明确要求英文或双语。
- 不要把站内说明性文字、实现说明、素材说明、AI 味文案放进最终页面。
- 不要在后续迭代里堆叠互相冲突的样式规则；每轮调整都要以当前成品为基线收口，而不是继续追加失控覆盖。
当前成品导向
当前这套技能应优先复用以下成品思路：
- 桌面端首页以“左侧信息 + 右侧抽象能力视觉”作为默认首屏，不强制要求放人物形象照。
- 移动端首页改为更紧凑的单列或窄双列首屏，优先保证标题、摘要、结果卡和快捷操作可读。
- 使用轻量但有记忆点的科技感/品牌感视觉，不走模板式白底简历站路线。
- 将“拨打电话 / 打开简历”做成明显行动入口，桌面端可用按钮，移动端可结合悬浮快捷操作。
- 简历默认支持网页版打开，例如
resume.html，而不是只提供 PDF 下载。
- 开场动画不是全端强制展示；优先在触屏或移动端启用，桌面端可直接进入主页。
- 联系区默认使用紧凑二维码呈现，避免大边框、大卡片和过高末屏。
工作顺序
- 接收资料并整理成结构化内容；若资料不全，则通过问答补齐第一版。
- 明确受众、目标、语言范围、风格和隐私边界。
- 先完成网站信息架构，再开始写界面代码。
- 在需要最新信息时，搜索当前设计参考和部署方案。
- 选择一个有记忆点、但仍适合简历阅读的视觉方向。
- 以 SEO、性能、移动端表现和桌面端协调性为一等公民完成实现。
- 先用最简单可行的公网方案上线，再根据大陆访问效果决定是否升级方案。
默认建站策略
- 优先选择静态站或以静态渲染为主的网站。
- 优先使用 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 账号、域名、部署偏好
输出约定
按需产出：
- 网站结构和内容大纲
- 适合网页呈现的文案改写或文案压缩方案
- 设计方向摘要及参考依据
- 当前仓库中的实现代码
- 部署方案和上线步骤
- 关于中国大陆访问取舍的简短说明
- 如果资料不完整，则先输出问答补齐清单和可运行首版
给第三方使用
把这个技能分享给别人时，建议对方按以下顺序使用：
- 先把简历、项目、照片、证书、联系方式放到一个单独项目目录。
- 如果资料不完整，就直接通过问答给出岗位方向、经历、项目、技能和风格偏好。
- 明确告诉代理：需要中文优先、求职导向、移动端正常、中国可访问、免费部署。
- 让代理先输出网站结构和第一版内容，再开始实现。
- 完成后用静态目录上传到 Cloudflare 或等价平台。
给自动化代理使用
如果要给“小龙虾”这类自动化代理使用，默认假设它至少具备以下能力：
- 读取本地目录和文件
- 修改和创建项目文件
- 运行命令或脚本
- 打包静态目录
- 操作浏览器或调用上传流程
- 记录部署后的真实公网地址
若缺少其中任一能力，应先说明限制，再退化为“生成代码 + 生成部署说明”的模式。
可分享性
- 这个技能可以分享给其他使用 Codex 类本地代理的人，只要对方能读取技能目录并按技能说明执行。
- 即使别人不提供完整简历，也可以通过该技能先由代理提问、梳理、生成首版个人网站。
- 如果要给其他自动化代理使用，例如能读取本地文件、执行命令、操作浏览器和上传静态目录的代理，则这套技能也适合迁移；但需要目标代理支持本地文件读取、文件编辑、静态站打包和网页上传流程。
References
- 复用工作流见
references/workflow.md
- 复用提示词模板见
references/langgpt-prompt.md
