チャットからUIを生成し、
その場で動かす開発環境。
空の「Ready」状態から、チャットで指示するだけでUIが立ち上がります。 作られるのは見た目だけではなく、実際に操作できる画面です。 API不要。Claude Code があれば、すぐに使えます。
取得後、Claude Code にプロンプトを貼るだけで導入完了
即起動
Ready状態からスタート
リアルタイム
変更が即座に反映
API不要
Claude Codeだけで完結
操作可能
見た目だけでなく動く
How It Works
実際はこう動きます
「/studio」と入力すると、以下の4ステップで進みます
「/studio」を実行する
Claude Codeで /studio と入力するだけ。数秒でReady画面が起動します。
結果
ブラウザにReady画面が表示される
チャットでUIを指示する
「フォームを作って」「ダッシュボードを作って」など、作りたいものを言葉で伝えます。
結果
Claude Codeがコードを生成し、自動で画面に反映
リアルタイムでプレビューされる
チャットで指示した内容が、右側のブラウザに即座に反映されます。HMR対応で、コード変更のたびに自動更新。
結果
UIがリアルタイムで構築されていく
実際に操作できる
表示されたUIは見た目だけではありません。ボタンをクリック、フォームに入力、画像をアップロード — すべて実際に動作します。
結果
操作した結果を見て、さらに修正指示を出せる
Key Features
なぜ「動く」のか
この3つの技術が、チャットからの直接UI生成を実現しています
API不要
Claude Code自体がエンジン
外部APIキーの設定は不要です。Claude Code（Pro/Max/Team）があれば、そのまま動きます。追加コストなし。
見た目だけでなく「動く」
完全インタラクティブ
生成されるUIはモックアップではありません。ボタン、入力欄、画像アップロード、状態遷移 — すべて実際に操作できます。
HMR対応
コード変更が即座に反映
Hot Module Replacementに対応。コードを修正するたびに、ブラウザが自動でリロードされます。「変えて」→ 即反映。
通常のAI開発との違い
通常のAI開発
- —コードは生成されるが、動かない
- —プレビューは静的な画像
- —操作確認には別途デプロイが必要
- —修正のたびにコピペ作業
- —非エンジニアには難しい
Claude Code Studio
- 生成されたUIがその場で動く
- リアルタイムでプレビュー更新
- ブラウザ上で直接操作できる
- 「ここ変えて」で即修正
- チャットだけで完結
Setup
導入は3ステップ
Gumroadで取得後、Claude Codeにプロンプトを貼るだけ。手動ダウンロードは不要です。
Gumroadで取得
「I want this!」を押すだけ。$0〜 の自由価格です。
プロンプトを貼り付け
購入後に表示される導入プロンプトを Claude Code にそのまま貼り付けて送信。
/studio で起動
Claude Codeが自動で取得・配置。完了後 /studio と入力すればReady画面が起動します。
手動でのダウンロードやファイル配置は不要です。Claude Code がすべて自動で行います。 ※ Claude Code（Pro / Max / Team）が必要です
こんな方におすすめ
非エンジニア
コードを書かずに動くUIを作りたい方
高速プロトタイピング
アイデアをすぐ形にしたい方
Claude Code ユーザー
開発体験をもっと直感的にしたい方