[skills](https://carteblanche.com/index.md) / [design](https://carteblanche.com/index.md?category=design)

# playground

what it does

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. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

by anthropics · version 1 · license Apache-2.0

We imported this skill from its author’s repository. Is this yours? [Claim this listing](https://carteblanche.com/claim/playground)

Verified · Before and after: 2 models · 1 try per case · [View source](https://github.com/anthropics/claude-plugins-official/tree/0412be76f50ab4f4f8abff3753efa9269fbbca5b/plugins/playground/skills/playground) · [Install from your agent](https://carteblanche.com/connect.md) · [Download .zip](https://carteblanche.com/skills/playground/download)

## Compare the answers

Answers from Claude Sonnet 5.5 and GPT-6.1 Sol · try 1 of 1

Same request, same model, once with the skill and once without. Read both and judge for yourself.

[Compare the answers](https://carteblanche.com/skills/playground/compare)

## The models

2 models

Claude Sonnet 5.5

made by Anthropic

claude-sonnet-5-5 · revision not reported by the provider

1 try per case · tested 7 Nov 2026

GPT-6.1 Sol

made by OpenAI

gpt-6.1-sol · revision not reported by the provider

1 try per case · tested 7 Nov 2026

## The tasks

written by Carte Blanche

**example-1**

“Can you make me a playground for designing CSS box shadows? I'd like sliders for offset X/Y, blur, spread, and opacity, a color picker, and an inset toggle. Show a live preview box and give me a copy button that outputs a prompt describing the shadow settings I chose so I can paste it into my coding assistant.”

**example-2**

“I'm teaching my students about compound interest. Build an interactive explorer in a single HTML file where they can change the starting amount, monthly contribution, interest rate, and number of years, and see a live chart of the growth. At the bottom, include a copyable prompt summarizing their chosen scenario so they can ask an AI to explain the results.”

## Install

Download the .zip and unzip it. Put its files, in a folder named `playground`, here:

Claude Code · `~/.claude/skills/` · Every project. For one project only, use .claude/skills/ inside it.

Codex · `~/.agents/skills/` · Every project. For one repository only, use .agents/skills/ inside it.

Cursor · `~/.cursor/skills/` · Cursor also reads the Claude Code and Codex folders above.

Then start a new session and ask for what the skill does. Other agents that read SKILL.md have their own skills folder; check their docs.

Or [install from your agent](https://carteblanche.com/connect.md): ask it to install `playground` from Carte Blanche.

## Badge for your README

Carte Blanche: Verified

Paste this into the skill’s README. It links to this page, and shows how the listing stands whenever it’s loaded.

```
[![Carte Blanche](https://carteblanche.com/badge/playground.svg)](https://carteblanche.com/skills/playground)
```

## About this test

- **tested**: 7 Nov 2026
- **version tested**: v1
- **cases**: 2
- **tries per case**: 1 try per case
- **run without the skill**: yes
- **cases written by**: Carte Blanche
- **size**: 30010 characters

What this shows, and what it doesn’t

How 2 models answered these 2 requests, with and without the skill. It says nothing about other models, and it doesn’t limit what your own agent can do.

[How we test](https://carteblanche.com/how-it-works.md)