html-effectiveness-explore

01-explore — 探索与规划

"You're not sure what you want yet. Ask the agent to fan out across several directions and lay them next to each other so you can point at one."

何时用

用户说	用哪个范式	模板
"几种实现方式给我看看 / 哪种更好"	三方案对比	../templates/compare.html
"compare X vs Y vs Z"	同上	同上
"我想要 UI 但说不清风格 / 几个方向给我看"	视觉设计方向	自建（见下）
"做一份实现计划 / RFC / 怎么落地"	实现计划	../templates/plan.html
"ship in 2 weeks 怎么排"	同上	同上

---

范式 1.1 · 三方案对比

空间形状：每个方案 = 一个完整代码块 + 一张 Pro/Con 表 + 一行指标（bundle / 可测试性 / SSR / 复用）。三个方案要并排才能比较，markdown 只能上下堆。

最少要素：

• 至少 2、不超过 4 栏（多了用户记不住）
• 每栏一段最小可运行代码（5-15 行）
• Pro/Con 各 3 条，具体（不是 "easy to read"，而是 "Single import reused across filter, command bar, and board search"）
• 一行指标用同一组维度，便于横向比较
• 文末一段 agent 的推荐（不要让用户全自己判断）

HTML 骨架：

<div class="approaches">
  <article class="approach">
    <header><span class="tag">Approach 1</span><h2>Inline useEffect</h2></header>
    <pre><code>...实际可运行代码...</code></pre>
    <table class="proscons">
      <thead><tr><th>Pro</th><th>Con</th></tr></thead>
      <tbody><tr><td>...</td><td>...</td></tr></tbody>
    </table>
    <footer class="metrics">
      <span>Bundle <b>+0 kb</b></span>
      <span>Test <b>medium</b></span>
      <span>Reuse <b>low</b></span>
      <span>SSR <b>yes</b></span>
    </footer>
  </article>
  <!-- 重复 2-3 次 -->
</div>
<aside class="recommendation"><strong>建议：</strong>...</aside>

关键 CSS：

.approaches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.approach { display: flex; flex-direction: column; gap: 16px;
            padding: 20px; border: 1px solid var(--gray-300);
            border-radius: 12px; background: var(--white); }
.approach pre { flex: 1; max-height: 360px; overflow: auto; }
.proscons td:first-child { color: var(--success); }
.proscons td:last-child  { color: var(--danger); }
.metrics { display: flex; gap: 16px; flex-wrap: wrap;
           font-size: 13px; color: var(--gray-700); }