UISandbox

UISandbox

アプリのデザインを、ブラウザー上で試してみましょう。
アプリを持ち込み、見た目を選び、調整して、持ち帰りましょう。
_{自分のアプリがタブ内でそのまま動作し、サーバーには何も送信されません。タブを閉じればすべて元に戻ります。}

uisandbox.org · npm：uisandbox-mcp · MCP レジストリ · ディスカッション · MIT

あなたのアプリは、AI に作らせた他のどのアプリとも同じように見えます。それがなぜなのか、説明できません。 UISandbox では、その見た目を決めるノブの隣にアプリを表示します。色、書体、形、余白。ノブを動かすと、その値を使うすべての場所に反映されます。モックアップではなく、実際のアプリ上で確認できます。気に入ったものは、エージェントが適用できるデザインシステムとして保存できます。

uisandbox.org を開いてください。最初は UI キットが表示されるので、アプリを持ち込む前に試せます。

4つのステップ

1. アプリを持ち込みます。 エディターには、出荷時の shadcn/ui が6通りで表示されます。さらに7つのキット（Tailwind CSS、daisyUI、Bootstrap、Material 3、Radix Themes、Mantine、Ant Design）をワンクリックで選べます。それぞれ、同じ7画面の請求アプリとして仕上げられています。次に Try it on your own app を選び、開発サーバーの隣で npx uisandbox-mcp open http://localhost:3000 を実行するか、エージェントに開くよう伝えれば、実行中のアプリがすべての画面でライブ表示され、ホットリロードにも対応します。ターミナルを使わない場合は、Take this screen along をブックマークバーにドラッグし、ブラウザーで表示している任意の画面（ステージング環境、ログイン後の画面、Lovable や v0 のプレビュー）でクリックしてください。または、zip、フォルダー、公開リポジトリを持ち込めます。キットで調整した内容も、必要に応じて引き継げます。
2. 見た目を選びます。 画面上の 6 を押すと、Classic、Compact、Soft、Sharp、Airy、Bold の6種類が並べて表示されます。色は変えず、角、余白、奥行き、書体だけが異なるので、色味ではなくスタイルを比較できます。1つを全画面で開き、Pick this one を選んでください。同じ6種類がプリセット一覧にもあります。
3. 調整します。 まずは色、書体、形、余白を調整します。文字サイズ、行の高さ、文字間隔、ウェイト、枠線の幅、立体感、動き、グレーの色味などは、More の下にあります。各ダイヤルの中央には ×1 = コードの設定そのまま と表示されます。ダークモードは、あなた自身のフックを使って切り替わります。Space キーを押したままにすると、元の表示を確認できます。
4. 持ち帰ります。 Copy for your AI を使うと、デザインシステムとその適用方法をひとまとめにしてコピーできます。Claude Code、Cursor、Codex、Lovable、v0 に対応しています。キットの場合、zip には DESIGN.md、theme.css、SKILL.md が含まれ、リポジトリ内に保存されます。ファイルには、そのキット独自の変数名が使われます。自分のアプリの場合は、ファイルをその場でパッチするか、CSS、Tailwind、shadcn、Swift、Android 用のトークンを取得できます。MCP サーバーが起動していれば、Send to your agent でそのままエージェントに渡せます。

画面上で、汎用的な AI 風デザインの特徴（どこでも使われる Inter や Geist、インディゴのブランドカラー、装飾としてのグラデーション）も判定します。ページから測定したうえで、ノブで修正できる特徴を示します。

リンクから開く

uisandbox.org/?load= の後に、公開 GitHub または GitLab リポジトリの URL、あるいは CORS を許可する .zip への直接リンクを指定すると、サンドボックスが直接開きます。

https://uisandbox.org/?load=https://github.com/edwardtufte/tufte-css
https://uisandbox.org/?load=https://example.com/dist.zip

リポジトリ URL はこのサイトのリポジトリ用ルートを経由します（GitHub と GitLab はアーカイブに CORS ヘッダーを付けないためです）。.zip の URL はブラウザー自体が取得します。どちらの場合も、アーカイブはタブ内で読み込まれ、ドロップした場合とまったく同じように扱われます。

プレビューではなく、あなたのアプリそのものです

CSS 内の色、角丸、フォント、サイズ、余白、行の高さ、文字間隔、ウェイト、ボーダー幅、時間、グラデーションの角度、影のすべての値が、同じ値を保持する変数になります。そのため、ページは元のまま正確にレンダリングされます。実行時のスタイルも対象です。JavaScript が設定する style=""、フレームワークが追加する <style>、styled-components、Emotion、Lit、Ant の cssinjs による insertRule と replaceSync、同一オリジンのプロキシ経由で読み込まれる CDN スタイルシート、Storybook などの同一オリジンの入れ子フレームも含まれます。

ご自身で確認する方法

• 1:1 チェックでは、変更前のページとトークン化されたページを並べて読み込み、シャドウルートや入れ子フレームも含め、すべての要素の計算済みスタイルを比較します。差異がなければその旨を示し、差異があれば内容を明示します。
• 到達度メーターはステージのフッターに表示され、目に見える要素のうち、ノブで操作できる範囲と対象外の要素（画像、キャンバス、動画）を示します。
• 対応できない場合は、その旨をお知らせします。 iOS や Android のプロジェクト、WordPress テーマ、ビルドなしのソースには、入口で明確なメッセージを表示します。
• 悪意のあるアーカイブがツールから移動したり、独自のサービスワーカーを登録したり、こちらのサービスワーカーを登録解除したり、zip-slip パスをエクスポートに紛れ込ませたりすることはできません。また、設計上フレームは同一オリジンなので、ツールの DOM に到達できたとしても、価値のあるものには何もアクセスできません。サーバーも、認証情報も、状態もありません。notes/security.md を読み、独自のオリジンにデプロイしてください。

ファイルがブラウザーの外に出ることはありません

サンドボックスの背後にサーバーはなく、アカウント、Cookie、分析機能もありません。ファイルはタブ内で読み込まれ、同一オリジン上のサービスワーカーによってフレームに提供されます。エクスポートも同じ場所で行われます。例外は公開リポジトリの URL だけで、zip の取得に uisandbox.org を経由します。何も保存されません。

ターミナルから、またはエージェントから

npx uisandbox-mcp open                       # inside your project: finds the build, opens the sandbox
npx uisandbox-mcp open http://localhost:3000 # your running dev server, live, hot reload included

同じエンジンが MCP サーバーとしても動作します（mcp/README.md）。ビルド、zip、または実行中の開発サーバーを load し、ユーザーのブラウザーで実際のサンドボックスを open し、ユーザーが変更を確定するまで wait_for_send し、ノブを set し、任意の形式で export し、1:1 チェックを verify して screenshot を撮影できます。npx -y uisandbox-mcp を使えば、任意の MCP クライアントに追加できます。

Claude Code プラグイン（スキルとサーバーをひとつに統合）： /plugin marketplace add Ideelab/uisandbox を実行し、続けて /plugin install uisandbox@uisandbox を実行してから、*「このアプリを UISandbox で開いて」*と言ってください。スキル単体は skills/uisandbox/SKILL.md にあります。

実行する

pnpm install
pnpm dev        # http://localhost:5190
pnpm test       # vitest, node:test for the audit and the kit engine
pnpm build      # dist/: static; public/_headers rides along
pnpm holdouts   # every fixture zip through the real app in headless Chromium (below)

http://localhost:5190/?load=<zip-url> は、URL（同一オリジンまたは CORS）から zip を読み込みます。

実際のビルドでテストする

pnpm holdouts は、fixtures/ 内のすべてのアーカイブ（公開リポジトリの実際のビルド。Git の追跡対象外です。入手元は notes/decisions.md を参照）をアプリで実行し、読み込み、1:1 チェック、到達度、ホストチェックを行います。判定結果は scripts/holdouts.expect.json と照合されます。ok を想定しているフィクスチャが ok 以外の場合、実行は失敗します。--only <name>、--record、--base <url> を指定できます。

pnpm kits:build は、各キット独自のパッケージから 8 つのキット用ドアをビルドします。 pnpm kits:gates は、それらの検出、エクスポート、ライブブリッジをチェックします。

仕組み

src/
  sandbox/
    rewrite.ts     their CSS and HTML: literals replaced by var(--us-vN), byte-preserving
    table.ts       the substitution sheet: one entry per (kind, value), with its sites
    mapping.ts     knob to their values, RELATIVE to the baseline (identity at rest)
    baseline.ts    the knobs on the stand of THEIR code
    directions.ts  the six looks of Pick a look and Preset
    tells.ts       the AI tells, measured on the screen
    verify.ts      the 1:1 check: raw against identity, computed styles per element
    coverage.ts    the reach meter
    live.ts        runtime style="" and <style> get the same rewrite
    scheme.ts      their dark mode: the hooks in their CSS, switched
  kits/engine/     the kit doors and the design system + skill export, per kit
  public/sw.js     serves a sandbox document's URLs from the page; /__ext/ proxies CDN CSS
  app/ panel/ tokens/ export/ state/ audit/
notes/             decisions (numbered), traps, lessons, security, roadmap

デプロイ

単一のオリジンで、Cloudflare Worker は1つ（worker/index.mjs、wrangler.jsonc）です。dist/ の静的アセット、?load= に対する SPA フォールバック、http から https へのリダイレクトと www から apex へのリダイレクト、公開リポジトリの zip を取得する /__repo/ ルートを提供します（何も保存せず、同一オリジンからの呼び出しのみ許可し、レート制限を適用します）。public/_headers では sw.js をキャッシュしないようにし、セキュリティヘッダーを設定します。デプロイは pnpm build && npx wrangler deploy で行います。オリジンにはほかのものを置かないでください。サンドボックス化されたフレームは、意図的に同一オリジンにしてあります。

コントリビューション

もっとも役立つのは、動作しないビルドを送っていただくことです。リライターの変更に適用される1対1のゲートと、実際のビルドでの実行方法については、CONTRIBUTING.md をご覧ください。

制作者

私は Alexander Kaan です。ユーザーインターフェース向けのオープンソースツールを開発しています。UISandbox は、その前に作ったデザインシステムジェネレーターから生まれました。完成したキットを人に渡すことはできても、その人自身のアプリがキットの中でどのように見えるかは示せませんでした。UISandbox はそのもう半分を実現します。

判断のすべてと、開発中に遭遇した落とし穴は、やり直すことになったものも含めて、notes/decisions.md に記録しています。Issue やプルリクエストも歓迎します。

---

Alexander Kaan が Ideelab で制作 · MIT