企业官网建设流程全解析

综合实战——用 Codex + DeepSeek V4 交付一个完整项目

Windows 10/11 · Codex CLI v0.130.0 · DeepSeek V4 Pro/Flash · dsv4-cc-proxy-tray · 2026-06-02 · 🟢 常青

一、这篇教程解决什么问题

一句话定位：前 10 篇把 Codex 的每个能力模块讲了一遍，这篇把所有知识点串起来——用 Codex + DeepSeek V4 从零交付一个完整的 Web 应用。全程记录每一步的实际 prompt、Token 消耗、费用，以及哪些步骤用了 Codex、哪些切到了 Claude Code。

项目：任务看板（Task Board）——一个轻量级 Web 应用。

• 后端：FastAPI + SQLite（单文件架构）
• 前端：单个 HTML 文件（内嵌 CSS + vanilla JS）

读完能得到什么：

1. 一次完整的 AI 辅助开发体验——从需求分析到部署上线，10 个步骤
2. 每个步骤标注了用了前几期的哪个知识点
3. 全程 Token 消耗和费用记录——项目总成本¥0.67
4. 双轨经验总结——哪些步骤 Codex 更好、哪些步骤该切 Claude Code
5. 可克隆的完整项目仓库

二、项目概述与准备

2.1 为什么选这个项目

选项目三原则：够简单（2-3 小时完成）、够完整（涵盖前后端+数据库+部署）、够实用（可做模板）。任务看板满足全部三条。

2.2 技术选型

2.3 环境准备

codex--version# v0.130.0+curl http://localhost:16889/health# {"status":"ok"}git--version# 2.30+python--version# 3.12+mkdir task-board && cd task-board git init

知识点：[（一）config.toml](新手上路（一）：Codex config.toml 深度配置——模型供应商、Profile 与沙箱机制.md)

2.4 新建 AGENTS.md

# Task Board 项目 ## 技术栈 - FastAPI + SQLite（后端，单文件 main.py） - 原生 HTML/CSS/JS（前端，单文件 index.html） - Python 3.12+ ## 编码规范 - 所有函数写类型注解 - 异常不要裸 except - commit message：中文，格式 "类型: 简述"

知识点：[（五）自定义指令](新手上路（五）：自定义指令与提示词工程——Codex 的行为控制体系.md)

三、10 步完整开发流程

Step 1：需求分析 → 3 分钟 · ¥0.02

"我想做一个任务看板 Web 应用。功能需求： - 创建任务（标题 + 描述 + 优先级 high/medium/low） - 三种状态：待办 / 进行中 / 已完成 - 前端单页 HTML，后端 FastAPI + SQLite 帮我做需求分析：API 端点设计、数据库表结构、前端 UI 布局、可能漏掉的需求。"

Codex 输出结构化需求文档，补充了拖拽排序、输入验证、错误处理三项。
Token: 8,000 |模型: Flash |费用: ¥0.02

知识点：[（九）prompt 设计](新手上路（九）：Codex 代码审查——用 Codex 做你的第一读者.md)

Step 2：后端代码生成 → 10 分钟 · ¥0.04

"生成完整的 FastAPI + SQLite 任务看板后端。单文件 main.py。 数据模型：Task(id, title, description, priority, status, position, created_at) API：GET /api/tasks | POST /api/tasks | PUT /api/tasks/{id} | DELETE /api/tasks/{id} 启动时自动建表。title 不能为空，priority 必为 high/medium/low。CORS 全开（开发阶段）。 完整类型注解 + 错误处理。直接生成代码，不要解释。"

生成约 150 行可运行代码。追加requirements.txt（fastapi + uvicorn）。

pip install-r requirements.txt uvicorn main:app--reload curl http://localhost:8000/api/tasks# → []

Token: 18,000 |费用: ¥0.04

知识点：[（一）config.toml](新手上路（一）：Codex config.toml 深度配置——模型供应商、Profile 与沙箱机制.md) + [（二）Sandbox](新手上路（二）：Codex Sandbox 环境隔离——如何保护你的系统不被 AI 污染.md)

Step 3：前端代码生成 → 15 分钟 · ¥0.06

"生成任务看板前端界面。单文件 HTML（内嵌 CSS + JS）。 设计：三列布局（待办/进行中/已完成），响应式。每列显示任务数量。 任务卡片：标题、描述（可折叠）、优先级标签（high=红/medium=黄/low=绿）。 每列底部 '+ 添加任务' 按钮。点击卡片弹出编辑框。 纯 vanilla JS，API 指向 localhost:8000/api/tasks。自动刷新列表。 直接生成完整代码。"

生成约 300 行 HTML。在浏览器打开即用。

Token: 25,000 |费用: ¥0.06

知识点：[（四）MCP 设计思路](新手上路（四）：Codex MCP 实战——让 Codex 连接外部世界.md) + [（八）IDE 集成](新手上路（八）：Codex IDE 集成——VS Code 与终端之外的 Codex.md)

Step 4：联调 → 5 分钟 · ¥0.01

# 终端 1: uvicorn main:app --reload# 浏览器: 打开 static/index.html# 验证: 创建任务 → 出现在待办 → 切换状态 → 刷新后保持

遇到问题：

"前端 POST 返回 422。检查 JSON 格式。" → 前端 priority 字段拼写错误 "控制台 CORS 错误。" → 后端添加 allow_origins=["*"]

Token: 5,000 |费用: ¥0.01

Step 5：Pro 审查 + 重构 → 10 分钟 · ¥0.18

codex--profile heavy# 切换到 V4-Pro + max reasoning

"审查整个项目。维度：安全性、正确性、可维护性。 每个问题标注 severity 和修复建议。修完后重新审查确认。"

Pro 发现 3 个问题：缺少分页、前端 fetch 无 timeout、DELETE 不存在的任务返回 200。

Token: 30,000 |模型: Pro |费用: ¥0.18

知识点：[（六）Profiles 路由](新手上路（六）：Codex 成本优化——DeepSeek V4 用户的 Token 管理与费用控制.md)

Step 6：Claude Code 交叉审查 → 5 分钟 · ¥0.25

gitdiff> changes.diff# 另一个终端：claude → /security-review

交叉验证的价值：单个 AI 漏掉的东西，另一个可能发现。

费用: ¥0.25（CC）

知识点：[（七）双轨并行](新手上路（七）：Codex × Claude Code 双轨并行——一个项目两套 AI 工具.md)

Step 7：部署配置 → 10 分钟 · ¥0.08

"为这个 FastAPI 项目生成部署配置： 1. Railway 部署（后端）—— SQLite → PostgreSQL 迁移代码 2. GitHub Pages 部署（前端）—— .github/workflows/deploy.yml"

Token: 35,000 |费用: ¥0.08

Step 8：CI/CD 自动审查 → 5 分钟 · ¥0

# .github/workflows/codex-review.ymlname:Codex Reviewon:[push]jobs:review:runs-on:ubuntu-latesttimeout-minutes:10steps:-uses:actions/checkout@v4with:{fetch-depth:0}-run:npm install-g @openai/codex-name:Configure Codexrun:|mkdir -p ~/.codex cat > ~/.codex/config.toml << 'TOML' model = "deepseek-v4-flash" model_provider = "deepseek" model_reasoning_effort = "medium" [model_providers.deepseek] name = "DeepSeek" base_url = "https://api.deepseek.com/v1" env_key = "DEEPSEEK_API_KEY" wire_api = "responses" TOMLenv:DEEPSEEK_API_KEY:${{secrets.DEEPSEEK_API_KEY}}-name:Reviewrun:git diff HEAD~1|codex exec-p "审查。只报 blocker。"--allowedTools "read"--ephemeral

知识点：[（十）CI/CD](新手上路（十）：Headless 模式与 CI CD——Codex 进入自动化流水线.md)

Step 9：文档生成 → 3 分钟 · ¥0.02

"根据 main.py 和 static/index.html 的内容，生成项目 README.md。 包含：项目简介、技术栈、安装步骤、API 文档、项目结构。"

Token: 10,000 |费用: ¥0.02

Step 10：提交 + 推送

git add-A git commit-m"feat: 完整任务看板应用"git push origin main

四、费用全景

如果用 GPT-5.5

时间对比

五、双轨经验总结

Codex 做得特别好的

Claude Code 做更好的

双轨分工

Codex 负责： ✅ 代码生成——快、直接、省 token ✅ 需求分析——结构化输出 ✅ 部署配置——准确 ✅ CI/CD——exec 模式天然适合 Claude Code 负责： ✅ 安全审查——/security-review 一次性全覆盖 ✅ 交叉验证——补充 Codex 漏掉的检查项 总成本：¥0.66（Codex）+ ¥0.25（CC）= ¥0.91 只用 Codex：¥0.66（少了一层安全审查） 只用 CC：~¥2.50（同样项目需要更多 token）

六、知识点索引

七、扩展阅读——本系列全部文章