必须先声明技术背景并确认路由结构，再生成页面、注入路由、补全数据逻辑和状态交互，最后验证运行效果。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在现有React项目中用Codex开发新页面，必须让AI准确理解项目技术栈、路由约定、样式方案和文件组织逻辑，否则生成的页面无法接入、样式错乱或状态管理失效。
确认项目上下文并启动Codex
进入你的React项目根目录（确保包含 package.json、src/ 和路由配置文件如 src/router/index.tsx 或 src/App.tsx），运行：
codex --mode auto-edit
启动后不要立刻提需求。先输入一句明确的技术背景声明：
“这是一个 React 18 + TypeScript + Vite 项目，使用 React Router v6，路由定义在 src/router/index.tsx，全局样式基于 Tailwind CSS，组件按功能拆分到 src/pages/ 和 src/components/。请先读取 package.json 和 src/router/index.tsx，确认路由导出方式和布局结构。”
【这一步不可跳过】 Codex 若未主动读取路由文件，后续生成的页面将无法被正确注册，你得手动补 import 和 route 配置——等于白干。
生成页面文件并自动注入路由
等Codex返回“已识别路由结构，当前使用 createBrowserRouter”或类似确认信息后，直接提出页面需求：
方法一：指定路径与组件名
“请在 src/pages/ 下创建一个名为 DashboardPage.tsx 的新页面，包含欢迎标题、用户统计卡片、最近订单列表；使用 Tailwind 写样式；同时在 src/router/index.tsx 的路由数组中，添加 path='/dashboard' → element=
方法二：复用已有布局
“请新建 src/pages/SettingsPage.tsx，包裹在 Layout 组件内（已存在 src/components/Layout.tsx），页面内容为带表单的账号设置区域，含用户名、邮箱、密码修改字段，使用 react-hook-form 和 zod 验证；自动导入所需 hook 和 schema。”
通过 Codex CLI 生成图片，支持尺寸控制和批量模式。依赖：codex (npm)。代理默认启用。用 generate.sh 生成单张，batch_generate.sh 批量生成游戏 UI 素材，gen_size.sh 指定尺寸。所有输出保存至 ~/.codex/generated_images/。
注意：如果项目用的是 BrowserRouter 而非 createBrowserRouter，Codex 可能误写 element 属性。此时它会主动提示“检测到 BrowserRouter，请改用 element 包裹 JSX”，你只需回“按 BrowserRouter 方式重写”，它会立刻修正。
补全数据逻辑与状态交互
页面骨架生成后，Codex 默认不自动拉接口或处理 loading/error 状态。你需要显式追加指令：
第一步：声明数据来源
“该页面需展示用户信息，调用 src/api/user.ts 中的 fetchCurrentUser() 函数，该函数返回 Promise
第二步：要求完整状态链路
“请在 DashboardPage.tsx 中集成数据获取逻辑：使用 useEffect + useState 或 useQuery（若项目已配 TanStack Query），包含加载中状态、空数据占位、错误重试按钮；所有类型定义必须从 src/types/user.ts 导入。”
第三步：校验是否生效
“请运行 npm run dev，打开浏览器访问 /dashboard，确认页面渲染无报错、数据正常加载、Tailwind 类名未被 PurgeCSS 删除。”
这一步操作起来很简单，Codex 会自动执行命令并反馈终端输出。但若你没提前配置好 Vite 的 server.port 或本地代理，它可能卡在 “Failed to fetch” —— 此时它会提示你检查 vite.config.ts 中的 proxy 设置，而不是盲目重试。
