Claude Code 生态工具全景指南

✦

生态全景

Claude Code 正从"代码生成工具"进化为"完整开发平台"。六大核心工具 + 扩展 Skill 体系覆盖了从 流程标准化（Superpowers） → 开发可视化（HUD） → 上下文管理（GSD） → 视频创作（Remotion） → 协作工业化（Action） 的完整链路。

⚡ Superpowers ⭐⭐ 123k+

结构化工作流：强制 AI 先规划再编码，解决"盲目编码"问题。

obra / Jesse Vincent

📊 Claude HUD ⭐⭐ 18k+

实时可观测性：上下文用量、工具活动、子代理、任务进度一目了然。

jarrodwatts

🔥 Get Shit Done ⭐⭐ 56k+

上下文工程：用文件状态替代对话记忆，防止"AI 越用越笨"。

TÂCHES / gsd-build

📚 Learn Claude Code ⭐⭐ 56k+

学习资源聚合：从 CLI 指南到视频课程，系统化学习路径。

社区资源

🤖 Claude Code Action 🏛️ 官方

GitHub CI/CD 集成：PR 自动审查、Issue 自动实现、CI 失败诊断。

Anthropic

🧠 claude-mem ⭐⭐ 9.4k+

持久化记忆：自动捕获会话，跨会话注入上下文，永不丢失。

thedotmack

🎬 Remotion Skills 🔥 25k+ 安装

AI 视频生成：用 React 代码生成视频，Agent Skills 教 Claude 最佳实践。

remotion-dev (官方)

📊

工具对比总表

工具	类型	Stars	安装方式	核心价值
Superpowers	工作流	123k+	/plugin install	先规划后编码
Claude HUD	可观测性	18k+	/plugin install	实时状态仪表盘
Get Shit Done	上下文工程	56k+	npx 安装	防止上下文腐烂
Learn Claude Code	教育资源	56k+	GitHub 阅读	系统化学习
Claude Code Action	CI/CD	🏛️ 官方	GitHub Action	PR 自动审查
claude-mem	持久记忆	9.4k+	npx / plugin	跨会话记忆
Remotion Skills	视频生成	🔥 25k+	npx skills add	AI 生成视频代码

⚡

Superpowers — 结构化工作流

obra/superpowers-marketplace ACTIVE

作者: Jesse Vincent (obra) · GitHub Stars: 123k+

核心哲学：系统性优于即兴，证据优于空谈，简洁优先。 Superpowers 强制 Claude Code 在执行代码前先规划，生成详细的实施计划，然后按照计划逐步执行，每个阶段都有验证点。

/superpowers:brainstorm 需求收集与创意精炼，AI 帮你梳理追问

/superpowers:write-plan 生成含文件清单、步骤、回滚规划的详细方案

/superpowers:execute-plan 按计划逐步执行，每步设检查点验证

内置技能库 TDD、系统化调试、验证前置、跨会话上下文

安装步骤

注册插件市场

/plugin marketplace add obra/superpowers-marketplace

安装 Superpowers

/plugin install superpowers@superpowers-marketplace

开始使用

/superpowers:brainstorm
/superpowers:write-plan
/superpowers:execute-plan

典型工作流

💡 Brainstorm → 📝 Write Plan → ⚙️ Execute Plan → ✅ Verify

↓ 每步都写入 ~/.config/superpowers/plans/，支持跨会话恢复

"核心仅 ~2000 tokens，非常轻量。"

— Simon Willison, 2025.10 深度评测

GitHub → 详细教程 →

📊

Claude HUD — 实时可观测性

jarrodwatts/claude-hud ACTIVE

作者: jarrodwatts · GitHub Stars: 18k+ · 刷新间隔: ~300ms

就像飞机的抬头显示器（HUD），让你对 Claude Code 的运行状态"一目了然"。在终端状态栏实时展示上下文使用率、工具活动、子代理状态和任务进度。

🟢 < 60%

上下文充裕

🟡 60-80%

注意增长

🔴 > 80%

考虑 /compact

上下文健康度 彩色进度条直观显示上下文使用率

工具活动追踪 实时看到 Claude 在读/写/执行什么

子代理追踪 查看哪些 subagent 在运行

使用量限制 5 小时 / 7 天 API 用量统计

安装与显示效果

添加并安装

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

典型 HUD 显示

[Opus] │ my-project git:(main*)
Context █████░░░░░ 45% │ Usage ██░░░░░░░░ 25%

GitHub → 详细教程 →

🔥

Get Shit Done — 上下文工程

gsd-build/get-shit-done ACTIVE

作者: TÂCHES · GitHub Stars: 56k+ · v1.37+ · MIT

解决长周期任务中的"上下文腐烂"问题。核心思想："状态存在文件里，不是上下文里。" 每个子任务都获得一个全新的 200k token 上下文窗口。

"我不写代码 — Claude Code 替我写。"

— TÂCHES, GSD 作者

6 阶段开发流水线

1. 初始化 → 2. 讨论 → 3. 规划

↕

6. 交付 ← 5. 验证 ← 4. 执行

核心命令

命令	阶段	说明
`/gsd-new-project`	初始化	问答式需求提取
`/gsd-discuss-phase N`	讨论	记录实现决策
`/gsd-plan-phase N`	规划	调研 + 原子化 XML 任务计划
`/gsd-execute-phase N`	执行	Wave 并行执行（多子代理同时工作）
`/gsd-verify-work N`	验证	自动化验收测试 + 修复循环
`/gsd-ship`	交付	创建 PR，归档里程碑

Wave 并行执行机制

传统串行（上下文越来越大 ↓）：

[Task1] → [Task2] → [Task3] → [Task4]

GSD Wave（独立上下文 ← 并行执行）：

Wave 1: [Task1 · 新ctx] [Task2 · 新ctx] [Task3 · 新ctx]

Wave 2: [Task4 · 新ctx] [Task5 · 新ctx] [Task6 · 新ctx]

安装

npx get-shit-done-cc@latest

GitHub → 详细教程 →

📚

Learn Claude Code — 学习资源

学习资源聚合 ACTIVE

系统化的 Claude Code 学习路径。从官方文档到社区课程，从 CLI 指南到视频教程，覆盖完整的学习链条。

Claude Code Action — CI/CD 集成

anthropics/claude-code-action OFFICIAL

维护方: Anthropic · 版本: v1.0 (GA) · GitHub 官方 Action

将 Claude Code 无缝集成到 GitHub 工作流中。PR 自动审查、Issue 自动实现代码、 CI 失败自动诊断——让 AI 成为你团队中的"数字工程师"。

常用工作流模板

模板 1：评论触发自动审查

📋 @claude 触发 PR 审查
name: Claude Code PR Review
on:
  issue_comment:
    types: [created]
jobs:
  review:
    if: contains(github.event.comment.body, '@claude')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: anthropics/claude-code-action@v1
        with:
          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
          prompt: "/review"

模板 2：PR 打开自动审查

📋 PR Open Auto Review
on:
  pull_request:
    types: [opened, synchronize]
  # 自动审查每个 PR 的代码质量
  steps:
    - uses: anthropics/claude-code-action@v1
      with:
        prompt: "审查这个 PR，检查代码质量和潜在问题"
        claude_args: "--max-turns 5"

认证方式

方式	配置	适用场景
🔑 API Key	`anthropic_api_key`	通用
☁️ AWS Bedrock	`use_bedrock: true`	已在 AWS 的企业
🌐 Google Vertex AI	`use_vertex: true`	已在 GCP 的企业

GitHub → 详细教程 →

🧩

扩展工具与生态

🧠 claude-mem ACTIVE

⭐⭐ 9.4k+

作者: thedotmack · 发布 3 个月即登顶 GitHub 热榜

持久化记忆插件。自动捕获 Claude 在编码过程中的所有活动，用 SQLite + Chroma 向量数据库存储，并在后续会话中智能注入相关上下文。

mem-search 向量+关键词混合搜索历史记忆

mem-timeline 查看完整会话时间线

Web 查看器 http://localhost:37777

隐私控制 <private> 标签标记敏感内容

安装 claude-mem

npx claude-mem install

GitHub →

📦 插件市场扩展

社区维护的插件市场，提供 30+ 个即装即用的插件。

插件市场	数量	安装方式
Sceleratis/claude-code-stuff	10+	`/plugin marketplace add ...`
danielrosehill/Claude-Code-Plugins	30+	`/plugin marketplace add ...`

详细教程 →

🎬

Remotion Skills — AI 视频生成

🎬 Remotion Agent Skills ACTIVE

🔥 25k+ 安装 · 6M+ 曝光

官方 Repo: remotion-dev/skills · 用 React 代码生成视频

Remotion 是一个用 React 组件生成视频的框架。Agent Skills 是一组 Markdown "使用手册"，安装在 .claude/skills/ 目录下，教会 Claude Code Remotion 的正确 API 和最佳实践。

没有技能时：Claude 会写出 setInterval 等 Web 动画代码 → 渲染报错 ❌
有技能后：自动使用 useCurrentFrame()、interpolate()、spring() ✅

安装

新建 Remotion 项目（或进入已有项目）

npx create-video@latest my-video
cd my-video

安装 Agent Skills

npx skills add remotion-dev/skills

启动 Claude Code 开始创作

claude
# 输入：帮我做一个 30 秒产品宣传片...

渲染输出视频

npx remotion render my-composition out/video.mp4

工作流：创意 → 视频

📝 Spec → 🏗️ Build → 🎨 Refine

创意策划 → AI 用 Remotion 构建组件 → 导出到编辑器精修

社区扩展工具包

Claude-Code-Video-Toolkit 9 个组件 + 7 种过渡 + 主题系统 + EleventLabs TTS
wilwaldon/Claude-Code-Video-Toolkit

Animation-Workflow remotion-best-practices + spec-writing + component-registry
RinDig/Animation-Workflow

remotion-video-skill AI 语音生成（MiniMax / Edge TTS），场景化架构
wshuyi/remotion-video-skill

Remotion GitHub → 详细教程 →

📈

生态演进趋势

Claude Code 正通过插件生态实现三大突破，标志着 AI 编程进入"操作系统级"竞争阶段。

🔄 流程标准化

❌ 随意编码，需求偏离

↓ Superpowers / GSD

✅ 先规划后执行，检查点验证

👁️ 开发透明化

❌ 黑箱操作，无法追踪

↓ Claude HUD / claude-mem

✅ 实时可视，全程可追溯

🤝 协作工业化

❌ 单人助手，无团队集成

↓ Claude Code Action

✅ CI/CD 深度集成，"数字员工"

🧠 上下文持久化

❌ AI 每次都"失忆"

↓ GSD / claude-mem

✅ 跨会话记忆，长期上下文

🎒

下一步行动

第一步：打开 Claude Code

运行 cd ~/AI研究室 && claude

第二步：安装 Claude HUD

先装可观测性工具，立刻看到 AI 的运行状态

第三步：安装 Superpowers

学会先规划后编码的工作流模式

第四步：安装 GSD / claude-mem

解决长周期任务的上下文管理问题

第五步：配置 GitHub Action

让 Claude 成为团队中的自动化代码审查员

Claude Code 生态工具全景指南

生态全景

工具对比总表

Superpowers — 结构化工作流

obra/superpowers-marketplace ACTIVE

安装步骤

典型工作流

Claude HUD — 实时可观测性

jarrodwatts/claude-hud ACTIVE

安装与显示效果

Get Shit Done — 上下文工程

gsd-build/get-shit-done ACTIVE

6 阶段开发流水线

核心命令

Wave 并行执行机制

安装

Learn Claude Code — 学习资源

学习资源聚合 ACTIVE

推荐学习路径

Claude Code Action — CI/CD 集成

anthropics/claude-code-action OFFICIAL

常用工作流模板

认证方式

扩展工具与生态

🧠 claude-mem ACTIVE

📦 插件市场扩展

Remotion Skills — AI 视频生成

🎬 Remotion Agent Skills ACTIVE

安装

工作流：创意 → 视频

社区扩展工具包

生态演进趋势

🔄 流程标准化

👁️ 开发透明化

🤝 协作工业化

🧠 上下文持久化

推荐组合方案

下一步行动