playground

Playground Builder

playground 是一个自包含的 HTML 文件，一侧是交互式控件，另一侧是实时预览，底部是带有复制按钮的提示词输出。用户调整控件，进行可视化探索，然后将生成的提示词复制回 Claude。

何时使用此技能

当用户要求为某个主题提供交互式 playground、探索器或可视化工具时 —— 尤其是当输入空间很大、可视化或结构化，且难以用纯文本表达时。

如何使用此技能

1. 确定 playground 类型，根据用户的请求
2. 从 templates/ 加载匹配的模板：
   • templates/design-playground.md — 视觉设计决策（组件、布局、间距、颜色、排版）
   • templates/data-explorer.md — 数据和查询构建（SQL、API、管道、正则表达式）
   • templates/concept-map.md — 学习和探索（概念图、知识空白、范围映射）
   • templates/document-critique.md — 文档审阅（带有批准/拒绝/评论工作流的建议）
   • templates/diff-review.md — 代码审查（git diff、提交、PR，支持逐行评论）
   • templates/code-map.md — 代码库架构（组件关系、数据流、分层图）
3. 按照模板构建 playground。如果主题不能完全契合任何模板，使用最接近的一个并加以调整。
4. 在浏览器中打开。 编写 HTML 文件后，运行 open <filename>.html 以在用户的默认浏览器中启动它。

核心要求（每个 playground）

• 单个 HTML 文件。 内联所有 CSS 和 JS。无外部依赖。
• 实时预览。 每次控件更改时即时更新。没有"应用"按钮。
• 提示词输出。 自然语言，而非值转储。只提及非默认选择。包含足够的上下文，使其无需查看 playground 即可执行。实时更新。
• 复制按钮。 剪贴板复制，带有简短的"已复制！"反馈。
• 合理的默认值 + 预设。 首次加载时看起来不错。包含 3-5 个命名预设，可将所有控件吸附到协调的组合。
• 深色主题。 UI 使用系统字体，代码/值使用等宽字体。极简界面。

状态管理模式

保持单一状态对象。每个控件写入它，每次渲染读取它。

const state = { /* all configurable values */ };

function updateAll() {
  renderPreview(); // update the visual
  updatePrompt();  // rebuild the prompt text
}
// Every control calls updateAll() on change

提示词输出模式

function updatePrompt() {
  const parts = [];

  // Only mention non-default values
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`border-radius of ${state.borderRadius}px`);
  }

  // Use qualitative language alongside numbers
  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(', ')}.`;
}

要避免的常见错误

• 提示词输出只是值转储 → 将其写为自然指令
• 一次有太多控件 → 按关注点分组，将高级选项隐藏在可折叠部分中
• 预览不会即时更新 → 每次控件更改都必须触发立即重新渲染
• 没有默认值或预设 → 加载时为空或损坏
• 外部依赖 → 如果 CDN 宕机，playground 就挂了
• 提示词缺乏上下文 → 包含足够内容，使其无需 playground 即可操作