Frontend design
Design & Front-end
Makes the websites Claude builds look designed instead of generic.
Design & Front-end
Playground
Builds a one-page tool with sliders and a live preview to explore an idea visually.
FreeOpen sourceBy Anthropic
View source What is it?
Some choices are easier to make by looking than by describing. Ask for a playground and Claude builds a single web page with controls on one side and a live preview on the other. Drag a slider or pick a colour and the preview updates straight away.
At the bottom it writes a prompt describing exactly what you chose, with a copy button, so you can paste it back to Claude and have it build the real thing. Templates cover design decisions, data and query building, concept maps and reviewing a document with approve and reject buttons.
Install in Claude Code
In Claude Code run /plugin install playground@claude-plugins-official, then ask for a playground for whatever you want to explore.
Try this prompt
Paste into Claude Code
Make me a playground for my cafe's menu board: let me try different fonts, colours and layouts, and give me a prompt I can paste back to build the one I pick.Who it's for
Anyone who knows what they like when they see it but struggles to describe it.
Best for
- Picking colours, fonts and layouts
- Exploring design options with a client
- Building a precise prompt
- Reviewing a document visually
Why it made the list
It replaces a long back-and-forth about colours and spacing with a page you can play with for a minute.
More skills like this
Theme factory
Design & Front-end
Applies one of ten ready-made colour and font themes to any deck, doc or page.
Visual Explainer
Design & Front-end
Makes polished web pages or slides that explain diagrams, code changes and plans.
Archify
Design & Front-end
Turns an idea, plan or codebase into an interactive diagram you can click and share.