# 别再乱装 Codex Skills 了，真正值得先装的是这几类
**作者**: MuscleMan | AI × Investing
**日期**: 2026-07-05T14:05:01.000Z
**来源**: [https://x.com/RealCodedAlpha/status/2073770124910473528](https://x.com/RealCodedAlpha/status/2073770124910473528)
---
最近很多人开始折腾 Codex Skills。
一打开 skills.sh，很容易上头：
frontend-design、agent-browser、firecrawl-deep-research、figma-implement-design、copywriting、content-strategy……
每个看起来都有用，但我折腾下来最大的感受是：
Codex Skills 不能当插件商店来用。
看到一个装一个，最后不一定更强，反而可能让 Codex 的工作流变得更混乱。
真正值得先装的，不是“名字看起来高级”的 Skill，而是能跑进你日常流程里的那几类。
应该先问一句：我到底想让 Codex 稳定完成哪几类工作？
因为 Skill 本身不是魔法插件，它更像是给 Codex 放了一份“工作说明书”。
比如你想让 Codex 优化前端，它不能只知道“帮我美化一下”。
它需要知道：
- 先看当前页面
- 再判断布局问题
- 再看 spacing
- 再看 typography
- 再看 CTA
- 再看 mobile
- 最后再改代码
这就是 Skill 真正有价值的地方是让 Codex 做事更有固定流程！
我现在会把 Codex Skills 分成几类来看！
第一类是我最推荐先装的：前端设计类！本人做了十几年的前端开发，第一个就想分享这个！
如果你用 Codex 写过前端，大概率遇到过这个问题：页面能跑、组件也有、按钮也能点、但就是不太像真实产品，有时候看起来像 demo，有时候像 v0 初稿，
有时候像 AI 随手拼出来的 landing page。
这个问题不是再多写几个组件能解决的，它缺的是审美判断和产品化 polish！
所以我会先装这几个：
frontend-design、
web-design-guidelines、
design-taste-frontend、
redesign-existing-projects、
high-end-visual-design、
这几个 Skill 的作用有点不一样。
1. frontend-design 更像基础前端设计审稿人。
它会提醒 Codex 关注 layout、spacing、typography、visual hierarchy。
2. web-design-guidelines 更像网页设计规则手册。
适合 landing page、SaaS 页面、dashboard 这些场景。
3. design-taste-frontend 更偏 taste。
很多页面不是错，而是平。这个 Skill 就是用来解决“平”的问题。
4. redesign-existing-projects 很适合改旧项目。
不是每次都从零生成 UI，很多时候我们拿到的是一个已经能跑、但视觉很弱的项目。
5. high-end-visual-design 我会放在选装里。
如果你要做 portfolio、promo page、个人品牌页、产品发布页，它挺有用。
普通后台管理系统不一定需要这么重。
如果只做第一批，我会这样装：
```
npx skills add anthropics/skills \
--skill frontend-design \
-g \
-a codex -a claude-code
npx skills add vercel-labs/agent-skills \
--skill web-design-guidelines \
-g \
-a codex -a claude-code
npx skills add leonxlnx/taste-skill \
--skill design-taste-frontend \
--skill redesign-existing-projects \
--skill high-end-visual-design \
-g \
-a codex -a claude-code
```
## 每一段什么意思？
从 anthropics/skills 这个 GitHub 仓库安装 skill，只安装这个 仓库里的 frontend-design，不是把整个 anthropics/skills 全部装下来!
-g 全局安装，意思是安装到用户级目录，以后所有项目都能用；不是只给当前项目用。-g 是 --global 的缩写！
-a 是 --agent，可以重复写多次来指定多个目标 agent, 同时安装给Codex \Claude Code
所以这条命令的完整含义是:：从 anthropics/skills 这个仓库里，只选择 frontend-design 这个 Skill，全局安装，并同时配置给 Codex 和 Claude Code 使用！
## 为什么命令里有反斜杠 \？
\ 只是 shell 里的换行符，方便长命令分多行写。
以上写法跟下面写法完全等价：
```
npx skills add anthropics/skills --skill frontend-design -g -a codex -a claude-code
```
所以我的理解就是不建议一上来把整个 仓库里的 Skill 全装了！
如果一个 仓库里有 10 个 Skill，我只装我当前工作流真的会用到的那几个。
装多了不一定更好，有时候 Codex 反而会变得很“犹豫”：到底该按哪个 Skill 做？到底该调用哪个流程？最后效果还不如少装几个清晰的！
第二类我会装 browser 相关的！
这个对前端尤其重要，因为 AI 写代码有一个很大的幻觉：
它以为代码改完了，任务就结束了，但前端不是这样，一定要打开页面看。
你必须看：
- 首屏有没有重点
- CTA 是否明显
- mobile 有没有崩
- button 点击后对不对
- 页面有没有横向滚动
- 卡片 spacing 有没有乱
- 表单状态是否正常
- 页面实际看起来是不是别扭
所以我会装：agent-browser 先只装这个就够了
```
npx skills add vercel-labs/agent-browser \
--skill agent-browser \
-g \
-a codex -a claude-code
```
我暂时不会一上来装这些：use-my-browser、browser-act、browserbase/browser、firecrawl-browser
不是它们没用，是因为第一阶段没必要！
先让 Codex 跑通最简单的闭环：改代码、启动项目、打开浏览器、检查桌面端、检查移动端、发现问题、再修
这个闭环跑通以后，再考虑更复杂的 browser automation！
第三类是 research 和 content
这个对我也很重要，因为我不只是想用 Codex 写代码，还想把这些东西写成中文长文。
比如：
- Codex Skills 怎么用
- Plugin 和 Skill 怎么区分
- Claude Code 和 Codex 怎么配合
- Agent Workflow 怎么设计
- 一个开源项目怎么用 AI 改造成产品级 UI
这类内容如果只靠脑补，很容易写成空泛教程！
所以我会装一组 research / content 相关 Skill：
last30days、firecrawl-deep-research、firecrawl-market-research、customer-research、content-strategy、copywriting
安装：
```
npx skills add firecrawl/firecrawl-workflows \
--skill firecrawl-deep-research \
--skill firecrawl-market-research \
-g \
-a codex -a claude-code
npx skills add mvanhorn/last30days-skill \
--skill last30days \
-g \
-a codex -a claude-code
npx skills add coreyhaines31/marketingskills \
--skill customer-research \
--skill content-strategy \
--skill copywriting \
-g \
-a codex -a claude-code
```
这组的用法不是直接说：“帮我写一篇推文。”
这样很容易得到一篇 AI 味很重的东西！
我更倾向于这样用：先找最近 30 天跟 Codex / Skills / Claude Code / MCP 有关的新信号，然后做 deep research，再判断这些东西对中文开发者到底有什么用，最后再提炼成一个长文选题，也就是说，先让它研究，再让它写，写作只是最后一步！
Figma 相关 Skill 我不会急着装。
比如：figma-use、implement-design、figma-generate-design、figma-generate-library、figma-implement-design
这些名字看起来很香，但如果你手里没有真实 Figma 文件，其实用不上太多。
当你真的有这种场景：
设计师给了 Figma、我要用 Codex 还原页面、我要把 Figma 的 spacing / typography / token 映射到代码、我要检查实现和设计稿是否一致
这时候再装，不然它只是多一个看起来高级、但日常不触发的 Skill。
Sales 相关的我也会后置
比如：firecrawl-lead-research、prospecting、sales-qualification、cold-email
、persona-sales-ops、salesforce-developer
如果你现在在做 B2B SaaS、agency、AI workflow 咨询、出海，这些有价值。
但如果你当前主线还是 AI Coding、前端项目、内容创作，就不用急。
我现在的判断是：先把开发和内容这两条线跑顺！
等真的开始做产品增长、客户开发、销售线索，再补 Sales Stack。
我设计一个真正能落地的安装顺序
第一阶段，只做前端闭环：
frontend-design
web-design-guidelines
design-taste-frontend
redesign-existing-projects
agent-browser
目标很简单：让 Codex 不只是写页面，还能审页面、改页面、打开浏览器验收页面。
这个阶段你可以直接在项目里这样问 Codex：
```
请先阅读 AGENTS.md。
参考 frontend-design、web-design-guidelines、design-taste-frontend、redesign-existing-projects 和 agent-browser。
改进着陆页（landing page），使其看起来更像一款成熟的 SaaS 产品。
在进行修改之前：
- 检查项目
- 找到主页
- 评估布局、间距、排版、层级结构、CTA（号召性用语）及移动端布局
- 简要说明重新设计方案
随后实施修改。
实施完成后：
- 运行 lint 或类型检查（如有）
- 在浏览器中打开页面
- 检查桌面端和移动端显示效果
- 总结所做的更改
```
这个 prompt 的重点不是“美化页面”,重点是让 Codex 形成一个固定动作：
先审、再改、再验收，这比单纯说“让它变得更好看“靠谱很多。
第二阶段，做内容闭环：
last30days
firecrawl-deep-research
firecrawl-market-research
customer-research
content-strategy
copywriting
用法类似这样：
```
请结合使用 last30days、firecrawl-deep-research、firecrawl-market-research、customer-research、内容策略及文案写作技巧。
我希望为开发者撰写一篇关于以下主题的深度长文（适合在 X/Twitter 发布）：
Codex 技能、插件（Plugins）、Claude Code、MCP、智能体（Agent）工作流以及 AI 辅助编程。
首先：
- 挖掘近期行业动态与信号
- 收集有价值的资料来源
- 阐述具体变化 - 识别开发者的困惑点
- 选定最具吸引力的切入角度。随后：
- 提供 5 个吸引眼球的开头（hooks）
- 拟定文章大纲 - 撰写最终长文草稿。
风格要求：
- 务实实用
- 减少“AI 味”（避免机械感）
- 拒绝空洞炒作
- 引用真实的工作流案例
- 避免结构过于刻意雕琢。
```
这里有个小经验：写 X 长文，不要让 AI 一上来就写成品!
先让它找信号，再让它判断冲突点，再让它写大纲，最后才写全文。
这样出来的东西会更像人写的，不会那么模板。
第三阶段，我会自己补工程质量类 Skill
这部分你在 skills.sh 上不一定能刚好找到现成的，但我认为非常值得自己写。
比如：
planning-workflow
code-review
testing-workflow
nextjs-production-review
security-review
visual-regression-check
原因很现实，Codex 最大的问题不只是写得不够好。
很多时候是：
- 没 plan 就开始改
- 改完不测
- UI 不截图
- 没有 mobile check
- 不做 code review
- 不检查安全边界
- 看到网页内容就直接信了
所以我会在本地建一些自己的 Skill：
```
~/.agents/skills/
planning-workflow/
code-review/
testing-workflow/
nextjs-production-review/
security-review/
visual-regression-check/
```
尤其是 visual-regression-check，前端 AI Coding 特别需要它。
我希望它每次强制 Codex 做这些事：
启动本地服务、打开页面、截图 desktop、截图 mobile、对比修改前后、
发现视觉回归、再修复
这个比继续装几十个“设计灵感类 Skill”更有用！
另外我建议每个项目都放一份 AGENTS.md
Skill 是能力，AGENTS.md 是项目里的做事规则。
我会写得很直接，不写太复杂：
```
# AGENTS.md
## 针对复杂任务的默认工作流程：
1. 首先检查相关文件。
2. 简要说明当前结构。
3. 制定简短的实施计划。
4. 确定可能需要修改的文件。
5. 实施更改。
6. 运行现有的检查程序。
7. 总结更改内容及验证方式。
切勿重写无关代码。
## 前端工作
当任务涉及 UI、布局、着陆页、仪表板、组件或视觉润色时，
请在可用时运用以下技能：
- frontend-design
- web-design-guidelines
- design-taste-frontend
- redesign-existing-projects
- high-end-visual-design
在编辑代码之前：
1. 审查当前 UI。
2. 识别布局、间距、排版、层级、色彩、CTA（行动号召）及响应式方面的问题。
3. 提出精简的重新设计方案。
4. 实施高成效的改进措施。
优秀的前端工作应具备：
- 清晰的视觉层级
- 统一的间距
- 强有力的首屏（above-the-fold）内容 - 显眼的主要 CTA - 响应式移动端布局
- 避免千篇一律的“AI 风格”设计
## 浏览器质量保证 (QA)
当需要进行视觉验证时，请在可用时使用 agent-browser。
检查项：
- 桌面端布局
- 移动端布局
- 主要 CTA - 导航 - 表单 - 明显的视觉错误
- 明显的交互错误
## 研究与内容
当任务涉及文章、X (Twitter) 帖子、市场研究、工具分析或工作流程教程时，请在可用时运用以下技能：
- last30days
- firecrawl-deep-research
- firecrawl-market-research
- customer-research
- content-strategy
- copywriting
规则：
- 切勿捏造事实
- 涉及研究时保留来源链接
- 区分事实与观点
- 针对中国开发者和构建者进行撰写
- 使用具体的示例、命令和工作流程
- 避免使用泛泛的 AI 语气
```
Codex 读完之后，知道这个项目有自己的节奏：先看、再计划、再改、再验收
如果你只想直接抄我的安装清单，可以按照以下攻略！
先装这 5 个：
frontend-design
web-design-guidelines
design-taste-frontend
redesign-existing-projects
agent-browser
这组解决开发问题。
再装这 6 个：
last30days
firecrawl-deep-research
firecrawl-market-research
customer-research
content-strategy
copywriting
这组解决内容问题。
有 Figma 再装：
figma-use
implement-design
figma-implement-design
做销售增长再装：
firecrawl-lead-research
prospecting
sales-qualification
cold-email
自己慢慢补：
planning-workflow
code-review
testing-workflow
nextjs-production-review
security-review
visual-regression-check
我现在对 Codex Skills 的理解很简单：
先别把它当插件商店，先把它当工作流沉淀工具！
你每天高频做什么，就先给 Codex 写那类 Skill。
你经常改前端，就先装前端设计和 browser QA。
你经常写 X 长文，就先装 research 和 content。
你经常接 Figma，就补 Figma。
你开始做 B2B，再补 sales。
真正有用的 Codex Skills 是让你下次做同类任务时，不用从零教 Codex 一遍！
如果你也在折腾 Codex、Claude Code、AI Coding 和 Agent Workflow，可以关注我。后面我会继续分享这些工具怎么真正用到项目里，而不是停留在概念层面！
## 相关链接
- [MuscleMan | AI × Investing](https://x.com/RealCodedAlpha)
- [@RealCodedAlpha](https://x.com/RealCodedAlpha)
- [607](https://x.com/RealCodedAlpha/status/2073770124910473528/analytics)
- [skills.sh](https://skills.sh/)
- [skills.sh](https://skills.sh/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [10:05 PM · Jul 5, 2026](https://x.com/RealCodedAlpha/status/2073770124910473528)
- [607 Views](https://x.com/RealCodedAlpha/status/2073770124910473528/analytics)
---
*导出时间: 2026/7/6 16:22:27*