Playground Builder 互动探索器构建器
把复杂的视觉或结构化选择变成可实时探索的单文件网页工具。
技能限定为生成单文件 HTML，要求内联 CSS/JS、无外部依赖，降低依赖和数据暴露风险；但要求运行 open 命令并使用剪贴板，未说明用户确认、敏感数据处理、数据流披露或回滚方式，因此扣分。
文档提供统一 state/updateAll 模式、默认值、预设和即时更新要求，主路径较清晰；但未提供测试、输入校验、模板缺失处理、浏览器不可用时的诊断反馈，且静态评估不支持更高分。
触发条件、目标用户场景和六类模板较明确，也声明不匹配时可适配最近模板；但未充分定义非适用范围、语义边界、中文支持或不同运行环境，扣分。核心功能不依赖海外服务。
具有渐进式说明、模板分类、示例代码、常见错误和基本依赖说明；仓库提供 Apache-2.0 和 Anthropic 维护背景，但该技能未明确版本、变更记录、维护责任或更新路径，因此扣分。
目标是生成可直接打开的交互式单文件 playground，要求实时预览、自然语言提示词和复制按钮，核心价值清楚；但没有已生成样例或执行证据，无法确认完整性和直接可用性，按静态上限计分。
SKILL.md、模板和仓库工作流构成可审计的一手材料，且实现模式具体；但没有覆盖该技能关键路径的测试或第三方执行结果，静态证据有限，未达到更高等级。
- 未提供测试或实际生成的 HTML 样例，安装或使用前应人工检查生成结果。
- open 命令和剪贴板操作缺少确认、失败反馈及隐私说明。
- 未明确版本、变更记录、维护责任和中文界面支持。
它能做什么 & 适用场景
该技能用于创建交互式 HTML playground、explorer 或视觉工具。生成的工具通常将控制面板、实时预览和提示词输出整合在同一个 HTML 文件中。用户可调整控件、观察预览变化，并复制可供 Claude 使用的自然语言提示词。技能要求使用内嵌 CSS 和 JavaScript、即时更新、预设方案及暗色主题。
识别用户请求对应的 playground 类型；从 templates/ 中选择设计、数据探索、概念图、文档批评、差异审查或代码地图模板；生成内含 CSS 和 JavaScript 的单文件 HTML；维护统一状态对象，在控件变化时即时更新预览和提示词；仅将非默认选项写入自然语言提示词；加入复制按钮、3—5 个命名预设和暗色界面；完成后运行 open <filename>.html 在浏览器中打开文件。
- 设计师需要比较组件、布局、间距、颜色或字体方案时，使用视觉设计 playground 实时试验选择。
- 数据或工程用户需要构建 SQL、API、数据管道或正则表达式查询时，使用数据探索器组合参数。
- 教师、研究者或产品人员需要梳理概念、知识缺口或范围时，使用概念图 playground 进行探索。
- 开发者需要审查代码差异、提交或 PR，并进行逐行评论时，使用差异审查 playground。
- 维护者需要理解代码库中的组件关系、数据流或分层结构时，使用代码地图 playground。
优缺点一览
- 适合将大型、视觉化或结构化输入空间转化为可操作界面。
- 单文件并内嵌 CSS 和 JavaScript，不依赖外部 CDN。
- 预览和提示词会随控件变化即时更新，并支持复制提示词。
- 包含默认值和 3—5 个命名预设，便于首次使用。
- 技能依赖 templates/ 中的匹配模板；提供的材料没有给出这些模板的具体内容或分发细节。
- 只定义了六类模板，其他主题需要选择最接近的模板并自行调整。
- 源材料未提供测试套件、浏览器兼容性或生成结果质量的验证证据。
- 要求生成并打开 HTML 文件，使用场景需要具备相应的文件系统和 shell 能力。
如何安装
该技能位于仓库的 plugins/playground/skills/playground/SKILL.md。README 说明可通过 Claude Code 插件系统安装插件；对应插件目录名为 playground，因此可运行：/plugin install playground@claude-plugins-official。仓库地址：https://github.com/anthropics/claude-plugins-official。
如何使用
向支持该技能的客户端提出明确请求，例如：“为颜色和间距选择创建一个交互式设计 playground。”技能会识别类型、加载匹配模板并生成单文件 HTML。源材料未说明模板文件的具体位置部署方式、完整命令行参数或其他客户端的安装命令。