用途：当用户需要一个交互式实验场、探索器或可视化工具来研究某个主题，且该主题的输入空间较大、偏视觉或结构性、难以用纯文本表达时，使用此技能生成一个可视化配置页面。
主要能力：生成的 playground 是自包含的单个 HTML 文件，所有 CSS 和 JS 内联、无外部依赖；一侧是控件，另一侧是实时预览，每次控件变化即时更新，没有“应用”按钮；底部输出自然语言提示词，只提及非默认选项，并含足够上下文，可脱离页面直接使用。
内置模板：技能提供 templates/ 下的多种模板，按请求类型选用。design-playground.md 用于视觉设计决策（组件、布局、间距、颜色、排版）；data-explorer.md 用于数据与查询构建（SQL、API、管道、正则）；concept-map.md 用于学习探索（概念图、知识缺口、范围梳理）；document-critique.md 用于文档评审（带批准/拒绝/评论工作流）；diff-review.md 用于代码评审（git diff、提交、PR 的逐行评论）；code-map.md 用于代码库架构（组件关系、数据流、分层图）。若主题不完全匹配，选最接近的模板并调整。
使用方式：先根据用户请求识别 playground 类型，加载对应模板并按模板构建，然后用 open <filename>.html 在默认浏览器中打开。
核心要求：单 HTML 文件并内联全部代码；实时预览；自然语言提示词输出并实时更新；带“Copied!”反馈的复制按钮；合理的默认值与 3-5 个命名预设；深色主题，界面用系统字体，代码和数值用等宽字体。状态管理上维护单一状态对象，每个控件写入、每次渲染读取，控件变化时统一调用 updateAll()，内部执行 renderPreview() 与 updatePrompt()。
常见错误：提示词输出变成数值堆砌、控件过多、预览非即时更新、缺少默认值与预设、依赖外部资源、提示词缺少上下文。另：资料未提供收费、授权与平台支持等细节。