用 Codex 从零做一个网站：不写代码，几句提示词搞定

你是不是也遇到过这种情况——想做一个小工具、小网站，可一想到要装一大堆环境、插件、配置，还要面对密密麻麻、根本看不懂的代码界面，就直接放弃了？

如果你想入门 Vibecoding，Codex 真的是现在新手最合适的工具。不用自己装那些乱七八糟的环境，也不用看懂任何代码——你只要会说话，就能让 Codex 做出你想要的工具或网站。

这期就用 Codex 这一个软件，从零做一个真实的小网站：不懂代码、不会设计、不用装一堆软件，全程只靠几句提示词。

本期教程只用到一个核心工具 Codex，外加上线环节会用到的两个平台，提前了解一下：

安装并登录 Codex

如果你还没装 Codex，直接去 Codex 官网 点下载，然后用 ChatGPT 账号登录一下。包括免费用户在内都有额度，可以直接上手。

具体怎么下载、怎么接入，可以另外找讲得细的教程参考，这里不展开。

建项目、开启 Plan 模式

装好之后就正式开始：

1. 在左边新建项目，选一个文件夹——这个文件夹就是这次做东西的大本营，后面所有代码、文件全都存在这儿。
2. 如果有一些资料，比如门店信息、饰品图片之类的，就单独建一个资源文件夹，都存进来。
3. 进到对话框，点击加号，开启计划模式（Plan Mode）。

这次我们不演示笔记、todo 这种例子，直接做一个真实需求：

有个朋友平时喜欢做手作饰品，一直想弄一个属于自己的小网站，把作品都摆出来，让喜欢的人能直接找她下单。她不会写代码、也不会做设计——这种需求用 Codex 手搓出来一点都不复杂，差不多半小时就能搞定。

整个过程就四步：梳理需求 → 写 PRD → 让它开发 → 上线发布。每一步我都会给一个固定格式的提示词，不管你想做什么产品，都能套用这套方法和 AI 沟通。

别只甩一句话

很多新手上来就甩一句「帮我做个网站」，这话太空了，AI 只能靠猜。你得把需求拆成几块、一块一块说：

对 AI 说：

第一，我想做一个什么：我想做一个展示我自己手作饰品的小网站。

第二，给谁用、解决什么问题：给我自己用。我平时做手作饰品，想有个网页把作品摆出来给别人看，让喜欢的人能找我下单。

第三，有哪些功能：
① 一个首页，放一段简短的自我介绍；
② 一块作品展示区，按耳环、项链、手链分类，把饰品图片摆出来；
③ 每件作品下面能写上名字、简单介绍和价格；
④ 留一个联系方式或者下单入口。

第四，图片部分先空出来用占位符。

以上是我目前想到的，你看看有没有我没考虑到的，先跟我确认，别急着动手。

拆成这几块以后，AI 就知道往哪几个方向理解。比起一句话让它瞎写代码，这种结构化的需求才是驱动 AI Vibecoding 的正确姿势。

最后一句话最关键：让它反向确认

提示词最后那句「先跟我确认，别急着动手」对新手特别重要。如果你没有产品设计经验，提需求时脑子里想的往往只是个大概，很多细节根本想不全。

让它先帮你反向确认，它会反过来补充那些你压根没想到的问题，比如：

• 饰品要不要分类？耳环、项链、手链分开放吗？
• 每件作品下面要不要标价格？
• 联系方式是留微信，还是放个表单让人填？
• 作品图是你自己拍好的，还是要我帮你生成？
• 整个网站想走什么风格，清新还是高级？

照着它问的一条条回就行：按耳环 / 项链 / 手链分类、每件都标价、先留联系方式。这样一轮下来，需求就齐了。

需求聊清楚了，第二步把它落实成一份文档，叫 PRD（产品需求文档）——后面 AI 就照着这份文档干活，不容易跑偏。

直接把下面这段发给它：

对 AI 说：

把咱们刚才聊清楚的需求，整理成一份产品需求文档 PRD.md，存到项目里，包含这几块：

第一，产品概述：一句话说清这是个啥、解决什么问题；

第二，功能清单：把核心功能一条条列出来，标上优先级；

第三，页面结构：有哪几个页面、各自的功能是什么；

第四，数据怎么存，给一个方案。

整个产品用网页来实现，不要写复杂逻辑。写完先别动代码，我看一眼再说。

等它写好 PRD，你扫一眼就行——看不懂没关系，这份文件是用来规范它写代码的，有了 PRD 它做出来的东西才不会跑偏。

需求和 PRD 都对齐了，第三步让它开发。直接发这句：

对 AI 说：

就照这份 PRD 来实现，开始工作。

然后它就开始写代码了，整个过程你不用管，等着就行。

• 如果弹出授权弹框，全都选允许；
• 或者直接把模式改成自动审批，更省心。

做完它会给你一个本地预览链接，点一下，第一版就出来了。

先给你打个预防针

第一版几乎不可能一次就对，这太正常了。 前面说得再清楚，AI 也没法百分百猜中你脑子里那个样子。

所以你看到第一版有点丑、有点不对劲，别慌——这不是你搞砸了，也不是 AI 不行。接下来要做的，就是去修改它。

这也是我觉得 Codex 最好用的功能之一：圈选批注。

你在预览页面上，直接把想改的那块圈出来，然后在旁边写上你的意见。比如：

• 嫌标题字太普通、配不上手作的精致感 → 把标题一圈，写「标题换一个更秀气、更有质感的字体」；
• 觉得展示区几件作品挤在一起看着乱 → 把那块一圈，写「每件作品之间的间距拉大一点，看着松快、高级些」。

多改几轮，整个页面的排版、配色就慢慢和你想要的那个样子对上了。

圈选 + 一句话意见，比纯文字描述「第几个模块怎么改」精准得多，这是 Codex 改页面最高效的方式。

排版改顺了，你会发现这个手作饰品网站还差最关键的一样东西——图。展示区现在全是占位图。

你手上可能只有实拍的视频或照片，但想要模特图该怎么办？放以前你得去找模特、拍照、修图，要么上网扒图又怕版权，尺寸、风格还对不上。

但 Codex 直接内置了强大的 image 生图模型。网站哪儿缺图，跟它说一句，它当场就给你生成，还能直接贴到页面对应的位置上。

对 AI 说：

帮我生成 3 张饰品展示图：

模特是一位长发、淡妆的年轻女生。
第一张戴耳环，拍侧脸耳朵的特写；
第二张戴项链，拍脖子到锁骨这一段；
第三张戴手链，拍手腕的近景。

背景统一用浅米色纯色，光线柔和，整体风格清新自然一点。

把要求一条条讲清楚，它就照着把饰品搭在模特身上的图一张张生成出来，再直接贴到展示区。

这么一来：不用找图、不担心版权、生出来的几张图风格还统一，整个网站一下就有那味儿了，看着特别像那么回事。

改到这儿，一个又好看、内容又齐全的手作饰品网站就成型了。从头点一遍：首页的自我介绍、展示区里分好类的作品图、每件作品下面的价格和联系方式，挨个看一遍，没什么问题了。

结束了吗？还没有。这网站是在 Codex 里做出来的，可你这是要给别人看的。所以第四步，上线分享——让它变成一个发个链接谁都能打开的网站。

Codex 内置了 GitHub 插件，可以直接把代码上传到 GitHub，再部署到 Vercel。把下面这段发给它：

对 AI 说：

1. 我现在需要把代码上传到 GitHub，并准备把项目通过 Vercel 或其他发布平台进行部署；

2. 帮我完成 GitHub 发布操作，如果需要我来操作，告诉我每一步应该做什么；

3. 如何发布到 Vercel，也告诉我具体的详细操作。

它就会帮你准备好发布需要的步骤，如果你卡住了，它也会教你怎么处理。

更详细的上线流程可以参考 GitHub + Vercel 上线发布的教程。总之，和 AI 有关的问题，直接去问 AI 就能很快解决。

以上就是用 Codex 从零做一个小网站的全套流程。最后快速回顾一下：

不需要任何产品设计技巧，也不用写一行代码，只靠几句提示词，你就能做出一个又好看、又能发给别人看的网站。按照这套步骤，你也可以手搓出自己想要的那个东西。其实 Codex 能干的远不止做小工具——帮你做 PPT、处理数据、做表格都行，这些后面会一期期单独讲。