一、全文速览图
同样是让 Codex 做一个网页，有时它能一次写出漂亮的页面，有时却会反复修改按钮颜色，最后连原本正常的功能也改坏了。问题往往不在于它会不会写代码，而在于任务缺少明确的方法。Skill 可以把设计规范、排查步骤或测试流程交给 Codex，让它在处理对应任务时有章可循。
这 9 个 Skill 参考了 skills.sh 的累计安装量、GitHub 星标数量和实际用途，再按“找工具—做产品—查问题—验结果”的工作过程筛选。这是一份使用推荐，希望能帮助到大家提升效率与质量。下载链接我会放到文末的知识库，需要自取。
二、find-skills
安装链接：https://www.skills.sh/vercel-labs/skills/find-skills
刚开始用 Codex，最难的可能不是安装 Skill，而是不知道该找什么。find-skills 帮助你按任务寻找工具：例如“给 React 项目做性能优化”“测试本地网页”“制作视频”。先说清楚目标，再从搜索结果中挑选来源可靠、说明清楚的项目，比盲目收藏一长串 Skill 更有用。
展示了用途与安装入口
三、frontend-design
安装链接：https://www.skills.sh/anthropics/skills/frontend-design
让 Codex“做得高级一点”，通常得不到稳定的结果。这个 Skill 会引导它认真处理字体、配色、布局、动效和视觉重点。它适合官网首页、产品落地页、作品集等需要第一眼吸引人的页面。给它任务时，最好同时写明品牌气质、目标用户和必须保留的内容。
frontend-design 制作并继续调整的唱片俱乐部页面
四、ui-ux-pro-max
安装链接：https://www.skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max
首页好看只是第一步。后台、表单、详情页、移动端也要保持一致，才像一个完整产品。ui-ux-pro-max 提供界面风格、配色、字体搭配及交互规范等设计资料，适合让 Codex 为多页面项目建立统一的视觉规则。它与 frontend-design 可以配合使用：先确定主页面的方向，再把规则延伸到其他页面。
启用 ui-ux-pro-max 后制作的 Virtual Factory 看板
五、agent-browser
安装链接：https://www.skills.sh/vercel-labs/agent-browser/agent-browser
代码运行成功，不代表用户能顺利使用。agent-browser 提供打开页面、读取页面结构、点击、填写表单和截图等浏览器操作。做完预约页面后，可以让 Codex 从用户视角走一遍：打开首页、选择时间、填写信息，再检查提交后的反馈。除了 Skill 文件，它还需要安装浏览器命令行工具及浏览器环境。
agent-browser 打开 Hacker News
六、systematic-debugging
安装链接：https://www.skills.sh/obra/superpowers/systematic-debugging
最耗时间的修 Bug 方式，是看到报错就改一行、重跑一次，再继续猜。这个 Skill 要求先复现问题、收集证据、提出原因假设，再做有针对性的修改和验证。尤其适合“偶尔失败”“只在某个环境失败”“改了这里却坏了那里”这类问题。
展示“先找根因”的工作方式
七、webapp-testing
安装链接：https://www.skills.sh/anthropics/skills/webapp-testing
手动点通一次页面，很难保证下次修改后它依然正常。这个 Skill 指导 Codex 使用 Playwright 测试本地网页：启动应用、操作页面、检查结果，并保留可以再次运行的脚本。比如测试注册流程，就不只看按钮能不能点，还要覆盖空字段、错误邮箱和提交成功后的状态。
集中展示测试状态、操作步骤、页面快照和代码
八、vercel-react-best-practices
安装链接：https://www.skills.sh/vercel-labs/agent-skills/vercel-react-best-practices
页面能打开，却感觉加载慢、切换卡，这时继续堆功能通常解决不了问题。Vercel 的这个 Skill 汇集了 React 与 Next.js 的性能建议，可用于写新组件、审查数据获取方式、检查资源加载和减少不必要的渲染。更合适的用法是让 Codex 先指出最影响体验的问题，再逐项修改和测量。
用来说明“找到瓶颈—修改—重新测量”的过程
九、remotion-best-practices
安装链接：https://www.skills.sh/remotion-dev/skills/remotion-best-practices
要反复修改字幕、替换数据或批量生成相似视频时，基于代码的视频流程很有吸引力。Remotion 使用 React 描述画面和时间线；这个 Skill 提供相关的制作规范。可以让 Codex 先做一段产品功能演示：三幕结构、逐字出现的标题、界面录屏占位和结尾按钮，再进入 Remotion 项目预览、调整与渲染。它需要配合 Remotion 项目使用。
可同时看到视频预览、片段时间线与渲染入口
十、canvas-design
安装链接：https://www.skills.sh/anthropics/skills/canvas-design
不是所有设计任务都要做成网页。做抽象封面、活动主视觉或专题配图时，canvas-design 会先确定视觉方向，再将它制作成 PNG 或 PDF 文件。它适合强调构图、形状、色彩与气质的画面；如果是一张承载大量精确中文文案的海报，仍要认真检查文字与排版。
Happycapy 展示的 canvas-design 使用过程
这 9 个 Skill 不必一次装齐，正在做页面，就先试 frontend-design；遇到反复出现的报错，再用 systematic-debugging；准备把产品交给别人使用，就让 webapp-testing 跑一遍关键流程。每装一个，都拿自己项目里的真实任务试一次：它解决了什么问题，结果是否比之前更好，下一次还会不会用到。
当你开始这样使用 Codex，Skill 就不再是一份越攒越长的工具清单，而是你做产品时随时能取用的一套方法。