Case Radar

Case Radar · 案例雷达

把"想了解新东西"这件事从"读三手 SEO 文" → "拿到一手真物（截图/源码/演示）"。

输入：一个新东西的名字 + 一句话上下文（"我想用来做 X"）。 输出：一份可浏览的 HTML 案例集，每张卡都配真实物料（不是文字描述）。

核心信念：菜单一文不值，菜才是真东西。GitHub repo 主页是文件列表（菜单），README 里的截图、商店页的安装数、SKILL.md 的原文段落、产品落地页的真实建站效果——才是真东西（菜）。

---

流程概览

每一步都可中断。用户随时可以说"停"、"跳过这一步"、"回到上一步"。

---

阶段 0：环境自检 + 主题对齐

0.1 检查 agent-browser 是否装好

command -v agent-browser

• ❌ 未装 → 告诉用户："这个 Skill 依赖 vercel-labs/agent-browser 抓截图。一行命令装：brew install agent-browser && agent-browser install。装完回来。" 终止。
• ✅ 已装 → 继续

注意：agent-browser install 会下 Chrome 二进制（~169 MB）。如果在中国大陆，可能下载失败。但实测即使 install 卡住，agent-browser 也能复用机器上已有的 Playwright Chromium（~/Library/Caches/ms-playwright/）。所以即使 install 报错，先试一下 agent-browser open https://example.com，能跑就跳过 install。

0.2 检查 gh CLI 已登录（recon 阶段要用）

gh auth status

• ❌ 未登录 → 提示 gh auth login，终止
• ✅ → 继续

0.3 主题对齐——3 个问题，最多问一次

用 AskUserQuestion 一次性问完，不要反复 ping-pong：

1. 新东西的名字和上下文（"Claude Skills 生态" / "MCP 最新玩法" / "AI Agent 框架对比" 等） 2. 用途：① 为研究/产品开发服务（深度优先）② 为内容创作服务（兼顾"我能记住"和"未来能引用"）③ 纯求知/拓展视野（广度优先）④ 三种都要，按事走（边做边定） 3. 范围圈：① 锚定一个生态（如 Claude Skills）② 一个工具/产品（如 cline、cursor）③ 一个概念（如 MCP、Subagent）④ 不设限，临时定

⚠️ 这一步不要扩展成讨论会。3 个问题问完就动手。如果用户答不上某条，给一个合理默认值（用途默认"三种都要"，范围默认"锚定一个生态"），继续。

---

阶段 1：scan · 多渠道扫信源

不重新发明——直接调 WebSearch 或起一个 Agent 跑扫描。

1.1 起一个 scan agent（推荐）

如果案例可能 >20 个，用 Agent 工具起一个 general-purpose subagent 并行跑扫描，避免污染主上下文。Prompt 关键点：

• 信源分级要求：一手源（官方文档/作者博客/原推文/changelog）/ 二手优质（HN 高分贴 / Reddit / Simon Willison 这类深度玩家 / 知名工程师博客）/ 三手中文（公众号/知乎/CSDN，只要有"独立观察"的，纯翻译稿不要）
• 严格砍掉：基础教程、awesome-list（meta 仓库，除非 list 里被点名的好案例）、纯 SaaS API 包装、官方文档操作类示范
• 输出格式：每条 [标题](URL) — 1 句话简介 + 为什么值得深挖
• 数量：目标 25-40 个合格案例
• 末尾要求 100-200 字"扫描印象"（生态全景：3 大热门 / 3 大空白 / 1 个最强信号）

1.2 用户拍板候选范围

scan agent 跑完后，不要立刻全部进 recon。先把信源清单给用户，让她：

• 砍掉明显不感兴趣的几个
• 标出"特别想看"的 5-8 个作为精读单（这部分进入 recon + capture 深加工）
• 剩下的进入"普通卡片"层（只显示标题 + 链接，不抓真物）

⚠️ 如果用户说"全部都要"，提醒她：v2 实测 35 案例 grid 是"断崖式注意力低谷"——读者读到 35 时已经累了。建议精读 5-7 个，其余作为索引保留。最终决定权在用户。

---

阶段 2：recon · 真物侦察（核心增值）

这是 Case Radar 的独家增值。其他阶段都被现有 Skill 覆盖，唯独"判断每个案例的真物在哪种栖息地"这一步是新的。

读 `reference/recon-heuristics.md` 获得 7 种"真物栖息地"的判别模式。

对精读单里每个候选案例，问自己： 1. 这个对象的真物最可能在哪个栖息地？（参考 heuristics 的 7 种模式） 2. 用什么工具抓最合适？（curl 直接资源 / gh API 拉源码 / agent-browser 截图全页）

把每个案例的"真物位置"写下来——这是 capture 阶段的施工图。

反 checklist 化提醒：recon-heuristics 是 patterns 集合，不是 checklist。某个案例的真物可能在 7 种栖息地之外的第 8 种位置。保留发现新栖息地的可能，发现了就更新 heuristics 文件。

---

阶段 3：capture · 抓真物

按 recon 阶段的施工图，对每个精读案例抓真物。

3.1 优先 curl 直接资源（最快、最干净）

curl -sLo screenshots/cases/<name>.<ext> "<url>"

适合：README 里已有的 screenshots/ examples/ assets/ 目录里的图、GIF、demo 视频。无浏览器渲染开销，不会有边框/黑条。

3.2 gh API 拉源码片段

适合：SKILL.md 原文、配置文件、changelog 关键段落。

gh api repos/<owner>/<repo>/contents/<path>/SKILL.md --jq '.content' | base64 -d

把关键段落（10-30 行）保留到 screenshots/cases/<name>-skillmd.txt，HTML 里用 <pre> 块呈现。

3.3 agent-browser 截网页

适合：产品落地页（Next.js SPA）、官方商店页（如 Anthropic plugin store）、长博客全页。

agent-browser open <url>
agent-browser wait 2000             # 等 JS 渲染
agent-browser screenshot --full screenshots/cases/<name>-fullpage.png

⚠️ agent-browser 默认把截图存到调用时的当前目录，不是参数路径——要么 cd 进 screenshots/cases，要么截完用 mv。

3.4 截不到/找不到真物的案例

不要硬凑。这种案例不进精读单，降级回普通卡片层（只显示文字描述 + 链接）。装饰图比无图更糟——v2 复盘已经验证（NeoLab 那张纯封面图被 4 个视角里 2 个点名说是"装饰层"）。

---

阶段 4：embed · 输出 HTML

参考 reference/html-template-spec.md 的视觉规范和层级标签系统。

4.1 文件命名

<工作目录>/<主题简称>-案例集-YYYY-MM-DD.html

例：skills-生态创意案例集-2026-05-14.html

图片路径用相对路径：screenshots/cases/<file> —— HTML 在原位置打开就能加载。

4.2 HTML 结构（4 块）

[Header]           标题 + 一句话 lede + 层级标签图例 + 升级说明（如有 v2）
[工具 Spotlight]   如果 capture 阶段重度使用了某个工具（如 agent-browser），单独 spotlight
[精读卡]           5-7 张富卡片，每张有真物 hero + 妙在 + 为什么是你 + 大 CTA
[Next Step]        3-5 个可选下一步（不下结论，给用户选）

⚠️ 不要加"生态全景 3 大热门"、"6 大分组 grid"这种结构层——v2 复盘已经验证这些是"AI 让自己显得完成度高"的装饰层。如果用户特别要全景图，作为可选附加层。

4.3 层级标签（最多 3 层，不要 4 层）

参考 reference/html-template-spec.md。默认轻量 3 层：事实层 / AI 推测层 / 你的判断区。复杂版（加 共识层、真物层）作为可选，不强加。

---

阶段 5：完成输出

✅ 案例雷达扫描完成！

- 扫描案例：[N] 个，精读 [M] 个
- 真物物料：[K] 件（X 张截图 + Y 段源码 + Z 个对比图）
- HTML：[相对路径]
- agent-browser 用量：[A] 次截图 + [B] 次 navigate

Next：
  - 在浏览器中打开 HTML 查看效果
  - 如发现某张精读卡的真物没抓到位，告诉我哪张，单独重抓
  - 如想把某个案例拆成短文/图文，告诉我

---

核心原则

1. 真物优先，描述其次

文字描述能讲什么、图能讲什么，永远先要图。菜单一文不值，菜才是真东西。 截不到真物的案例，降级到普通卡片层，不要硬塞装饰图。

2. 信源分级，砍掉 SEO 垃圾

一手源（官方/作者）/ 二手优质（深度玩家）/ 三手中文（有独立观察的），三层之外的 SEO 文、awesome 集市、纯翻译稿一律砍掉。

3. 精读 5-7 个，其他索引化

35 个全做精读会让读者"断崖式注意力低谷"。精读单是用户拍的板，不是 AI 全包——把候选清单给用户选，不要自作主张全部深加工。

4. recon 不 checklist 化

reference/recon-heuristics.md 是 patterns 集合，给 Claude 灵活选取。如果某案例的真物在 patterns 之外，记下来更新 heuristics——这个 Skill 应该越用越锋利。

5. 每一步可中断

用户随时可以说"停"、"跳过"、"换主题"。不要一口气从 scan 跑到 embed 不给反应机会——v2 实测每一步都需要用户拍板。

6. 反过度工程化

读 reference/workflow-anti-patterns.md。这个 Skill 容易落入"建工具不做事"陷阱——它的真正价值取决于用户能不能把案例集变成行动（写文章、做实验、定方向），不取决于 HTML 多精美。

---

什么时候不该用这个 Skill（重要）

这一段是 4 视角诊断后留下的自我提醒。Skill 跑得动 ≠ Skill 该被点开。

读 reference/workflow-anti-patterns.md 末尾的"4 个反向信号"判断。简版：

• ✗ 如果你只是好奇但没想拿去做点什么 → 直接读原文/翻 X 列表更轻，不需要跑全套
• ✗ 如果你已经在写一篇相关文章了 → 先把那篇写完，案例当素材手抓即可
• ✗ 如果你这周已经在另一件具体的事上有进展了 → 不要用这个 Skill 制造新的"建工具的忙碌感"
• ✗ 如果新东西的"真物"很难界定（如某种抽象概念/非工具类） → recon 阶段会失锚，应该用 long-research 而非这个

---

使用示例

场景 1：扫一个新生态

用户：扫一下 MCP 生态最新玩法

Skill：
→ 0.1 ✅ agent-browser 装好
→ 0.2 ✅ gh 已登录
→ 0.3 问 3 个对齐问题（用途 / 范围 / 1 个其他）
→ 1.1 起 scan agent，跑 5-8 分钟拉回 32 个候选 + 扫描印象
→ 1.2 用户从 32 个里挑 6 个精读
→ 2 对 6 个跑 recon，判别每个的真物位置
→ 3 拉真物（curl 5 个直接图 + gh 拉 3 段 SKILL.md + agent-browser 截 2 个落地页）
→ 4 出 HTML
→ 5 ✅ 完成

场景 2：恢复中断的 scan

用户：之前那个 Skills 生态扫得怎么样了

Skill：
→ 找最近的 case-radar 输出文件
→ 报告当前状态：scan 已完成（35 个）/ recon 完成 7 个 / capture 完成 4 个
→ 问用户从哪一步继续

场景 3：用户说"我已经在写文章了"

用户：我准备写一篇关于 Cursor 0.50 的文章，先扫一下生态

Skill：
→ ⚠️ 触发"反向信号 #2"：用户已在写文章
→ 反问："你需要的是案例集 HTML 还是几张关键截图直接放进文章？"
   - 案例集 → 继续走全流程
   - 几张截图 → 跳过 scan + embed，直接进 capture，用 agent-browser 抓你指定的 URL

场景 4：临时发现真物在 heuristics 之外

recon 阶段发现某 Skill 的真物是一段 YouTube demo 视频字幕。
heuristics 文件没列这种栖息地。

Skill：
→ 用 agent-browser 抓字幕（snapshot -i 拿 YouTube 字幕面板）
→ 完成 capture 后，提示用户："本次发现新栖息地：YouTube 字幕。
   是否更新 recon-heuristics.md 加入第 8 种栖息地？"
→ 用户确认 → 更新 reference 文件

---

维护与扩展

• 加新的 recon pattern → 编辑 reference/recon-heuristics.md
• 加新的 HTML 视觉模板 → 编辑 reference/html-template-spec.md
• 修改反 anti-pattern 列表 → 编辑 reference/workflow-anti-patterns.md
• 新增整个新维度（如新增多语言案例支持） → 参考 reference/_how-to-extend.md

How to Extend Case Radar · 维护与扩展指南

这个文件给"将来想扩展这个 Skill 的你（或 Claude）"看。Skill 应该越用越锋利——每次实操中发现的新模式，都该回流到 reference 文件里。

---

三类扩展，三种做法

类型 1：发现新的真物栖息地

触发场景：跑 recon 时发现某个案例的真物在现有 7 种栖息地之外（如 YouTube demo / Discord 群截图 / Notion 模板 / Twitter 长推图）。

做法： 1. 给新栖息地起名（一句话标题） 2. 编辑 recon-heuristics.md，在 "## 7 种已知的真物栖息地" 段后追加第 8 种（编号顺延） 3. 写满 4 个字段：长什么样 / 为什么是真物 / 抓法（具体命令）/ 实战案例 4. 在文件末尾的"7 种"标题里更新数字

不需要改 SKILL.md——recon 阶段是开放的 pattern matching，新增 pattern 自动可用。

新栖息地的合格标准：

• 至少有 1 个真实抓过的案例（不要预测性新增）
• 能 3 秒判断"这个对象有没有这种栖息地"
• 抓法是具体命令（curl / gh / agent-browser 之类），不是"自己想办法"

---

类型 2：调整 HTML 视觉规范

触发场景：发现某种视觉元素效果好（如 v2 加上的 before/after 对比图），或某种元素被验证为装饰（如 5 层标签）。

做法： 1. 编辑 html-template-spec.md 2. 如果是"加新元素"：在对应 section 加；同步更新"质量自检清单" 3. 如果是"砍现有元素"：在"反 anti-pattern"或"不要加的层"段记录 4. 关键 CSS 片段直接放进文件，方便 Claude 复制

注意：HTML 模板规范每次实操后最容易膨胀。每次扩展要问："这一条是普适规则还是只在这一次有用？" 只把普适的写进去。

---

类型 3：发现新的 anti-pattern

触发场景：跑完一次 case-radar 后用户/sub-agent 诊断指出"这种做法不好"。

做法： 1. 编辑 workflow-anti-patterns.md 2. 加到对应 sub-agent 视角下（A/B/C/D 四个视角） 3. 给反 anti-pattern 一句话明确的"解"

或者：如果是"反向信号"（什么时候不该用这个 Skill），加到"4 个反向信号"段（可能扩展到 5/6 个）。

---

加新 SKILL 子流程？谨慎

如果想加新阶段（如 "scan 之前先加一个 trend 分析阶段" / "embed 之后加一个分发到飞书的阶段"），先问：

1. 这个新阶段在过去 N 次实操里有几次会用上？ 2. 它能不能用现有 Skill 编排（如 lark-doc 处理分发）？ 3. 如果它只在某些场景下用，能不能作为"可选阶段"而不是必经阶段？

默认答案：不加新阶段。case-radar 的 4 阶段（scan/recon/capture/embed）已经覆盖核心循环，新增容易让它变重。

---

当 v1 / v2 / v3 经验都很丰富后

第 N 次实操（如第 5 次以上）之后，可能需要做一次"经验蒸馏"：

1. 翻所有跑过的 case-radar 输出（HTML 文件）和过程 2. 找出反复出现的判断瞬间——这些是真正的 patterns 3. 找出只出现过 1-2 次的经验——这些是噪音，删掉 4. 重写一遍 reference/ 里 3 个核心文件

频率建议：每 5-10 次实操后做一次，不要更频繁。

---

反向：什么时候考虑废弃这个 Skill

如果发现以下情况，case-radar 可能完成历史使命了：

• 累计跑过 N 次，但用户只在 1-2 次中真正受益（其他都是"看完不动")
• "心动来自具体而不是流程" 已经成为用户的肌肉记忆，不需要 Skill 文件提醒
• 单次需要时，用户直接说"用 agent-browser 抓 X 的真物来" 更直接，跳过 case-radar 整套流程

这时候保留 reference 文件（作为知识沉淀），删掉 SKILL.md 让它不再被触发。

---

一句话

这个 Skill 的存在不是为了被多用，是为了在被用的那一次足够锋利。

>

扩展时坚持这一点。

HTML Template Spec · 输出 HTML 的视觉规范

这个文件不是 HTML 模板代码，是规范——告诉 Claude embed 阶段该遵循的"视觉骨架 + 层级语义 + 反 anti-pattern"。具体 HTML 代码由 Claude 现写，不要从这里复制粘贴。

>

参考实例：公众号文章 同级目录下的 skills-生态创意案例集-2026-05-v2.html 是按本规范的 v2 实物（含 v1 → v2 对比和 fix 记录）。

---

1. 整体框架（4 块结构）

┌────────────────────────────────────────────────┐
│ Header                                          │
│ - meta (日期 + 版本号)                          │
│ - h1 主标题                                     │
│ - lede (一句话总览，限 80 字内)                │
│ - 层级标签图例                                  │
├────────────────────────────────────────────────┤
│ Sticky Nav (TOC，跳转锚点)                      │
├────────────────────────────────────────────────┤
│ 工具 Spotlight (条件性，capture 阶段重度用过的工具) │
├────────────────────────────────────────────────┤
│ 精读卡 (5-7 张富卡片，本页主体)                 │
│   每张：badge → h3 标题 → tagline →           │
│   pick-hero (图/对比图/code 块) →             │
│   pick-skills-list (可选 monospace 灰底块) → │
│   pick-insight (绿色"妙在")                   │
│   pick-why-you (橙色"为什么是你")             │
│   pick-footer (stats + 大 CTA 按钮)           │
├────────────────────────────────────────────────┤
│ Next Step (深色背景，3-5 个可选下一步)          │
└────────────────────────────────────────────────┘

不要加的层（v2 复盘验证为装饰）：

• 6 大分组的 grid（35 卡片全列）
• "生态全景"3 大热门 + 3 大空白 + 1 个最强信号的结构化总结块
• 4 层内容标签（事实 / 共识 / AI推测 / 真物 / 你的判断 → 砍到 3 层）

用户特别要求全景图时，作为可选附加层放在精读卡之后。默认不放。

---

2. 字体与颜色

字体栈

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", 
             "Helvetica Neue", "Microsoft YaHei", sans-serif;

中文优先，无外部 webfont 依赖。

颜色 token

--bg: #fafaf7;              /* 主背景 · 暖白 */
--card: #ffffff;            /* 卡片白 */
--ink: #1a1a1a;             /* 主文字 */
--ink-soft: #555;           /* 次级文字 */
--ink-faint: #888;          /* 标注/出处 */
--line: #e8e6e0;            /* 分隔线 */
--accent: #c5530e;          /* 强调色 · 焦糖橙（云舒喜欢的暖色） */
--accent-soft: #fff1e6;     /* 强调浅底 */
--insight: #0f6f48;         /* "妙在"绿 */
--insight-soft: #e8f5ee;    /* "妙在"浅底 */
--ai-tag: #7c4dff;          /* AI 推测紫 */
--ai-tag-soft: #f3edff;
--tool: #0a6e9d;            /* 工具 spotlight 蓝 */
--tool-soft: #e0f2fb;

不要用 Inter / Roboto / Space Grotesk（避免 AI-aesthetic 字体堆叠）。

---

3. 层级标签系统（最多 3 层）

默认 3 层（推荐）

<span class="layer-tag fact">事实层（出处+原文）</span>
<span class="layer-tag ai">🤖 AI 推测层（待你判）</span>
<span class="layer-tag app">👤 你的判断区（留白）</span>

完整 5 层（用户特别要求时）

加上：

• 共识层（蓝）：多源印证
• 真实物料层（绿）：截图/源码

⚠️ 5 层是 v2 那版的设计，4 视角诊断认为"装饰"。默认不要使用。

---

4. 精读卡（主菜）的内部结构

每张精读卡 4 块：

4.1 Header（卡顶）

[BADGE: 精读 #N · 类型] ← 颜色：默认橙 / 旗舰红 / 中文棕 / 元方法蓝
# 仓库名 / 工具名
副标题（一句话，限 25 字）

4.2 Hero 区（真物）

3 种 hero 模式：

关键 CSS 规则：

/* 多图横排：避免横版图被裁 */
.pick-hero-strip-item img {
  width: 100%;
  height: 240px;
  object-fit: contain;      /* 不是 cover! */
  background: #f5f4ef;      /* 空白部分用浅灰填充 */
  border-radius: 6px;
}

/* 单张大图 */
.pick-hero-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* 代码块 */
.pick-hero-code {
  background: #1a1a1a;
  color: #e8e6e0;
  padding: 16px 18px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px;
  line-height: 1.65;
}

反 anti-pattern：

• ❌ 装饰性品牌封面图（v2 复盘 #7 NeoLab 被指认）—— 要么有信息，要么没有 hero 图
• ❌ object-fit: cover 裁横版图（v2 复盘 baoyu 被指认）
• ❌ 多图风格分裂感（如三张图风格完全不同时，至少加视觉容器统一）

4.3 Body（卡心）

可选 3 个块（按需放）：

1. pick-skills-list —— 灰底 monospace 块，列 Skill 子列表 / 命令清单等 2. pick-insight —— 绿色左边线 "💡 妙在 · ..."（必须有） 3. pick-why-you —— 橙色左边线 "🤖 AI 推测 · 为什么是你"（精读单专用）

4.4 Footer（卡底）

[stats: 📦 安装数 · ⭐ Star · 👤 作者]    [大按钮: GitHub →]  [大按钮: 官网 →]
                                          padding: 8px 16px
                                          background: #1a1a1a (主)
                                          background: white + 边框 (次)

⚠️ CTA 必须够大可点。font-size: 13px; padding: 8px 16px;。

---

5. Sticky Nav 模式

nav.toc {
  position: sticky;
  top: 0;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(8px);
  padding: 14px 28px;
  z-index: 100;
}
nav.toc ul {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
}

锚点跳转到主要 section。最多 8 个锚点，再多就拥挤。

---

6. Next Step (深色块)

.next-step {
  background: #1a1a1a;
  color: #fafaf7;
  padding: 28px 32px;
  border-radius: 12px;
}

3-5 条可执行的下一步选项。不要堆 10 条让用户分析瘫痪。每条带 <strong> 强调主动作 + 简短解释。

---

7. 输出文件命名

<工作目录>/<主题简称>-案例集-YYYY-MM-DD.html

如果之后有 v2、v3 迭代：

<主题简称>-案例集-YYYY-MM-DD-v2.html

保留 v1，不要覆盖——用户可能想对比。

---

8. 图片资源相对路径

所有 <img src> 用相对路径：

<img src="screenshots/cases/<filename>" alt="...">

工作目录结构：

<工作目录>/
├── <主题>-案例集-YYYY-MM-DD.html
└── screenshots/
    └── cases/
        ├── <case-1>-<artifact-type>.<ext>
        ├── <case-2>-<artifact-type>.<ext>
        └── ...

文件命名规则：<案例名>-<物料类型>.<ext>，例：baoyu-xhs-cute.webp、gstack-contributions-2026.png、superpowers-anthropic-plugin.png、recursive-skillmd.txt。

---

9. v2-note 补丁说明块（迭代时用）

如果是 v2 或更后版本，在 header 下加一块说明：

<div class="v2-note">
  <strong>v2 升级了什么：</strong>这里写一段 80-150 字的"和 v1 的区别"。
</div>

样式：浅绿底 + 绿色左边线，跟 insight 块同色系。

---

10. 质量自检清单（embed 完跑一遍）

在告诉用户"完成"之前自检：

• [ ] 所有 <img src> 路径都是相对路径，且文件确实存在
• [ ] 精读卡 5-7 张（不是 35 张全 grid）
• [ ] 每张精读卡都有 hero（图 / 对比图 / code 块），没有 hero 的不进精读单
• [ ] 没有 "纯装饰" hero（如品牌封面只有 logo + 名字）
• [ ] 多图 strip 用 object-fit: contain（不裁原图）
• [ ] 西语/法语/其他非中英文 SKILL.md 段落有中文注释
• [ ] CTA 按钮大小合适（不要 11px 小链接）
• [ ] Sticky nav 锚点 ≤ 8 个
• [ ] Next Step 3-5 条不要 10 条
• [ ] 没有 "生态全景 3 热门 3 空白" 这种装饰结构块（除非用户特别要求）
• [ ] 默认 3 层标签，不是 4-5 层

Recon Heuristics · 真物栖息地图谱

Case Radar 的核心 IP 在这里。别把这个文件读成 checklist——读成 patterns 集合。某个新对象的真物可能在这 7 种之外的第 8 种位置，遇到了就把它加进来。

---

7 种已知的真物栖息地

#1 · README 里的 screenshots/ examples/ assets/ 目录

长什么样：仓库根目录下有 screenshots/、examples/、docs/、assets/、demos/ 等目录，里面是 PNG/WEBP/GIF。

为什么是真物：作者主动放的"我这个项目能做出什么"的视觉证据。

抓法：

# 先列目录看里面有什么
gh api repos/<owner>/<repo>/contents/screenshots --jq '.[] | .name + " (" + (.size|tostring) + " bytes)"'

# curl 直接拉
curl -sLo screenshots/cases/<name>.<ext> "https://github.com/<owner>/<repo>/raw/main/screenshots/<file>"

实战案例：

• JimLiu/baoyu-skills 的 screenshots/xhs-images-styles/cute.webp、screenshots/infographic-layouts/bridge.webp、screenshots/slide-deck-styles/blueprint.webp——直接拿到 Skill 生成的产物
• Leonxlnx/taste-skill 的 examples/floria-top.webp、floria-bottom.webp——用 Skill 真建出来的 Botanic Architecture 落地页

信号：作者愿意把 demo 资源 commit 进 git，说明对效果有信心；越用心维护 screenshots/ 目录的 repo，真物越值得抓。

---

#2 · 官方商店/Marketplace 的产品页

长什么样：Anthropic Plugin Store、VSCode Marketplace、Chrome Web Store、Vercel Marketplace、HuggingFace Spaces 等。

为什么是真物：第三方平台背书的"安装数 + 官方排版 + 真实评价"——比 GitHub repo 页可信。

抓法：用 agent-browser 截全页。

agent-browser open https://claude.com/plugins/<name>
agent-browser wait 2000
agent-browser screenshot --full <name>-store-page.png

实战案例：

• obra/superpowers → https://claude.com/plugins/superpowers 显示 64.5 万次安装、Jesse Vincent 作者署名、Anthropic 排版背书——比任何 GitHub README 截图都有说服力

信号：能上官方 store 的工具自带过滤——质量门槛先过了一道。

---

#3 · SKILL.md / SPEC.md / 配置文件的原文段落

长什么样：repo 里的 SKILL.md、spec.md、CONFIG.md、.cursorrules 等定义文件。

为什么是真物：作者自己写的工作哲学/约束。比所有二手解读都准。

抓法：

gh api repos/<owner>/<repo>/contents/<path>/SKILL.md --jq '.content' | base64 -d > screenshots/cases/<name>-skillmd.txt

挑 10-30 行最锋利的段落（frontmatter + 一个核心 heading 下面的金句）放进 HTML 的 code block。

实战案例：

• obra/superpowers/skills/test-driven-development/SKILL.md 的 "Iron Law: NO PRODUCTION CODE WITHOUT A FAILING TEST FIRST"
• bokan/claude-skill-self-improvement/SKILL.md 的 Phase 1 / Phase 2 流程
• NeoLabHQ/.../reflexion/skills/reflect/SKILL.md 的 "You are a ruthless quality gatekeeper... You will be killed"——气质极端的人格设定

信号：原文段落是否锋利，直接取决于作者的笔力。锋利的 SKILL.md 往往配合好的真物截图——两者一起出现是金矿。

---

#4 · before/after 对比图 / 数据可视化

长什么样：作者放在 docs/images/ 里的对比图、贡献图、性能 benchmark 曲线、用户反馈截图等。

为什么是真物：用自己的成果做证明——胜过任何"我做了 X 然后 Y"的文字描述。

抓法：curl 直接拉两张图。

实战案例：

• garrytan/gstack/docs/images/github-2013.png（772 commits 整年）vs github-2026.png（1,237 commits 仅 Feb-Mar）——Garry 自己放的"用 gstack 前后我的产量对比"

信号：作者放对比图说明"项目有量化效果"。这种栖息地最稀缺也最值钱，找到一个抵 10 个普通案例。

---

#5 · 独立产品落地页（Next.js / Vercel / GitHub Pages）

长什么样：项目有自己的 *.dev、*.io、*.app 域名落地页，通常 Next.js 或类似 SPA。

为什么是真物：作者愿意为项目做独立站，说明它已经超出 repo 范畴成了产品。落地页本身就是"这个 Skill 能做出什么级别的东西"的证明。

抓法：agent-browser 整页截图。

agent-browser open https://<domain>
agent-browser wait 2500   # SPA 等久一点
agent-browser screenshot --full <name>-landing.png

实战案例：

• tasteskill.dev——Taste Skill 的官网，本身就用 Taste Skill 做的，展示"Floria"、"Botanic Architectures"等真实建站案例
• agent-browser.dev、chrome-relay.kushalsm.com 等

信号：有独立站 + 站点本身有审美 = 这个项目对效果有自信。

---

#6 · 第三方深度玩家的实战博客

长什么样：Simon Willison、Pieter Levels、Anthropic 工程师博客、独立 substack 写手用这个工具做了具体的事并写出过程。

为什么是真物：第三方独立验证，比作者自述更可信；过程描述里通常自带截图。

抓法：agent-browser 整页截博客原文。

agent-browser open <blog-url>
agent-browser wait 1500
agent-browser screenshot --full <name>-blog.png

实战案例：

• Fred Benenson 用 Claude Code 重做 Spotify 推荐的博客文章
• Simon Willison 用 Skills 解决 Starlette 1.0 breaking changes 的文章

信号：找博客时优先：① 写作者本身有声誉 ② 过程有截图/代码 ③ 不是"What is X" 而是 "I did X with Y" 的实战记录。

---

#7 · README 里的 ASCII workflow / 命令示例 / Demo Block

长什么样：README 里有一段以 ` 围起来的命令交互流程、ASCII 流程图、典型 session 录屏文字版。

为什么是真物：作者自己演练过的真实工作流，不是想象的使用场景。

抓法：用 WebFetch 抓 README，提取那段 code block，放进 HTML 的 <pre> 块。

实战案例：

• garrytan/gstack README 里的 /office-hours → /plan-ceo-review → /ship 完整流程
• agent-browser 自己的 README 里的 open → snapshot -i → click @e3 → screenshot core loop

信号：作者写的 demo block 越具体、越有变量值（而不是占位符），真实度越高。

---

如何选 1 个最值得抓的真物

对每个候选案例，按这个顺序问：

1. 它有 #4 数据对比图吗？ → 有 → 优先抓，最稀缺 2. 它有 #5 独立产品落地页吗？ → 有 → 抓首屏 + 滚到 bottom 整页截 3. 它有 #1 screenshots/ 目录吗？ → 有 → 挑 1-3 张最有代表性的 4. 它在 #2 官方商店有页吗？ → 有 → 抓商店页（含安装数） 5. 它的 SKILL.md（#3）里有金句吗？ → 有 → 抓段落 6. 作者类型决定 #6 #7：如果作者是知名工程师/博主，找 ta 写的 ↑ 实战博客；如果作者是无名小卒，去 README 找 #7 demo block

一个案例最多抓 3 件真物——再多就不是精读了，是堆砌。

---

反向信号：什么时候真物难找

• repo star 数 < 50 + 没有 screenshots 目录 → 可能根本没做出过像样的效果，不要进精读单
• README 里全是文字、没有任何 image / code block / link → 同上
• repo 描述模糊（如 "An experimental agent project"）→ 作者自己也没定型，跳过

---

加新栖息地的流程

发现一种本文未列出的真物形态时（比如 YouTube demo / Discord 群聊截图 / Notion 工作模板）：

1. 给它起名（一句话标题） 2. 写 4 个字段：长什么样 / 为什么是真物 / 抓法 / 实战案例 3. 加到本文档末尾，编号 #8、#9... 4. 在 SKILL.md 主流程里不需要改任何代码——recon 阶段是开放的 pattern matching，新增 pattern 自动可用

---

元规则（这一条最重要）

真物的判别标准不是"是不是漂亮"，是"能不能让人 3 秒内 grok 这个工具能做出什么"。

>

baoyu 的 cute.webp 萌系卡片不"专业"，但 3 秒看懂"哦，能做这种小红书图"——它是真物。

>

Anthropic plugin store 上 superpowers 的页面"很官方"但只是排版好——如果不显示 64.5 万安装数，它就不算真物。

>

永远问："这一张图/这段文字，能不能替代 500 字描述？" 不能就不是真物。

Workflow Anti-Patterns · 不要做什么

这个文件是 Case Radar 第一次实操（2026-05-13/14，扫 Claude Skills 生态出 v2 HTML）之后 4 视角 sub-agent 诊断的精华——他们指认了什么会让这个 Skill 变成"建工具不做事"的陷阱。

>

Skill 被点开时，先读这里。

---

头部金句（最重要的一句）

心动来自具体而不是流程。Skill 化能复现工作流，但复现不了那一下心动。

>

——D 视角（元方法论批判者），2026-05-14

这个 Skill 真正的杠杆点不是"按一下就跑 30 分钟"，是让用户在被勾住的瞬间降低执行摩擦。如果用户没被勾住，这个 Skill 不该被点开。

---

4 个反向信号（什么时候不该用这个 Skill）

✗ 信号 1：你只是好奇但没想拿去做点什么

症状：开了 Skill 之后没想清楚"扫完要干嘛"。

为什么不该用：Case Radar 跑 30-60 分钟 + 用 3 个工具 + 输出 HTML。如果纯粹好奇，直接读原文/翻 X 列表更轻。

替代方案：直接 WebSearch + 翻 1-2 篇博客即可。

---

✗ 信号 2：你已经在写一篇相关文章了

症状："我准备写一篇 X，先扫一下生态" / "我下周要发 X 主题，先调研一下"

为什么不该用：写作过程中临时需要的截图，直接用 agent-browser 抓特定 URL 就够了，不需要跑全套 scan + recon。先把那篇文章写完。

替代方案： 1. 用 writing-assistant 起草文章 2. 写到具体段落需要图时，让 Claude 直接用 agent-browser 抓 3. 写完之后如果还想要案例集 HTML 当资料库，再回来跑 case-radar

---

✗ 信号 3：你这周已经在另一件具体的事上有进展

症状：当前主线明确（如"4 月主线：用 AI 给自己提效，封装 Skills 合集 v2"），但临时想"扫一下其他生态"。

为什么不该用：04-04 五视角诊断指出过——"实际在优化安全感而非影响力，用忙碌（建体系/扫生态）回避在一件事上见真章"。case-radar 容易被当作"我在做事"的精致借口。

判断标准：如果"扫这个新生态"和你当前主线无直接关系，优先回主线。

替代方案：把这个新生态加入"下次扫"的候选列表，今天继续做主线。

---

✗ 信号 4：新东西的"真物"难以界定

症状：扫的对象是抽象概念（如 "Agentic AI 的本质" / "MCP 设计哲学"）而非具体工具/生态。

为什么不该用：recon 阶段会失锚——抽象概念没有 README、没有 screenshots、没有商店页。

替代方案：用 long-research——它专门处理"我有困惑，跑半天给我结论"的抽象调研。

---

4 视角诊断的核心问题清单（自检用）

第一次实操后 4 个 sub-agent 各自指认的问题，在 case-radar 第 N 次运行时别再犯：

A 视角（5 分钟读者体感）说的体验问题

1. ❌ 35 案例全列 grid 是"断崖式注意力低谷"——读到第 30 卡就疲惫

• 解：默认精读 5-7 张，其余作为可选索引层

2. ❌ "HTML 同时承担菜单和研究汇报双重角色"——INFP-T 读菜单不读汇报

• 解：默认菜单模式（短卡 + 真物），研究汇报模式（全景图 + 大段总结）只在用户特别要求时开启

3. ❌ 装饰性品牌封面占用同等视觉权重

• 解：没有真物的案例不进精读单

B 视角（工作流封装）说的边界问题

1. ❌ 不要在 scan 阶段重写 github-repo-search / WebSearch

• 解：scan 显式调用已有工具，不重复造轮子

2. ❌ 不要把 recon 写成 checklist

• 解：recon-heuristics.md 是 patterns 集合，允许第 8 种栖息地

3. ❌ 不要在 embed 阶段重写 readable-output

• 解：embed 显式参考 readable-output 风格，只加 case-radar 独有的卡片模板

C 视角（内容资产价值）说的产出问题

1. ⚠️ 跑完 case-radar 不发文章 = 沉淀价值随时间衰减

• 解：完成输出后的 Next Step 明确提示"2 周内挑 1 张精读卡拆成文章"

2. ⚠️ 完整 HTML 是资产，但 ROI 最高的常常是其中一两张卡的独立成文

• 解：Next Step 列出"哪几张卡现成可拆"

D 视角（元方法论）说的最深问题

1. ❌ 4 层内容标签是"AI 让自己显得完成度高"的装饰

• 解：默认 3 层（事实 / AI 推测 / 你的判断）

2. ❌ "scan → recon → capture → embed" 的命名仪式感容易让人用流程感代替具体行动

• 解：每阶段不强制，每阶段可中断、可跳过、可轻量化

3. ❌ "案例集 HTML" 本身可能是回避动作——用扫描代替"做出影响力作品"

• 解：本文档的"4 个反向信号" + Skill 入口的自检问题

---

反 over-engineering 检查（embed 前跑一遍）

每次跑到 embed 阶段时，问自己：

1. 这份 HTML 的 80% 价值集中在哪 20%？

• 通常是：3-5 张有真物的精读卡 + 顶部工具 spotlight（如果有）。其他都是装饰，要砍。

2. 这份 HTML 有没有 "AI 显得完成度高" 的装饰层？（如 4 层标签、6 大分组、生态全景结构图）

• 有 → 砍掉

3. 用户读完会留下什么？如果让她记住 3 件事，会是哪 3 件？

• 答不上 → HTML 没产生认知锚点，要重构精读卡的真物

---

结尾提醒

Case Radar 是放大器，不是替身。

它能放大你"被某条微博/一篇博客勾住"的瞬间——降低你跑完整调研的摩擦。它不能替你产生那个被勾住的瞬间。

如果今天你没被任何东西勾住，关掉 Skill，去散步。明天某条微博让你眼前一亮再回来。