playground

Playground Builder

Playground 是一个独立的 HTML 文件：一侧提供交互控件，另一侧显示实时预览，底部则显示带复制按钮的提示词输出。用户调整控件、进行可视化探索，然后将生成的提示词复制回其 Agent。

何时使用此技能

当用户要求为某个主题创建交互式 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 差异、提交、带逐行评论的 PR）
   • templates/code-map.md — 代码库架构（组件关系、数据流、分层图）
3. 按照模板构建 playground。如果主题与任何模板都不完全匹配，请使用最接近的模板并进行调整。
4. **如果环境支持，请在浏览器中打开。**编写 HTML 文件后，如果环境支持，请在用户的默认浏览器中启动该文件；否则提供文件路径。

核心要求（适用于每个 playground）

• **单个 HTML 文件。**将所有 CSS 和 JS 内嵌其中，不使用外部依赖。
• **实时预览。**每次控件变更都会立即更新。不要使用“应用”按钮。
• **提示词输出。**使用自然语言，而不是单纯罗列数值。只提及非默认选项。提供足够的上下文，即使不查看 playground 也能据此采取行动。实时更新。
• **复制按钮。**复制到剪贴板，并显示简短的“已复制！”反馈。
• **合理的默认值和预设。**首次加载时就有良好的显示效果。提供 3–5 个命名预设，一键将所有控件设为协调一致的组合。
• **深色主题。**界面使用系统字体，代码／数值使用等宽字体。界面保持简洁。

状态管理模式

使用单个状态对象。每个控件都向其中写入，每次渲染都从中读取。

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 也能据此采取行动