Codex 在编程方面常用的 Skill
wxk1991 Lv5

Codex 在编程方面常用的 Skill

Codex 真正好用的地方,不只是“让它写一段代码”。

更准确地说:

1
Codex 更像一个可以调用不同 Skill 的工程协作台。

不同 Skill 解决不同问题。

有的负责写代码,有的负责做前端设计,有的负责安全审计,有的负责查文档,有的负责跑浏览器验证,有的负责写计划和拆任务。

如果只是把 Codex 当成一个聊天机器人,那会浪费它一半以上的能力。

Codex Skills 工作流


一、Code:最基础,也是最常用的编程 Skill

如果只选一个编程相关 Skill,那一定是:

1
Code

它适合处理最常见的开发任务:

  • 阅读项目结构
  • 理解已有代码
  • 修改 Bug
  • 新增功能
  • 跑测试
  • 看 Git diff
  • 整理最终改动说明

这个 Skill 的核心价值不是“会写代码”,而是:

1
它会按工程流程做事。

比如你让 Codex 修一个问题,它不会只看报错行,而是会先看相关文件、上下文、调用链,然后再决定怎么改。

这点非常重要。

因为真实项目里,很多 Bug 都不是一行代码的问题,而是状态、数据结构、组件边界、配置项一起造成的。


二、frontend-design:做页面时很有用

如果你在做博客、后台管理系统、工具页、组件页面,frontend-design 就很有用。

它不是单纯帮你写 CSS。

它更像是在帮你做这些事:

  • 判断页面应该是什么气质
  • 选择布局方式
  • 控制间距、字号、颜色层级
  • 避免页面看起来像模板
  • 处理移动端和桌面端的差异

比如这次博客首页调整,就不是简单地“加几个按钮”。

更好的做法是:

1
先判断首页最重要的信息是什么,再决定视觉层级。

所以分类入口放在首页顶部,文章列表做成 PC 两列,标签和分类完整显示。

这样页面不是更花,而是更容易扫。


三、browser:前端改完必须看一眼

前端代码最大的问题是:

1
构建通过,不代表页面好看。

有些问题只有打开浏览器才看得出来:

  • 文字是否换行
  • 按钮是否挤压
  • 移动端是否溢出
  • 暗色模式是否看不清
  • 图片有没有加载失败
  • 页面顶部是否留白太多

这时候 browser Skill 就很重要。

它可以打开本地页面,比如:

1
http://localhost:4000/

然后检查真实页面效果。

我认为这是 Codex 做前端时最容易被低估的能力。

很多 AI 写出来的页面,第一眼看代码没问题,但打开之后就会发现:间距怪、层级乱、移动端崩。

让 Codex 写完之后自己打开页面检查,相当于多了一轮视觉 QA。


四、security-auditor:涉及登录、接口、权限时必用

如果项目里出现这些东西:

  • 登录注册
  • JWT
  • Cookie
  • CORS
  • 上传文件
  • 用户权限
  • 数据库查询
  • Webhook
  • 第三方回调

那就应该考虑使用:

1
security-auditor

这个 Skill 不是为了让代码“看起来更安全”,而是帮你从攻击面去检查问题。

比如:

  • 是否有 XSS 风险
  • 是否有 SQL 注入风险
  • 是否把 secret 写进前端
  • 是否信任了用户输入
  • 是否有越权访问
  • CORS 是否开得太宽

普通开发时很容易忽略这些点。

尤其是快速写功能的时候,最容易出现一句:

1
先这样,后面再补安全。

但安全问题通常不会等你“后面再补”。


五、architecture-designer:不要一上来就写代码

有些任务不适合直接开写。

比如:

  • 新增一个完整模块
  • 重构旧系统
  • 设计权限模型
  • 设计多端同步
  • 设计缓存策略
  • 设计任务队列

这时候应该先用:

1
architecture-designer

它的作用是先把系统边界想清楚。

很多复杂功能失败,不是因为代码写不出来,而是一开始就没有想清楚:

  • 数据怎么流动
  • 状态放在哪里
  • 谁负责校验
  • 出错后怎么恢复
  • 哪些逻辑应该复用
  • 哪些东西不能耦合

Codex 如果直接写代码,可能会很快。

但如果方向错了,越快越麻烦。

所以复杂功能最好先设计,再实现。


六、writing-plans 和 executing-plans:适合大任务

当一个需求超过一两个文件时,我一般更推荐使用两个 Skill:

1
2
writing-plans
executing-plans

前者负责写计划。

后者负责按计划执行。

这对于大型改动很有帮助。

比如:

  • 先列出要改哪些文件
  • 每一步为什么要改
  • 怎么验证
  • 哪些地方可能有风险
  • 完成后怎么检查

很多人用 AI 编程,最大的问题是让 AI 一次性改太多。

结果就是:

1
代码看似都改了,但你不知道它到底改了什么。

计划型 Skill 的好处是把过程拆开,让每一步都有边界。

这对真实项目非常重要。


七、git-essentials:提交前的最后一道整理

写完代码之后,不要急着提交。

可以让 Codex 用 git-essentials 帮你检查:

  • 当前有哪些改动
  • 哪些文件是新增的
  • 有没有不该提交的文件
  • diff 是否符合预期
  • commit 信息怎么写更清楚

尤其是博客、前端项目、Node 项目里,经常会混进:

1
2
3
4
5
node_modules
.DS_Store
public
db.json
IDE 配置

这些东西不应该传到 GitHub。

所以 Git 相关 Skill 虽然不“炫”,但非常实用。


八、openai-docs / cloudflare / workers-best-practices:查官方资料时用

当任务涉及某个具体平台时,最好不要只靠记忆。

比如:

  • OpenAI API
  • Cloudflare Workers
  • Durable Objects
  • Wrangler
  • Agents SDK

这些东西更新很快。

这时候应该用对应的文档类 Skill。

比如:

1
2
3
4
5
openai-docs
cloudflare
workers-best-practices
wrangler
durable-objects

这类 Skill 的价值是:

1
尽量按官方文档和最佳实践来写,而不是凭印象写。

对于变化快的平台,这一点非常关键。

因为旧写法可能还能跑,但已经不是推荐写法。


九、imagegen:写文章和做页面时的配图工具

如果你在写博客、做落地页、做产品页面,imagegen 也很有用。

它适合生成:

  • 文章配图
  • 首页视觉图
  • 产品概念图
  • 技术流程插画
  • 简单的场景图

但要注意一点:

1
图片里尽量不要放需要准确阅读的文字。

因为生成图里的文字很容易变形。

更好的方式是让图片表达氛围和结构,把准确的信息放在 Markdown 或页面文案里。

这篇文章里的配图就是这种思路:

1
用图表达 Codex Skill 工作流,但不依赖图中文字。

十、我更推荐的 Codex Skill 使用顺序

如果是一个真实开发任务,我更推荐这样的顺序:

1
2
3
4
5
6
7
8
1. Code:先看项目和上下文
2. architecture-designer:复杂需求先做结构设计
3. writing-plans:多文件任务先写计划
4. Code / executing-plans:开始实现
5. frontend-design:涉及页面时优化视觉和交互
6. security-auditor:涉及接口、权限、用户输入时做安全检查
7. browser:前端页面打开实际验证
8. git-essentials:提交前检查改动

这个顺序不是固定的。

但它有一个核心原则:

1
不要让一个 Skill 干所有事。

不同 Skill 有不同职责。

把它们组合起来,Codex 才更像一个完整的开发搭档。


总结

Codex 的强大,不在于它能一次性生成多少代码。

真正有价值的是:

1
它可以在不同阶段切换不同工作方式。

写代码时用 Code

做页面时用 frontend-design

查问题时用 browser

做安全检查时用 security-auditor

设计系统时用 architecture-designer

提交前用 git-essentials

写文章和做配图时用 imagegen

如果把这些 Skill 用好,Codex 就不只是一个“帮你补全代码”的工具。

它更像一个可以陪你从想法、实现、验证到提交的工程助手。