playground

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Playground Builder

Playground 构建器

A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude.

Playground 是一个独立的HTML文件，一侧带有交互式控件，另一侧是实时预览区域，底部有带复制按钮的提示语输出。用户调整控件、进行可视化探索，然后将生成的提示语复制回Claude中。

When to use this skill

何时使用此技能

When the user asks for an interactive playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.

当用户要求为某个主题制作交互式Playground、探索工具或可视化工具时——尤其是当输入空间较大、具有视觉性或结构性，难以用纯文本表达时。

How to use this skill

如何使用此技能

Identify the playground type from the user's request
Load the matching template from
```
templates/
```
:
- ```
templates/design-playground.md
```
  — Visual design decisions (components, layouts, spacing, color, typography)
- ```
templates/data-explorer.md
```
  — Data and query building (SQL, APIs, pipelines, regex)
- ```
templates/concept-map.md
```
  — Learning and exploration (concept maps, knowledge gaps, scope mapping)
- ```
templates/document-critique.md
```
  — Document review (suggestions with approve/reject/comment workflow)
- ```
templates/diff-review.md
```
  — Code review (git diffs, commits, PRs with line-by-line commenting)
- ```
templates/code-map.md
```
  — Codebase architecture (component relationships, data flow, layer diagrams)
Follow the template to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
Open in browser. After writing the HTML file, run
```
open <filename>.html
```
to launch it in the user's default browser.

从用户请求中确定Playground类型
从
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
```
  — 代码库架构（组件关系、数据流、层级图）
遵循模板构建Playground。如果主题与现有模板不完全匹配，使用最接近的模板并进行调整。
在浏览器中打开。编写完HTML文件后，运行
```
open <filename>.html
```
在用户的默认浏览器中启动它。

Core requirements (every playground)

核心要求（所有Playground）

Single HTML file. Inline all CSS and JS. No external dependencies.
Live preview. Updates instantly on every control change. No "Apply" button.
Prompt output. Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. Updates live.
Copy button. Clipboard copy with brief "Copied!" feedback.
Sensible defaults + presets. Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.
Dark theme. System font for UI, monospace for code/values. Minimal chrome.

单HTML文件：内联所有CSS和JS，无外部依赖。
实时预览：每次控件更改时立即更新，无需“应用”按钮。
提示语输出：使用自然语言，而非值的堆砌。仅提及非默认选项。包含足够上下文，无需查看Playground即可执行操作。实时更新。
复制按钮：复制到剪贴板并显示简短的“已复制！”反馈。
合理的默认值+预设：首次加载时外观良好。包含3-5个命名预设，可将所有控件快速切换为协调的组合。
深色主题：UI使用系统字体，代码/值使用等宽字体。极简界面。

State management pattern

状态管理模式

Keep a single state object. Every control writes to it, every render reads from it.

javascript

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

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

维护单个状态对象。每个控件写入状态，每次渲染读取状态。

javascript

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

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

Prompt output pattern

提示语输出模式

javascript

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(', ')}.`;
}

javascript

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(', ')}.`;
}

Common mistakes to avoid

需避免的常见错误

Prompt output is just a value dump → write it as a natural instruction
Too many controls at once → group by concern, hide advanced in a collapsible section
Preview doesn't update instantly → every control change must trigger immediate re-render
No defaults or presets → starts empty or broken on load
External dependencies → if CDN is down, playground is dead
Prompt lacks context → include enough that it's actionable without the playground

提示语输出只是值的堆砌 → 以自然指令的形式编写
同时展示过多控件 → 按关注点分组，将高级选项隐藏在可折叠区域中
预览无法即时更新 → 每次控件更改必须触发立即重新渲染
无默认值或预设 → 首次加载时为空或无法正常使用
外部依赖 → 如果CDN故障，Playground将无法使用
提示语缺乏上下文 → 包含足够信息，无需查看Playground即可执行操作