用 Codex 从想法做到可运行 Web 应用

Codex 可以很快搭一个页面，但“能打开”不等于产品可用。本页用一个简单的活动报名工具为例，从问题定义到预览部署，要求每一阶段都有真实浏览器和工程验证。

不会编程也可以发起，但必须学会验收

你不需要亲自写代码才能描述活动报名工具、选择页面方向、查看预览和测试用户流程。Codex 可以承担代码实现，但它不会替你决定业务规则、隐私边界、是否上线和怎样处理真实报名数据。

普通用户先完成本地或受控预览，不连接真实支付、不群发邮件、不导入真实客户数据。遇到终端命令、数据库、域名和部署步骤时，可以让技术同事复核，或先学习开发者路线；“我不会写代码”不应被理解为可以跳过安全和测试。

开始前建议先看 普通人的任务说明法 和 隐私、权限与审批。

第一步：冻结第一个用户结果

不要说“做一个活动平台”。第一版只解决：

组织者创建一个活动报名页，访客填写姓名和邮箱提交，组织者能看到报名列表并导出 CSV。

不在第一版：支付、社交、推荐、复杂权限、多语言和原生 App。

第二步：写产品和技术边界

brief.md：

- 用户：小型社区活动组织者
- 核心流程：创建活动 → 分享链接 → 报名 → 查看/导出
- 技术：React + TypeScript，沿用当前仓库方案
- 数据：开发期使用本地/测试数据库
- 安全：报名列表只有组织者可见
- 交付：可运行页面、测试、README、预览 URL
- 禁止：不连接生产支付，不发送真实邮件，不公开真实报名数据

第三步：先做视觉方向

可以用 ImageGen/Figma 生成 2-3 个方向，但先选信息层级，不急着写代码：

为活动报名页提出 3 个视觉方向，每个包含色彩、字体、布局、交互和适用场景。保持克制，优先表单可读性和移动端。先用低保真结构说明，不实现。

选定方向后写进设计约束，避免每轮重新风格化。

第四步：研究现有项目

只读检查仓库的路由、组件库、样式 token、表单、数据访问、认证、测试和部署方式。找出最接近的已有实现，提出最小文件计划和需要确认的问题。

如果是空项目，选择成熟最小栈，不一次加入多个状态库、UI 库和后端框架。

第五步：按垂直切片实现

推荐：

1. 静态报名页和移动端布局；
2. 表单校验和本地提交；
3. 测试数据库写入；
4. 组织者列表与权限；
5. CSV 导出；
6. 错误、空状态和部署。

每个切片都能单独打开和验证。

只实现切片 1：活动详情和报名表静态页面。复用项目组件和 token，支持 390px 与桌面。不要接数据库。运行前端测试和构建，并用浏览器检查目标路由。

第六步：真实浏览器循环

使用 Build Web Apps、Browser/Chrome 或 Playwright 能力：

启动开发服务器，打开目标路由。先检查控制台和网络错误，再按桌面与手机尺寸完成主流程。列出可复现问题，逐个最小修复。每次交互后检查页面状态，不只看截图。

测试：键盘、校验、重复提交、loading、错误恢复、刷新、空状态和长文本。

第七步：接入数据

先写 schema 和权限：

设计最小数据模型：Event、Registration、Organizer。说明主键、唯一约束、时间、删除和租户边界。先生成迁移与回滚计划，在测试数据库验证，不连接生产。

使用 Supabase/Postgres 等 Plugin 时，权限策略必须在服务端/数据库验证，不能只靠前端隐藏。

第八步：处理外部服务

邮件、支付和分析分阶段接入：

• 先使用 sandbox/test mode；
• Key 通过环境变量；
• webhook 验证签名和幂等；
• 失败和重试有状态；
• 不发送真实邮件、不收真实付款；
• 在预览环境检查隐私和 Cookie。

Build Web Apps Plugin 中的 Stripe/Supabase 指导可以帮助遵循当前最佳实践，但业务金额、退款和权限仍需人工审查。

第九步：部署预览而非直接生产

准备预览部署。先检查环境变量清单、构建命令、静态资源路径和数据库目标。部署到 preview/staging，返回 URL 和验证清单。不要绑定正式域名，不连接生产数据库，不执行正式发布。

使用 Vercel、Netlify、Render 或 Cloudflare Plugin 时，明确部署目标账号和项目；预览通过后再由人批准生产。

第十步：发布前门槛

• 核心用户流程端到端通过；
• 手机和桌面通过；
• 认证、授权和数据隔离通过；
• 错误、日志和监控可用；
• 秘密扫描通过；
• 性能和可访问性无阻塞问题；
• 数据迁移和回滚演练；
• 隐私、条款和外部服务配置确认；
• 预览 URL 由真实用户试用。

常见失败

一开始就生成完整 SaaS

冻结一个用户结果，按垂直切片推进。

页面漂亮但流程断裂

真实浏览器完成创建、提交、查看和导出，不只看首页。

使用假权限

在服务端/数据库测试越权访问。

自动部署到生产

默认只做 preview，域名、数据库、支付和发布由人批准。

完成门槛

• [ ] 第一版用户结果明确且范围受控。
• [ ] 复用现有项目模式。
• [ ] 每个切片有浏览器和工程验证。
• [ ] 权限在服务端测试。
• [ ] 外部服务只用测试模式。
• [ ] 预览部署可回退，未自动生产发布。

事实来源

• OpenAI：Get from idea to proof of concept
• OpenAI Prompting：Iterate on UI