show-me Skill：让 Claude Code 画图而不是写八百字的技术解释

Skill超级捕获手 技术创作者 2026-09-06 11 阅读

Claude Code 的文字解释正在让所有开发者疲劳——冗长的段落、”让我逐一分析”的开场白、800 字的组件说明。而一个叫 show-me 的 Skill，用一行命令让 Claude 画图而不是说话，瞬间在 Reddit 引发热议，48 小时内超过 8000 名开发者收藏。

功能与原则

show-me 是 HumanLayer Skills 套件中的”可视化解释”Skill。当你在 Claude Code 里执行 /show-me，它不会给你一段文字，而是生成组件树、调用栈结构图、代码形状草图、聚焦的 HTML artifacts，让你一眼看懂代码逻辑，而不是逐行阅读文字解释。

核心设计原则：图表优先于文字，结构优先于描述，聚焦优先于堆砌。Reddit ex-CEO 的吐槽直击痛点：Claude 的文字输出”gratingly awful”——所有人都有同感，但没人知道原来可以这样解决。

认可度

  • GitHub Star：约 2,800（截至 2026-09-06），周增长 +73.8%，进入 GitHub Trending 周榜第 10
  • 社媒热度：在 Reddit r/ClaudeAI 引发病毒式讨论，”8,000 devs bookmarked this in 48 hours”成为 Skill 圈热句
  • AICrier 专题报道：2026-09-05 专门发稿分析 HumanLayer Skills 的崛起
  • 技能市场：LobeHub、skills.sh、CocoLoop 等主流市场均有收录

链接

GitHub：https://github.com/humanlayer/skills

原作者

HumanLayer（核心维护者：sbepstein/dexhorthy）——专注于为 AI 编码智能体提供”人在回路”（Human-in-the-Loop）基础设施的公司，旗下产品包括 SDK（支持 Slack/Email/Discord 多渠道审批）、CLI 工具和这套开源 Skill 合集。

介绍

HumanLayer 团队发现：当 AI 智能体越来越多地介入开发流程，一个根本矛盾浮现——开发者需要理解 AI 在做什么，但 AI 给出的解释全是文字，而不是人类更擅长处理的视觉结构。

show-me Skill 正是对这一矛盾的直接回应。它通过 /show-me 命令触发，调用 Claude 生成代码形状可视化图：当你问”How does this React component work?”，它输出的不是”这个组件包含三个子组件，分别是 A、B、C……”而是直接生成一个组件树形图的 HTML artifact，点击即可放大查看。

这个 Skill 来自 HumanLayer 更大的 Skill 套件，后者还包括：
– improve-claude-md：用 <important if> 块重写 CLAUDE.md，提升指令遵循度
– narrow-react-prop-types：将 React prop types 收窄到真实运行时路径而非测试路径
– build-iterated-agentic-loop：为代码库构建迭代式 Agent 工作流（含 GitHub Actions）
– design-control-loop：设计 Agent 控制回路（sensor-controller-actuator 模型）并本地构建

特点

  • 零门槛可视化：一行命令 /show-me，无需任何图像生成 API 或外部服务
  • 多模态输出：组件树、调用栈图、diff 可视化、聚焦 HTML artifacts
  • 即装即用：通过 npx skills add humanlayer/skills --skill show-me 安装
  • 工程判断可移植：将资深工程师的”看代码”经验固化为可复用 Skill
  • 无供应商绑定：纯指令文件，兼容 Claude Code、Codex、OpenCode 等主流编码 Agent

使用方法

安装：

npx skills add humanlayer/skills --skill show-me

使用（在 Claude Code 会话中）：

/show-me

或配合具体问题：

/show-me 这个 useAuth hook 的执行流程

Agent 将生成可视化的结构图（HTML artifact）作为回复，而非文字段落。

使用场景与人群

  • 适用场景：代码审查、周末项目交接、阅读他人代码库、架构讨论、面试准备
  • 目标用户：对 AI 编码助手有依赖但对文字解释疲劳的开发者；希望团队成员更好地理解 AI 生成代码的 Tech Lead

输入与输出案例

输入：

/show-me 这个 useEffect 的依赖链和副作用执行顺序

输出：
一个聚焦的 HTML artifact，显示 useEffect 内部的依赖关系树、cleanup 函数的执行时机、以及与周边 state 的联动箭头——比 500 字段落更容易理解。

同类 Skill 横向对比中，show-me 的差异化在于：它不提升 AI 的能力，而是改变了 AI 输出的形式——用人类更擅长的视觉语言替代文字语言。这是一个看似简单但实际解决了实际痛点的切入点。

GitHub: https://github.com/humanlayer/skills

评论区

0 条评论

登录后可评论。

Skill超级捕获手 11 阅读