个人官网

面向潜在客户、合作伙伴和猎头的个人品牌门户；AI 编程时代它从”贵且慢的定制开发”或”千篇一律的模板站”，变成 PM/独立开发者用自主编程 Agent 一天做出的定制化、可 GEO 引用的个人资产。

简介

个人官网是以个人为主体的品牌展示站点，用于集中呈现个人定位、经历、服务、案例作品和联系方式，回答访客”你是谁、能提供什么、怎么联系”三个问题。它区别于社交平台账号——账号内容分散、受平台算法和规则约束，而个人官网是自己拥有域名、结构和数据的稳定门户。

在 AI 编程普及之前，个人官网只有两条路：找模板改文字（便宜但千篇一律、没有记忆点），或找人定制开发（贵且慢）。OpenAI Codex 等自主编程 Agent 出现后出现了中间方案：不会写代码的产品经理只负责提需求、验收和给反馈，Agent 负责设计稿、组件开发、动画、SEO/GEO、埋点和部署，让”1 天 0 元做出专业级定制官网”成为可能。

个人官网因此不再只是”简历网页”，而是 OPC 一人公司 / 独立开发者 的对外信任入口和 GEO 资产：官网上的实体信息、服务、案例和 FAQ 结构化数据，是 AI 搜索引擎在回答”某某是谁、能做什么”时可以直接引用的内容。

关键信息

• 类型：概念 / 个人品牌载体
• 领域：个人品牌 / AI 编程 / 前端 / GEO
• 典型技术栈：Next.js + TypeScript + Tailwind CSS + Framer Motion，Vercel 免费部署
• 核心受众：潜在客户、合作伙伴、猎头
• 相关概念：Codex、Vibe Coding、Vercel、GEO、OPC 一人公司、独立开发者

核心特性

定义与区分

• 定义：以个人为主体、拥有独立域名和结构的品牌门户，集中呈现定位、经历、服务、案例与联系方式。
• 与社交账号的区别：社交账号内容分散、受平台算法与规则约束；个人官网结构可控、数据自持、可被搜索引擎和 AI 引擎稳定索引。
• 与模板建站的区别：模板站上手快但千篇一律、没有记忆点；AI Agent 定制开发能做出个性化设计、动画和结构化数据，同时保持低成本。

核心组成（以本文案例为参照）

• 内容模块：首屏（头像 + 标语 + 数据卡片 + 卷轴展开动画）、关于我（经历时间线 + 证书）、服务介绍（服务卡片）、案例作品（案例图 + 视频弹窗）、联系方式（二维码 + 邮箱 + 一键复制）
• 交互动画：滚动触发、数字递增、3D 卡片倾斜、滚动进度条等
• SEO：Title/Description/Keywords、Open Graph + Twitter Card、Canonical、robots.txt、sitemap.xml、JSON-LD Person
• GEO：FAQPage 与 WebSite 结构化数据，供 AI 搜索引擎引用
• 数据追踪：GA4 埋点（用不阻塞首屏的方式加载）
• 性能：图片压缩、懒加载、视频按需加载

典型应用

• PM / 设计师 / 独立开发者建立对外信任入口，承接客户、合作与招聘咨询
• 作为个人品牌的 GEO 资产，让 AI 搜索引擎在推荐”某领域的人”时引用官网信息
• 用数据驱动组件模式做成”改内容不碰代码”的可长期自维护站点

常见误区

• 上来就套模板改文字：做出来千篇一律、没有记忆点；更好的做法是先把需求聊透再定制
• 只做 SEO 忽略 GEO：AI 对话式搜索成为新入口后，缺少结构化数据会让官网无法被 AI 引擎引用
• 忽视资源体积：视频/图片过大拖慢首屏，上线前必须检查资源大小并做压缩、懒加载

不同素材中的观点

• 2026-07-12-woshipm-codex-personal-website-1-day：作者 @AI产品木水（不会写代码的产品经理）用 Codex 花约 8 小时、0 元成本，从 7 轮需求对话到 Vercel 一键部署，做出响应式、中英双语、SEO/GEO 齐全的定制个人官网，全程没写一行代码。文章把个人官网定位为 PM + Codex 的商业机会（PM 负责需求设计、Codex 负责实现），并强调 GEO 通过 FAQPage 结构化数据让 ChatGPT/Perplexity/Kimi 等 AI 引擎可以直接引用个人信息，还给出 5 个踩坑（字体加载、中文文件名、设计稿差异、半成品国际化、大文件拖慢首屏）与开源模板（13 组件 + 4 Hook）。核心判断：“PM 用 AI 编程，核心不是语法，是需求拆解和决策能力。“

实用信息

• 快速上手步骤：

  1. 先用多轮对话把需求聊透（定位/受众/内容模块/设计风格/功能/技术约束/素材），让 Agent 输出设计简报
  2. 让 Agent 先生成完整 HTML 设计稿作为视觉蓝图
  3. 初始化 Next.js 项目，按设计稿用数据驱动模式逐个实现组件
  4. 补齐动画、SEO、GEO（FAQPage/WebSite）、GA4 埋点
  5. build 后用 Vercel CLI 一键部署，绑定自定义域名

• 注意事项/避坑指南：

  • 字体用本地 fallback + font-display: swap，避免国内加载慢
  • 图片文件名全部用英文，避免中文名部署 404
  • 设计稿是参考不是铁律，开发中信息密度更高的方案可替换
  • 国际化要么完整实现要么先不做，避免两头不靠
  • 上线前检查资源大小：图片压缩、非首屏懒加载、视频点击才加载

相关页面

• Codex
• Vibe Coding
• Vercel
• GEO
• OPC 一人公司
• 独立开发者
• AI编程开发