Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Interactive HTML playground v1.0.0

Use this resource to build an interactive tool to explore design or content choices

New

  • 597 downloads
  • 123 likes
  • 124 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install html-playground-builder

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent picks the template that fits your topic, then writes a single HTML file with controls, an instantly updating preview and presets. The prompt at the bottom describes your choices in plain language: copy it and hand it back to the agent.

Mostly picked by

Updated November 2, 2026

HTML page with controls on the left, a live preview on the right and a prompt to copy at the bottom.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
Apache-2.0

Similar resources

View all

What you get

  • SKILL.md: the requirements and the method
  • templates/design-playground.md: spacing, color, typography
  • templates/concept-map.md: concept maps and knowledge gaps
  • templates/document-critique.md and data-explorer.md: text review, queries

Good fit for

  • Choosing colors, typography or layout for a component together
  • Mapping concepts to prepare a course or workshop
  • Reviewing a document with an approve, reject, comment flow

Not for

  • Shipping a production site
  • Producing finished images or videos
  • Anything that needs a server or live data

Tags

  • playground
  • html
  • design
  • interactive
  • prototype

About

You say

"Build me a playground to tune my page's main button: radius, shadow, color, text size, with 4 presets."

HTML page with controls on the left, a live preview on the right and a prompt to copy at the bottom.

Skill published by Anthropic under the Apache-2.0 license.

Show more

Prerequisites

You bring
The topic to explore and Your constraints or starting values, if any

How to use it

  1. Describe the topic you want to explore.
  2. Open the generated HTML file and adjust the controls.
  3. Copy the generated prompt and paste it to the agent.

Content preview

Files

  • LICENSE11.3 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md3.8 KB
  • templates/concept-map.md3.6 KB
  • templates/data-explorer.md2.8 KB
  • templates/design-playground.md2.7 KB
  • templates/document-critique.md5.2 KB

Origin and licence

Modified by PalateKit

Author
Anthropic
Source
github.com/anthropics/claude-plugins-official/tree/f8c5e7a1dcb71b10cb74586224b5401f3de5db28/plugins/playground/skills/playground
Licence
Apache-2.0

Notice

Version modifiée de « playground » (Anthropic, Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do I need to install anything?

No. The result is a single HTML file that opens in the browser, with no external dependency.

Are the code-review templates useful?

Not for this audience: the diff-review and code-map templates are excluded from delivery. The other four are enough.