6.0
深览指数
科技人人都是产品经理·AI产品木水··AI 生成
用OpenAI Codex，1天从零搭出专业级个人官网【手把手，全开源】
一位不会写代码的产品经理，借助 OpenAI Codex 编程 Agent，在 1 天内（约 8 小时有效工时）零成本搭建了一个支持响应式布局、SEO/GEO 优化、滚动动画和中英文双语的个人官网。文章完整记录了从需求对话、技术选型到组件开发和踩坑复盘的全过程，核心结论是：AI 编程正在将「产品经理 + 程序员」的协作模式转变为「产品经理定义需求 + AI 自主实现」的新范式。适合想了解 AI 编程 Agent 实操效果的产品经理、独立开发者及个人品牌建设者阅读。原文 ↗
核心观点
- ▍AI 编程 Agent（如 OpenAI Codex）正在开创一种新协作范式：产品经理负责需求定义与决策，AI 负责代码实现，使得不会写代码的产品经理也能完成定制化开发。
- ▍使用 Codex + Next.js + Tailwind CSS + Framer Motion，一个具备响应式布局、SEO/GEO 优化、动画和双语支持的官网可以在 1 天内零成本上线。
- 01官网最终部署在 Vercel（免费），成本为 0 元，总耗时约 8 小时。
- 02搭建前作者花 1 小时与 Codex 对话，通过 7 轮交互（定位目标、个人信息、内容模块、设计风格、功能需求、技术约束、素材确认）输出了完整设计简报。
- 03Codex 先生成了 1221 行的 HTML 设计稿，随后创建 Next.js 项目并安装 Framer Motion、Lucide React 依赖，并逐个实现了数据驱动的组件。
- 04Codex 系统性地实现了 SEO（结构化数据、OG 标签、sitemap）和 GEO 优化（FAQPage 结构化数据），并接入了 GA4 埋点。
- 05文章中列出了 5 个具体踩坑实例：Google Fonts 国内加载慢、中文文件名部署 404、设计稿与代码差异调整、国际化半成品浪费、大文件拖慢首屏（视频 69MB，后压缩 86%）。
反方 / 局限
- — 作者承认文章中提到的「国际化半成品」是一个教训，只预留结构但未完整串联，导致两头不靠，最浪费时间。
- — 文章所述方法高度依赖 Codex 的能力边界（如处理中文文件名、大文件优化等），对于复杂逻辑或需要深度调试的场景，Codex 的自主性可能不足，仍需用户具备一定技术判断力。
- — 该案例本质是个人静态展示型官网，逻辑简单。对于涉及复杂数据库、用户系统或支付的 Web 应用，Codex 当前的能力是否能胜任并保证安全性，文章未涉足。
9 分钟 · 4 卡片 · 10 资料
读原文 →