uisandbox-mcp

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

Oder wirf ein Zip auf uisandbox.org. Oder in Claude Code: /plugin marketplace add AlexanderKaan/uisandbox → /plugin install uisandbox@uisandbox und sag „öffne diese App in UISandbox".

Was es tut

1. Build einbringen — drei Wege: ein Zip von dist/, build/, out/ (oder ein ganzes Repo mit dem Build darin); ein Ordner (ein Build wird gerendert, ein Quellordner wird für das Regler-Set gelesen); eine öffentliche GitHub-Repo-URL (als Zip über eine Same-Origin-Route geholt — das Einzige, was den Tab verlässt, siehe notes/security.md). Während es läuft, zeigt die Tür die Schritte mit ihren Nummern. Sonst verlässt nichts den Tab: Dateien werden in der Seite gelesen und vom Service Worker dieser Origin an den Frame ausgeliefert.

2. Sieh es 1:1. Jede Farbe, jeder Radius, jede Schrift, jede Größe, jeder Abstand, jede Zeilenhöhe, jeder Buchstabenabstand, jedes Gewicht, jede Rahmenbreite, jede Dauer, jeder Verlaufswinkel und jedes Schatten-Literal in deinem CSS wird zu einer Variable, die genau diesen Wert hält, sodass die Seite exakt so rendert wie zuvor — auch Laufzeit-Styles (style="" von JS gesetzt, <style> das dein Framework anhängt, insertRule/replaceSync von styled-components, Emotion, Lit, Ants cssinjs; CDN-Stylesheets über einen Same-Origin-Proxy; verschachtelte Same-Origin-Frames wie die von Storybook).

3. An den Reglern drehen. Brand und die Farbfamilien, die dein CSS tatsächlich enthält (Sekundär, Akzent, das Status-Set, eine Palette-Reihe für das, was keines von beidem ist); Seitenhintergrund; Grauton und Randton; Anzeige- und Textschrift (deine zuerst, dann Alternativen nach Zeichensatz); Regler für Textgröße, Zeilenhöhe, Buchstabenabstand, Gewicht, Abstand, Radius, Rahmenbreite, Höhe, Bewegung und Verlaufswinkel — jeder Regler mit ×1 = wie in deinem Code in der Mitte; globaler Farbton, Sättigung und Kontrast, die jede Farbe erreichen, einschließlich Diagramm-Paletten und CSS-gezeichneter Icons; dein Dark Mode, über deine eigenen Hooks aktiviert.

4. Export. Deine Werte als CSS / JSON / eine Patch-Liste, deine Dateien an Ort und Stelle gepatcht, --k-*-Tokens für Web (CSS, Tailwind, shadcn), Swift-Konstanten + einen Asset-Katalog für iOS, colors.xml + Kotlin für Android.

Related MCP server: PicassoWeb

Ehrlich von Grund auf

• „1:1" ist gemessen, nicht gefühlt. Check 1:1 lädt den unveränderten Build und den tokenisierten Build nebeneinander und vergleicht die berechneten Styles jedes Elements (18 Eigenschaften, Schattenwurzeln und verschachtelte Frames inklusive). Null Unterschiede oder es sagt, was sich unterscheidet.

• Ein Reichweitenmesser im Fuß der Bühne sagt, wie viel von dem, was du siehst, die Regler berühren — gemalte Farben, Familien, Größen, Radien — und was außerhalb liegt (Bilder, Canvas, Video).

• Es verweigert, was es nicht zeigen kann. iOS/Android-Projekte, WordPress-Themes und Quellcode ohne Build bekommen eine klare Meldung an der Tür; eine Seite, die Dateien anfordert, die das Archiv nicht enthält, sagt das („das bedeutet normalerweise Quellcode, nicht den Build").

• Ein feindliches Archiv kann das Tool nicht wegnavigieren, keinen eigenen Service Worker registrieren oder unseren abmelden, oder einen Zip-Slip-Pfad aus einem Export zurückschmuggeln. Was es kann — das DOM des Tools erreichen, weil die Frames von Design Same-Origin sind — erreicht nichts, was es wert wäre: kein Server, keine Zugangsdaten, kein Zustand. Lies notes/security.md; betreibe es auf einer eigenen Origin.

Ausführen

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> lädt ein Zip per URL (Same-Origin oder CORS) — die Tür, die ein Agent nutzt.

Zur Rechenschaft ziehen

pnpm holdouts lässt jedes Archiv in fixtures/ (echte Builds aus öffentlichen Repos — gitignored, notes/decisions.md sagt, woher jedes stammt) durch die App laufen: Load, Check 1:1, Reichweite und einen Host-Check (gleiche Origin, ein Worker). Die Ergebnisse werden gegen scripts/holdouts.expect.json geprüft; ein Fixture, das ok erwartet und es nicht ist, schlägt den Lauf fehl. --only <name>, --record, --base <url> --fixtures <url> für einen Produktions-Build oder die Live-Site.

So funktioniert es

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) — oder pnpm mcp aus einem Clone — betreibt dieselbe Engine als MCP-Server (stdio): load ein Zip per URL oder Pfad, set Regler, export jedes Format, verify den 1:1-Check und screenshot in Headless-Chromium gegen die echte App. Siehe mcp/README.md für die Tool-Liste und die Claude/Cursor-Konfiguration. Claude Code-Plugin (Skill + Server in einem): /plugin marketplace add AlexanderKaan/uisandbox dann /plugin install uisandbox@uisandbox — gibt /uisandbox („öffne diese App in einer Sandbox", „probier Brand #e11d48") und den uisandbox-MCP-Server. Der Skill allein ist skills/uisandbox/SKILL.md (kopiere in .claude/skills/). Codex / Cursor / andere: MCP-Server hinzufügen (npx -y uisandbox-mcp); der Server sendet seine eigenen Anweisungen und Prompts.

Bereitstellen

Statisch, eine Origin, Service Worker im Root. Cloudflare Pages: Build-Befehl pnpm build, Ausgabe dist/; public/_headers hält sw.js ungecacht und setzt die Sicherheits-Header; public/_redirects schickt Deep Links an die App. Nichts anderes auf die Origin.

Roadmap

notes/roadmap.md: Ship (uisandbox.org) · der Intake als Eingangstür · gefunden werden (SEO, llms.txt, Analytics) · der MCP-Server · nach dem Launch.

Mit ♥ gemacht von Alexander Kaan bei Pageminds · MIT, für immer kostenlos · die Entscheidungen, die es geprägt haben, nummeriert: notes/decisions.md