Reads · saved 2026-09-29
Making Playgrounds using Claude Code
We've published a new Claude Code plugin called playground that helps Claude generate HTML playgrounds. These are standalone HTML files that let you visualize a problem with Claude, interact with it and give you an output prompt to paste back into Claude Code.
Full captured text
We've published a new Claude Code plugin called playground that helps Claude generate HTML playgrounds. These are standalone HTML files that let you visualize a problem with Claude, interact with it and give you an output prompt to paste back into Claude Code.
I've found this can be really good interacting with the model in ways that are not well suited for text, for example to:
To get started, install the plugin in Claude code by running the following commands:
```
/plugin marketplace update claude-plugins-official
/plugin install playground@claude-plugins-official
```
Here are some of my favorite playgrounds I've made:
**Changing the design of the AskUserQuestion Tool in Claude Code**
prompt: "Use the playground skill to create an playground that helps me explore new layout changes to the AskUserQuestion Tool"
**Critiquing your writing and getting a response**
prompt: "Use the playground skill to review my SKILL.MD and give me inline suggestions I can approve, reject or comment"
**Tweaking a Remotion Video Intro**
prompt: "Use the playground skill to tweak my intro screen to be more interesting and delightful"
**Viewing an Architecture Diagram and letting the user comment**
prompt: "Use the playground skill to show how this email agent codebase works and let me comment on particular nodes in the architecture to ask questions, make edits, etc"
**Balancing the Superhero Rogue-like game I'm making**
prompt: "Use the playground skill to help me balance the 'Inferno' hero's deck"
Excited to see how you all explore this!
My tip for creating an interesting playground- think of a unique way of interacting with the model and then ask it to express that. I think you might find it surprising.
If you make something cool, please share it!
Top Comments
1. @zarazhangrui
Author: Zara Zhang
Posted: 2026-01-30T00:34:47.000Z
URL: [https://x.com/zarazhangrui/status/2017033717802508765](https://x.com/zarazhangrui/status/2017033717802508765)
This was the most memorable thing I heard at the Claude Code for Normies event and I started doing this immediately when I got home; glad it's now productized
Likes: 56
2. @stevy_smith
Author: Steve Smith
Posted: 2026-01-30T03:24:01.000Z
URL: [https://x.com/stevy_smith/status/2017076307385831882](https://x.com/stevy_smith/status/2017076307385831882)
I've created a playground-sync plugin off the back of this which allows the changes to feed back to the claude instance via a "Send to Claude" button to action immediately (removing the need to copy & paste) - here's it end-to-end
Likes: 44
3. @TheViableEdge
Author: Adam Sandler
Posted: 2026-01-30T04:45:00.000Z
URL: [https://x.com/TheViableEdge/status/2017096684505833983](https://x.com/TheViableEdge/status/2017096684505833983)
Use the playground skill to make a Playground skill idea generator for new playground skills
Likes: 36