html-playground

HTML Playground Builder

构建一个独立的交互式 HTML 探索器，提供控件、实时预览和可复制的自然语言提示词。

当用户要求对当前任务进行复盘，或要求保存当前任务的 HTML 发现报告时，或者调用 debrief [<slug>] 时，使用复盘模式。否则，构建通用探索器。

工作流

1. 推断受众、需要做出的决策和所需状态。明确要求优先于以下默认值。现有设计系统优先于这些默认值，但布局和主题默认值除外。
2. 阅读并改编最贴近需求的一个模板：
   • templates/design-playground.md
   • templates/data-explorer.md
   • templates/concept-map.md
   • templates/document-critique.md
   • templates/diff-review.md
   • templates/code-map.md
3. 编写一个包含内联 CSS 和 JavaScript、且无外部运行时依赖的 HTML 文件。
4. 在桌面浏览器中打开文件，操作每个控件和预设，并验证实时预览、提示词输出、复制反馈、空状态和错误状态，以及键盘可用性。完成前修复渲染缺陷。

复盘模式

将当前任务的证据保存为交互式 HTML 报告，路径为 ./.ai/debriefs/<slug>/index.html。

• 如果未提供 slug，则根据主题生成简短的 kebab-case slug。
• 只能在所选复盘目录中写入内容。如果推断出的 slug 已存在，请选择不冲突且语义明确的限定词；若仍无法避免冲突，则使用时间戳后缀，并继续操作，不得覆盖。如果用户明确提供了 slug，则停止并询问是覆盖还是选择新 slug。
• 只能使用当前任务中的证据：真实发现、路径、已验证的位置、指标、决策和未解决的风险。不要编造填充内容。

步骤 1 之前，从目标仓库运行随附的预处理器：

bash <skill-dir>/scripts/prepare-debrief.sh <slug>

使用其输出中的 DEBRIEFS_DIR、DEBRIEF_PATH 和 EXISTS。当推断出的 slug 对应的 EXISTS 为 true 时，生成唯一 slug 并在写入前重新运行预处理器。当明确提供的 slug 对应的 EXISTS 为 true 时，请求用户做出上述选择。转达 slug 验证错误并停止。

然后遵循工作流。写入 DEBRIEF_PATH。选择与证据相匹配的模板，并在控件和预设旁呈现证据视图。完成前，还要验证每项陈述都能追溯到任务对话记录或工具证据，且输出中没有占位符。然后运行 open "$DEBRIEF_PATH"。

特定默认值

除非用户另有说明，否则使用以下布局和主题默认值。产品背景不影响这些默认值：

• 桌面浏览器布局。不要实现或检查响应式／移动端行为。
• 使用一种与系统外观相匹配的精致主题：系统使用浅色模式时采用浅色，否则采用深色。不要添加第二种主题、主题切换开关或 prefers-color-scheme 变体。在 macOS 上，defaults read -g AppleInterfaceStyle 在深色模式下会输出 Dark，在浅色模式下则会失败。

当产品背景未表明另有需求时，使用以下其他默认值：

• 控件与实时预览并排，提示词输出置于下方。
• 系统 UI 字体，代码和值使用等宽字体，界面元素尽量精简。
• 合理且非空的初始状态，以及 3–5 个风格统一且有名称的预设。
• 一个状态对象、一条更新路径，并立即刷新预览和提示词。
• 按关注点对控件分组，高级控件默认折叠。
• 提示词应以自然语言说明期望结果，并且只提及非默认选项。

不变量

• 不提供“应用”按钮：相关变更应立即呈现。
• 不查看探索器也能理解提示词并据此采取行动；提示词不能只是原始状态转储。
• 复制操作应显示短暂的反馈；Clipboard API 失败时，应提供可用的备用方案。
• 统一复制提示文案：Copy prompt，然后是 Copied。复制失败时，显示 Copy failed — select the prompt below。
• 预设应一致地更新控件、预览和提示词。
• 不要添加不会影响预览或生成提示词的控件。

完成

完成任务需要提供自包含文件，以及经过渲染和交互检查的证据。除非请求内容需要，否则生成的提示词中不要包含装饰性图标。

• Playground：以 ### ✨ Playground ready、链接到产物的链接，以及一张精简的产物/控件/桌面浏览器/复制备用方案表格结束。
• Debrief：还要求在所选路径提供有证据支撑的内容，并妥善处理文件冲突，绝不静默覆盖。以 ### 📊 Debrief ready — <title>、可点击的绝对路径、Opened in desktop browser，以及一行精简内容（列出证据视图和预设）结束。准备程序的 KEY=VALUE 输出、路径和 slug 错误必须保持原样且不加装饰。