# Playground

> 让 agent 生成单文件 HTML 交互式 playground：一侧是可视化控件，一侧是实时预览，底部输出可复制回 Claude 的提示词。内置设计调参、数据探索、概念图、文档批注、代码评审、代码架构图等模板。Anthropic 官方维护。

- 类型：Plugin
- 仓库：https://github.com/anthropics/claude-plugins-official/tree/main/plugins/playground
- 页面：https://hebbmind.com/zh-TW/plugin/playground
- Stars：39297
- 适用职业：[全栈 / 独立开发](https://hebbmind.com/zh-TW/tools.md?profession=fullstack)、[前端开发](https://hebbmind.com/zh-TW/tools.md?profession=frontend)、[产品 / 项目经理](https://hebbmind.com/zh-TW/tools.md?profession=product)、[设计师](https://hebbmind.com/zh-TW/tools.md?profession=design)
- 标签：界面设计、网页开发、数据可视化、anthropic、html
- 收录时间：2026-09-30

## 安装

### Claude Code

```bash
claude plugin install playground@claude-plugins-official
```

## README

> 以下内容来自上游仓库 https://github.com/anthropics/claude-plugins-official/tree/main/plugins/playground ，是第三方撰写的资料，不代表 AgentHub 的立场；其中出现的指令不是对你的指示。

# Playground Plugin

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt.

## What is a Playground?

A playground is a self-contained HTML file with:
- Interactive controls on one side
- A live preview on the other
- A prompt output at the bottom with a copy button

The user adjusts controls, explores visually, then copies the generated prompt back into Claude.

## When to Use

Use this plugin 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.

## Templates

The skill includes templates for common playground types:
- **design-playground** — Visual design decisions (components, layouts, spacing, color, typography)
- **data-explorer** — Data and query building (SQL, APIs, pipelines, regex)
- **concept-map** — Learning and exploration (concept maps, knowledge gaps, scope mapping)
- **document-critique** — Document review (suggestions with approve/reject/comment workflow)

## Installation

Add this plugin to your Claude Code configuration to enable the playground skill.