uisandbox-mcp

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

Или перетащите zip на uisandbox.org. Или в Claude Code: /plugin marketplace add AlexanderKaan/uisandbox → /plugin install uisandbox@uisandbox и скажите «откройте это приложение в UISandbox».

Что он делает

1. Принесите сборку — три способа: zip из dist/, build/, out/ (или целый репозиторий со сборкой внутри); папка (сборка рендерится, исходная папка читается для стенда с ручками); публичный URL репозитория GitHub (загружается как zip через маршрут того же происхождения — единственное, что покидает вкладку, см. notes/security.md). Пока это работает, дверь показывает этапы с их номерами. В остальном ничего не покидает вкладку: файлы читаются на странице и обслуживаются фрейму сервис-воркером на этом происхождении.

2. Увидьте это 1:1. Каждый цвет, радиус, шрифт, размер, отступ, межстрочный интервал, межбуквенный интервал, вес, толщина границы, длительность, угол градиента и литерал тени в вашем CSS становятся переменной, содержащей то же самое значение, поэтому страница рендерится точно так же, как была — включая стили времени выполнения (style="", установленные JS, <style>, который добавляет ваш фреймворк, insertRule/replaceSync из styled-components, Emotion, Lit, Ant's cssinjs; таблицы стилей CDN через прокси того же происхождения; вложенные фреймы того же происхождения, такие как Storybook).

3. Крутите ручки. Бренд и цветовые семейства, которые ваш CSS действительно содержит (вторичный, акцентный, набор статусов, строка палитры для того, что не является ни тем, ни другим); фон страницы; серый оттенок и тон границ; шрифт для заголовков и основной шрифт (ваши перечислены первыми, затем альтернативы по символам); регуляторы для размера текста, межстрочного интервала, межбуквенного интервала, веса, отступов, радиуса, толщины границы, высоты, движения и угла градиента — каждый регулятор с ×1 = как в вашем коде в центре; глобальные оттенок, насыщенность и контраст, которые достигают каждого цвета, включая палитры диаграмм и иконки, нарисованные на CSS; ваш тёмный режим, включаемый по вашим собственным хукам.

4. Экспорт. Ваши значения в виде CSS / JSON / списка патчей, ваши файлы пропатчены на месте, токены --k-* для веба (CSS, Tailwind, shadcn), константы Swift + каталог ресурсов для iOS, colors.xml + Kotlin для Android.

Related MCP server: PicassoWeb

Честно по построению

• «1:1» измеряется, а не ощущается. Check 1:1 загружает нетронутую сборку и токенизированную сборку бок о бок и сравнивает вычисленные стили каждого элемента (включая 18 свойств, теневые корни и вложенные фреймы). Ноль различий или он говорит, что отличается.

• Счётчик охвата в нижней части сцены показывает, сколько из того, что вы видите, затрагивают ручки — нарисованные цвета, семейства, размеры, радиусы — и что остаётся за пределами (изображения, canvas, видео).

• Он отказывается от того, что не может показать. Проекты iOS/Android, темы WordPress и исходники без сборки получают чёткое сообщение у двери; страница, которая запрашивает файлы, которых нет в архиве, говорит об этом («обычно это означает исходник, а не собранный вывод»).

• Враждебный архив не может увести инструмент, зарегистрировать свой собственный сервис-воркер или отменить наш, или протащить путь zip-slip обратно из экспорта. Что он может сделать — добраться до 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/ (реальные сборки из публичных репозиториев — gitignored, notes/decisions.md говорит, откуда каждый) через приложение: загрузка, Check 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 zip по URL или пути, set ручки, export любой формат, verify проверку 1:1 и screenshot в headless Chromium против реального приложения. См. mcp/README.md для списка инструментов и конфигурации Claude/Cursor. Плагин Claude Code (навык + сервер в одном): /plugin marketplace add AlexanderKaan/uisandbox затем /plugin install uisandbox@uisandbox — даёт /uisandbox («откройте это приложение в песочнице», «попробуйте бренд #e11d48») и MCP-сервер uisandbox. Навык отдельно: 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-сервер · после запуска.

Сделано с ♥ Александром Кааном в Pageminds · MIT, бесплатно навсегда · решения, которые его сформировали, пронумерованы: notes/decisions.md