Codex 建站指南

用 Codex 搭建网站，适合把产品页、知识库、工具页、作品集、小型 Web 应用或 内部页面从想法推进到可本地预览的版本。可靠做法不是让 Codex “生成一个好看 网站”，而是给它目标用户、页面任务、现有技术栈、视觉约束和验收命令，让它 读项目、改文件、启动预览、截图检查并修正问题。

让网站任务进入可验证工作流

网站需要调用 OpenAI-compatible API 时，先把 API Key 放在服务端环境变量或 Secret 中。OfApp.cn 的 OpenAI / Codex 生态 Base URL 可配置为 https://api.ofapp.cn/v1；真实模型、额度、价格和能力请以 OfApp.cn 控制台或官方文档为准。

打开 OfApp.cn

页面摘要

项目	内容
阅读时间	约 6 分钟
更新时间	2026-07-03
适合人群	想用 Codex 做官网、知识库、工具页、落地页、后台页面和 AI Web 应用的人
你会得到	建站需求画布、信息架构方法、Goal Prompt、视觉验收矩阵、移动端检查、SEO/GEO 清单和上线前复核表

适合做什么网站

网站类型	适合程度	Codex 主要负责什么	人要确认什么
知识库或文档站	适合	目录结构、页面模板、内链、SEO 元信息	内容定位、权威来源、分类体系
产品官网	适合	首屏、功能区、FAQ、CTA、响应式布局	品牌定位、真实卖点、素材真实性
AI 工具 Demo	适合	表单、状态、结果展示、错误提示	API Key 安全、参数边界、成本风险
SaaS 控制台页面	适合拆页做	表格、筛选、空状态、表单校验	业务规则、权限、真实数据口径
作品集或个人主页	适合	内容结构、作品卡片、联系入口	作品选择、个人表达、版权素材
大型品牌官网	需要分阶段	组件落地、页面细节、浏览器验收	设计系统、品牌资产、审批流程

建站闭环图

先填建站需求画布

把需求写成下面这张表，再交给 Codex。它比“帮我做个网站”可靠得多。

问题	你要写清什么	示例
网站给谁看	目标读者、使用场景、设备	面向 AI 初学者，主要在手机上搜索教程
访问者要做什么	进入页面后的核心动作	阅读教程、复制 Prompt、打开 API 入口
页面要证明什么	可信依据、案例、截图、来源	有步骤、有 FAQ、有官方资料来源
不要出现什么	禁用风格、禁用文案、禁用素材	不写夸张营销，不虚构模型和价格
验收标准是什么	构建、截图、链接、Schema、表单状态	npm run build 通过，移动端无横向滚动

什么时候不要直接开工

情况	推荐动作
还不知道网站给谁看	先让 Codex 帮你访谈需求，产出 2 到 3 个定位方案
只有一句口号	先补用户任务、页面模块和真实资料
需要品牌级视觉	先准备设计稿、参考图、字体、色彩和素材授权
涉及登录、支付、后台权限	拆成前端原型、接口设计、安全评审几个任务
需要接真实 API	先做服务端最小调用，再接入页面状态
项目已有设计系统	先读现有组件和样式，不要重建一套

推荐目录结构

新项目可以从清晰结构开始；已有项目应沿用原结构。

web/
  src/
    pages/
    components/
    styles/
    lib/
  public/
  package.json
  .env.example
  AGENTS.md

让 Codex 先读取 package.json、现有页面、组件目录、样式文件、路由约定和 AGENTS.md。OpenAI Codex 手册建议把目标、上下文、约束和完成标准写清楚； 对于网站任务，AGENTS.md 适合沉淀构建命令、视觉规则、无障碍要求和验证流 程。

可复制 Goal Prompt

Goal:
在当前项目中搭建 [网站/页面名称]。
面向 [目标用户]。
交付可本地预览、可构建、移动端可读的版本。

Context:
- 网站目标：[访问者进入后要完成什么]
- 页面模块：[首屏、导航、内容区、案例、FAQ、CTA 等]
- 现有项目：[框架、入口文件、组件目录、样式约定]
- 素材：[已有图片、图标、品牌色、禁止使用的素材]
- API 边界：[是否需要服务端 API、环境变量名、错误状态]
- 验证命令：[npm run check / npm run build / 其他命令]

Constraints:
- 先读取项目结构和现有样式，再修改。
- 不重新初始化项目，不引入重依赖。
- 不虚构产品数据、客户案例、模型、价格或能力。
- 移动端要检查长标题、表格、按钮和代码块。
- API Key 只放服务端环境变量或 Secret。

Done when:
- 页面核心路径能在本地浏览器打开。
- 桌面和移动端截图无明显溢出或遮挡。
- SEO 标题、描述、canonical、Open Graph 和结构化数据可检查。
- 构建和链接检查通过。
- 说明改动文件、验证结果和剩余风险。

Codex 官方手册强调，给出复现、验证、lint 或预提交检查会提高输出可靠性。 建站任务也一样：有验收命令和截图标准，Codex 才能把“看起来完成”推进到可 检查的交付。

执行步骤

1. 写清目标用户、页面任务、主 CTA 和不能虚构的内容。
2. 让 Codex 盘点项目结构、现有组件、样式变量和构建脚本。
3. 先输出信息架构，再实现页面。
4. 实现首屏、导航、核心内容区、FAQ、CTA、空状态和错误状态。
5. 启动本地预览，用浏览器检查桌面和移动端。
6. 修正文案溢出、卡片拥挤、按钮换行、表格横滚和暗色模式问题。
7. 运行构建、链接检查、SEO/GEO 检查，再审查 Diff。

Codex 应该先读什么

文件或信息	目的	要求 Codex 输出什么
package.json	确认框架、脚本和包管理器	本地启动、构建、检查命令
路由目录	找到页面入口	应新增还是修改哪个页面
组件目录	复用现有设计语言	可复用组件清单
样式文件	保持颜色、间距、响应式一致	不应破坏的视觉规则
内容资料	避免空洞和编造	页面事实来源和待确认点
.env.example	确认 API 变量名	只写变量名和占位值
AGENTS.md	读取项目长期规则	必须遵守的验证和禁区

信息架构怎么给 Codex

一个网页不应该只是“首屏 + 几张卡片”。用下面的结构把页面任务排清楚。

区块	作用	常见错误
首屏	让访问者确认自己来对地方	大标题空泛，只写愿景
导航	让人快速到达关键内容	链接过多，层级混乱
核心流程	展示真实使用路径	只有功能点，没有步骤
案例或模板	让用户能照着做	案例缺少输入、输出和限制
FAQ	覆盖搜索问题和犹豫点	只回答营销问题
CTA	给下一步行动	太早推销，缺少信任铺垫
资料来源	方便人和 AI 追溯	没有官方文档或更新时间

视觉与交互验收矩阵

检查项	桌面端	移动端
首屏	H1、摘要、主行动清楚	H1 不压住导航，摘要不拥挤
导航	当前栏目高亮，链接可点	菜单可打开，层级可读
卡片	高度不乱跳，信息密度合适	文字不挤出边界
表格	可读，可横向滚动时有余量	不造成页面整体横向滚动
表单	loading、empty、error、success 都有	输入框和按钮可触达
图片	有明确尺寸和替代文本	不裁掉关键信息
代码块	可复制，可横向滚动	不撑开整页
暗色模式	对比度足够	边框和阴影不过重

本地预览与浏览器验证

Codex App 的 in-app browser 适合验证本地开发页面、截图、DOM、控制台和可见 交互。官方手册也提醒，浏览器预览适合不需要登录的本地页面；涉及登录状态、 浏览器扩展或已有用户 Cookie 时，应使用常规浏览器或 Chrome 扩展。

给 Codex 的验收要求可以写成：

启动本地开发服务器。
打开目标路由。
检查桌面端和 390px 移动端。
确认没有控制台 error/warn。
确认页面不是空白，没有框架错误层。
检查 H1、CTA、FAQ、内链和主要交互。
保存截图并说明发现的问题。

如果页面有表单或工具流程，至少测试一次正常路径和一次错误路径。只看构建通 过不够，网站任务必须看真实渲染状态。

AI API 接入边界

网站需要调用 OpenAI-compatible API 时，先确定这件事发生在服务端还是浏览 器端。API Key 不应进入前端包、浏览器日志、截图或公开仓库。

OPENAI_BASE_URL="https://api.ofapp.cn/v1"
OPENAI_API_KEY="sk-xxxx"

在 OfApp.cn 场景中，可以把服务端 OPENAI_BASE_URL 配置为 https://api.ofapp.cn/v1。如果工具会自动拼接 /v1，则以工具说明和 OfApp.cn 官方文档为准。真实模型、额度、价格和能力请以 OfApp.cn 控制台或 官方文档为准。

SEO 与 GEO 上线检查

项目	检查方式
页面主题	一个页面只围绕一个明确搜索需求
标题和描述	标题可搜索，描述说清读者能得到什么
canonical	指向正式 URL，避免重复页面
Open Graph	分享标题和描述不缺失
Article Schema	标题、更新时间、阅读时间可被结构化读取
FAQ Schema	FAQ 问题真实，答案能独立理解
内链	链到上级专题、相关教程、错误排查和下一步
资料来源	官方文档、产品页面或可信资料可追溯
AI 可读性	定义、步骤、表格、FAQ、总结都清楚
性能	图片有尺寸，字体加载克制，移动端无整体横向滚动

常见错误排查

错误	表现	更好的做法
只给一句“做个官网”	页面空泛，结构像模板	先填需求画布
直接重建项目	破坏现有路由和组件	先读项目，再决定改哪里
首屏像广告	用户不知道能做什么	写清任务、步骤和可信依据
忽略移动端	卡片、表格、按钮溢出	加移动端截图验收
前端直接调 API	Key 泄露	改到服务端路由或后端服务
没有错误状态	工具页一失败就空白	补 loading、empty、error、success
没有上线清单	SEO/GEO 缺结构化信息	检查标题、描述、FAQ、Schema 和内链

资料来源

• OpenAI Codex Manual：Codex Prompt、验证、in-app browser、Review 和 AGENTS.md 建议。
• OfApp.cn 官网：OfApp.cn 入口、天才游乐场、Base URL 与 OpenAI / Codex 生态说明。
• OfApp.cn API 文档：Codex 接入、OpenAI-compatible API 示例与 /v1/models 最小请求。
• OfApp.cn 天才游乐场：Key、聊天参数、图片参数和网页体验入口。

常见问题

Codex 能从零搭一个完整网站吗？

可以做出初版，但定位、文案、真实资料、品牌资产和上线策略仍需要人确认。重 要项目建议拆成需求、信息架构、视觉、实现、浏览器验收和上线检查几个阶段。

没有设计稿时怎么让 Codex 做得不乱？

给它目标用户、页面模块、参考风格、禁用风格、品牌色、字体约束和验收截图 要求。没有设计稿时，更要避免让它自由发挥整套视觉系统。

Codex 搭建网站时要不要引入 UI 框架？

已有项目先复用现有组件和样式。只有当项目确实缺少基础组件，并且团队接受维 护成本时，再考虑新增依赖。引入依赖前应让 Codex 说明理由和替代方案。

怎么判断网站已经可以上线？

至少要满足：核心路径能走通、移动端可读、构建通过、链接有效、SEO/GEO 元 信息完整、没有虚构内容、错误状态可见、API Key 没有暴露。

网站接 AI API 时要注意什么？

API Key 应放在服务端环境变量或 Secret 中。前端只提交必要输入，服务端负责 调用 API、处理错误、限流和日志脱敏。OfApp.cn 相关模型、额度、价格和能力 请以控制台或官方文档为准。

可以让 Codex 同时做设计、代码和文案吗？

可以，但建议分阶段验收。先让信息架构和核心路径成立，再让 Codex 打磨视觉 和文案。把所有目标塞进一次任务，容易让页面变大、Diff 变乱、验收变弱。

相关文章

• Codex 教程：查看 Codex 工作流入口。
• 用 Codex 写代码：为网站补具体功能。
• 用 Codex 生成测试：给工具页和交互流程补测试。
• 用 Codex 修 Bug：处理页面、API 和构建问题。
• 用 Codex 重构项目：网站稳定后再整理结构。
• 用 Codex 配置 GitHub 工作流：给网站增加 CI 检查。
• Codex 本地项目使用指南：控制工作目录、指令和验证命令。
• OpenAI-compatible API 快速开始：验证 AI API 连通性。
• 如何配置 Base URL：避免漏写或重复拼接 /v1。
• AI 辅助开发：把网站任务纳入开发工作流。

带走什么

用 Codex 搭建网站的价值，在于把想法推进到可预览、可验证、可继续迭代的页 面。关键不是一次生成多少区块，而是目标清楚、信息架构成立、视觉约束明确、 移动端可读、SEO/GEO 可检查、API Key 安全，并且每次改动都有截图和构建证据。