Codex实操：小白制作网页全流程
核心误区
小白用 Codex 做网页最容易犯的错误不是不会写代码，而是第一句话就说：
“帮我做一个高级、好看的网站。”
“高级”到底是什么风格？ 网站给谁用？ 用户进入后要完成什么操作？ 这些都没说清楚，AI 只能一边猜需求，一边堆代码，最后按钮、文案和功能却未必真正有用。
正确流程（三步走）
先让 Codex 问清需求
再根据参考图搭建网页骨架
最后批量整理素材、测试并验收
开始前：准备项目目录与基础环境
1. 创建独立项目目录
本文以 Codex CLI 为例。
默认你已经安装并登录 Codex。进入准备存放网站的目录后，运行：
codex （注意：codex 是启动命令，不是安装命令。首次启动时 Codex 会引导你选择登录方式。）
项目目录结构建议：
代码块
Plain Text
我的网站/
├── 参考文献/ # 网页参考截图
├── 公共/
│ └── images/ # 图片素材
├── docs/ # 需求、文案和说明
└── AGENTS.md # 后续添加的项目规则
2. 初始化 Git（非强制，但强烈推荐）
代码块
Bash
git init
git add .
git commit -m "初始检查点"
这不是使用 Codex 的强制要求，但没有 Git 时后续 /review 无法正常出现，也不方便查看和撤销修改。Codex 的代码审查功能要求当前项目位于 Git 仓库中。
权限配置（安全第一）
进入 Codex 后输入：
代码块
Plain Text
/permissions
内置权限配置（参考）
•
只读：仅读检查
•
workspace：允许修改当前工作区
•
danger-full-access：取消本地沙箱限制
小白建议
•
梳理需求、分析参考图时 → 使用只读权限
•
确认方案后 → 再允许修改当前项目
•
不要为了少点几次确认，直接开启完全访问
权限名称和界面可能因平台、版本或团队管理配置而略有不同。官方原则同样是：选择能够完成任务的最小权限。
另外，本地 Codex 的网络访问默认受到限制。它如果需要联网下载依赖、调用外部服务或访问工作区之外的文件，可能会请求批准。
第一步：把模糊想法变成明确需求
使用 /plan + 明确指令
✅
/plan 会让当前对话进入规划模式，也可以直接在后面附带任务描述。但规划模式本身不保证一定会主动采访你，因此提示词要明确要求“先提问，不要写代码”。
直接复制这段提示词
代码块
Plain Text
我准备制作一个宠物定制服务网站，目前只有大致想法。
先不要创建文件，也不要写代码。
请像产品经理一样向我提问，帮助我明确：
1. 目标用户是谁
2. 网站提供哪些核心服务
3. 用户进入后要完成什么操作
4. 需要哪些页面和模块
5. 是否需要表单、登录、支付或后台
6. 应该展示哪些价格、案例和信任信息
7. 希望采用什么视觉风格
8. 手机端有哪些重点要求
需求整理示例（最终至少应整理出类似结构）
代码块
Plain Text
首页
├── 首屏介绍
AI 建站最危险的不是代码写错，而是在你没定义需求时替你编出一套需求。
第二步：给它参考图，但只学设计语言，不照抄
需求确认后，再提供你喜欢的网页截图。
Codex CLI 图片传入方式
•
支持通过 -i 或 --image 传入 PNG、JPEG 等常见格式（一次一张或多张）
•
不要只丢图片，要同时说明图片是什么、重点检查什么、最终希望得到什么
示例：
代码块
Bash
Codex -I 参考文献/homepage.png "分析这张网页参考图，暂时不要写代码"
多张图：
代码块
Bash
Codex --图片参考/home.png，参考文献/detail.png "比较两张参考图的布局和视觉语言"
参考图分析提示词
代码块
Plain Text
方案确认后，再让它生成第一版骨架
代码块
Plain Text
方案确认，现在开始制作第一版网页。
要求：
1. 优先完成首页和必要公共组件
2. 适配桌面端、平板和手机端
3. 图片区域暂时使用明确的占位框
4. 不加入与需求无关的复杂动画
5. 不提前增加登录、支付和后台
6. 不安装没有必要的依赖
7. 所有按钮必须有明确用途
8. 重复内容拆成可复用组件
第三步：让 Codex 批量整理图片，再确认匹配结果
页面骨架完成后，把素材放进项目：
代码块
Plain Text
公开/图片/
├── 宠物/
├── 产品/
├── 场景/
├── 推荐/
└── 品牌/
第一轮：只整理，不动代码
代码块
Plain Text
请检查 public/images 目录中的图片。
暂时不要修改网页，也不要移动、删除或重命名文件。
请建立图片清单，尽量包含：
- 文件路径
- 图片尺寸
- 画面主体
- 素材分类
- 建议使用的页面模块
- 重复或近似图片
- 清晰度明显不足的图片
- 不适合公开使用的素材
然后输出“页面模块—图片文件”匹配表。
无法确定用途的图片请单独列出，
不要为了用完素材而强行匹配。
输出示例（匹配表）
| |
| |
| |
| |
| |
第二轮：确认后再写入页面
代码块
Plain Text
最后一步：测试、审查和发布前验收
网页生成出来不代表网站已经达到上线标准。
Codex CLI 可以运行电脑和项目中已有的开发工具，但它不会凭空拥有浏览器自动化能力。
项目已配置 Playwright、浏览器插件或其他测试工具时，它可以尝试自动检查页面；没有相关工具时只能完成代码和构建检查，并把视觉、交互项目列为人工待验收。
发布前检查提示词
代码块
Plain Text
请对当前网站执行发布前检查。
第一步先检查项目中有哪些可用工具和脚本，
例如 build、lint、test、Playwright 或其他浏览器测试。
【可以自动执行的项目】
1. 运行已有构建、Lint和测试
2. 检查终端报错
3. 检查无效导入和资源路径
4. 检查API Key、.env和敏感信息
使用 /review 做独立代码审查
项目必须先是 Git 仓库，然后输入：
代码块
Plain Text
/影评
你可以选择：
•
审查未提交改动
•
与基准分支比较
•
审查指定提交
•
添加自定义审查要求
/review 会读取差异并输出按优先级整理的问题，默认不会修改当前工作区。发现问题后，再单独要求 Codex 修复。
可补充审查重点：
代码块
Plain Text
重点检查：
- 页面功能是否与需求一致
- 是否存在无效按钮和空链接
- 是否增加了不必要的依赖
- 是否存在密钥或敏感信息
- 是否缺少关键错误处理
- 是否存在明显的移动端布局风险
只报告问题，不要修改代码。
把长期规则写进 AGENTS.md
在项目根目录输入：
代码块
Plain Text
它会生成一个 AGENTS.md 基础文件。
可补充内容示例：
代码块
Plain Text
## 项目目标
这是一个宠物定制服务展示网站。
## 修改原则
- 优先使用项目已有组件和依赖
- 不增加需求之外的功能
- 不修改无关文件
- 不复制参考网站的品牌素材
- 所有页面必须适配移动端
Codex 会按照目录层级读取 AGENTS.md，越靠近当前工作目录的规则优先级越高。不过它通常是在启动会话时加载这些文件，所以创建和修改完成后，建议退出并重新启动一次 Codex。
总结
小白用 Codex 制作网页最稳的方式不是：
❌ 一句话生成 → 看起来不错 → 直接上线
而是：
✅ 让AI提问，明确需求和完成标准
✅ 分析参考图，搭建原创网页骨架
✅ 整理素材，运行测试并人工验收
几分钟可以做出第一版，但真正可以上线的网站靠的是需求清楚、结构合理、素材匹配，以及有证据的测试结果。
Codex 最有价值的地方不是让小白“一键变成程序员”。
而是让你按照正确顺序，把一个模糊想法逐步变成可运行、可检查、可回退、可继续修改的真实网页。