用 OpenAI Codex，1 天从零搭出专业级个人官网【手把手，全开源】
不会写代码的产品经理用 OpenAI Codex 这个自主编程 Agent，0 元成本、1 天（约 8 小时）从需求对话到 Vercel 上线，做出响应式、SEO/GEO 齐全的定制个人官网，全程没写一行代码，并把整套流程沉淀为开源模板。
基本信息
- 来源类型：文章（人人都是产品经理）
- 原文位置：raw/articles/2026-07-14-235923-tg-d29b04.md
- 原文 URL：https://www.woshipm.com/ai/6429053.html
- 作者：@AI产品木水
- 发布日期：2026-07-12
- 消化日期：2026-07-15
核心观点
-
不会写代码的 PM，1 天 0 元做出定制级个人官网：作者是不写代码的产品经理，用 OpenAI Codex 花约 8 小时有效工作时间，做出响应式布局、SEO 优化、滚动动画、中英文双语、PC/手机自适应的个人官网（opc.lilianagent.cn），成本 0 元（Vercel 免费部署），核心工具是 Codex + Next.js 16 + TypeScript + Tailwind CSS 4 + Framer Motion。全程”没有写一行代码”，作者只做提需求、验收结果、给反馈。
-
Codex 与普通 AI 编程助手的本质区别是”自主编程 Agent”：ChatGPT 写代码、Cursor 辅助、AI 建站神器都有一个共同问题——“你还得懂代码，才能把 AI 输出的东西拼起来”。Codex 会自己规划任务、写代码、调试、部署，人只做产品经理该做的事。作者概括：“以前是你帮 AI 写代码，现在是 AI 帮你当程序员。”
-
最关键的一步是先花 1 小时和 Codex 把需求聊透：作者不套模板，而是用 7 轮对话（定位与目标→个人信息→内容模块→设计风格→功能需求→技术约束→素材确认）让 Codex 把需求结构化，1 小时后输出一份完整设计简报。这与 Vibe Coding 的”苏格拉底式 PRD 追问”同源——模糊的需求必然产生模糊的产品。
-
数据驱动组件模式让”改内容不碰代码”：下午的组件开发全部采用数据驱动模式——数据和 UI 完全分离，后续改内容只需要改数据文件，不用碰代码。这是让非技术 PM 能长期自维护的关键工程决策，共 13 个组件 + 4 个自定义 Hook。
-
GEO 通过 FAQPage 结构化数据实现”让 AI 引擎推荐你”：作者系统性做了 SEO（Title/OG/JSON-LD Person/sitemap/robots）和 GEO 两套优化。GEO 是很多人忽略的一环——传统 SEO 是让 Google 搜到你，GEO 是让 ChatGPT、Perplexity、Kimi 这类 AI 搜索引擎推荐你，做法是配置 FAQPage 和 WebSite 结构化数据让 AI 引擎可直接引用。
-
PM + Codex 是新的商业机会：很多产品经理、设计师、开发者需要个人官网但不会做，模板建站便宜但千篇一律、定制开发贵且慢。有了 Codex 出现中间方案：PM 负责需求和设计，Codex 负责实现，成本低、速度快、质量高。
实操内容保留
本文为案例复盘型文章，实操价值集中在完整工作流、7 轮需求对话结构、5 个踩坑解法与开源模板清单。
全天工作流（上午→晚上）
- 上午 · 生成 HTML 设计稿：把设计简报喂给 Codex，让它先生成完整 HTML 设计稿作为视觉蓝图。Codex 返回 1221 行 HTML，含完整页面布局、所有区块结构、颜色体系、字体间距规范、响应式断点。
- 中午 · 项目初始化：Codex 自动执行初始化命令，创建 Next.js 项目并安装 Framer Motion 和 Lucide React 依赖。
- 下午 · 组件开发（数据驱动模式）：让 Codex 按设计稿逐个实现组件，数据与 UI 完全分离，后续改内容只改数据文件。
- 傍晚 · 动画 + SEO + GEO + 埋点：Framer Motion 滚动触发/数字递增/3D 卡片倾斜/滚动进度条/Hero 卷轴展开动画；SEO（Title/Description/Keywords 长尾 + OG + Twitter Card + Canonical + robots.txt + sitemap.xml + JSON-LD Person）；GEO（FAQPage + WebSite 结构化数据）；GA4 埋点用 next/script 不阻塞首屏。
- 晚上 · 一键部署上线：Codex 执行 build，再通过 Vercel CLI 一键部署，10 分钟后官网上线。
7 轮需求对话结构
- 第 1 轮 定位与目标：官网给谁看（潜在客户、合作伙伴、猎头）、希望访客做什么（联系我、看案例、了解服务）
- 第 2 轮 个人信息：姓名、一句话介绍、职业标签、联系方式（Codex 结构化成标准数据格式）
- 第 3-7 轮 内容模块（首屏/关于/服务/产品/案例/联系 6 模块）→ 设计风格（科技感 + 蓝色主色 + 橙色强调）→ 功能需求（全套交互动画）→ 技术约束（Vercel 免费部署）→ 素材确认
5 个踩坑与解法
- Google Fonts 国内加载慢（先显示默认字体再切换）→ 本地字体 fallback +
font-display: swap - 中文文件名部署风险（图片路径用中文名部署后 404）→ 全部改成英文文件名
- 设计稿和代码的差异（设计稿是 SVG 环形进度条，实际改成数字卡片）→ 设计稿是参考不是铁律，开发中敢于调整
- 国际化半成品（结构预留了中英文切换但没完整串联）→ 要么完整实现要么先不做，两头不靠最浪费时间
- 大文件拖慢首屏（最痛）（两张视频 69MB、4 张图超 1MB）→ PNG 转 JPG 压缩减小 86%、非首屏图片懒加载、视频点击才加载
开源模板清单
GitHub 地址：github.com/WoodWater-ai/mushui-PM-skills，包括需求收集问答清单、设计简报模板、技术规范模板、SEO+GEO 优化清单、GA4 埋点配置、性能优化方案，以及完整代码模板（13 个组件 + 4 个自定义 Hook）。
关键概念
- Codex — 本文的核心工具，作为自主编程 Agent 完成从设计稿到上线的全流程
- Vercel — 免费部署环节，Codex 通过 Vercel CLI 一键上线
- Vibe Coding — 本文是”非技术 PM 用自然语言 + 产品思维驱动 AI 开发”的典型案例
- 个人官网 — 本文产出物，作为 PM/独立开发者的个人品牌与 GEO 资产
- GEO — 通过 FAQPage/WebSite 结构化数据让 AI 搜索引擎推荐个人官网
- Vercel、提示词工程 — 部署与需求对话相关
与其他素材的关联
- 与 2026-05-27-woshipm-codex-product-dev-lessons（四月的番茄时钟）的关系：两者都是非技术 PM 用 Codex 做完整产品的实战，四月做的是 macOS 原生 App，本文做的是 Web 个人官网；两者都强调”先聊透需求/PRD 再动手”，本文把这一步细化为 7 轮结构化对话。
- 与 2026-07-01-woshipm-vibe-motion-10-pitfalls 的关系：都强调 Codex 踩坑要沉淀为下一次的检查规则，本文的 5 个坑（字体/文件名/设计差异/半成品 i18n/大文件）就是这类可复用检查项。
- 与 2026-07-08-woshipm-ai-search-content-growth（AI 搜索改写内容增长）的关系：本文用 FAQPage 结构化数据做 GEO，正是”让内容成为机器可读资产”在个人官网上的落地实践。
- 与 2026-07-14-woshipm-let-ai-reject-your-idea 的关系：本文属于”AI 让构建变得太容易”的正向案例，但作者的商业化思考（PM + Codex 卖官网）仍停留在”参考着去 X 鱼、某书验证”，尚未做真实需求验证。
原文精彩摘录
但它们都有一个共同问题：你还得懂代码，才能把 AI 输出的东西拼起来。Codex 不一样。它是 OpenAI 推出的自主编程 Agent——你告诉它你要什么，它会自己规划任务、写代码、调试、部署，整个过程你只需要做「产品经理」该做的事：提需求、验收结果、给反馈。简单说：以前是你帮 AI 写代码，现在是 AI 帮你当程序员。
传统 SEO 是让 Google 搜到你，GEO 是让 ChatGPT、Perplexity、Kimi 这类 AI 搜索引擎推荐你。Codex 配置了 FAQPage 结构化数据和 WebSite 结构化数据，让 AI 引擎可以直接引用我的信息。
坑5：大文件拖慢首屏（最痛的一个）。上线后发现网页打开很慢，一查两张视频 69MB，4 张图片超过 1MB。PNG 转 JPG 压缩减小 86%，非首屏图片加懒加载，视频设为点击才加载。教训：上线前一定要检查资源大小。
PM 用 AI 编程，核心不是语法，是需求拆解和决策能力。你不需要知道怎么实现，但你需要知道要什么、怎么组织、怎么取舍。这恰恰是产品经理的日常。1 天，从想法到上线，不难。难的是迈出第一步。