前言
Codex 是 OpenAI 推出的一款 AI Agent 工具，能够通过自然语言对话协助你完成网页搭建、图片处理等任务。对于完全没有编程基础的普通用户来说，「做个网站」这件事的门槛似乎高不可攀——但实际只需要掌握正确的交互方法，零基础也能做出功能完整、视觉美观的网页。
本文介绍的三步走方法论，经过实战验证（原作者凭借此方法在 ClawHunt 建站比赛中夺冠），可复制、易上手，适合任何想用 Codex 建站的初学者。
为什么很多人用 Codex 建站会失败？
大多数初学者的第一直觉，是直接输入类似「帮我做一个宠物网站」这样的指令。结果往往是：AI 生成一个看似像样但完全不符合预期的模板，你开始反复修改，Prompt 越写越长、越改越模糊，最后改不下去就放弃了。
问题不在于 AI 不够聪明，而是初始信息严重不足。AI 不知道：
- 你的目标用户是谁？
- 网站需要哪些核心功能？
- 偏好的视觉风格是什么？
- 素材从哪里来？需要几个页面？
一套高效的建站方法，必须要解决这个「信息缺口」。
三步走方法论
整体思路是一个信息流动链：架构信息 → 视觉语言 → 素材整合。每一步的输出，都是下一步的输入。下面逐一展开。
第一步：让 AI 反问问题——先用「需求挖掘式 Prompt」完善架构
为什么 AI 需要先问你问题？
在 Prompt Engineering 的语境中，有一个概念叫 需求挖掘式 Prompt（Requirement Elicitation Prompt）。其原理很简单：LLM 在接到模糊指令时，会依据训练数据中「最常见的情况」来填补缺失信息。比如你说「做个宠物网站」，AI 可能默认你要的是宠物电商平台，而你实际想要的是宠物知识分享社群。
这种「脑补式补全」是 AI 输出不稳定的根源。解法也很直接：把信息补全的主权交给 AI——让它先列出需要知道的关键问题，你负责回答，信息齐了再开工。
具体操作流程
-
给 Codex 一个「先反问再动手」的指令，例如：
「我要用 Codex 做一个网站，请先提出 8-10 个关于这个项目最重要的问题，帮助你完全理解我的需求，问完后再开始建站。」
-
Codex 会列出针对性问题，通常涵盖：
- 目标用户是谁？核心功能是什么？
- 视觉风格偏好？（简约 / 活泼 / 商务）
- 需要几个页面？是否需要搜索或筛选功能？
- 有现成的文案和图片素材吗？
- 网站的核心卖点或差异化是什么？
-
逐一回答后，这些问答记录会成为后续对话的上下文基础，Codex 后续所有生成都基于这个完整框架运作。
-
确认无误后，告诉 Codex：「基于以上信息，开始建立网站的整理架构和第一个页面。」
这一步的核心价值
这套做法的本质，是把「信息收集」从用户的负担转交给 AI，大幅降低认知负荷。你不需要懂复杂的 Prompt 语法，只需要能够回答 AI 的问题，就已经完成了最难的一步——准确定义你想要的东西。
第二步：用视觉参考代替文字描述，然后结构化搭建
用截图说话
文字描述设计的模糊性极高。与其写「我想要大量留白、卡片式布局、暗色 Header、无衬线字体、大地色系」——不如直接贴一张你喜欢的设计参考图。
Codex 具备多模态能力，可以直接分析上传图片中的：
- 布局结构：Header / Footer 位置、卡片排列方式
- 色彩系统：主色、副色、背景色的搭配比例
- 字体风格：字重层次、字号感
- 空白感：元素密度、页面「呼吸感」
- 交互暗示：按钮形状、卡片边框、Hover 效果
设计是一门视觉语言，图片传达的信息维度远超文字。
逻辑匹配：视觉不能脱离功能
选取视觉参考时，需要确保设计元素与第一步确定的架构相匹配。比如你的网站需要展示大量图片卡片，就不要选以文字为主的博客式设计当参考。
实操中，在上传参考图的同时告诉 Codex：「这个 Cards 区域对应我网站的列表功能，Header 对应 Logo 和导航需求，在参考风格的同时，功能模块请与之前确认的架构完全对应。」这样 AI 就不会纯粹「复制样式」，而是在理解语境的条件下做视觉转化。
结构化搭建：先骨架、再内容、最后样式
产出 HTML 的顺序很重要：
- 先建语义骨架：
<header>、<main>、各<section>、<footer>，确立信息层次 - 骨架确认后再填内容：Hero 区、Cards 区、导航栏、搜索筛选区等
- 最后套 CSS：参照视觉参考的色彩和排版赋予完整面貌
这种分步方式的优势是：每一轮输出都可以独立检视和修正，是渐进精化的思路——每次让网页向目标靠近一步，而非赌一次完美输出。
第三步：图片批量处理与卡片分类设计
当网站需要展示大量图片时（以宠物平台 PetScope 为例，涉及数十只宠物的照片），常见的翻车点包括：比例不一致导致卡片参差不齐、路径写错显示空白、原始图片过大拖慢加载、逐一手动添加效率低且易出错。
批量处理的正确姿势
- 提前准备好所有图片素材，统一命名规范（如
pet-001.jpg、pet-002.jpg） - 给 Codex 一个批量指令：
「使用以下图片列表，为每张图生成对应的卡片组件，统一采用 1:1 的
aspect-ratio，使用object-fit: cover确保填满且不变形，应用统一的 CSS 类名规范……」 - Codex 批量生成所有卡片的 HTML 组件，你只需要确认渲染效果
- 可进一步要求添加
loading="lazy"属性，优化加载性能
核心思维是 DRY 原则（Don’t Repeat Yourself）：定义一次卡片模板，让 AI 批量生成任意数量实例，一致性和效率都远超人工。
卡片分类的设计建议
- 按属性分类：按宠物类型（猫 / 狗 / 鸟 / 鱼）设置 Tab 分类栏，或添加标签（品种 / 年龄 / 性格），提升「可发现性」
- 视觉层次分类：设置「精选展示区」使用较大卡片，下方「全部列表」使用均匀网格，主次分明
- 响应式网格：使用 CSS Grid 搭配
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))实现自适应，桌面 3-4 列、平板 2 列、手机 1 列 - Hover 交互：为卡片添加
transform: scale(1.03)配合transition，让静态页面有基本交互感
实操案例：从零搭建一个博客网站
光讲方法论可能还是比较抽象。这里以我自己的博客网站 404hto-0.asia 为例，完整走一遍「三步走」流程。全程零手写代码，只用 Codex 对话完成。
第一步：需求挖掘——让 Codex 先问问题
我给 Codex 的第一句话是：
「我要用 Codex 做一个个人博客网站，请先提出 8-10 个关于这个项目最重要的问题，帮助你完全理解我的需求，问完后再开始建站。」
Codex 追问的关键问题包括：
- 博客面向什么类型的读者？需要什么功能？
- 需要几个页面？（首页 / 文章列表 / 关于页等）
- 需要评论功能吗？需要 RSS 订阅吗？
- 文章的分类和标签体系是怎样的？
- 偏好的视觉风格？（极简 / 技术感 / 温暖文艺等）
我的回答大致是：面向技术爱好者，需要首页展示文章列表、文章内页支持代码高亮、一个关于页；不需要评论功能，视觉走极简暗色风格。回答完毕后，架构就已经定下来了，后面所有工作都在这个框架内推进。
第二步：视觉参考 + 结构化搭建
我没有用文字描述设计，而是在 Pinterest 上找了几张极简色博客的截图上传给 Codex，同时说明：
「这个参考图的 Header 对应我的 Logo 和导航，文章列表区域对应我的首页主体，整体风格以浅色背景 + 浅色文字为主。在参考风格的同时，功能模块请与之前确认的架构完全对应。（还做了环绕动效和光标追踪，这一块是自己打磨优化的）」
Codex 分三步产出：
- 先建 HTML 语义骨架：
header（导航栏）→main（文章列表区）→footer - 骨架确认后填入内容区块：文章卡片、标签筛选栏、代码块样式区域
- 最后套 CSS：暗色背景
#1a1a2e、浅色文字、卡片式文章列表，加上 Hover 微交互
整个过程我反复说「可以，下一步」或「这个区块再大一点」，像在跟一个前端搭档协作。
第三步：内容批量处理与页面生成
博客建站后的难点在于持续更新文章。对于已有的多篇 Markdown 文章，我给 Codex：
「以下是我写的几篇技术博客 Markdown 原文，请为每篇生成对应的文章页面，统一使用之前的暗色主题样式，代码块用深色背景 + 高亮，保持页面风格一致。」
Codex 会逐篇生成文章内页 HTML，我只需要复制粘贴到项目里即可。定义一次风格，批量生成所有页面——生产效率远高于手工迁移。
实操后的体会
整个过程大概花了8h（主要是跟 Codex 反复对话调整细节），最终产出了一个功能完整、视觉统一的博客网站。零基础确实可行，关键就在于：
- 不要急着让 AI 写代码，先让它问够问题
- 用图片代替长篇文字描述，减少沟通误差
- 每轮只调整一个小目标，不要指望一步到位
博客链接：https://www.404hto-0.asia/ ，还有很多动效图片没法展示，欢迎大家参考交流。
快速参考卡片
三步走方法论 · Codex 建站 SOP
STEP 1 ─ 反问式 Prompt
└ 告诉 Codex：「先提出 8-10 个关键问题，再开始建站」
└ 逐一回答，形成完整上下文
STEP 2 ─ 视觉匹配 + 结构化搭建
└ 上传设计参考截图（Dribbble / Pinterest 等）
└ 确保视觉元素与功能架构对应
└ 顺序：HTML 骨架 → 填入内容 → 套 CSS 样式
STEP 3 ─ 图片批量处理
└ 统一命名图片素材
└ 定义卡片模板 + 批量 Prompt 生成所有卡片
└ 使用 aspect-ratio + object-fit: cover 确保一致性
└ 加 loading="lazy" 优化加载性能
适用场景：任何有大量图片展示需求的网站（电商 / 作品集 / 宠物 / 房产）
总结
三步走方法论的核心，并不是什么高深的编程技巧，而是一种与 AI 有效沟通的方式。你不需要懂代码，需要的只是：
- 让 AI 先问问题，而不是你去猜怎么给指令
- 用图片或参考网站代替冗长的文字描述
- 定义一次规则，让 AI 批量执行
这套工作流已经在真实比赛中得到验证，适合任何人复制使用。
参考来源：本文方法论整理自抖音创作者「大白 AI」的 Codex 实操教程三部曲，点击查看原视频。
425
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
