乐于分享
好东西不私藏

OpenAI Codex超详细实操指南:从零开始做出你的网页和App(附卡帕西同款指令)

OpenAI Codex超详细实操指南:从零开始做出你的网页和App(附卡帕西同款指令)

最近Codex的热度直线飙升,社群一直有人催更教程。二月份我写过一篇,但几个月过去,Codex的更新速度堪称爆肝,现在已经是我心中最顶尖的Agent产品之一。今天重新梳理一篇零基础上手指南,用「做一个功能介绍页」和「做一个吃药提醒App」两个真实案例串起全部核心功能。不管你之前有没有用过,跟着走,都能跑通。

特别说明:本文默认你已经有了魔法和ChatGPT账号,这俩需要自行解决。

一、安装与迁移:比搬家还贴心

登录OpenAI Codex官网(https://chatgpt.com/zh-Hans-CN/codex/)下载 Mac/Windows 客户端,用ChatGPT账号登录。额度跟会员挂钩,我日常用100刀/月的会员,200刀额度我留用在Claude那边,轻度使用20刀也能凑合。

登录后会让你选经验,可以直接跳过。最绝的操作在这里:Codex支持从Claude Code和Cowork直接导入所有配置。之前Claude支持导入记忆挖ChatGPT用户,现在Codex直接一键搬家继承你的全部设置,连我都想给它鞠个躬。

二、界面与项目:别把所有东西堆一起

主界面中间是对话区,左边栏分「对话」和「项目」。对话适合零散调研、规划;项目才是主战场。选一个本地文件夹作为项目目录,所有生成的文件都会自动保存进去。

一个项目可以开多条对话,共享文件但记录隔离。千万别把所有事情堆在同一个对话里,上下文污染会很严重。建议:同一方向的任务放同一个项目,具体每件事开新会话推进。前期分类真的很重要,不然到后期找东西能让你抓狂。

三、权限与模型:看不懂弹窗不如全放开

对话框左下角三档权限:

1. 默认权限——任何操作都需审批,最安全。

2. 自动审查——日常开发推荐,删除大量文件等危险操作会拦截。

3. 完全访问——我这种非开发出身的首选,弹窗我也看不懂,不如让它自己搞。

右下角模型选最强的GPT-5.5,推理等级日常开高,遇到真正的硬活再切超高。速度推荐标准,快速模式1.5倍速但消耗2倍token,实际速度差别没那么大,没必要多烧额度。

Codex自带语音输入体验一般,转写要等好几秒,不如直接用豆包语音输入。随时可以在设置→剩余额度查看消耗和刷新时间。

四、修改设置:这一步不能跳过!

打开左下角设置,常规设置里前三个选项务必全部打开;跟进行为改成「引导」,这样中途想插话修改可以直接打断,不用等当前任务跑完。

如果开头忘了导入Claude Code内容,可以在设置里补导入。

重头戏:配置AGENTS.md,这是Codex的分层约束体系,相当于给AI定好规则。在个性化→自定义指令里粘贴全局规则,以后所有对话都会遵守。我给大家准备了卡帕西大神的通用模板,直接复制:

Behavioral guidelines to reduce common LLM coding mistakes.

Tradeoff: These guidelines bias toward caution over speed. For trivial tasks, use judgment.

1. Think Before Coding: 先明确陈述你的假设,不确定就提问,有更简单的方案直接说出来,需求不清晰立刻指出,不闷头瞎做。

2. Simplicity First: 用最少代码解决问题,不加多余功能,不做提前抽象,能写50行绝不写200行,多余代码直接重写。

3. Surgical Changes: 只改必须改的部分,不随便清理无关代码,不重构没出问题的内容,全程匹配项目原有代码风格。

4. Goal-Driven Execution: 把任务转换成可验证的目标,多步任务要写出清晰计划和验收标准。举例:「添加验证」→「为无效输入写测试并使其通过」;「修复Bug」→「写一个复现Bug的测试然后修好」;「重构X」→「确保重构前后测试全部通过」。

模板验证标准:如果改后多余变更变少、过度复杂导致的返工变少,实施前就先澄清问题而非犯错后再补问,那就是用对了。

打开设置→个性化里的两个记忆功能,开启后Codex会在对话结束后自动总结成记忆片段,后续遇到相关场景会自动调用。

五、Skills与插件:Agent的能力扩展包

从插件Tab进入,可切换技能和插件。技能就是Skills,用来让Agent执行特定任务;插件是一组技能工具的打包整合。Codex提供了可视化管理界面,右上角点管理可以批量操作,同时内置创建器,直接描述需求就能做自己的技能或插件。

六、开发一个网页:从计划到部署

新建项目文件夹,打开计划模式(只规划不动手),输入需求:「帮我做一个Codex功能介绍网页,好看有设计感,功能按层级分类展示」。它会追问几个问题,你直接点选回答即可,回答后会给出完整方案,确认没问题就开始自动实施。

开发过程全程全自动。完成后直接在内置浏览器预览,中间有分割线可以左右拖拽对比效果。右上角的批注功能是我的心头好:直接圈选页面元素,写文字说明就能修改,还能直接调字体、字号、颜色,改完实时看效果,不用截图翻来覆去描述。

如果要部署到服务器给别人看,可以用专门的Skill,输入/就能调用。每个人的服务器配置不一样,这里就不展开了,相信你能搞定。

七、开发一个App:用Computer Use自动装Xcode编译到手机

最近体检完,医生给我开了三种药,不同药要求饭前饭后吃,我经常搞混到底吃没吃。我决定做一个专属的用药提醒App。同样开启计划模式,描述需求回答问题后,它就自动跑完整个生成过程,大概二十分钟就能出基础文件。

原生App开发需要Xcode编译,大部分人电脑都不会提前装。这时就可以用Codex的超能力:@Computer Use,让它帮你搜索、下载、安装Xcode,全程可视化操控你的电脑。使用前记得先去设置打开Computer Use开关,过程中碰到输入密码、登录账号这类敏感步骤,它会自动停下来等你操作。

装好Xcode后,继续让Computer Use操作后续编译步骤,Mac顶栏会实时显示操控状态。到连接手机、开启开发者模式等步骤,它会一步步指引你手动操作,很快App就能装到你的手机上,到点会准时弹窗提醒。

如果你还想在外出的时候用手机继续开发,Codex刚上线了远程手机连接功能(仅支持Mac连接iOS/Android),掏手机就能接着vibe coding。

八、Mac与Windows的功能差距

Windows朋友可能要破防了:目前Mac用户是Codex的高贵VIP,Windows只有站票。本文用到的Computer Use、手机远程连接、Appshots(双击Command一键截取前台窗口内容发给Codex)、锁屏后继续操控的Locked Computer Use、屏幕上下文记忆Chronicle,这些全都是Mac专属功能。这也是我们公司除了财务、HR、法务这类特殊岗位,全员配Mac的原因。

最后,希望各位Coding愉快。如果觉得有用,随手点赞、在看、转发三连,想第一时间收到推送就星标我~谢谢你看我的文章,我们下次再见。

关注我,一起把AI变成真正的生产力。