uisandbox-mcp

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

O suelta un zip en uisandbox.org. O, en Claude Code: /plugin marketplace add AlexanderKaan/uisandbox → /plugin install uisandbox@uisandbox y di "abre esta aplicación en UISandbox".

Qué hace

1. Trae el build — tres formas de entrada: un zip de dist/, build/, out/ (o un repo completo con el build dentro); una carpeta (un build se renderiza, una carpeta de código fuente se lee para el soporte de mandos); una URL pública de repositorio de GitHub (obtenida como zip a través de una ruta de mismo origen — lo único que sale de la pestaña, ver notes/security.md). Mientras funciona, la puerta muestra las etapas con sus números. De lo contrario, nada sale de la pestaña: los archivos se leen en la página y se sirven al frame mediante un service worker en este origen.

2. Míralo 1:1. Cada color, radio, fuente, tamaño, espaciado, interlineado, espaciado entre letras, peso, grosor de borde, duración, ángulo de degradado y literal de sombra en tu CSS se convierte en una variable que contiene exactamente el mismo valor, de modo que la página se renderiza tal como era — también los estilos en tiempo de ejecución (style="" establecido por JS, <style> que tu framework añade, insertRule/replaceSync de styled-components, Emotion, Lit, cssinjs de Ant; hojas de estilo CDN a través de un proxy de mismo origen; frames anidados de mismo origen como los de Storybook).

3. Gira los mandos. Marca, y las familias de color que tu CSS realmente contiene (secundario, acento, el conjunto de estados, una fila de paleta para lo que no es ni lo uno ni lo otro); fondo de página; tinte gris y tono de borde; fuente de display y de cuerpo (las tuyas listadas primero, luego alternativas por carácter); diales para tamaño de texto, interlineado, espaciado entre letras, peso, espaciado, radio, grosor de borde, elevación, movimiento y ángulo de degradado — cada dial con ×1 = como en tu código en su centro; tono, saturación y contraste globales que alcanzan cada color, incluidas paletas de gráficos e iconos dibujados con CSS; tu modo oscuro, activado con tus propios ganchos.

4. Exporta. Tus valores como CSS / JSON / una lista de parches, tus archivos parcheados en su lugar, tokens --k-* para web (CSS, Tailwind, shadcn), constantes Swift + un catálogo de assets para iOS, colors.xml + Kotlin para Android.

Related MCP server: UI Preset MCP Server

Honesto por construcción

• "1:1" se mide, no se siente. Check 1:1 carga el build sin tocar y el build tokenizado lado a lado y compara los estilos calculados de cada elemento (18 propiedades, incluidas shadow roots y frames anidados). Cero diferencias o dice qué difiere.

• Un medidor de alcance en el pie del escenario dice cuánto de lo que ves tocan los mandos — colores pintados, familias, tamaños, radios — y qué queda fuera (imágenes, canvas, vídeo).

• Rechaza lo que no puede mostrar. Los proyectos de iOS/Android, los temas de WordPress y el código fuente sin build reciben un mensaje claro en la puerta; una página que pide archivos que el archivo no contiene lo dice ("eso suele significar código fuente, no el build de salida").

• Un archivo hostil no puede navegar fuera de la herramienta, registrar su propio service worker ni desregistrar el nuestro, ni colar una ruta de zip-slip de vuelta en una exportación. Lo que sí puede hacer — alcanzar el DOM de la herramienta, porque los frames son de mismo origen por diseño — no alcanza nada que valga la pena: no hay servidor, ni credenciales, ni estado. Lee notes/security.md; despliega en un origen propio.

Ejecútalo

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> carga un zip por URL (mismo origen o CORS) — la puerta que usa un agente.

Ponlo a prueba

pnpm holdouts ejecuta cada archivo en fixtures/ (builds reales de repos públicos — ignorados por git, notes/decisions.md dice de dónde vino cada uno) a través de la aplicación: carga, Check 1:1, alcance y una comprobación de host (mismo origen, un worker). Los veredictos se comparan con scripts/holdouts.expect.json; un fixture que se espera ok y no lo es hace fallar la ejecución. --only <name>, --record, --base <url> --fixtures <url> para un build de producción o el sitio en vivo.

Cómo funciona

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) — o pnpm mcp desde un clon — ejecuta el mismo motor como servidor MCP (stdio): load un zip por URL o ruta, set mandos, export cualquier formato, verify la comprobación 1:1 y screenshot en Chromium sin interfaz contra la aplicación real. Ver mcp/README.md para la lista de herramientas y la configuración de Claude/Cursor. Plugin de Claude Code (skill + servidor en uno): /plugin marketplace add AlexanderKaan/uisandbox y luego /plugin install uisandbox@uisandbox — da /uisandbox ("abre esta aplicación en un sandbox", "prueba la marca #e11d48") y el servidor MCP uisandbox. La skill sola es skills/uisandbox/SKILL.md (cópiala en .claude/skills/). Codex / Cursor / otros: añade el servidor MCP (npx -y uisandbox-mcp); el servidor envía sus propias instrucciones y avisos.

Despliegue

Estático, un solo origen, service worker en la raíz. Cloudflare Pages: comando de build pnpm build, salida dist/; public/_headers mantiene sw.js sin caché y establece las cabeceras de seguridad; public/_redirects envía enlaces profundos a la aplicación. No pongas nada más en el origen.

Hoja de ruta

notes/roadmap.md: lanzamiento (uisandbox.org) · la entrada como puerta principal · ser encontrado (SEO, llms.txt, analíticas) · el servidor MCP · después del lanzamiento.

Hecho con ♥ por Alexander Kaan en Pageminds · MIT, gratis para siempre · las decisiones que lo formaron, numeradas: notes/decisions.md