실전 활용 · 그냥 AI와 뭐가 다른가How to use it · what changes vs raw AI

깔았는데 그대로인 이유,
그리고 실제로 달라지는 법. Why it feels the same after install,
and how to make it actually different.

v1.5에서는 설치 두 줄이면 준비가 끝납니다. HTML을 저장하면 정적 채점과 STOP 체크리스트가 즉시 돌고, 픽셀 루프용 브라우저는 첫 디자인 저장 때 백그라운드에서 자동 설치됩니다. 차이는 여전히 한 번의 첫 출력이 아니라, 게이트까지 도는 루프에 있습니다. 이 페이지는 추가 셋업 명령이 아니라 그 자동 루프를 끝까지 쓰고 눈으로 확인하는 법을 알려줍니다. In v1.5, the two-line install is all the setup you need. Saving HTML immediately runs the static grade and STOP checklist, while the pixel-loop browser auto-installs in the background on the first design save. The difference still lives not in the first output, but in the loop to a gate. This page shows how to let that automatic loop finish and see the difference with your own eyes.

자동 준비 방식 보기See automatic setup 뭐가 다른지 보기 →See what changes →

솔직하게: 첫 디자인 저장은 브라우저가 백그라운드에서 내려오는 동안 정적 채점만 합니다. 그래서 "설치했는데 아직 큰 차이를 모르겠다"면 첫 다운로드가 끝나기 전에 멈췄거나, 다음 저장·반복 없이 한 방으로 받고 끝낸 경우가 많습니다. 아래 셋이면 달라집니다. 한 번 더 저장하기, 제대로 부르기, 눈으로 확인.Straight up: the first design save grades static-only while the browser downloads in the background. So if "I installed it and still don't see a big difference," you often stopped before that first download finished, or took the one-shot without the next save and iteration. Three things fix it: save once more, ask it right, and make the difference visible.

v1.5 · 설치가 셋업의 전부v1.5 · install IS the setup

설치 두 줄.
그다음은 전부 자동입니다. Two lines to install.
Everything after that is automatic.

당신이 하는 것You do2

01설치 두 줄Install, two lines마켓플레이스 추가 + 플러그인 설치. 60초, API 키 불필요.add the marketplace, install the plugin. 60 seconds, no API key.
02*.html 저장Save an *.html평소처럼 디자인하고 저장하면 끝. 외울 명령 없음.design as usual and hit save. Nothing to memorize.

그 순간 자동으로Fires automatically4

✓안티-AI 채점Anti-AI gradeAI 티 텔 22종을 저장 즉시 검사하고, 점수와 깎인 이유를 이름으로 돌려줍니다.22 AI tells checked the instant you save; you get a score and every deduction named.
✓STOP 체크리스트STOP checklist사람이 채워야 할 것(자리표시 이미지·미완성 카피·근거 없는 수치)을 평문으로 세워줍니다.what a human must still fill — placeholder images, stand-in copy, unsourced numbers — in plain language.
✓픽셀 비평용 브라우저The pixel-critique browser없으면 첫 저장 때 백그라운드에서 1회 자동 설치됩니다(약 150MB). 당신이 칠 명령: 없음.missing? it auto-installs once in the background on your first save (~150MB). Commands to type: none.
✓픽셀 비평 루프The pixel-critique loop렌더·스크린샷·독립 critic 채점이 다음 저장부터 스스로 돕니다.render, screenshot, and an independent critic's grade run themselves from the next save on.

예전엔 /design-setup을 알아야 이게 켜졌습니다. v1.5부터는 몰라도 됩니다. 오프라인·CI이거나 업데이트 후 강제 재설치가 필요할 때만 직접 부르면 됩니다.You used to have to know about /design-setup for any of this to switch on. From v1.5 you don't. Call it yourself only for offline/CI, or to force a reinstall after a plugin update.

왜 그냥 시키면 똑같아 보이나Why it looks the same when you just ask

세 가지 중 하나(보통은 셋 다)입니다. 전부 몇 분이면 고쳐집니다.One of three things, usually all three. Each takes minutes to fix.

1 · 첫 저장은 브라우저 준비 시간이다1 · The first save prepares the browser

AI 티를 실제로 벗기는 스크린샷 자기비평 루프용 브라우저는 첫 디자인 저장 때 백그라운드에서 자동 설치됩니다(약 150MB). 그 저장은 정적 채점과 STOP 체크리스트까지 완료하고, 다운로드가 끝난 다음 저장부터 "렌더, 스크린샷, 채점, 반복"이 자동으로 붙습니다. 오프라인·CI에서는 /design-setup이 유일한 수동 단계입니다.The browser behind the screenshot self-critique loop auto-installs in the background on the first design save (~150MB). That save still completes the static grade and STOP checklist; from the next save after the download, "render, screenshot, score, repeat" joins automatically. Offline or in CI, /design-setup is the one manual step.

2 · 한 방으로 받고 끝냈다2 · You took the one-shot

차이는 첫 출력이 아니라 게이트까지 도는 반복에 있습니다. 첫 시안을 그대로 받아들이면 루프가 돌 기회가 없습니다. 독립 critic이 10차원으로 채점하고, 통과(10점 만점에 8점 이상)할 때까지 스스로 고치게 두어야 합니다.The difference is not the first output but the iteration to a gate. Accept the first draft and the loop never runs. Let an independent critic grade 10 dimensions and keep fixing until it clears the gate (8 of 10 or higher).

3 · 눈으로 확인을 안 했다3 · You didn't make it visible

차이는 저절로 튀지 않습니다. 토큰 계획을 먼저 보여달라 하고, /design-review로 점수를 받고, 같은 브리프를 그냥·Visigner 두 번 만들어 대보면 그제야 보입니다. §05가 그 방법입니다.The difference doesn't announce itself. Ask to see the token plan first, run /design-review for a score, and build the same brief twice (plain versus Visigner) to compare. §05 shows how.

설치만 하면 자동으로 준비됩니다Install once; setup happens automatically

보통은 아무 명령도 더 필요 없습니다. 첫 디자인 저장 때 브라우저가 백그라운드에서 1회 자동 설치되고, 첫 저장은 정적 채점만, 다음 저장부터 픽셀 루프까지 자동입니다. 아래 명령은 오프라인·CI·업데이트 후 강제 재설치·자동 다운로드 옵트아웃 때만 쓰는 수동 경로입니다.Normally, there is no extra command. The browser auto-installs once in the background on the first design save; that save is static-only, and the pixel loop is automatic from the next save. The command below is only the manual path for offline/CI use, a forced reinstall after an update, or auto-download opt-out.

claude code

# 수동·오프라인·CI·강제 재설치용 브라우저 준비manual/offline/CI/forced-reinstall browser setup
/design-setup

자동 준비되는 것: 자기 출력을 렌더·캡처하는 shoot.js 스크린샷 루프, 실제 레퍼런스(와디즈 등) 캡처, ultracode 디자인 워크플로용 Patchright + Chromium입니다. 첫 저장은 다운로드 중 정적 채점만 하고, 다음 저장부터 픽셀 루프가 자동으로 붙습니다. VISIGNER_NO_AUTO_BROWSER=1로 자동 다운로드를 껐거나 오프라인·CI에서 미리 준비할 때, 또는 업데이트 후 즉시 강제 재설치할 때만 /design-setup을 쓰세요.What prepares automatically: Patchright + Chromium for the shoot.js loop that renders and captures your output, real reference capture (Wadiz and the like), and the ultracode design workflow. The first save grades static-only during the download; from the next save the pixel loop joins automatically. Use /design-setup only if auto-download is disabled with VISIGNER_NO_AUTO_BROWSER=1, to prepare ahead of time offline/in CI, or to force an immediate reinstall after an update.

실제 이미지가 필요하면 (선택)If you want real images (optional)

히어로 사진·제품 컷 같은 실제 이미지 생성은 자격증명 하나가 필요합니다. 하나만 고르세요. 없으면 이미지 슬롯은 온브랜드 SVG 자리표시로 채워지고, 나머지는 그대로 동작합니다.Generating real images (hero shots, product photos) needs one credential. Pick one. Without it, image slots fill with on-brand SVG placeholders and everything else still runs.

shell

# 추천 · 무료: ChatGPT/codex 로그인 (API 키 불필요)recommended, free: ChatGPT/codex login (no API key)
codex login
# 또는 유료 키 하나or one paid key
export OPENAI_API_KEY=sk-...
# 한글 이미지·정확한 비율엔 Gemini가 낫습니다Gemini is better for Korean text-in-image and exact ratios
export GEMINI_API_KEY=...

Claude Design(claude.ai/design)로 컴포넌트 라이브러리를 발행하려면 /design-publish가 계정 접근을 한 번 확인합니다. 설치·키 불필요.To publish a component library to Claude Design (claude.ai/design), /design-publish confirms account access once. No install or key.

그냥 AI에게 시킬 때와, 무엇이 다른가What actually changes versus raw AI

그냥 시키면 모델은 학습 데이터의 평균을 뱉습니다. Inter, 보라 그라데이션, 똑같은 카드 4개, 전부 가운데 정렬. 그게 "AI 티"입니다. Visigner는 모델을 더 똑똑하게 만들지 않습니다. 대신 모든 스킬에 같은 척추를 박아 그 평균을 거부하고, 느낌이 아니라 픽셀로 검증합니다.Left alone, a model returns the average of its training data: Inter, a purple gradient, four identical cards, all centered. That average is the AI look. Visigner does not make the model smarter. It runs the same spine through every skill, rejects that average, and verifies from pixels, not vibes.

그냥 시킬 때Just asking

브리프를 받자마자 코드부터 뱉습니다. 색·타입은 기본값, 레이아웃은 대칭, 검증은 "코드 읽어보니 괜찮아 보여요". 첫 출력에서 끝. 어떤 브리프에도 맞을 법한, 본 적 있는 그 화면.It writes code the moment it gets the brief. Colors and type are defaults, the layout is symmetric, and the check is "I read the code, looks fine." First output, done. The page you've seen on every brief.

Visigner를 켜면 (같은 척추 4단계)With Visigner (the same 4-step spine)

토큰 먼저. 색·타입·레이아웃·이름 붙은 시그니처를 코드 전에 설계합니다.Plan tokens first. color, type, layout, and a named signature, before any code.
기본값 거부. 금지 목록으로, 어떤 브리프에도 맞을 법한 건 전부 바꿉니다.Reject defaults. banned lists change anything that would fit any brief.
찍어서 본다. 자기 출력을 렌더·캡처하고 390px 오버플로와 접근성(axe)까지 확인합니다.Screenshot itself. renders and captures its own output, with a 390px overflow check and an axe accessibility pass.
채점·반복. 만든 쪽이 아닌 독립 design-critic이 10차원으로 채점하고, 게이트(8점 이상, 어떤 차원도 7 미만 불가)를 통과할 때까지 고칩니다.Score and iterate. an independent design-critic grades 10 dimensions and fixes until it clears the gate (8 or higher, no dimension below 7).

증거가 필요하면 이 사이트 자체가 그 예입니다. 랜딩 페이지가 자기 검출기에서 46점 F에서 100점 A로 올라간 기록이 공개돼 있습니다.If you want proof, this very site is the example. Its landing page went from 46 F to 100 A on its own detector, and the record is public.

부르는 법: 목적에 맞는 명령How to call it: the command for the job

잘 모르겠으면 /design 하나면 됩니다. 알아서 맞는 스킬로 보냅니다. 목적이 분명하면 바로 해당 명령을 쓰세요.Not sure? /design alone works and routes you to the right skill. If the goal is clear, call the matching command directly.

명령Command	이럴 때Use when
`/design <설명>`	현관문. 평범한 말로 원하는 걸 적으면 의도를 파악해 맞는 스킬로 보내고, 게이트까지 돌립니다. 뭘 골라야 할지 모를 때.The front door. Describe it plainly; it infers intent, routes to the right skill, and runs to the gate. When you don't know which to pick.
`/landing <브리프>`	랜딩·세일즈·상세페이지·와디즈/펀딩. PASONA 구조, 토큰 먼저, 390px 스티키 CTA.Landing, sales, Korean 상세페이지, Wadiz, funding. PASONA structure, tokens first, a 390px sticky CTA.
`/ui <화면>`	앱·웹 UI, 대시보드, SaaS, 폼, 단일 컴포넌트. 상태(빈/로딩/에러)·모션·다크모드까지.App and web UI, dashboards, SaaS, forms, a single component. States (empty/loading/error), motion, dark mode.
`/plan <아이디어>`	기획부터. 색·코드 전에 플로우·IA·와이어프레임·PRD. 막연한 아이디어를 만들 수 있는 브리프로.Planning first. flows, IA, wireframes, and a PRD before any color or code. A vague idea into a buildable brief.
`/brand <사업>`	브랜드 전략·보이스·네이밍·로고 방향·브랜드 토큰. 그다음 그 토큰으로 페이지를 만들면 온브랜드.Brand strategy, voice, naming, logo direction, and brand tokens. Then build pages on those tokens to stay on-brand.
`/design-tokens`	디자인 시스템·토큰·테마·다크모드·멀티브랜드. 기존 페이지에서 토큰 추출도.Design system, tokens, theming, dark mode, multi-brand. Also extract tokens from an existing page.
`/campaign <아이디어>`	하나의 캠페인 아이디어를 랜딩·광고·소셜·이메일에 메시지 일관성을 강제하며 펼침.One campaign idea across landing, ads, social, and email with message-match enforced.
`/design-image <설명>`	어떤 디자인이든 실제 이미지 자산(히어로·제품컷·커버·OG). 최신 OpenAI/Gemini 모델.Real image assets for any design (hero, product, cover, OG). Latest OpenAI/Gemini models.
`/design-review <파일/URL>`	독립 게이트. 만든 게 아닌 쪽이 10차원으로 채점하고 접근성·브랜드 정합까지 봐서 SHIP 또는 NO-SHIP.Independent gate. a non-builder grades 10 dimensions plus accessibility and brand fit, then returns SHIP or NO-SHIP.

명령을 외울 필요는 없습니다. 그냥 한국어로 "상세페이지 만들어줘", "대시보드 디자인해줘", "브랜드 만들어줘"라고 해도 맞는 스킬이 자동으로 켜집니다. 명령은 그 스킬을 확실히 부르는 지름길일 뿐입니다.You don't have to memorize commands. Just say "make me a landing page", "design a dashboard", "make a brand" and the right skill auto-triggers. The commands are simply the sure way to invoke that skill.

차이를 눈으로 보는 세 가지Three ways to see the difference

"느낌"으로는 안 보입니다. 아래 셋 중 하나만 해도 차이가 수치·증거로 드러납니다.You won't feel it. Do any one of these and the difference shows up as a number or evidence.

① 토큰 계획을 먼저 보여달라 하기① Ask to see the token plan first

"코드 짜기 전에 토큰 계획부터 보여줘. 색·타입·레이아웃·시그니처." raw AI는 이 단계를 건너뛰고 바로 화면을 뱉습니다. Visigner는 이 계획이 있어야 다음으로 갑니다. 계획이 먼저 나오면, 그게 이미 "그냥 시킬 때"와 갈리는 지점입니다."Before any code, show me the token plan: color, type, layout, signature." Raw AI skips this and jumps to a screen. Visigner won't move on without it. When the plan appears first, that is already where it diverges from just-asking.

② critic을 돌리기② Run the critic

claude code

/design-review ./my-page.html

독립 design-critic이 10차원(후킹·구조·증명·시각 완성도·독창성 등)으로 채점하고, 점수를 깎은 이유마다 구체적인 "슬롭 텔"을 이름으로 지목합니다. 접근성(WCAG 2.2 AA)과 브랜드 정합까지 보고 SHIP 또는 NO-SHIP을 냅니다. 그냥 만든 페이지에 이걸 돌려보면, 무엇이 AI 티인지 이름으로 나옵니다.An independent design-critic grades 10 dimensions (hook, structure, proof, visual craft, distinctiveness, and more) and names the specific slop tell behind every deduction. It checks accessibility (WCAG 2.2 AA) and brand fit, then returns SHIP or NO-SHIP. Run it on a plain page and the AI tells come back by name.

③ A/B로 대보기 (가장 확실함)③ A/B them (the surest test)

같은 브리프로 두 번 만드세요. (a) 그냥 시켜서, (b) /landing으로. 둘 다 /design-review에 넣어 점수를 비교합니다. 이 저장소가 자기 페이지로 한 게 정확히 이것입니다. 같은 검출기로 46점에서 100점으로. 숫자를 믿기 전에, 당신 화면으로 직접 재현해 보세요.Build the same brief twice: (a) just asking, (b) with /landing. Put both through /design-review and compare. This is exactly what the repo did to its own page, 46 to 100 on the same detector. Before trusting the number, reproduce it on your own screen.

목표별 레시피: 이렇게 부르면 이렇게 나옵니다Recipes by goal: call it this way, get this

무엇을 만드느냐에 따라 부르는 법과 나오는 것이 다릅니다. 자주 쓰는 다섯.How you call it and what you get depend on what you're making. The five you'll use most.

랜딩 · 상세페이지 · 와디즈Landing · Korean detail page · Wadiz

/landing 홈 바리스타용 프리미엄 드리퍼, 목표는 사전예약처럼 주제·타깃·단 하나의 목표를 주세요. 나오는 것: 토큰 계획, PASONA 구조(후킹, 공감, 해결, 증명, CTA), 렌더·스크린샷, 채점, 게이트까지 반복. 이미지가 많이 필요한 상세페이지면 /design-image로 실제 컷을 채웁니다.Give it subject, audience, and one goal: /landing a premium pour-over dripper for home baristas, goal = pre-orders. You get a token plan, a PASONA structure (hook, empathy, solution, proof, CTA), then render, screenshot, score, and iterate to the gate. For image-heavy detail pages, fill real shots with /design-image.

앱 UI · 대시보드App UI · dashboard

/ui 물류 SaaS 대시보드, 정산 화면. 나오는 것: 컴포넌트 해부, 전 상태(빈·로딩·에러), 마이크로 인터랙션, 다크모드. 실제 코드로 옮기려면 이어서 "이거 React로 짜줘"(frontend-build)로 넘기면 됩니다./ui a logistics SaaS dashboard, the payout screen. You get component anatomy, full states (empty, loading, error), micro-interactions, and dark mode. To ship it, follow with "build this in React" (frontend-build).

브랜드부터 (일관성이 중요할 때)Brand first (when consistency matters)

/brand 아이 치과, 따뜻하고 안 무서운 하면 포지셔닝·보이스·로고 방향·브랜드 토큰이 나옵니다. 그다음 /landing·/ui가 그 토큰을 그대로 써서, 페이지와 앱이 한 브랜드로 읽힙니다./brand a kids' dental clinic, warm and not scary gives positioning, voice, logo direction, and brand tokens. Then /landing and /ui consume those tokens so pages and apps read as one brand.

모양이 정해진 페이지를 여러 장 (조립기)Many pages of a known shape (the composer)

가게마다 페이지를 새로 쓰는 대신, 무슨 가게인지 한 장 적어 넣고 부품 40개에서 조립합니다. 같은 브리프를 다시 넣으면 바이트까지 같은 HTML이 나오고, 이웃한 섹션이 같은 얼굴이 되면 게이트가 종료 코드 1로 거부합니다. 예시 브리프 세 건이 skills/detail-page/factory/composer/에 같이 들어 있으니 형식을 베껴 쓰세요. 카탈로그에 없는 고유한 얼굴이 필요하면 위의 /landing이 맞습니다.Instead of writing a new page per business, write down what the business is and assemble from 40 modules. The same brief gives byte-identical HTML every time, and if two neighbouring sections end up wearing the same face the gate refuses the build with exit code 1. Three worked briefs ship in skills/detail-page/factory/composer/; copy their shape. When the page needs a signature the catalog does not have, /landing above is the right call.

막연할 때 · 기획부터When it's vague · plan first

화면부터 만들지 말고 /plan 재고 관리 앱. 플로우·정보구조·와이어프레임·PRD가 먼저 나오고, 그걸 /ui·/landing에 넘기면 훨씬 덜 헤맵니다. 색·폰트는 일부러 여기서 안 정합니다.Don't start with screens. /plan an inventory app gives flows, IA, wireframes, and a PRD first; hand them to /ui or /landing and you wander far less. It deliberately stops before color and fonts.

잘 뽑는 요령Getting the best out of it

같은 도구라도 이렇게 쓰면 결과가 확 올라갑니다.Same tool, but these habits lift the result a lot.

진짜 재료를 줘라. 제품의 실제 어휘·수치·사진·경쟁사 페이지를 주면 결과가 non-generic해집니다. 뻔하지 않은 디자인은 바로 거기서 나옵니다. 재료가 없으면 알아서 합리적 값을 정하고 한 줄로 알려줍니다.Give it real materials. the product's actual vocabulary, numbers, photos, and competitor pages. Non-generic design comes straight from those. With none, it picks sensible specifics and tells you in one line.
한 방으로 끝내지 마라. "critic 8점 넘을 때까지 고쳐", "게이트 통과할 때까지 돌려"라고 하세요. 루프가 도는 게 핵심입니다.Don't stop at the one-shot. say "fix until the critic clears 8", "run it until it passes the gate." Letting the loop run is the whole point.
수치는 네가 채워라. 전환율·후기·실측 벤치마크는 운영자 몫입니다. Visigner는 지어내지 않고 자리표시로 둡니다. 실제 데이터를 넣어야 페이지가 완성됩니다.You supply the numbers. conversion, reviews, and measured benchmarks are yours to fill. Visigner won't invent them; it leaves honest placeholders. Real data is what finishes the page.
규모가 크면 ultracode. "ultracode로 진행해"라고 하면 여러 후보를 경쟁시키고 매 라운드 실제 픽셀로 채점해 가장 좋은 라운드를 고릅니다.Go ultracode for bigger jobs. say "run this ultracode" and it competes several candidates, grading each round on real pixels, and keeps the best round.

그래도 차이가 안 느껴지면If you still don't feel a difference

"디자인 시켜도 그냥 AI 같아요.""It still looks like plain AI.": /design-setup은 보통 필요 없습니다. 첫 디자인 저장 직후라면 브라우저가 백그라운드에서 내려오는 중일 수 있으니, 다운로드가 끝난 다음 한 번 더 저장하고 "찍어서 채점하고, 게이트 통과할 때까지 고쳐"라고 명시하세요. 오프라인·CI이거나 자동 다운로드를 껐다면 그때만 수동으로 씁니다. 그리고 /design-review로 점수를 받아 무엇이 문제인지 이름으로 확인하세요./design-setup is normally unnecessary. Right after the first design save, the browser may still be downloading in the background, so save once more after it finishes and explicitly say "screenshot it, grade it, and fix until it passes the gate." Use the command manually only if you are offline/in CI or disabled auto-download. Then run /design-review to get the problems back by name.
스크린샷·채점 단계가 그냥 넘어가요.The screenshot or grading step gets skipped.: 첫 저장이라면 정상입니다. 정적 채점과 STOP 체크리스트는 이미 끝났고, Patchright + Chromium(약 150MB)이 백그라운드에서 자동 설치되는 중입니다. 끝난 뒤 다음 저장부터 픽셀 단계가 자동으로 켜집니다. 계속 건너뛰면 /design-setup으로 수동 설치 또는 강제 재설치하세요. 오프라인·CI·권한 문제나 업데이트 후 즉시 복구할 때 쓰는 수동 경로입니다.On the first save, that is expected. The static grade and STOP checklist have already finished while Patchright + Chromium (~150MB) auto-installs in the background. From the next save after it completes, the pixel step switches on automatically. If it keeps skipping, use /design-setup for a manual install or forced reinstall. It is the manual path for offline/CI use, permission issues, or immediate recovery after an update.
이미지가 회색 자리표시로 나와요.Images come out as grey placeholders.: 자격증명이 없어서 정직하게 자리표시로 둔 것입니다. codex login(무료) 또는 OPENAI_API_KEY·GEMINI_API_KEY를 넣으면 실제 이미지가 생성됩니다.No credential, so it honestly leaves a placeholder. Add codex login (free) or an OPENAI_API_KEY/GEMINI_API_KEY and it generates real images.

다음 단계Next step

전체 명령·스킬·경계를 자세히 보려면 레퍼런스 가이드에 설치·지도·실전 예시·스크린샷 루프·하지 않는 것까지 정리돼 있습니다. 이 페이지는 "어떻게 써서 차이를 내나"에 집중한 실전편입니다.For the full command, skill, and boundary reference, the reference guide covers install, the map, a worked example, the screenshot loop, and what it does NOT do. This page is the practical half: how to use it to make a difference.

설치 명령 보기See the install 레퍼런스 가이드 →Reference guide →

깔았는데 그대로인 이유,그리고 실제로 달라지는 법. Why it feels the same after install,and how to make it actually different.

설치 두 줄.그다음은 전부 자동입니다. Two lines to install.Everything after that is automatic.