Claude Codeのplaygroundプラグインで操作から指示文を作るHTMLを出す
playgroundプラグインは、スライダーや選択肢を動かすと指示文が組み上がるHTML1枚をClaude Codeに作らせます。導入、テンプレートの選び方、指示文の組み立て方を説明します。
playgroundプラグインは、Claude Codeに「操作して試せるHTML」を1枚作らせるための公式プラグインです。左のコントロールを動かすと右のプレビューが変わり、下に「Claudeへ戻す指示文」が組み上がります。コピーして会話に貼れば、言葉にしにくい好みや構造を、そのまま次の依頼に変えられます。
ここでいうplaygroundは、Anthropic Consoleのプロンプト試行画面とは別物です。こちらはClaude Codeのプラグインが、手元のプロジェクトごとにローカルで作るHTMLファイルです。
playgroundプラグインは何を作るのか
作られるのは、CSSとJavaScriptをすべて1ファイルに埋め込んだHTMLです。構成は次の3点に決まっています。
- 片側に操作用のコントロール
- もう片側にライブプレビュー
- 下部にプロンプト出力とコピーボタン
使い方の流れは、操作して見比べ、気に入った状態の指示文をコピーし、Claudeへ貼り戻すだけです。余白を8pxにするか12pxにするかのように、文章では決めにくい選択に向いています。
プラグインの実体は、playground という名前のスキルが1つです。リポジトリのREADMEには、入力の範囲が広く、視覚的か構造的で、文章にしにくい話題に使うと書かれています。
playgroundを使うときの流れ
- 1
作ってほしい対象を頼む
「ボタンの見た目を試せるplaygroundを作って」のように、対象を名指しで頼みます。
- 2
Claudeがテンプレートを選んで1枚のHTMLを書く
話題に近いテンプレートを選び、合わなければ最も近いものを調整して使います。
- 3
ブラウザで開いて操作する
書き終えると、既定のブラウザで開くコマンドを実行します。
- 4
指示文をコピーして貼り戻す
調整した結果の指示文をコピーし、Claude Codeの会話に貼ります。
導入とスキルの呼び出し方
公式マーケットプレイスには、対話式の端末で初めてClaude Codeを起動したときに自動で登録されます。インストールは次のコマンドです。
/plugin install playground@claude-plugins-official/plugin install は、すぐには入れずに /plugin パネルをそのプラグインの詳細で開きます。内容を確認し、適用範囲(スコープ)を選んでから導入する流れです。セッション中に反映するには /reload-plugins を実行します。シェルから入れる場合は claude plugin install playground@claude-plugins-official です。コマンドの経路の違いはclaude plugin installの導入経路を選ぶで整理しています。
スキルの説明文は「ユーザーがplayground、エクスプローラー、対話的なツールを作りたいと言ったとき」に使う、という趣旨です。呼び出しは、頼み方の言葉で起きます。
カードコンポーネントの見た目を決めたい。角丸・影・余白を触って
比べられるplaygroundを作ってプラグインを入れても、コンテキストの消費が気になる場合はclaude plugin detailsでプラグインのコンテキスト消費を測るで数字を見られます。
4つのテンプレートはどう使い分けるか
READMEが挙げるテンプレートは4つです。スキル本体の手順には、さらに2つ(diff-reviewとcode-map)が載っており、合計6つになります。READMEだけを見ていると、コードレビューやアーキテクチャ図に使えることに気づきません。
| テンプレート | 向く話題 | 画面の作り |
|---|---|---|
| design-playground | 向く話題コンポーネント・レイアウト・余白・色・タイポグラフィ | 画面の作り左にコントロール、右に実物のプレビュー |
| data-explorer | 向く話題SQL・API・パイプライン・正規表現・cron | 画面の作り左で条件を組み、右に整形した出力 |
| concept-map | 向く話題概念の関係、知識の抜け、作業の分解 | 画面の作りキャンバス上でノードをドラッグ |
| document-critique | 向く話題SKILL.mdやREADMEなど文書の査読 | 画面の作り本文と提案一覧、承認・却下・コメント |
| diff-review | 向く話題差分・コミット・PRの行ごとのコメント | 画面の作り差分表示とコメント欄 |
| code-map | 向く話題コンポーネント間の関係とデータの流れ | 画面の作りSVGの構成図に、クリックでコメント |
design-playground: 見た目の選択を数値にせず方向性で返す
テンプレートの想定は、スライダー(サイズ・余白・角丸)、トグル(境界線やホバー効果)、ドロップダウン(フォントやイージング)、クリックできるカード(レイアウト構造)、画面幅スライダー(折り返しの確認)という対応です。
出力される指示文は、数値の羅列にせず、開発者への指示の形にするよう定められています。テンプレートの例は「カードを柔らかく浮いた印象にする。角丸12px、左右の余白24px、中程度のbox-shadow。ホバーで1px持ち上げて影を少し深くする」という調子です。Tailwindを使っているならクラス名で、素のCSSならプロパティで書くよう促す記述もあります。
data-explorer: クエリそのものでなく「何を作るか」を返す
SQLビルダー、APIエンドポイントの設計、変換パイプライン、正規表現、cron、GraphQLクエリが例題に挙がっています。ここで返す指示文は、生のクエリではなく仕様の説明にする決まりです。「ordersをuser_idでusersに結合し、2024年以降で合計が50ドルを超えるものを、ユーザー別に注文数の上位10人まで」のような形で、テーブル名や列の型といったスキーマも含めて自己完結させます。
concept-map: 知っている・曖昧・知らないを塗り分けて質問に変える
ノードごとに「知っている」「曖昧」「分からない」を切り替え、関係の線を自分で引きます。指示文には、曖昧と未知の概念と、引いた線の関係だけが入ります。コードベースや新しいフレームワークを学ぶときに、質問の的を絞る用途です。既存コードで使う場合、ノードに実際のファイルパスと短い説明を入れておくと質問が具体的になります。
document-critique: 提案を承認・却下して修正指示に絞る
文書を行番号つきで表示し、提案を保留・承認・却下の3状態で色分けします。最終の指示文には承認した提案とユーザーのコメントだけが入り、却下したものは文脈として添える程度です。SKILL.mdやREADMEの手直しを、一括で「これは採用、これは不要」と仕分けるのに向きます。
指示文が使えるものになる条件
スキルは、どのplaygroundにも共通する条件を定めています。
- 1ファイルのHTMLで、外部依存なし(CDNが落ちても動く)
- コントロール変更のたびに即時に再描画する。「適用」ボタンは置かない
- 指示文は値のダンプでなく自然な文章で、初期値と違う選択だけを書く
- 最初から見栄えがよい初期値と、3〜5個のプリセットを持つ
- ダークテーマで、UIはシステムフォント、値はモノスペース
実装の型も決まっています。状態は1つのオブジェクトに集め、すべてのコントロールが書き込み、描画が読み出す形です。指示文の生成は、初期値と違う項目だけを拾って文にします。
const state = { /* 設定できる値のすべて */ };
function updateAll() {
renderPreview(); // 見た目を更新
updatePrompt(); // 指示文を組み直す
}自分で作らせたplaygroundがこの条件を満たしているかは、次の3点を確認すれば判断できます。
playgroundの出来を見る3点
初期値のままで指示文が空に近い
触っていない状態で長い指示文が出るなら、初期値との比較が働いていません。
コピーした文だけで依頼が成り立つ
playgroundを見ていない人に渡しても、何を変えるかが分かる文脈が入っているかを確かめます。
外部ファイルを読んでいない
HTMLに外部のCDNを呼ぶ記述があれば、スキルの条件に反します。
作らせたあとの回し方
playgroundは使い捨てのHTMLです。何度も使うなら、Claudeに保存先を指定します。会話に貼った指示文でコードを変えさせたら、結果を確認し、足りなければplaygroundを開き直して続きを調整します。
実際の運用では、依頼の中に「対象のファイル」と「現状のスタイル」を渡しておくと、プレビューが実物に近づきます。次のように頼む形が考えられます。
src/components/PricingCard.tsx の現状の見た目を初期値にして、
角丸・影・余白・ホバー時の動きを触れるplaygroundを作って。
プリセットは「控えめ」「標準」「目立たせる」の3つにしてこれは、スキルの「初期値とプリセットを持つ」条件に沿わせた頼み方の一例です。実際にどんなHTMLが返るかは、プロンプトとプロジェクトの内容で変わります。
状況ページを自動更新する用途なら、同じ公式プラグイン群にあるプロジェクト向けのプラグインが合います。project-artifactプラグインで状況ページを自動更新するを参照してください。playgroundは「選んだ結果を指示に変える」道具で、進捗を載せ続ける道具ではありません。
向かない場面と注意点
- 選択肢が少ないとき: 2択程度なら、文章で伝えたほうが速いです
- 結果が数値で一意に決まるとき: 計算やスキーマの変換は、playgroundを挟む意味がありません
- 長期に運用するダッシュボード: 1枚のHTMLを都度作る前提で、更新の仕組みは含まれません
プラグインのリポジトリはAnthropic名義で、ライセンスファイルも含まれています。READMEの導入手順は「Claude Codeの設定に追加する」と書かれているだけなので、具体的な手順は上の /plugin install に従ってください。
まとめ
playgroundプラグインは、決めにくい視覚的・構造的な選択を、操作から指示文に変えるための道具です。テンプレートはREADMEの4つに加えて、diff-reviewとcode-mapがスキル側にあります。使い始めるときは、対象のファイルと初期の状態を依頼に含めて、プリセットまで頼むところから試すと、最初の1枚が使える状態で返ってきます。