インタラクティブなHTMLプレイグラウンド（ユーザーが視覚的に操作できる対話型の環境）を作成します。単一ファイルで完結した構成になっており、ユーザーがコントロール機能で視覚的に設定し、リアルタイムでプレビューを確認し、プロンプト（AIへの指示文）をコピーして使うことができます。 **次のような場合に使用:** ユーザーがあるテーマについて、プレイグラウンド、エクスプローラー、または対話型ツールの作成を求めているとき
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.
Playgroundとは、一方にインタラクティブなコントロール、もう一方にライブプレビュー、そして下部にコピーボタン付きのプロンプト出力を備えた、単一の自己完結型HTMLファイルです。ユーザーはコントロールを操作して視覚的に探索し、生成されたプロンプトをClaudeにコピーして貼り付けます。
次のような場合に使用: あるトピックに対してインタラクティブなPlayground、エクスプローラー、またはビジュアルツールをユーザーが求めているとき。特に、入力の空間が広大である、視覚的である、または構造的であり、プレーンテキストでは表現しにくい場合。
templates/ から対応するテンプレートを読み込む:
templates/design-playground.md — ビジュアルデザインの意思決定（コンポーネント、レイアウト、スペーシング、カラー、タイポグラフィ）templates/data-explorer.md — データとクエリ構築（SQL、API、パイプライン、正規表現）templates/concept-map.md — 学習と探索（コンセプトマップ、知識のギャップ、スコープのマッピング）templates/document-critique.md — ドキュメントレビュー（承認・却下・コメントのワークフローによる提案）templates/diff-review.md — コードレビュー（gitの差分、コミット、PRの行単位コメント）templates/code-map.md — コードベースのアーキテクチャ（コンポーネントの関係、データフロー、レイヤー図）open <filename>.html を実行してユーザーのデフォルトブラウザで起動する。単一のstateオブジェクトを維持する。すべてのコントロールはstateに書き込み、すべての描画はstateから読み込む。
const state = { /* すべての設定可能な値 */ };
function updateAll() {
renderPreview(); // ビジュアルを更新
updatePrompt(); // プロンプトテキストを再構築
}
// すべてのコントロールは変更時に updateAll() を呼び出す
function updatePrompt() {
const parts = [];
// デフォルト値から変更された項目のみ言及する
if (state.borderRadius !== DEFAULTS.borderRadius) {
parts.push(`border-radius of ${state.borderRadius}px`);
}
// 数値と並べて定性的な表現を使用する
if (state.shadowBlur > 16) parts.push('a pronounced shadow');
else if (state.shadowBlur > 0) parts.push('a subtle shadow');
prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}
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.
templates/:
templates/design-playground.md — Visual design decisions (components, layouts, spacing, color, typography)templates/data-explorer.md — Data and query building (SQL, APIs, pipelines, regex)templates/concept-map.md — Learning and exploration (concept maps, knowledge gaps, scope mapping)templates/document-critique.md — Document review (suggestions with approve/reject/comment workflow)templates/diff-review.md — Code review (git diffs, commits, PRs with line-by-line commenting)templates/code-map.md — Codebase architecture (component relationships, data flow, layer diagrams)open <filename>.html to launch it in the user's default browser.Keep a single state object. Every control writes to it, every render reads from it.
const state = { /* all configurable values */ };
function updateAll() {
renderPreview(); // update the visual
updatePrompt(); // rebuild the prompt text
}
// Every control calls updateAll() on change
function updatePrompt() {
const parts = [];
// Only mention non-default values
if (state.borderRadius !== DEFAULTS.borderRadius) {
parts.push(`border-radius of ${state.borderRadius}px`);
}
// Use qualitative language alongside numbers
if (state.shadowBlur > 16) parts.push('a pronounced shadow');
else if (state.shadowBlur > 0) parts.push('a subtle shadow');
prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}
原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。