需要把大型、可视化或结构性配置做成交互式工具时，用单文件…

当用户要求为某个主题制作 playground、explorer 或交互式可视化工具时，生成自包含单文件 HTML 页面，让用户通过控件配置、实时预览并复制生成的可执行 Prompt。

适用场景

解决思路

1. 从用户请求中识别 playground 类型。
2. 根据类型从 `templates/` 加载匹配模板：
3. `templates/design-playground.md` — 用于视觉设计决策（组件、布局、间距、颜色、排版）。
4. `templates/data-explorer.md` — 用于数据和查询构建（SQL、API、管道、regex）。
5. `templates/concept-map.md` — 用于学习和探索（概念图、知识缺口、范围映射）。
6. `templates/document-critique.md` — 用于文档评审（带 approve/reject/comment 工作流的建议）。
7. `templates/diff-review.md` — 用于代码评审（git diffs、commits、PRs 逐行评论）。
8. `templates/code-map.md` — 用于代码库架构（组件关系、数据流、层图）。
9. 遵循模板构建 playground；如果主题不能干净匹配任何模板，使用最接近的模板并调整。
10. 写完 HTML 文件后，在浏览器中打开：运行 `open <filename>.html`，在用户默认浏览器中启动。
11. 每个 playground 都必须是单个 HTML 文件：内联所有 CSS 和 JS，不引入外部依赖。
12. 实现实时预览：每次控件变化都即时更新，不要有 “Apply” 按钮。
13. 生成 Prompt 输出：使用自然语言而不是值转储；只提及非默认选择；包含足够上下文，使其无需查看 playground 也能执行；并实时更新。
14. 添加复制按钮：使用剪贴板复制，并短暂显示 “Copied!” 反馈。
15. 提供合理默认值和预设：首次加载就好看；包含 3-5 个命名预设，一键将所有控件设为协调组合。
16. 使用深色主题：UI 用系统字体，代码/值用 monospace，界面尽量精简。
17. 状态管理采用单一 state 对象：每个控件写入它，每次渲染读取它。
18. 实现并让每个控件在 change 时调用 `updateAll()`：在 `updateAll()` 中调用 `renderPreview()` 更新视觉，调用 `updatePrompt()` 重建提示文本。参考代码：`const state = { /* all configurable values */ }; function updateAll() { renderPreview(); updatePrompt(); }`。
19. 实现 `updatePrompt()` 模式：创建 `parts` 数组；只对非默认值 push 描述；数字旁使用定性语言；例如：`if (state.borderRadius !== DEFAULTS.borderRadius) { parts.push(`border-radius of ${state.borderRadius}px`); } if (state.shadowBlur > 16) parts.push('a pronounced shadow'); else if (state.shadowBlur > 0) parts.push('a subtle shadow'); prompt.textContent = `Update the card to use ${parts.join(', ')}.`;`
20. 避免 Prompt 输出只是值转储：把它写成自然指令。
21. 避免一次提供太多控件：按关注点分组，把高级项放在可折叠区域。
22. 避免预览不即时更新：每次控件变化都必须触发立即重新渲染。
23. 避免没有默认值或预设：不要在加载时为空或损坏。
24. 避免外部依赖：如果 CDN 挂了，playground 就会失效。
25. 避免 Prompt 缺少上下文：包含足够信息，使其无需 playground 也可操作。

适用边界 · 注意事项

• 当用户只需要纯文本答案、静态文档或简单代码片段，不需要交互控件和实时预览时。
• 当主题的输入空间很小，或可以完全用纯文本清晰表达，做 Playground 反而增加复杂度时。
• 当运行环境不允许创建/打开本地 HTML 文件，或没有浏览器可用于交付和预览时。