Picture this: you tell Claude Code “help me tweak this button’s layout.” It spits out a wall of CSS. You stare at the screen for thirty seconds with absolutely no idea what the result looks like. So you build once, glance at it, change one line, build again. After five rounds of this, you start questioning your life choices — all you wanted was to move a button, and somehow it turned into a twenty-questions game with an AI.

The problem isn’t that Claude isn’t smart enough. The problem is you’re using text to discuss something that’s fundamentally visual.

It’s like trying to discuss your living room paint color over the phone with your contractor. You say “warm off-white,” they hear “creamy pale yellow,” and when the walls are done you both just stand there in shock ┐(￣ヘ￣)┌

Thariq (an engineer at Anthropic) saw this pain point and built a Claude Code playground plugin — it lets Claude generate an interactive HTML page for you to play with directly.

Clawd Clawd 偷偷說：

Everyone’s been trying to make AI coding better, and most people think along the lines of “make the model smarter” or “make the context window bigger.” But Thariq flipped the angle — instead of staying trapped in the text paradigm, just jump out and build a visual interactive interface with HTML. Some things you could hand to Shakespeare himself to type out and he still couldn’t explain them clearly, but draw a picture and it clicks in three seconds. Dimensional reduction attack (⌐■_■)

What Is a Playground? Thirty Seconds, Go

A playground is a standalone HTML file. Claude generates a complete interactive page based on your request — open it in a browser, play with it, and when you’re done it produces an output prompt you paste back into Claude Code to continue seamlessly.

Think of it like the free sample station at Costco. You don’t have to buy the whole bag of chips to know if you like them — try a bite first, and if it’s good, then buy. Playground lets you “taste-test” AI’s output before committing it to your codebase (◕‿◕)

Say you need to discuss codebase architecture with AI — instead of spending ten minutes typing “the dependency between this module and that module,” just look at an interactive architecture diagram and click on whichever node you have questions about. A picture is worth a thousand words, and I mean that literally.

How to Install

Two lines in Claude Code:

/plugin marketplace update claude-plugins-official
/plugin install playground@claude-plugins-official

Done. Now you can use the playground skill in your prompts.

Five Playgrounds, Five Scenarios Where Typing Is the Wrong Tool

Thariq dropped five playgrounds he built himself in his thread. These aren’t just demos — each one highlights a scenario where text-based communication makes you want to flip a table, but a visual interface makes everything click instantly. Let me walk you through them.

The first scenario is UI layout tweaking. His prompt was to open a playground for exploring layout variations of the AskUserQuestion Tool. We’ve all been through the old workflow: change CSS → build → glance → nope → change again → build again. Run that cycle five or six times and half an hour is gone, and all you changed might be a single padding value. The playground gives you a drag-and-drop, live-preview interface where you physically move the button to where you want it, and it automatically spits out the corresponding CSS. It’s like upgrading from “describing your desired haircut in words” to “just pointing at yourself in the mirror” — the communication efficiency isn’t even in the same league. This use case alone is worth installing the plugin.

The second scenario is document review. His prompt asked Claude to review his SKILL.MD and provide inline suggestions he could approve, reject, or comment on one by one.

Clawd Clawd 真心話：

Wait, this is brilliant? You basically DIY’d a Google Docs suggestion mode, except the reviewer is Claude. No more ping-ponging comments with coworkers — you know that hellish loop of “I think we could change this part” “Which part?” “That part” “Where?” Just let AI do a first pass, and use the social energy you saved for something better (￣▽￣)⁠／

The third scenario is video intro tweaking. Anyone who’s made videos knows that even a tiny decision like “should the intro have a bounce animation” can eat hours of back-and-forth. You tell the AI “make the bounce bigger,” it adds 20px, you think that’s too much, change to 12px, still not right — this kind of “just a little off” problem is torture to solve by typing. The playground lets you drag sliders for easing curves, duration, and see the preview update in real time. If you’ve used Remotion for video, imagine turning Remotion’s props panel into an AI-generated interactive page. Tweak until you’re happy, then carry the parameters back to your codebase. It feels as intuitive as those character creation sliders in RPGs ╰(°▽°)⁠╯

The fourth scenario is architecture diagrams with interactive Q&A. His prompt asked to visualize his email agent codebase’s architecture and let him leave comments, ask questions, and request changes on specific nodes.

Clawd Clawd 補個刀：

Okay I’m actually on my knees for this one. Day one of onboarding at a new job, you no longer have to chew through that Confluence doc that hasn’t been updated in three years. Just spin up a playground, visualize the entire codebase, and click wherever you’re confused. Just picturing this makes me want to cry — you know that despair of reading five pages of docs and still not understanding how service A relates to service B? (╯°□°)⁠╯

But what really made me slam the table is this design: you click a node, leave a comment with your question right there, and the playground packages your question together with the node’s context into a prompt and sends it back to Claude Code. You don’t manually copy-paste which service info is relevant — the playground handles context bundling for you. For new hires, this is basically cheat-code-level onboarding.

The fifth scenario is game balance tuning. His prompt was to balance the deck for Inferno, a character in his Superhero Rogue-like game. What is game balance at its core? It’s “tweak a bunch of numbers and see if the feel is right.” Discussing “is 12 attack power too high?” over text with an AI is pure suffering — you have to mentally simulate the entire combat flow, and the AI has to keep the entire stat table in context. The playground lets you drag sliders to adjust values and instantly see DPS curves and survival rate changes, just as smooth as tweaking parameters in Unity Inspector. Indie devs seeing this probably bookmarked it immediately.

Clawd Clawd 想補充：

Looking at all five examples, you’ll notice a pattern: every single one is a scenario where “text is painful but visual is intuitive.” UI layout, document review, video effects, architecture comprehension, number balancing — not a single one can be efficiently solved by typing. Thariq isn’t showing off five demos. He’s demonstrating a way of thinking: find where text-based interaction bottlenecks, then use a playground to break through it (๑•̀ㅂ•́)و✧

The Mental Model Behind It

Thariq’s approach boils down to one line: first imagine an entirely new way to interact with the model, then let it materialize that way for you.

Sounds very zen, but it’s actually practical. Most people using AI think “how do I write a better prompt to get better output” — but playground lets you skip prompt engineering and design the interaction experience itself.

Clawd Clawd 碎碎念：

Boiled down, this is the ultimate evolution of the tool-use concept — AI doesn’t just “use tools,” it straight up “creates tools” for you. MCP lets AI call existing APIs and services; playground lets AI build one-off, purpose-built interactive interfaces on the spot. One is “hey AI, order me takeout,” the other is “hey AI, open a restaurant for me — you design the menu, I’ll be the taste tester.” It’s not a one-way human → AI command anymore. It’s a human ↔ tool ↔ AI triangle conversation. So meta ╰(°▽°)⁠╯

Back to That Wall

Remember the button-moving existential crisis from the opening?

With playground, the flow becomes: you tell Claude “open a playground for me to tweak the button layout,” it gives you an interactive page, you drag things around until you’re happy, and paste the output prompt back. Three minutes, zero builds.

From “discussing paint colors over the phone” to “dragging the contractor to the paint store and picking color swatches together” — that’s how big the difference is.

After you install the plugin, next time you hit a “can’t explain this clearly in text” moment, try telling Claude “use the playground skill.” Honestly, I was skeptical before installing it too. But after trying it, I realized — all that time we spent on the build-preview-tweak loop wasn’t because the AI was dumb. We were just stubbornly typing our way through problems that were never meant to be solved by typing ┐(￣ヘ￣)┌