# 必装 Skill 与插件

Skill 和插件能给 Claude Code / Codex 加上"方法论"、"实时面板"或专用工具流,大幅提升体验。下面几个是高频推荐。

> **安全提示:** Skill / 插件本质是一组会被执行的脚本、指令或工具配置。**安装前确认来源可信**,尤其是社区(非官方)的,别装来路不明的。

---

## Superpowers —— 开发全流程方法论

[Superpowers](https://github.com/obra/superpowers/)(作者 obra,MIT 许可,已进入 Anthropic 官方插件市场)给 Claude 装上一套**规范化的软件开发方法论**:头脑风暴 → 写计划 → TDD(测试驱动)→ 子代理实现 + 代码审查 → 验证。它让 AI 不再"上来就乱写",而是每步都有章法。

**安装**(在 Claude Code 会话里执行,需 Claude Code 2.0.13+):

```text
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace
```

装完**退出并重启** Claude Code。之后这些命令可用:

- `/brainstorm` —— 先把需求聊清楚,产出设计文档
- `/write-plan` —— 把设计转成可执行的实现计划
- `/execute-plan` —— 用子代理驱动、按 TDD 红/绿节奏实现

描述需求时相关技能会自动触发,无需每次手动调用。

---

## Codex Skills / Plugins 怎么选

Codex 的持久能力大致分三层:

| 层级 | 适合放什么 | 例子 |
|------|------------|------|
| `AGENTS.md` | 项目规则、构建测试命令、禁止触碰的目录 | “改后运行 `pnpm test`”、“不要改生成物” |
| Skill | 可复用工作流、领域知识、脚本封装 | 生图 skill、TDD/调试方法论、发布检查清单 |
| Plugin | 可安装的一整包能力:skills、命令、MCP、hooks、assets | Superpowers、状态栏、团队内工具包 |

排障顺序也按这三层来:先确认项目/全局 `AGENTS.md` 是否冲突,再看 skill 是否安装并被触发,最后看 plugin 是否安装、启用、重启后生效。涉及外部数据或私有系统时,优先用 MCP / connector,不要指望模型记忆或网页搜索替代实时权限。

---

## 不要把 Skill / Plugin 和网关能力混在一起

Skill / Plugin 只能改变客户端工作流、提示词、脚本、MCP/hook 配置;它不能凭空让网关多出不存在的 API。Clomio 控制台里的网页端技能市场是另一套产品,见 [技能市场与创作者中心](#/console-skills)。例如:

- Claude Code skill 仍然通过 `ANTHROPIC_BASE_URL + /v1/messages` 对话。
- Codex skill 仍然受 `config.toml` 的 `model_provider`、`base_url`、`wire_api = "responses"` 约束。
- 生图 skill 可以调用 OpenAI Images 或 Responses `image_generation`,但不能把 OpenAI/Codex 变成 Grok-only 的视频接口。
- 多代理/子代理适合并行阅读、规划、审查;让它们写文件时必须明确文件白名单,避免覆盖其他 worker。

安装前先确认本地确实有对应 skill/plugin/命令;文档里不要编造“默认自带”的工具。没有安装时,把它写成“可选安装”,并给出来源或让读者参考官方市场。

## frontend-design —— Anthropic 官方前端设计

Anthropic 官方 Skill,专治 AI 生成的"千篇一律"前端(到处紫色渐变、一样的字体、雷同卡片)。它会在写代码前**先定一个明确的设计方向**(如极简、极繁、复古未来、奢华、活泼等),做出更有辨识度、完成度更高的页面。

**安装**(`/plugin` 里添加 `anthropics/claude-code` 市场后选 frontend-design),或直接放下 SKILL.md:

```bash
curl -o .claude/skills/frontend-design/SKILL.md \
  https://raw.githubusercontent.com/anthropics/claude-code/main/plugins/frontend-design/skills/frontend-design/SKILL.md
```

用法:直接让 Claude 做前端,如「给一个音乐 App 做仪表盘」,Skill 会自动激活。

---

## UI/UX Pro Max —— 设计智能库

社区里最全的设计智能 Skill(`nextlevelbuilder/ui-ux-pro-max-skill`)。如果说 frontend-design 给的是"审美方向",Pro Max 给的是一个**可检索的设计数据库**:50+ UI 风格、配色、字体搭配、UX 规范、图表类型,带一个 Python 检索脚本。

它的强项是"设计系统生成器":你说「fintech 仪表盘」,它自动给出风格、配色、字体、效果与要避免的反模式。安装方式参考其仓库说明(社区 Skill,安装前先核对来源)。

---

## Claude HUD —— 实时状态栏

[Claude HUD](https://github.com/jarrodwatts/claude-hud)(作者 jarrodwatts,MIT)在 Claude Code 界面下方加一条**实时信息面板**,让你随时看到:

- 上下文窗口用量(绿 → 黄 → 红 进度条,数据来自 Claude Code 本身,非估算)
- 当前模型、项目路径、git 分支
- 正在调用的工具、运行中的子代理、待办进度

它用的是 Claude Code 原生状态栏 API,**纯本地、不联网、不读取凭证**。需 Claude Code v1.0.80+、Node.js 18+。

**安装**(会话里执行):

```text
/plugin marketplace add jarrodwatts/claude-hud
/plugin install claude-hud
/claude-hud:setup
```

`setup` 会把状态栏配置写进 `~/.claude/settings.json`,然后**重启** Claude Code 生效。

> Linux 若报 `EXDEV: cross-device link`,先设临时目录:`mkdir -p ~/.cache/tmp && TMPDIR=~/.cache/tmp claude`。Windows 若提示缺 JS 运行时,先 `winget install OpenJS.NodeJS.LTS`。

---

> 想自己写命令/技能、用子代理,见 [Claude Code 进阶](#/claude-advanced) 与 [Codex 进阶](#/codex-advanced)。