Plan Mode Visualizer — Development skill for Claude Code

Plan Mode Visualizer

一个 Claude Code skill：在 Plan 模式需要反问你澄清问题时，生成一个交互式 HTML 预览，让你在点选前**看到**备选方案（布局、配色、流程、层级），一键把选择复制回终端。

简体中文 · [English](README_en.md)

---

安装

一行命令安装到 Claude Code 的用户 skills 目录：

git clone https://github.com/Antony7e4/plan-mode-visualizer.git ~/.claude/skills/plan-mode-visualizer

重启 Claude Code 或开一个新会话即可生效。

它做什么

当 Claude Code 进入 **Plan 模式**（或你说「采访我」/「先问我几个问题再开始」）时，Claude 通常会抛出一串文字问题。但对于设计风格、UI 布局、组件样式等问题，光靠文字很难清晰地理解。

这个 skill 会在这些时刻介入，生成**一个独立的 HTML 文件**：

• 把每个备选方案用合适的保真度呈现——线框图（布局类）、高保真 mockup（视觉风格类）、Mermaid 流程图（流程 / 状态机类）。
• 让你点击选择，并在合适的场景提供实时预览（比如点「深色」→ 示例 UI 立刻换色）。
• 把所有选择汇总在底部常驻栏，点击「复制答案」就把格式化好的字符串写进剪贴板：

  Q1: A  (卡片布局)
  Q2: B  (深色主题)
  Q3: A  (顶部导航)

  你粘贴回终端作为回答即可。

只有一个 HTML 文件，用 `file://` 打开，不需要服务器、不需要构建。Tailwind 和 Mermaid 通过 CDN 加载。

触发条件（以及不触发的情况）

**同时**满足以下两条才会触发：

1. 上下文条件 —— Claude Code 处于 Plan 模式，或者你明确要求进入澄清 / 采访流程。
2. 内容条件 —— 至少有一个待问的问题带有明显的视觉 / 空间 / 流程 / 层级维度。会触发的例子：
   • 布局类：「顶部导航 vs 侧边导航」「2×2 网格 vs 单排横向」
   • 视觉风格类：「浅色 vs 深色」「圆角 vs 直角按钮」
   • 流程 / 状态类：「同步处理 vs 异步队列」
   • 层级结构类：「组件树形状」「数据 schema 嵌套」

**不会触发**的场景：纯技术选型（Postgres vs MySQL、超时值、库版本等），或者你已经要求快速回答。过度触发会制造噪音，这是明确的反模式。

三个实际场景（Dashboard 页面、文件上传、缓存策略）见 [`assets/example-questions.md`](assets/example-questions.md)，演示了应触发和不应触发的判定过程。

在 Plan 模式里的位置

┌───────────────────────────┐
│  你：帮我做一个 Dashboard │
│      （Plan 模式）        │
└─────────────┬─────────────┘
              │
              ▼
      Claude 起草澄清问题
              │
      有视觉维度？── 否 ──▶ 仅在终端提问
              │
             是
              │
              ▼
   Skill 生成 plan-<时间戳>.html
              │
              ▼
   Claude 在终端输出路径 + 问题清单
              │
              ▼
   你打开 HTML → 点选 → 复制
              │
              ▼
   在终端粘贴「Q1: A  Q2: B …」
              │
              ▼
        Claude 继续开始实施

目录结构

plan-mode-visualizer/
├── SKILL.md                     ← skill 定义，Claude Code 启动时加载
├── assets/
│   ├── template.html