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 그리고 *"이 앱을 UISandbox에서 열어줘"*라고 말하세요.

하는 일

1. 빌드를 가져오기 — 세 가지 방법: dist/, build/, out/의 zip (또는 빌드가 포함된 전체 저장소); 폴더 (빌드가 렌더링되고, 소스 폴더는 다이얼 스탠드용으로 읽힘); 공개 GitHub 저장소 URL (동일 출처 라우트를 통해 zip으로 가져옴 — 탭을 떠나는 유일한 것, notes/security.md 참조). 작동하는 동안 문에는 단계와 번호가 표시됩니다. 그 외에는 아무것도 탭을 떠나지 않습니다: 파일은 페이지에서 읽히고 이 출처의 서비스 워커가 프레임에 제공합니다.

2. 1:1로 확인. CSS의 모든 색상, 반경, 글꼴, 크기, 간격, 줄 높이, 자간, 굵기, 테두리 두께, 지속 시간, 그라디언트 각도 및 그림자 리터럴이 동일한 값을 가진 변수가 되어 페이지가 정확히 원래대로 렌더링됩니다 — 런타임 스타일도 포함합니다 (style="" JS로 설정, 프레임워크가 추가하는 <style>, styled-components, Emotion, Lit, Ant의 cssinjs의 insertRule/replaceSync; 동일 출처 프록시를 통한 CDN 스타일시트; Storybook과 같은 중첩 동일 출처 프레임).

3. 다이얼을 돌리기. Brand, 그리고 CSS에 실제로 포함된 색상 계열(secondary, accent, 상태 세트, 그 외의 것을 위한 팔레트 행); 페이지 배경; 회색 색조와 테두리 톤; 디스플레이 및 본문 글꼴(내 글꼴이 먼저, 그 다음 문자별 대안); 텍스트 크기, 줄 높이, 자간, 굵기, 간격, 반경, 테두리 두께, 입체감, 모션 및 그라디언트 각도용 다이얼 — 모든 다이얼은 중앙에 ×1 = 코드 그대로가 있습니다; 모든 색상, 차트 팔레트 및 CSS로 그려진 아이콘에 도달하는 전역 색조, 채도 및 대비; 자체 훅에서 전환되는 다크 모드.

4. 내보내기. 값을 CSS / JSON / 패치 목록으로, 파일을 제자리에서 패치, 웹용 --k-* 토큰 (CSS, Tailwind, shadcn), iOS용 Swift 상수 + 에셋 카탈로그, Android용 colors.xml + Kotlin.

Related MCP server: UI Preset MCP Server

구조적으로 정직함

• "1:1"은 느낌이 아니라 측정입니다. 1:1 확인은 수정되지 않은 빌드와 토큰화된 빌드를 나란히 로드하고 모든 요소의 계산된 스타일을 비교합니다 (18개 속성, 섀도우 루트 및 중첩 프레임 포함). 차이가 0이거나 무엇이 다른지 알려줍니다.

• 스테이지 하단의 도달 미터는 보이는 것 중 다이얼이 닿는 부분(칠해진 색상, 글꼴 계열, 크기, 반경)과 그 밖의 것(이미지, 캔버스, 비디오)을 알려줍니다.

• 보여줄 수 없는 것은 거부합니다. 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에 있음)를 앱에 통과시킵니다: 로드, 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)로 실행합니다: zip을 URL 또는 경로로 load, 다이얼 set, 모든 형식 export, 1:1 확인 verify, 실제 앱에 대한 헤드리스 Chromium에서 screenshot. 도구 목록과 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