用 Codex 做网站，最崩溃的不是写不出来，而是做出来了却没法用：页面漂亮、按钮能点，一上线就报错、白屏、手机排版乱套，网站还一股浓浓的 AI 味。AI 省了写代码的时间，填坑的时间又全搭进去了。下面 5 个地方最容易翻车，每个都讲三件事：哪里翻车、怎么躲、有现成工具直接抄。
01｜一上线就崩
Codex 是在你的电脑上干活的。它说成功了，意思是在你电脑上成功了。网站上线后跑在另一台机器上，那台机器只拿到你传上去的代码，你电脑里的设置和密钥它都没有，大部分部署问题都出在这里。最常见的 4 种翻车：构建失败，线上环境比你的电脑严格，有时只是文件名大小写没对上就会卡住，把报错日志整段发给 Codex，让它查具体原因，别急着推倒重做。
页面能打开，但 AI 不回复、数据出不来，多半是密钥等配置还留在你电脑里，没填到线上。让 Codex 列出要补哪些配置、去哪里填，填好后要重新部署，光刷新页面没用。注意：密钥别贴进公开代码，也别出现在截图里。
你能打开、别人打不开，常见原因是代码里写死了 localhost，在你那里它指你的电脑，在别人那里就指别人的电脑。让 Codex 全局搜一遍 localhost，改成线上地址。绑了域名还是打不开，或者提示不安全，域名设置改完要等一段时间才生效，安全证书也要等它签下来，先等一等再试；还不行，把域名后台的截图发给 Codex，让它帮你核对哪里填错了。
躲开大部分坑就 3 招：第一天就上线，做一个只有网站名字的页面，传上去，用手机流量打开，之后每加一个功能就上线一次，哪一步出问题一眼就知道；上传前先在本地模拟上线一次，直接跟 Codex 说，上传前先在本地跑一遍上线用的构建命令，确认没有报错；展示类网站别自己买服务器，作品集、介绍页用 Vercel 或 Cloudflare Pages，连上 GitHub 就自动上线，自己的服务器关个终端、重启一次，网站就可能没了。
可以抄的作业是 Vercel Templates，里面有博客、作品集、产品介绍页等项目模板。挑一个接近自己需求的，先按说明部署，再让 Codex 改内容和功能。第一版尽量选简单的，只是做个介绍页，就别挑带登录、数据库和支付的整套系统，配置越多，排查越费劲。把模板链接交给 Codex，可以这样说：帮我判断这个模板是否适合我的需求，需要注册哪些服务、填写哪些配置。先指导我把原版部署成功，再逐步修改，每次只做一个能检查的改动。
Vercel Templates：
02｜一股 AI 味
你只说做个好看的网站，它就给你最常见的那种好看。它不知道你的用户是谁，只能取平均值；你不要求，它也不会拿手机看一眼效果。紫蓝渐变、半透明卡片、emoji 图标、高效·智能·安全，灰色小字一大片，每处都没错，合起来就是模板，访客第一眼就不太信。到了手机上就乱：导航挤成好几行，卡片压成窄条，表格跑出屏幕。越改越像另一个模板：你说整体再好看一点，它就推翻重来。
3 招让它少一点 AI 味：给参照，别给形容词，像某某官网首页那样克制比要有高级感管用得多；写清楚不要什么，比如不要渐变背景，只用一个主色，正文不小于 16px，不用 emoji 当图标；先定第一屏放什么，再调样式，访客一打开先看到什么、哪些可以删，想清楚了页面才有主次。一次只改一处，话要具体：标题再大一级，下面那行灰字删掉。手机效果让 Codex 按手机宽度截图自查，它做不到的话，你用手机打开，截图发给它。
可以抄的作业：Lapa Ninja 找整站参考，可以按网站用途、风格和颜色浏览，做 AI 工具介绍页就找相近的产品页面，做个人作品集就看作品集，先选内容结构合适的，再看配色和动效；Siteinspire 看排版和留白，想做得干净、克制，可以从 Minimal 等分类里找，重点看标题有多大、一屏放多少信息、段落之间留多少空白；Mobbin 看具体功能怎么排，做记账工具、管理后台时，光参考首页不够，登录、表单、设置、空白页面怎么安排，可以在这里看真实产品的页面和操作流程，完整访问有付费方案；Realtime Colors 把配色放进网页里试，几块颜色单独看挺好，放进网页却未必协调，这个工具能直接预览颜色和字体在页面上的效果，选好后再把配置交给 Codex。最省事的用法：找一个参考站，截下电脑和手机页面，指出具体想学哪里，别一次扔十张风格不同的图，让它自己猜。
Lapa Ninja：
Siteinspire：
Mobbin：
Realtime Colors：
https://www.realtimecolors.com/
03｜做的不是你要的
一句话需求里，大部分信息还在你脑子里。谁用、最常做什么、哪些不要，它只能猜，猜的依据是同类网站一般都有什么。最常见的翻车就两种：做多了，你只想要一个随手记账的页面，它给你做了注册登录、饼图、月报，返工删功能，代码里留下一堆用不上的东西，开工前就告诉它明确不做什么；越改越偏，改到第五轮，它忘了你第一轮说过不要数据库，又给你加了一个，把这类长期规矩写进项目里的 AGENTS.md 文件，Codex 每次开工都会先读它。
3 招让它少跑偏：动手前写 5 行需求，比来回聊天省事；先让它复述、提问，再写代码，它问出来的，往往就是你漏写的；一轮只做一件事，先做能记一笔，确认没问题再做本月合计，跑偏也只偏一小步。5 行需求这样填：谁用、最常做的一件事、第一版必须有、明确不做、做到什么程度算完成。再补一句：先别写代码，复述我的需求，把会影响实现方案的问题问清楚，确认后整理成项目文档，后续修改以这份文档为准。
项目复杂了，可以再看 GitHub Spec Kit，它提供围绕需求规格组织开发的工具和流程。只做一个小页面，先把上面五行写清楚就够了。
GitHub Spec Kit：
https://github.com/github/spec-kit
04｜功能跟不上需求
本地小工具默认只有你一个人用、电脑一直开着、数据就在旁边。想随时打开，或者发给别人用，这三件事就都不成立了。最常见的 4 种翻车：上线后数据读不到、存不住，表格和数据文件在你电脑上，线上读不到，Vercel 这类平台也不会保留写到本地的文件，让 Codex 把数据挪到线上存储；拿到网址的人都能进，你的数据谁都能看，甚至能改，自己用就加一道访问密码，给别人用就要做登录；定时任务停了，每天 8 点自动更新，靠的是你的电脑开着，合上笔记本就停了，让 Codex 改用 Vercel 的 Cron Jobs 或 GitHub Actions 定时跑；账单被人刷，网页里调了 AI 接口，密钥写在前端代码里，被人扒走以后刷的是你的钱，让 Codex 把密钥挪到服务端，你再去接口平台后台设一个月度消费上限。
先问一句：这东西到底谁用？只有你，坐在电脑前用，不一定要上线，可以把它封装成 Codex 的 Skill 或一个固定命令，需要时调一次，上面 4 个坑都碰不到；你自己用，但要随时打开，上线，加访问密码，数据挪到云上；给别人用，登录、数据隔离、消费上限都要做，这时它已经算一个产品了。
可以抄的作业是 Supabase，提供数据库、用户登录和文件存储等能力，做需要多设备同步、多人使用的小工具时，可以让 Codex 接入。不过，接好登录还得检查数据权限，不能甲用户换个请求参数，就能看见乙用户的记录。交给 Codex 时，把验收要求一起写上：请先判断我的项目是否需要 Supabase，需要用到哪些功能。接入后，用两个测试账号检查：各自能保存、查看自己的数据，但不能读取或修改对方的数据，列出实际检查结果。
Supabase：
05｜做出来没人用
AI 把做网站变便宜了，找用户这件事它帮不上忙。很多人把时间都花在加功能、调样式上，留给谁会用的时间几乎是零。网站上线，链接发出去，几个朋友说挺好，然后就没有然后了，访问量每天个位数。以前做不出来还能怪技术，现在一个周末就做完了，没人用就只剩一个问题：到底有没有人需要它。
3 招先确认有人要：先找人，再做功能，动手前，能说出 3 个具体会用它的人，或者一个具体的群、一条具体的求助帖；第一版可以很丑，一个介绍页加一个表单，看有没有人留联系方式，比做完一整套系统更早知道答案；能手动的先手动，确定有人要了，再让 Codex 把这一步自动化。
可以抄的作业：Tally 做报名和反馈表单，先用表单收集需求、试用报名或联系方式，重点问对方现在怎么解决、哪里最麻烦、是否愿意试用，别只问你觉得这个想法好吗；Microsoft Clarity 看访客卡在哪里，网站有了访客之后，可以用热力图和会话回放，观察他们点哪里、在哪里停住、有没有找到主要按钮。它会记录访客操作，网站隐私说明里要写清楚，有欧洲访客的话，还要先征得同意。有人来却用不下去，再查页面和流程；还没人来，就先去找第一批愿意试的人。
Tally：
Microsoft Clarity：
https://clarity.microsoft.com/
更省事的顺序是：写 5 行需求，想清楚谁用、用来干嘛；第一天就上线一个空页面，手机能打开；只做最核心的一个功能，做一点、上线一点；功能稳了再调设计，找参照、写清楚不要什么、用手机看；要长期用或给别人用，再处理数据、登录和消费上限；找第一批用户从第 1 步就开始。5 份作业不用一次抄完，先用上一两个就够了。如果今天只做一件事：让 Codex 生成一个只写着网站名字的页面，传到 Vercel 或 Cloudflare Pages，用手机流量打开。这一步走通，后面再出问题，至少知道该往哪里查。