此技能的功能
将“比较 X 的一些选项”转化为一个真正的工具。你生成几个真正独特、有研究支持的 X 变体，将每个变体呈现在一个可共享的比较看板的各自面板中，然后交给人类进行比较、选择优胜者并留下反馈。他们的选择会回到你这里，你再深化那些优胜者。
它适用于任何事物：替代解决方案、UI/组件设计、测试/评估策略，以及生成的内容（代码、图像、音频、文本）。该看板是一个无依赖的独立 HTML 文件，因此可以放入任何项目。
$ARGUMENTS 是要比较的内容。如果描述含糊不清（比较什么，改变哪个维度，针对哪些主体），在生成之前先提出 1-2 个澄清问题。
核心原则（支柱——不可跳过）
- 真正独特、不同的变体——不是旋钮微调。 每个变体都是一个真正的、有名有姓的技术。如果两个变体仅仅因参数值不同而不同，那么它们是一种方法的两次采样——将它们合并。检验标准：如果你能用相同的句子描述两个变体，只交换一个数字，那么它们就不是不同的。
- 研究本身就是校准步骤。 当领域有文献或既定实践时，在构思变体之前，先研究实际的有名技术——使用 WebSearch / 文档 /
references/。仅凭想象猜测菜单会导致过高或过低估计。（参见 reference.md §1 中按领域分类的研究提示。） - 受控比较。 冻结所有输入；仅改变被测试的一个维度。在一行的每个卡片中，使用相同的种子/场景/提示/副本。在一行的目标中说明冻结的输入。一行 = 一个被改变的维度。
- 客观徽章。 在任何可衡量的地方，为每个面板附加一个颜色编码的指标徽章（距目标距离、通过率、延迟、打包大小、对比度……），以便选择基于证据而非感觉。
- 隔离混杂因素——同一产物的多重视角。 当同一输出的多个视角值得查看时，给卡片一个
content.views切换（例如 乐谱 / 钢琴卷帘 / 音频 / 原始 / 差异）。典型用例是 RAW 与 PROCESSED——将原始产物和处理后的产物并排放置，以便人类可以判断翻译/重新着色/归一化/序列化/压缩流水线的哪个阶段导致了不良结果；content.raw是其双视图快捷方式。切勿伪造切换。 仅当视图真正不同时才添加——如果处理后的和原始的结果相同（忠实变换），则删除切换。无操作切换比没有更糟糕；看板会自动折叠字节相同的视图，并在 ≤1 个视图时自动隐藏切换。 - 指标与产物的诚实性。 将真实的产物与其指标徽章并排呈现，让不一致之处显现出来。如果乐谱显然有一个降低的三级音，但“距离”徽章显示为 0，那么这种矛盾本身就是发现——它意味着指标忽略了一些东西。揭示这一点才是重点；不要将产物隐藏在数字后面，也不要调整数字以匹配。
- 真实内容门槛。 每个面板都显示真实的输出——绝不是存根、占位符或字节大小检查。验证实际内容是否渲染。对于音频，内容必须真正发出声音——在屏蔽示例源（reference.md §9 离线门）的情况下验证——而不仅仅是渲染。
- 一个可共享的表面。 输出一个人类可以打开的单个看板（文件或链接），而非分散的产物。
- 检查点纪律。 首先构建风险最高/最具代表性的切片（一个主体、一行，包含真实内容 + 音频/播放相关内容）。在扩展到所有维度之前，先向人类展示并获取反馈。
- 闭环。 人类在看板上选择优胜者并留下反馈；该导出的结果回到你那里进行细化。然后深化那些优胜者。
- 各主体优胜者 + 融合。 当最佳变体因测试主体而异时，呈现各主体的优胜者，并添加一个融合/综合轮次，将获胜特性组合起来，而不是强制选择一个全局优胜者。多个主体的意义在于揭示单一方法很少能处处获胜——尊重这一点，而不是将其平均化。
工作流程
1. 澄清比较。 根据 $ARGUMENTS，确定：比较的内容是什么，每行中变化的一个维度，以及受控的主体/种子（2 个是良好的默认值）。仅在确实存在歧义时提问。
2. 研究真实的变体。 如果该领域有既定技术，首先查找它们（reference.md §1 包含研究提示）。为每行生成一个由 2-6 个有名有姓、真正不同的方法组成的简短列表。拒绝任何仅因参数不同而不同的两个方法。
3. 为每个变体生成真实内容。 对于每个 (主体, 行, 变体)，生成实际的产物并选择其内容类型：html（UI/文本）、code、image、iframe、audio（包括 WebAudio 合成）或 passfail（测试/评估）。参见 reference.md §2 中的模态表。为了提供同一输出的多个视图，将 content.views 设置为一个命名的视图列表（第一个是默认值；相同的视图会折叠，当 ≤1 个视图时切换自动隐藏）——或者使用 content.raw 双视图快捷方式，用于流水线可能隐藏真相的情况（原则 5）。在任何可衡量的地方附加客观的 badges，并将它们与真实产物一起展示，以便揭示矛盾（原则 4, 6）。
渲染真实领域产物（乐谱、图表、示意图）： 可靠的方法是在无头页面中渲染为 <svg>，提取 svg.outerHTML，并通过 html 内容类型嵌入（内联 SVG —— 而非 <img> data-URI，后者会丢失 SVG 命名空间并渲染失败）。字形渲染器（例如 VexFlow/Bravura）需要在渲染页面和看板上都将字体内联为 base64 @font-face，在渲染和截图之前等待 document.fonts.ready。template/render-artifacts.example.mjs 是一个可直接复制和调整的工具，专门用于此目的；reference.md §6 包含完整配方和注意事项。
4. 从模板构建看板。 将 template/comparison-lab.html 复制到项目中（放在可服务的位置，或者任何可通过 file:// 使用的位置）。使用 template/README.md 中的模式，将你的数据集写入一个旁边的 data.json 文件中。不要手动重新创建新的 UI——模板已经提供了贴纸看板、徽章、切换、按钮和导出功能。
- 通过 http(s) 提供服务：
data.json会被自动获取。 - 双击打开（
file://）：将数据集粘贴到 HTML 中的<script id="inline-data">块中（在file://下，获取同级文件会被阻止）。
5. 验证其渲染真实内容。 打开看板并确认每个面板都显示实际输出（而非占位符），徽章有颜色，任何 views/raw 切换在存在时正常工作（并且在没有真正第二视图时不存在），并且“选择/反馈/导出”功能正常。如果你有权限使用无头浏览器，截取屏幕截图——也截取手机宽度的（看板是移动优先的）。修复任何看起来像草稿的内容。
6. 检查点——共享风险最大的切片。 将第一个主体/行完全构建好的看板交给人类（链接或文件）。在扩展到其余部分之前获取反馈。这是原则 9——不要默默地构建所有内容。
7. 收集选择 + 深化优胜者。 人类选择优胜者并留下注释，然后点击导出选择 + 反馈（Markdown 或 JSON）。获取这些结果并深化已选的变体——完善、强化或产品化他们所选择的内容。
看板 UI（模板提供的内容）
一个干净的白板，包含贴纸卡片——高对比度的黑色文字、微妙的阴影、每张卡片顶部的柔和彩色条带、排列整齐对齐。经过真实贴纸 / 看板校准。
- 标题栏： 标题、冻结的介绍、一个主体/种子切换器（按钮，用于切换受控输入）、一个徽章图例、重置和导出选择 + 反馈。
- 每张卡片（贴纸）： 变体标签、一行技术简介、一个通用内容插槽（渲染内联 HTML/SVG、
<img>、沙箱化的<iframe>、<audio>/合成器、<pre><code>或通过/失败检查清单——由数据驱动）、颜色编码的指标徽章，以及一个可选的命名视图切换（一行药丸按钮），当数据提供content.views或content.raw时出现。 - 每张卡片的按钮： ★ 选择（切换获胜者高亮）、✎ 反馈（内联注释），以及跟随当前视图的内容操作（▶ 播放、⤢ 打开、⧉ 复制）。
- 导出将人类的选择 + 注释作为可复制的 Markdown 或 JSON 转储。选择 + 注释会持久化在
localStorage中。 - 零依赖，零网络——通过打开文件即可工作。移动优先：卡片在手机上折叠为一列，触摸目标 ≥40px，主体切换器在粘性标题栏中保持可触及，正文字体保持可读。支持鼠标和触控，尊重
prefers-reduced-motion。
文件
| 文件 | 用途 |
|---|---|
template/comparison-lab.html | 看板。自包含（内联 CSS + 原生 JS），移动优先。按原样复制；无需重建。 |
template/data.sample.json | 工作数据集，证明通用性（html、code、passfail、image+raw、一个 N 视图 content.views 切换、2 个主体的音频）。复制 → data.json，编辑。 |
template/render-artifacts.example.mjs | 可复制和调整的工具，用于将真实领域产物（乐谱/图表/示意图）渲染到看板中——打包你的渲染器、内联字形字体、无头提取内联 SVG、注入并截图。编辑 ADAPT THIS 块。 |
template/README.md | 如何填充 data.json；完整模式，逐字段说明（包括 content.views）；导出格式。 |
reference.md | 变体设计深度解析 + 按领域研究提示（§1）、模态渲染表（§2）、徽章（§3）、模式指针（§4）、包含 raw-vs-processed 故事的完整音乐示例（§5）、渲染真实产物 + 无头工具（§6）、content.views 模式 + 指标与产物经验教训（§7）、移动优先检查清单（§8）。 |
备注
- 这是一个方法技能（类似于头脑风暴）——可以斜杠调用也可以由模型调用。不要设置
disable-model-invocation。 - 逐字复制 HTML 模板——所有 UI 工作已完成。你的工作是数据：真正的变体 + 真实内容 + 徽章。
- 不要交付一个包含几乎相同变体的看板。如果你不能将每个变体命名为一个不同的技术，说明你还没有完成步骤 2。
- 不要伪造内容。占位符面板会破坏目的（原则 7）。
- 不要交付无操作的切换。仅当视图真正不同时才添加
views/raw视图——相同的视图会自动折叠，但要设计出真正的差异（原则 5）。 - 对于较大的交互式预览，优先使用带有
srcdoc的iframe，而不是一个巨大的html字符串。对于渲染的 SVG，通过html类型嵌入，而不是<img>data-URI（reference.md §6）。 - 将生成的内容保持为内联形式（
data:URI、WebAudio 合成），以便看板保持为一个可共享的、离线的单个文件。