playground

Self-contained HTML playgrounds with live preview, interactive controls, and copyable prompt output. A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude. When the user asks for an interactive playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text. Keep a single state object. Every control writes to it, every render reads from it. - Includes five templates for common playground types: design decisions, data exploration, concept mapping, document critique, and code review - Every playground features instant live preview, natural-language prompt generation that only mentions non-default choices, and a one-click copy button - Built as single HTML files with no external dependencies, dark theme by default, and sensible presets for quick exploration - State management pattern keeps controls and preview synchronized; prompt output uses qualitative language alongside values for actionable instructions - Identify the playground type from the user's request - Load the matching template from templates/ : - templates/design-playground.md — Visual design decisions (components, layouts,...