注册
ChatGPTCodex

用 Codex 从零做一个网页：说清技术栈和产出、可附截图参考、让它启动开发服务器，再小步迭代，附 4 段提示词

怎么用 Codex 做一个前端网页？官方提示指南的做法是先说清技术栈和产出（页面、小组件、带运行说明的 README），可以附上截图当参考，让它启动开发服务器并告诉你本地地址，之后每次只提一两个具体修改。本文给 4 段提示词和排查表。

NNathaniel bigo··原创首发·AI 辅助撰写
7 分钟读完
资料核对于 2026-11-05 · 依据官方文档与公开资料整理 Plus 账号
本文根据 Codex 官方文档《Prompting Codex》整理，资料核对于 2026-11-05。配图为本站整理的示意图，不是软件截图。本站（bigolab.com）不是 OpenAI 官方网站。安装与配置见 /guides/codex-getting-started，第一次使用的流程见 /guides/codex-first-day-from-signup-to-first-task，本文只讲做网页。

适用于谁

  • 想做个人主页、活动页、产品介绍页，但不会写前端的人；
  • 有设计稿或参考截图，想快速做出可点击页面的人；
  • 想先做原型，再决定要不要认真开发的人。

结论先说

  1. 先说清技术栈和产出。 官方示例里的说法是：指定 React、Vite、Tailwind、TypeScript 之类的技术栈，列出要产出的页面或路由、小组件，以及带运行说明的 README。示例只是示例，你可以换成自己熟悉的。
  2. 有参考图就附上。 官方示例支持附截图，并要求对齐间距、字体和布局。命令行里把图片文件拖进终端即可，IDE 里可以拖拽或粘贴。
  3. 图里看不出来的行为要写出来，比如悬停效果、表单校验、键盘操作。
  4. 让它启动开发服务器，并告诉你本地地址或路由。 这是官方示例里的验证办法。
  5. 之后小步迭代。 官方的做法是另开一个终端运行开发服务器，每次提两三个具体的样式改进，选一个方向再细化；满意的提交，不满意的回退。

用 Codex 做一个网页的流程：说清技术栈、给参考、列出产出、启动开发服务器、小步迭代

图：本站根据 Codex 官方文档《Prompting Codex》 整理的示意图

一、动手前：先想清楚这几件事

  • 页面是做什么的：个人简历？活动报名？产品介绍？一句话写下来；
  • 有几个页面、每个页面有什么内容：先画个草图或列提纲，字写在纸上也行；
  • 有没有参考：喜欢的网页的截图，或你自己画的草图；
  • 技术栈：不懂就写“选最常见、容易上手的方案，并解释你的选择”；
  • 文案和图片：用你自己的，别让它随便编造公司介绍、客户评价或数据。

在一个空文件夹里启动 Codex，让它在里面创建项目，这样不会改到其他项目。

二、4 段可以直接复制的提示词

方括号里是要你自己填的内容。

1. 从文字描述开始

请在当前空目录里创建一个静态的展示网页，用 [React + Vite + Tailwind + TypeScript]（不熟悉的话请选最常见的方案并说明理由）。
页面内容：[个人介绍 / 产品介绍 / 活动报名]，包括：顶部导航、首屏标题和一句话介绍、3 个特色卡片、联系方式区。
文案先用占位文字，我之后替换。要求在手机和电脑上都能正常显示。
产出：首页、需要的小组件，以及一个 README，写明怎么安装依赖和启动。
完成后启动开发服务器，告诉我本地地址。

2. 从截图开始

先把截图保存到本地，再附加给 Codex。

附上的是我想参考的页面截图。请做一个类似的页面，技术栈用 [ ]，对齐它的间距、字体大小和整体布局，但文案和图片全部用占位内容，不要复制原页面的文字或图片。
截图里看不出来的行为：[按钮悬停变色；表单必须填写邮箱；移动端导航折叠成菜单]。
产出：一个页面、几个小组件、README。启动开发服务器并告诉我本地地址。

不要拿别人的网站内容直接复刻上线。参考布局可以，文字、图片、品牌元素有版权和商标问题。

3. 小步迭代样式

先另开一个终端运行 npm run dev（项目里的启动命令以 README 为准），在浏览器里看着页面，再对 Codex 说：

请对首页的顶部区域提出 3 种样式改进思路，先不要改文件，每种用两句话描述效果。

选定一种之后：

采用第 2 种。请只改顶部导航：背景改为白色，加细的底部分割线，链接悬停时显示下划线。其他部分不要动。

4. 手机端检查

请检查页面在 375px 宽度下的显示：有没有文字溢出、按钮太小、图片变形、横向滚动条。列出你发现的问题和打算怎么改，我确认后再改。

如果你手动改过文件，要告诉它，免得它下一次覆盖。

三、做到一半遇到问题

网页做到一半遇到的情况：页面打不开、要执行陌生命令、改乱了样式、手动改过文件、想上线

图：本站根据 Codex 官方文档《Prompting Codex》 整理的示意图

  • 启动开发服务器需要批准：官方说明 Codex 在本地沙箱中运行命令，限制文件和网络访问，超出范围会按你的审批策略询问。看清命令再批准，权限说明见 /guides/codex-permissions-sandbox；
  • 安装依赖失败：把终端报错完整复制给它，按 /guides/codex-fix-bug-error-repro-prompt 的方法说明；
  • 改着改着乱了：用 Git 回退到上一个满意的状态，再用更小的要求重新来；建议每个满意的阶段都提交一次；
  • 上线之前：自己检查依赖来源、页面里有没有测试用的内容、有没有放进不该公开的信息；托管方式和域名备案等要求不在本文范围，以服务商和当地规定为准。

四、做网页时容易忽略的几件事

下面是常见经验，不是官方清单：

  • 图片和字体的来源：用自己拍的、自己做的，或确认可商用的素材；别让它凭空“找”一张图，也别用来历不明的字体；
  • 表单：做报名、留言表单时，要想清楚数据发到哪里。纯前端页面本身不会保存数据，需要后端或第三方表单服务，这一步最好单独讨论并由你拍板；
  • 文案真实：不要让它编造客户评价、获奖、数据，页面公开后这些都要你负责；
  • 搜索与分享：标题、描述、分享图是否填写，可以最后让它统一检查一遍；
  • 可访问性：对比度、图片替代文字、键盘能否操作，可以让它按这些点逐条检查，再由你确认。

做完一轮之后，建议让它写一份简短的说明：项目用了哪些依赖，页面怎么构建，哪些地方是占位内容待替换。这样隔一段时间回来，或交给别人维护，都不会不知所措。

常见问题

Q：完全不会前端，能做出来吗？

能做出简单页面。关键是你要会看效果、会用具体的话提修改意见；出了问题时，把报错完整贴给它。

Q：做出来的页面能直接给别人用吗？

先自己检查代码和内容。AI 生成的页面可能有无障碍、性能和安全方面的问题，正式使用前需要有人审查。

Q：一次对话越来越慢怎么办？

会话变长后可以开新对话，并让它先读一遍 README 和 AGENTS.md，命令参考 /guides/codex-cli-commands-cheatsheet。

Q：Codex 要花钱吗？

Codex 随 ChatGPT 套餐提供，具体额度以官方页面为准，额度规则见 /guides/codex-usage-limits，需要更多额度可以看看 /chongzhi/chatgpt-plus 里的说明。

参考资料

  • Codex 官方文档：Prompting Codex — https://learn.chatgpt.com/docs/prompting

Nathaniel 的更多内容

  1. 01

    Claude Code 在 Windows 上的常见坑：Git Bash 还是 PowerShell、路径反斜杠、假报错、WSL 怎么选

    Windows 上用 Claude Code，装好之后最容易踩的是：用哪个 shell、路径写法不一致、grep 没匹配就报错、钩子没生效、WSL 和原生怎么选。本文逐条按官方文档整理原因和处理办法，附三段提示词和一张对照表。

    Claude0
  2. 02

    Claude Code Hooks 实战「提交前自动跑测试」：PreToolUse 拦住 git commit，测试不过就退出码 2，附 Windows 注意点

    只写一个完整例子：让 Claude Code 每次要执行 git commit 之前，先自动跑项目测试，没通过就拦下并把输出交给它修。本文按官方 Hooks 文档给出脚本、settings.json 配置、测试方法、排错和 Windows 的两处坑。

    Claude0
  3. 03

    Claude Code 自定义斜杠命令与 Skill 实战：从零写一个「生成更新日志」的 /release-notes，含传参、预执行命令和调试

    概念看过了，还是不知道从哪下手？本文按 Claude Code 官方「Extend Claude with skills」写一个完整可用的例子：用 /release-notes 根据 git 记录生成更新日志，覆盖目录、frontmatter、传参、预执行命令、预授权和调试。

    Claude0
  4. 04

    Claude Code 部署网站：先写 Dockerfile 和 compose 在本机跑通，再按清单上云服务器，别让它直接改线上

    想让 Claude Code 帮你把网站部署到云服务器。本文只写通用做法，按 Docker 官方文档讲：让它写 Dockerfile、.dockerignore 和 compose，在本机跑通，端口和数据卷怎么设，再给出上线清单，并说明为什么不要让它直接动线上机器。

    Claude0
  5. 05

    Claude Code 写爬虫与数据清洗：先查 robots.txt 和网站条款，控制频率，原始数据留一份再清洗

    想让 Claude Code 写爬虫抓数据再清洗。本文先讲合规：robots.txt 不是授权也不是安全措施、网站条款要自己读；再讲怎么用 Python 标准库检查规则、小样本先试、保存原始数据，以及用 pandas 清洗，附四段提示词。

    Claude0
  6. 06

    Claude Code 写 Chrome 扩展：按 Manifest V3 起步，加载未打包的扩展，改了哪些文件要重新加载

    想让 Claude Code 帮你写一个 Chrome 扩展。本文按 Chrome 官方扩展文档讲：manifest.json 的最小写法、在 chrome://extensions 加载未打包的扩展、哪些改动要刷新、怎么看控制台和报错，再给四段提示词，以及权限要尽量少。

    Claude0

同产品的其他教程

  1. 01

    OpenAI API 的 token 怎么算、怎么估算费用：input_tokens 计数接口、tiktoken 和隐藏的输出 token

    发请求前想知道会用多少 token？官方有 Responses 的 input_tokens 计数接口，能把文字、图片、文件、工具定义一起算准；本地 tiktoken 只适合纯文本。本文给 Python 和 Node 示例，讲输出 token 为什么可能比看到的多，以及怎么估算费用。

    ChatGPT0
  2. 02

    OpenAI API Node.js / TypeScript 快速上手：npm install openai、example.mjs 第一个请求，到流式、函数调用、联网搜索

    用 Node.js 调 OpenAI API：设置 OPENAI_API_KEY 环境变量，npm install openai，新建 example.mjs，用 client.responses.create 发出第一个请求。并列出图片、文件、流式、函数调用、联网搜索和错误捕获的 Node 写法。

    ChatGPT0
  3. 03

    OpenAI API 用量层级（usage tiers）与速率限制怎么提升：Free、Build、Launch、Grow 和后台 Limits 页

    OpenAI API 的限速不是固定的：官方按累计购买额度把组织分成 Free、Build、Launch、Grow 四个层级，达到门槛自动升级。本文讲 RPM、TPM 等指标、怎么在后台查自己的限额、响应头怎么读、花费上限和限速的区别，以及怎么让限额变得够用。

    ChatGPT0
  4. 04

    OpenAI API 报错 400、401、403、404、429、500、503 怎么排查：按官方错误码页逐个看原因和解决办法

    调用 OpenAI API 返回 400、401、403、404、429、500、503，各自什么意思？本文按官方 Error codes 页，每个状态码一节，写清官方给的原因和解决办法，并说明 404 在官方页面里的位置、429 的六种情形，附 Python 和 Node 的错误捕获写法。

    ChatGPT0
  5. 05

    OpenAI Realtime API 是什么：语音到语音会话、WebRTC 与 WebSocket、临时密钥和事件机制

    Realtime API 让模型直接处理音频，做可以随时打断的语音助手。本文按官方文档讲它是什么、什么时候用、浏览器接入的流程、session 与事件、可用声音、60 分钟会话上限、安全标识，以及它和转写、文字转语音的分工。

    ChatGPT0
  6. 06

    OpenAI 图像生成 API 怎么用：gpt-image 系列、images.generate 与 Responses 工具、尺寸质量和遮罩编辑

    用 OpenAI API 生成或编辑图片，有 Image API 和 Responses 里的 image_generation 工具两条路。本文按官方文档给 Python 和 Node 示例，讲 gpt-image 模型选择、尺寸质量格式参数、遮罩编辑、被拦截时的错误处理，以及需要组织验证的提醒。

    ChatGPT0

0 条评论

登录 后参与评论

还没有评论，来抢沙发～