Show-Me Skill：让 AI 编码 Agent 从大段废话切换成图示表达的视觉神器

最近 X、Reddit、Hacker News 上开发者集体吐槽一件事：Claude、Codex 这类 Agent 模型答对了，但答得像”论文”——长篇 jargon、套话和”我做了 X、改了 Y、加了 Z”那种复读机式说明，把真正想看的逻辑全埋在文字里。HumanLayer 创始人 dex 直接把内部工具打包成 /show-me Skill 上线，3 天内冲进 Show HN 首页，48 小时被 8000 个 dev 收藏。

一句话定位

show-me 是一个装在 Claude Code / Codex / Cursor 里的”视觉化输出” Skill——一句话召唤它，Agent 就不再回一墙 Markdown，而是用组件树、调用栈、Mermaid 图、文件布局、伪代码、diff 语法、HTML mockup 这 7 种紧凑视觉形态回答。它解决的不是”AI 不能画图”，而是”AI 不愿意画图”。

功能与设计原则

• 核心能力：让 Agent 在解释 / 设计 / 评审三种场景下，自动挑最合适的视觉形态输出，跳过前言和客套话
• 设计原则：依据 Coda Hale「intuition vs attention」的理念——视觉皮层处理信息的带宽远高于阅读，因此把”用文字描述形状”压缩成”画形状”
• 触发方式：用户显式 /show-me 或在 prompt 里写”show me”，Skill 都自动接管
• 支持形态：组件树（前端结构）、调用栈（后端控制流）、Mermaid 图（时序/状态）、文件布局（重构范围）、伪代码（算法逻辑）、diff 语法（增量变更）、HTML mockup（产品原型）

认可度

• GitHub Stars：humanlayer/skills 仓库 385 ⭐（截至 2026-08-21），TypeScript，13 forks
• 社媒热度：Show HN 前列，Reddit r/ClaudeAI、r/LocalLLama 同步讨论，dex 原帖 24 小时内 600+ likes
• 第三方目录收录：skilld.dev / Skillselion / claudepluginhub 同时收录，show-me 在 Skillselion「trending skills」列表里以 297 票热度进 Top 20
• 48 小时 8000 dev 收藏（X 原帖数据，未经独立核验）
• 作者背景：HumanLayer 创始人 dex（@dexhorthy），前 GitHub Copilot 团队，做 AI Coding 工具链出身

链接

• GitHub：https://github.com/humanlayer/skills
• 安装命令：npx skills add humanlayer/skills --skill show-me
• 官方博客：https://www.humanlayer.dev/blog/show-me-skill

原作者

dex（@dexhorthy），HumanLayer 创始人 / CEO。HumanLayer 是为 AI Agent 提供 human-in-the-loop 审批层的公司，YC 投资方背景。dex 同时是 Claude Code 生态最早期的重度用户之一，X 上长期输出关于”AI 编程体验”的吐槽与改进建议，被开发者圈称为「最会写 prompt 的 PM」。

项目介绍

show-me 来自一个非常具体的痛点：开发者打开 Claude / Codex 对话框，Agent 给出一段 800 字的方案说明，里面堆砌了「考虑到」「为了」「我们先」这种 hedging 语言，真正决定方案能不能用的”形状”——哪些函数被调用、组件树长什么样、迁移影响哪些文件——全部埋在文字里。dex 把 HumanLayer 内部用了一年多的内部工具整理成 Skill 公开发布。

它不是新发明，而是把已经在 humanlayer 产品里跑通的 7 种视觉模板整理成 200 行左右的 SKILL.md，告诉 Agent：「回答时跳过寒暄，从以下 7 种视觉形态里挑一个最合适的，必要时多形态组合。」每个形态都有现成的 YAML / Mermaid / HTML 模板，Agent 直接套。

核心特点

• 强制视觉优先：在 Skill 里硬性写明 “skip the preamble, keep prose brief”，把文字降到辅助位置
• 7 种形态按场景配对：组件树对应前端、调用栈对应后端、diff 对应增量、HTML 对应原型，不是一锅端
• 零依赖：纯 SKILL.md + 少量 HTML 模板，不依赖任何 IDE、API key 或运行时
• 跨 Agent 兼容：Claude Code、Codex、Cursor、Cline 都支持走同一套 SKILL.md
• 可定制：用户可以 fork 自己的版本替换品牌色、间距、组件样式

使用方法

1. 安装（Claude Code / Codex / Cursor 通用）

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

2. 在项目里调用

/show-me

或在 prompt 里直接写：

show me how this request flow works
show me the diff for this PR
show me the component tree for src/Session.tsx

3. 配合其他 Skill 组合

dex 推荐和 grill-me（mattpocock 写的计划质疑 Skill）一起用：/grill-me 把方案问穿，/show-me 把方案画出来——前者压质量，后者压可读性。

使用场景与人群

• 目标用户：每天重度使用 Claude Code / Codex / Cursor 的开发者，尤其是 reviewer 角色
• 代码评审场景：让 Agent 用 diff + 文件布局图汇总一个 200 行的 PR，5 秒看完
• 方案设计阶段：在 Agent 动手写之前，用组件树 / 调用栈讨论”代码形状”，避免大改返工
• 新成员 onboarding：让 Agent 画出陌生模块的组件树和文件布局，比读 README 快 3 倍
• 不适合：一行 typo 修复、变量重命名等小改动——画图的成本反而比直接改高

输入输出案例

案例 1：组件树可视化

输入：

/show me the component tree for src/session/SessionPanel.tsx

输出（节选）：

(SessionPanel.tsx)
  useSessionEvents()      ← subscribes to event stream
  useDraft()              ← local editor state
  └─ <Editor />           ← controlled by useDraft
     └─ <Toolbar />       ← receives onSave prop
  └─ <HistoryList />      ← reads from useSessionEvents

案例 2：调用栈可视化（重构前 review）

输入：

/show me the call stack when a user submits the form

输出（节选）：

submitForm
  validateRequest        ← middleware/auth check
  createSession          ← writes to SessionStore
  persistPrompt          ← caches prompt content
  expandSkillMention     ← parses /skill commands
  launchAgent            ← spawns subagent
    loadContext
    callModel
    persistResult
  navigateToSession      ← redirects UI
  subscribeToEvents      ← opens SSE stream

对比 Agent 默认输出的 6 段 Markdown 说明，这个调用栈让 reviewer 30 秒内看出”expandSkillMention 在 persistPrompt 之前还是之后”这种关键顺序问题。

总结

show-me 是 2026 年 8 月 Claude Code 生态里最”小而美”的一类 Skill：200 行 SKILL.md 解决一个全行业痛点（Agent 输出太啰嗦），不引入新模型、不依赖新 API、装上就能用。它的爆火也反映了一个信号——AI Coding 的下一波竞争点不再是”模型多强”，而是”输出多贴合人脑”。如果你的 Claude 会话记录已经长到看不完，/show-me 是当下最值得装的一个 Skill。

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