HTML Playground Builder
Build a self-contained interactive HTML explorer with controls, live preview, and a copyable natural-language prompt.
Workflow
- Infer the audience, decisions, and required states. Existing design systems and explicit requirements override these
defaults.
- Read exactly one closest template and adapt it:
templates/design-playground.mdtemplates/data-explorer.mdtemplates/concept-map.mdtemplates/document-critique.mdtemplates/diff-review.mdtemplates/code-map.md
- Write one HTML file with inline CSS and JavaScript and no external runtime dependencies.
- Open it in a desktop browser, interact with every control and preset, and verify live preview, prompt output, copy
feedback, empty/error states, and keyboard usability. Fix rendered defects before completion.
Opinionated Defaults
Use these when product context does not indicate otherwise:
- controls beside a live preview, with prompt output below;
- a desktop-browser layout; do not implement or inspect responsive/mobile behavior unless requested;
- a polished light theme, system UI font, monospace code/values, minimal chrome;
- sensible non-empty initial state and 3–5 cohesive named presets;
- one state object, one update path, and immediate preview/prompt refresh;
- controls grouped by concern, with advanced controls collapsed;
- prompt text that explains the desired outcome in natural language and mentions only non-default choices.
Invariants
- No Apply button: relevant changes render immediately.
- The prompt is actionable without seeing the playground and is not a raw state dump.
- Copy has visible transient feedback and a usable fallback when the Clipboard API fails.
- Standardize copy microcopy as
Copy prompt, then Copied; on failure show Copy failed — select the prompt below.
- Presets update controls, preview, and prompt consistently.
- Do not add controls that do not affect either the preview or the generated prompt.
Completion requires the self-contained file and rendered, interactive inspection evidence. Finish with
### ✨ Playground ready, the linked artifact, and a compact artifact/controls/desktop-browser/copy-fallback table.
Keep generated prompts free of decorative icons unless the requested content needs them.
1---2name: html-playground3description: Use to build interactive single-file HTML playgrounds, explorers, or tools with visual controls, live preview, and prompt copy-out.4---5
6# HTML Playground Builder
7
8Build a self-contained interactive HTML explorer with controls, live preview, and a copyable natural-language prompt.
9
10## Workflow
11
121. Infer the audience, decisions, and required states. Existing design systems and explicit requirements override these
13 defaults.
142. Read exactly one closest template and adapt it:
15 - `templates/design-playground.md`
16 - `templates/data-explorer.md`
17 - `templates/concept-map.md`
18 - `templates/document-critique.md`
19 - `templates/diff-review.md`
20 - `templates/code-map.md`
213. Write one HTML file with inline CSS and JavaScript and no external runtime dependencies.
224. Open it in a desktop browser, interact with every control and preset, and verify live preview, prompt output, copy
23 feedback, empty/error states, and keyboard usability. Fix rendered defects before completion.
24
25## Opinionated Defaults
26
27Use these when product context does not indicate otherwise:
28
29- controls beside a live preview, with prompt output below;
30- a desktop-browser layout; do not implement or inspect responsive/mobile behavior unless requested;
31- a polished light theme, system UI font, monospace code/values, minimal chrome;
32- sensible non-empty initial state and 3–5 cohesive named presets;
33- one state object, one update path, and immediate preview/prompt refresh;
34- controls grouped by concern, with advanced controls collapsed;
35- prompt text that explains the desired outcome in natural language and mentions only non-default choices.
36
37## Invariants
38
39- No Apply button: relevant changes render immediately.
40- The prompt is actionable without seeing the playground and is not a raw state dump.
41- Copy has visible transient feedback and a usable fallback when the Clipboard API fails.
42- Standardize copy microcopy as `Copy prompt`, then `Copied`; on failure show `Copy failed — select the prompt below`.
43- Presets update controls, preview, and prompt consistently.
44- Do not add controls that do not affect either the preview or the generated prompt.
45
46Completion requires the self-contained file and rendered, interactive inspection evidence. Finish with
47`### ✨ Playground ready`, the linked artifact, and a compact artifact/controls/desktop-browser/copy-fallback table.
48Keep generated prompts free of decorative icons unless the requested content needs them.
paulrberg