playground — Claude Code plugin: interactive HTML playgrounds
Builds a single-file HTML playground with visual controls, a live preview and a prompt you can copy back into Claude.
/plugin install playground@claude-plugins-official
/plugin marketplace add anthropics/claude-plugins-officialWhat playground does
The plugin ships a skill that generates a self-contained HTML file. Controls sit on one side, a live preview on the other, and the generated prompt waits at the bottom with a copy button. You tweak the controls, watch the result, then paste the prompt back into Claude.
Four templates cover the usual cases: design-playground for components, layouts, spacing, colour and typography, data-explorer for SQL, APIs, pipelines and regex, concept-map for concept maps and knowledge gaps, and document-critique for document review with approve, reject and comment actions.
Reach for it when the input space is large, visual or structural and plain text gets clumsy. A question that fits in two sentences does not need a playground — you would just add a step. Installation goes through the claude-plugins-official marketplace, and no API keys or extra dependencies are involved.
What it helps with
- generate an interactive HTML file for tuning parameters
- pick a layout, spacing scale and type pairing with live preview
- narrow down a SQL query or regex by trying variants
- map knowledge gaps on a topic as a concept map
- walk a document with approve and reject on each suggestion
Example prompts for the agent
- build a playground for choosing the colour scheme and typography of a landing page
- make a data-explorer so I can shape a SQL query against the orders table
- I need a playground to review this document with approve and reject buttons
How to install playground
Plugin marketplace
/plugin install playground@claude-plugins-official/plugin marketplace add anthropics/claude-plugins-officialStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about playground
How do I install playground in Claude?
Add the marketplace first: /plugin marketplace add anthropics/claude-plugins-official. Then install the plugin: /plugin install playground@claude-plugins-official.
What does playground do?
It creates a self-contained HTML file with controls, a live preview and a prompt output with a copy button. Once you have configured things visually, you copy the prompt back into Claude.
Which templates does the plugin include?
Four: design-playground for visual decisions, data-explorer for data and queries, concept-map for concept maps, and document-critique for document review.
Source text
playground · Apache-2.0
# 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.
© Anthropic · Apache-2.0 · anthropics/claude-plugins-official
