uisandbox-mcp

npx uisandbox-mcp open ./dist     # the sandbox opens in your browser with your build — no agent needed

または uisandbox.org にzipをドロップ。あるいはClaude Codeで: /plugin marketplace add AlexanderKaan/uisandbox → /plugin install uisandbox@uisandbox と入力し、"open this app in UISandbox" と言うだけ。

できること

1. ビルドを持ち込む — 3つの方法: dist/、build/、out/ のzip（またはビルドを含むリポジトリ全体）; フォルダ（ビルドはレンダリングされ、ソースフォルダはつまみ台として読み取られる）; 公開GitHubリポジトリのURL（同一オリジンのルート経由でzipとして取得 — タブの外に出る唯一のもの、notes/security.md 参照）。動作中は、ドアにステージとその番号が表示される。それ以外はタブの外に出るものは何もない: ファイルはページ内で読み取られ、このオリジンのサービスワーカーによってフレームに配信される。

2. 1:1で確認する。 CSS内のすべての色、角丸、フォント、サイズ、間隔、行高、文字間隔、太さ、枠線幅、時間、グラデーション角度、シャドウのリテラルが、まったく同じ値を保持する変数になるため、ページは元のとおりにレンダリングされる — ランタイムスタイルも同様（JSが設定する style=""、フレームワークが追加する <style>、styled-components、Emotion、Lit、Antのcssinjsからの insertRule/replaceSync; 同一オリジンプロキシ経由のCDNスタイルシート; Storybookなどのネストされた同一オリジンフレーム）。

3. つまみを回す。 Brand、そしてCSSが実際に含む色ファミリー（secondary、accent、ステータスセット、どちらでもないもののパレット行）; ページ背景、グレーの色合いとボーダートーン; 表示フォントと本文フォント（あなたのものが最初、次に文字ごとの代替）; テキストサイズ、行高、文字間隔、太さ、間隔、角丸、枠線幅、浮き上がり、モーション、グラデーション角度のダイヤル — すべてのダイヤルは中央に ×1 = コードのとおり; すべての色、チャートパレット、CSS描画アイコンに届くグローバルな色相、彩度、コントラスト; あなたのダークモードは、あなた自身のフックで切り替え。

4. 書き出す。 あなたの値をCSS / JSON / パッチリストとして、あなたのファイルをその場でパッチ適用、Web用の --k-* トークン（CSS、Tailwind、shadcn）、iOS用のSwift定数 + アセットカタログ、Android用の colors.xml + Kotlin。

Related MCP server: PicassoWeb

構造上正直であること

• 「1:1」は感覚ではなく計測。 Check 1:1 は未加工のビルドとトークン化されたビルドを並べて読み込み、すべての要素の計算済みスタイルを差分比較する（18プロパティ、シャドウルートとネストされたフレームを含む）。差分ゼロか、何が違うかを示す。

• リーチメーター がステージのフッターにあり、見えているもののうちつまみが触れる範囲 — 塗られた色、ファミリー、サイズ、角丸 — と、その外にあるもの（画像、キャンバス、ビデオ）を示す。

• 表示できないものは拒否する。 iOS/Androidプロジェクト、WordPressテーマ、ビルドのないソースはドアで明確なメッセージが表示される; アーカイブにないファイルを要求するページはその旨を伝える（「それは通常、ビルド出力ではなくソースを意味します」）。

• 悪意のあるアーカイブ は、ツールを別の場所に移動させたり、独自のサービスワーカーを登録したり、当社のサービスワーカーの登録を解除したり、zipスリップパスをエクスポートから持ち出したりすることはできない。それができること — ツールのDOMに到達すること（フレームは設計上同一オリジンであるため）— は、価値のあるものには何も到達しない: サーバーも、認証情報も、状態もない。notes/security.md を読むこと; 専用のオリジンにデプロイすること。

実行する

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

http://localhost:5190/?load=<zip-url> はzipをURLで読み込む（同一オリジンまたはCORS）— エージェントが使うドア。

説明責任を問う

pnpm holdouts は fixtures/ 内のすべてのアーカイブ（公開リポジトリからの実際のビルド — gitignore済み、notes/decisions.md に各々の出所が記載）をアプリに通す: 読み込み、Check 1:1、リーチ、そしてホストチェック（同一オリジン、ワーカー1つ）。判定は scripts/holdouts.expect.json と照合される; ok が期待されるフィクスチャがそうでない場合、実行は失敗する。--only <name>、--record、--base <url> --fixtures <url> は本番ビルドまたはライブサイト用。

仕組み

src/
  sandbox/
    rewrite.ts   their CSS/HTML → literals replaced by var(--us-vN); byte-preserving
    table.ts     the substitution sheet: one entry per (kind, value), with sites
    mapping.ts   knob → their values, RELATIVE to the baseline (identity at rest); families
    baseline.ts  the knobs on the stand of THEIR code (audit + the sheet + the rendered page)
    project.ts   root and deploy-base detection · screens · raw + rewritten files · guard + hook
    host.ts      owns the sandboxes, answers the service worker; live vars injected into HTML
    verify.ts    the 1:1 check: raw vs identity, computed styles per element
    coverage.ts  the reach meter
    live.ts      MutationObserver: runtime style="" and <style> get the same rewrite
    scheme.ts    their dark mode: hooks found in their CSS, switched
  public/sw.js   serves a sandbox document's URLs from the page; /__ext/ proxies CDN CSS
  tokens/ panel/ state/ export/ audit/   the knob engine, panel, undo/hash, exporters, source audit
notes/           decisions (numbered), traps, lessons, security, roadmap

MCP

npx -y uisandbox-mcp（npm）— またはクローンから pnpm mcp — は同じエンジンをMCPサーバー（stdio）として実行する: load はURLまたはパスからzipを読み込み、set はつまみを設定、export は任意の形式で書き出し、verify は1:1チェックを実行、screenshot はヘッドレスChromiumで実際のアプリに対して実行。ツール一覧とClaude/Cursor設定は mcp/README.md を参照。Claude Codeプラグイン（スキル+サーバーが一体）: /plugin marketplace add AlexanderKaan/uisandbox の後に /plugin install uisandbox@uisandbox — /uisandbox（「このアプリをサンドボックスで開いて」「brand #e11d48を試して」）と uisandbox MCPサーバーが使えるようになる。スキル単体は skills/uisandbox/SKILL.md（.claude/skills/ にコピー）。Codex / Cursor / その他: MCPサーバーを追加（npx -y uisandbox-mcp）; サーバーが自身の指示とプロンプトを送信する。

デプロイ

静的、単一オリジン、ルートにサービスワーカー。Cloudflare Pages: ビルドコマンド pnpm build、出力 dist/; public/_headers は sw.js をキャッシュせず、セキュリティヘッダーを設定; public/_redirects はディープリンクをアプリに送る。オリジンには他に何も置かないこと。

ロードマップ

notes/roadmap.md: リリース（uisandbox.org）· 入り口としての受付 · 見つけられること（SEO、llms.txt、アナリティクス）· MCPサーバー · ローンチ後。

Alexander Kaan が Pageminds で ♥ を込めて制作 · MIT、永久無料 · 形作った決定の番号付き記録: notes/decisions.md