playground — плагин для Claude Code: интерактивные HTML-песочницы
Собирает одностраничный HTML с ползунками, живым превью и готовым промптом, который можно скопировать обратно в Claude.
/plugin install playground@claude-plugins-official
/plugin marketplace add anthropics/claude-plugins-officialЧто делает playground
Плагин добавляет скилл, который делает интерактивную песочницу: файл HTML со всем внутри. Слева — элементы управления, справа — живое превью, снизу — сгенерированный промпт с кнопкой копирования. Вы крутите настройки, смотрите, что получается, и забираете текст обратно в Claude.
Внутри лежат шаблоны под четыре частых случая: design-playground для решений по компонентам, сеткам, отступам, цвету и типографике, data-explorer для SQL, API, пайплайнов и регулярных выражений, concept-map для карт понятий и пробелов в знаниях, document-critique для разбора документа с одобрением, отклонением и комментариями.
Запускать есть смысл, когда пространство вариантов большое или визуальное и текстом его описывать неудобно. Если задача укладывается в пару строк обычного ответа, песочница только добавит лишний шаг. Установка идёт через маркетплейс claude-plugins-official, отдельных ключей или зависимостей не требуется.
Какие задачи решает
- собрать интерактивный HTML-файл для настройки параметров
- подобрать сетку, отступы и типографику с живым превью
- построить SQL-запрос или регулярку перебором вариантов
- разметить пробелы в знаниях по теме в виде карты понятий
- пройтись по документу с одобрением и отклонением правок
Примеры запросов агенту
- сделай playground для выбора цветовой схемы и типографики лендинга
- собери data-explorer, чтобы подобрать SQL-запрос к таблице заказов
- нужна песочница для разбора этого документа с кнопками approve и reject
Как установить playground
Через маркетплейс плагинов
/plugin install playground@claude-plugins-official/plugin marketplace add anthropics/claude-plugins-officialПо шагам, с командами для каждой платформы: Плагины Claude Code: маркетплейсы, установка и как собрать свой
Из того же набора123
Весь набор →Похожие
Рядом в теме «Настройка агента: память, контекст, субагенты»
Все плагины по теме «Настройка агента: память, контекст, субагенты» →Вопросы о playground
Как установить playground в Claude?
Сначала добавьте маркетплейс: /plugin marketplace add anthropics/claude-plugins-official. Затем поставьте плагин: /plugin install playground@claude-plugins-official.
Что делает playground?
Создаёт самодостаточный HTML-файл с элементами управления, живым превью и выводом промпта с кнопкой копирования. Настроив всё визуально, вы копируете промпт обратно в Claude.
Какие шаблоны входят в плагин?
Четыре: design-playground для визуальных решений, data-explorer для данных и запросов, concept-map для карт понятий, document-critique для разбора документов.
Исходный текст
playground · Apache-2.0
# Playground Plugin 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. ## What is a Playground? A playground is a self-contained HTML file with: - Interactive controls on one side - A live preview on the other - 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 to Use Use this plugin 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. ## Templates The skill includes templates for common playground types: - **design-playground** — Visual design decisions (components, layouts, spacing, color, typography) - **data-explorer** — Data and query building (SQL, APIs, pipelines, regex) - **concept-map** — Learning and exploration (concept maps, knowledge gaps, scope mapping) - **document-critique** — Document review (suggestions with approve/reject/comment workflow) ## Installation Add this plugin to your Claude Code configuration to enable the playground skill.
© Anthropic · Apache-2.0 · anthropics/claude-plugins-official
