Codex 怎么做第一个网页：新手练习流程

用 Codex 做第一个网页，不要从客户真实项目或复杂全栈应用开始。最稳的练习是一个单页网页：有标题、简介、服务说明、作品展示、联系按钮和基础响应式样式。先把小页面做完整，再谈项目。

这篇仍是草稿。发布前需要人工补充真实截图、项目命令、素材来源说明和部署流程验证。

适合谁

适合想用 Codex 做第一个网页练习的新手。你可能只会基础 HTML、CSS 或 React，但愿意按步骤给 Codex 明确需求，并自己检查生成结果。

也适合准备做作品集的人。第一个网页不需要功能很多，但要能说明你如何规划内容、如何验证页面、如何记录改动。

不适合谁

不适合一开始就想做电商、会员系统、支付后台、客户管理系统或复杂数据库项目的人。这些项目牵涉权限、隐私、业务流程和安全边界，不能用第一个练习项目硬冲。

也不适合直接复制别人的网页、图片、文案或品牌素材。作品集需要能解释来源和授权，否则后面会变成版权风险。

先确定网页范围

第一个网页建议只做一个主题，例如个人介绍页、本地服务页、小工具介绍页或作品集首页。范围越小，越容易验证。

可以先写出这些内容：

1. 页面标题：这个网页给谁看。
2. 主要目标：让用户了解你、下载模板、联系你，还是查看作品。
3. 三段正文：简介、服务或功能、下一步行动。
4. 视觉要求：简洁、可读、移动端不乱。
5. 验收标准：本地能运行，构建通过，手机和桌面都能看。

如果你连内容都没想好，先不要让 Codex 直接生成完整页面。AI 不是读心术，输入模糊时输出也会飘。

具体步骤

1. 新建或打开一个练习项目，确认不是客户生产项目。
2. 写一份页面需求，包含主题、受众、内容区块和验收标准。
3. 让 Codex 先生成页面结构，不要一开始要求复杂动画和登录功能。
4. 检查生成代码是否只改了预期文件。
5. 本地运行项目，查看桌面和手机宽度下是否可读。
6. 运行 lint、build 或项目已有测试。
7. 替换所有占位文案和未授权素材。
8. 写练习记录，说明改了什么、怎么验证、哪些部分还要人工复核。

可以复制的需求模板

请帮我做一个单页网页练习。

主题：
目标用户：
页面区块：
- 顶部标题和一句简介
- 3 个服务或作品项目
- 一个联系或下载按钮
- 页脚说明

设计要求：
- 简洁清楚
- 手机端可读
- 不使用未授权图片
- 不加入登录、支付、数据库功能

验收标准：
- 本地页面能打开
- npm run build 通过
- git diff 只包含本次练习相关文件

本地验证命令可以从这些开始：

git status
git diff
npm run lint
npm run build

做成作品集前要检查什么

练习页要变成作品集，至少要检查三件事。第一，内容是不是你自己的，图片和图标是否有授权。第二，页面在手机和桌面是否都能看。第三，你能不能说明每个区块为什么这样设计。

如果你用的是模板或 AI 生成内容，要在内部记录来源和修改过程。公开前再做人工审核，不要把还没核对的草稿直接发布。

项目前怎么用这个练习

这个练习可以帮你准备低风险小单，例如修改静态页面、整理落地页文案、做简单组件、修复样式问题。你回复客户时，可以说明自己先做诊断，再确认范围，而不是直接承诺复杂功能。

如果客户要求你登录他的 CMS、部署平台、GitHub 仓库或域名后台，把授权事项写成明日待办。客户侧授权完成前，不要把任务范围写成已经可交付。

风险提醒

不要把第一个网页练习包装成完整商业系统。不要承诺转化率、收入或搜索排名结果。不要使用未授权素材，不要复制竞品页面，不要把客户信息放进公开作品集。

如果页面涉及表单收集、支付、登录、用户数据或第三方 API，应该把它从入门练习升级为需要人工审核的项目。

明日待办

• 补充一个真实单页练习的截图和本地构建记录。
• 核对素材来源，确认图片、图标和字体授权。
• 检查部署是否需要 GitHub、Vercel 或域名授权，并写成客户侧待办。
• 准备一份作品集发布前审核清单，先保持草稿不公开。

可以继续看的内容

• Codex 工具页
• 项目报价助手
• 模板下载

免责声明

本文仅供学习和作品集准备参考，不构成职业、法律或财务建议。涉及客户项目、素材授权、部署账号和平台规则时，需要人工审核和明确授权。

CTA：你可以先用 模板下载 整理页面需求，再用 Proposal 生成器 把第一个网页练习改写成低风险项目范围。