설치 한 번에 디자인 전부 · Claude Code 플러그인Everything design, in one install · a Claude Code plugin

유능한 디자인 도구를,
한 번 설치로 손에. The whole design toolchain,
in one install.

저장소 하나 = 디자인 툴체인 전체입니다. Anthropic의 프론트엔드 디자인 규율(코드 전에 토큰 설계, 뻔한 기본값 거부) 위에, 결과물이 AI 티 안 나게 하는 스크린샷 자기비평 루프가 얹혀 있습니다. One repo = the whole design toolchain, built on Anthropic's frontend-design discipline (plan tokens before code, reject the generic defaults) plus a screenshot self-critique loop so the output doesn't read as AI-generated.

Claude Code v2.1.100+ 필요 · 설치 두 줄, API 키 불필요 · 그다음은 아래대로 전부 자동입니다. Requires Claude Code v2.1.100+ · two lines to install, no API key · everything after that runs automatically, as below.

이 가이드의 약속: 형용사가 아니라 셀 수 있는 것만 말합니다. Visigner에는 외부 성능 벤치마크가 없습니다. 그래서 인벤토리 수치, 채점 규율, 그리고 하지 않는 것으로 이야기합니다.This guide's promise: countable facts, not adjectives. Visigner has no external performance benchmark, so it speaks in inventory counts, a grading bar, and what it does not do.

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

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

당신이 하는 것You do2

  1. 01설치 두 줄Install, two lines마켓플레이스 추가 + 플러그인 설치. 60초, API 키 불필요.add the marketplace, install the plugin. 60 seconds, no API key.
  2. 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이거나 업데이트 후 강제 재설치가 필요할 때만 직접 부르면 됩니다(§02).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 (§02).

01

Visigner가 뭔가요: 1분 정의What Visigner is, in one minute

Claude Code 안에서 디자인 작업 전체를 처리하는 플러그인 하나. 다른 설치형 디자인 스킬·패키지를 여러 개 이어 붙일 필요를 줄입니다.One plugin that handles the whole span of design work inside Claude Code, so you stitch together far fewer installable design skills and packages.

대체하는 것What it replaces

제각각 깔던 설치형 디자인 스킬·플러그인·패키지. 대신 코드·SVG·토큰·스펙·카피·실험 통계를 빌트인 Node로 직접 만듭니다.The scattered installable design skills/plugins/packages. Instead it produces the code/SVG/tokens/specs/copy/experiment-stats directly, in built-in Node.

대체하지 않고 공급What it feeds, not replaces

Figma·FigJam·Photoshop·웹 호스팅·ESP 발송·분석 웨어하우스. 결과물을 만들어 그쪽에 넘깁니다. 그 도구가 되지는 않습니다.Figma · FigJam · Photoshop · web hosting · ESP send · the analytics warehouse. It hands artifacts to them; it doesn't become them.

안티슬롭 척추The anti-slop spine

한 문장으로: 토큰 시스템을 먼저 설계하고, 뻔한 기본값을 거부하고, 픽셀에서 검증한다.In one line: plan a token system, reject the generic defaults, verify from pixels.

02

Claude Code에 설치: 명령 두 줄Install in Claude Code: two commands

Claude Code v2.1.100+ 안에서 그대로 입력하세요(claude --version으로 버전 확인).Type these verbatim inside Claude Code v2.1.100+ (check with claude --version).

claude code 
# 1) 마켓플레이스 추가1) add the marketplace
/plugin marketplace add elon-choo/visigner
# 2) 플러그인 설치, 스킬·에이전트·커맨드가 모두 켜집니다2) install, and all skills, agents, commands load
/plugin install visigner@visigner

여기까지가 초보자에게 필요한 전부입니다. HTML 저장 즉시 정적 채점과 STOP 체크리스트가 돌고, 스크린샷 캡처·이미지 배치용 브라우저(Patchright + Chromium)는 첫 디자인 저장 때 백그라운드에서 1회 자동 설치됩니다(약 150MB). 첫 저장은 정적 채점만, 다음 저장부터 픽셀 루프까지 자동입니다. /design-setup은 수동·오프라인·CI·업데이트 후 강제 재설치용입니다.This is everything a beginner needs. Saving HTML immediately runs the static grade and STOP checklist, while the screenshot/capture/image-placement browser (Patchright + Chromium) auto-installs once in the background on the first design save (~150MB). That first save is static-only; from the next save the pixel loop is automatic. /design-setup is for manual/offline/CI use or a forced reinstall after an update.

팀 전체 자동 적용Team auto-enable

프로젝트 .claude/settings.json에 커밋해 두면 팀원은 워크스페이스를 신뢰하는 순간 자동으로 받습니다.Commit this to your project's .claude/settings.json and teammates get it automatically on trusting the workspace.

.claude/settings.json 
{
  "extraKnownMarketplaces": {
    "visigner": { "source": { "source": "github", "repo": "elon-choo/visigner" } }
  },
  "enabledPlugins": { "visigner@visigner": true }
}

03

첫 명령: 그냥 평소 말로Your first command: just say it plainly

단 하나의 만능 입구: /design 만들고 싶은 것. 라우터가 브리프를 고정하고 품질 게이트까지 돌립니다. 보통은 평소 말로 작업을 설명하면 알맞은 스킬이 알아서 켜집니다. 커맨드는 지름길일 뿐입니다.One universal entry: /design <what you want>. The router pins the brief and runs to a quality gate. Usually you just describe the task in plain language and the matching skill auto-triggers; the commands are shortcuts.

claude code 
# 설명만 하면 라우팅·제작·채점까지describe it; it routes, builds, and grades
/design a launch landing page for my AI writing tool

당신이 누구냐로 시작하기Start here by who you are

당신은…You are a… 이렇게 입력Type this 받는 것You get
잘 모름 / 바이브코더Not sure / vibe-coder/design <…>라우팅 → 브리프 고정 → 게이트까지 제작Routes, pins the brief, builds to a gate
마케터 / 창업자Marketer / founder/landing <product>슬롭 아닌 전환형 랜딩·상세페이지A converting landing / Korean detail page (상세페이지) that isn't slop
프로덕트 디자이너Product designer/ui <screen>전 상태 컴포넌트, 픽셀로 채점UI & components with full states, graded from pixels
브랜드 디자이너 / CEOBrand designer / CEO/brand <business>전략 → 보이스 → 비주얼 정체성Strategy → voice → visual identity
기획자 / PMPlanner / PM/plan플로우·IA·와이어프레임·빌드 가능한 스펙Flows, IA, wireframes, a buildable spec
개발자Developer/ui · /design-tokensReact/Tailwind v4/shadcn, 접근성·반응형React/Tailwind v4/shadcn, accessible & responsive
배포 직전 누구나Anyone shipping/design-review <page>독립 SHIP / NO-SHIP 판정An independent SHIP / NO-SHIP verdict

04

지도: 스킬 · 커맨드 · 에이전트The map: skills · commands · agents

셋 다 직접 셀 수 있습니다. ls skills/ commands/ agents/.All three are recountable. ls skills/ commands/ agents/.

스킬 · 8 (자동 발동)Skills · 8 (auto-trigger)

  • detail-page: 랜딩 + 한국형 상세페이지/와디즈, 이미지 에셋, 스크린샷 루프landing + Korean 상세페이지/Wadiz, image assets, the screenshot loop
  • ui-design: 앱·웹·대시보드 UI, 전 상태, 모션, 다크모드, 39-아이콘app/web/dashboard UI, every state, motion, dark mode, 39 icons
  • design-system: DTCG + Tailwind v4 @theme, OKLCH, 멀티브랜드, 핸드오프DTCG + Tailwind v4 @theme, OKLCH, multi-brand, handoff
  • brand-identity: 전략·아키타입·보이스·네이밍, SVG 로고 + guidelines.htmlstrategy, archetypes, voice, naming, SVG logo + guidelines.html
  • ux-flows: 플로우·IA·와이어프레임·PRD·수용 스펙flows, IA, wireframes, PRD, acceptance spec
  • frontend-build: 디자인→코드: React/Next + Tailwind v4 + shadcn, a11ydesign→code: React/Next + Tailwind v4 + shadcn, a11y
  • design-core: 공통 토큰·안티슬롭 규율·이미지 서비스·DesignSync 발행 기반the shared tokens, anti-slop discipline, image service, and DesignSync publishing foundation
  • marketing-conversion: 퍼널·CRO·카피·이메일 시퀀스·A/B 통계funnel, CRO, copy, email sequences, A/B stats

커맨드 · 11 (지름길)Commands · 11 (shortcuts)

/design · /landing · /ui · /brand · /plan · /campaign · /design-image · /design-publish · /design-tokens · /design-review · /design-setup

디자인 커맨드 10 + 수동·오프라인·CI·재설치용 브라우저 셋업 1(/design-setup). 평소 사용에는 필요 없고, 스킬도 자연어로 자동 발동하므로 커맨드를 외울 필요 없습니다.10 design commands + 1 manual/offline/CI/reinstall browser setup (/design-setup). Normal use does not need it, and skills auto-trigger from plain language, so you needn't memorize the commands.

에이전트 · 3 (독립 리뷰어)Agents · 3 (independent reviewers)

  • design-critic: 두 게이트(안티-슬롭 10차원 + 취향 심사단)로 SHIP/NO-SHIP, 픽셀에서 채점SHIP/NO-SHIP across two gates (anti-slop 10-dim + a taste jury), graded from pixels
  • a11y-auditor: WCAG 2.2 AA 감사, PASS/FAILWCAG 2.2 AA audit, PASS/FAIL
  • design-director: 하나의 비제너릭 토큰 시스템/아트 디렉션 고정locks one non-generic token system / art direction

셋 다 채점·지시만 합니다. 생성기는 자기 작업을 채점하지 않습니다.All three critique or direct only; the generator never grades itself.

05

실전 예시: 상세페이지/랜딩 처음부터 끝까지Worked example: a Korean detail page (상세페이지) / landing, end to end

말이 아니라 흐름으로. 아래는 실제로 "이렇게 입력 → 이렇게 나옴"의 순서입니다.Show, don't tell. Here's the literal "type this → get this" sequence.

claude code 
/landing a premium pour-over coffee dripper for home baristas
  1. 브리프 고정: 주제·타깃·단 하나의 목표(single job)를 핀으로 박습니다: "홈 바리스타 / 한 잔의 의식 / CTA = 사전예약".Pins the brief: subject, audience, single job: "home baristas / the ritual of one cup / CTA = pre-order".
  2. 토큰 시스템 + 시그니처 요소를 설계합니다. 색·타입·레이아웃, 그리고 이 브리프에만 어울리는 이름 붙은 시그니처.Plans a token system + a named signature element: color, type, layout, and one signature that could only belong to this brief.
  3. 페이지를 만듭니다: PASONA 구조, 실제 와디즈 캡처(400620·403454)로 보정.Builds the page: PASONA structure, calibrated against real Wadiz captures (400620 · 403454).
  4. 자기 결과물을 렌더·스크린샷합니다(shoot.js). 390px 오버플로우와 axe 접근성 패스를 포함합니다.Renders & screenshots its own output (shoot.js), including a 390px overflow check and an axe accessibility pass.
  5. design-critic가 픽셀을 채점합니다. 10차원으로, 코드가 아니라 화면을 봅니다.design-critic grades the pixels: 10 dimensions, looking at the screen, not the code.
  6. 게이트까지 반복합니다. 두 게이트를 모두 통과해야 합니다: 안티-슬롭 ≥8/10(어떤 차원도 7 미만 불가) 그리고 취향 심사단 ≥7.5(색 확신·미적 야심 각 ≥7). "안티-슬롭은 통과하지만 안전하고 색 없는" 페이지를 걸러내는 두 번째 게이트입니다.Iterates to the gate: it must clear BOTH: anti-slop ≥8/10 (no single dimension below 7) and a taste jury ≥7.5 (color-confidence · aesthetic ambition each ≥7). The second gate catches the page that passes anti-slop yet reads safe and colorless.
4–5단계용 Patchright + Chromium은 첫 디자인 저장 때 자동 준비됩니다. 약 150MB가 백그라운드에서 1회 내려오는 동안 첫 저장은 정적 안티-AI 채점과 평문 STOP 체크리스트까지 완료하고, 다음 저장부터 픽셀 스크린샷·critic 채점이 자동으로 이어집니다. 오프라인·CI·업데이트 후 강제 재설치 또는 VISIGNER_NO_AUTO_BROWSER=1로 자동 다운로드를 끈 경우에만 /design-setup을 수동으로 쓰세요.Patchright + Chromium for steps 4–5 prepares itself on the first design save. While the ~150MB download runs once in the background, that first save still completes the static anti-AI grade and plain-language STOP checklist; from the next save, pixel screenshots and critic grading join automatically. Use /design-setup manually only for offline/CI use, a forced reinstall after an update, or when auto-download is disabled with VISIGNER_NO_AUTO_BROWSER=1.
이미지 키가 없을 때: 사진 슬롯은 의도된 온브랜드 lo-fi SVG 컴프로 렌더됩니다. 자리표시이지 완성 아트가 아닙니다. 운영자가 실제 사진으로 교체합니다(또는 OPENAI/GEMINI 키를 넣고 재생성). 정직하게, 가짜로 채우지 않습니다.With no image key: photo slots render as intentional on-brand lo-fi SVG comps, placeholders, not finished art. The operator swaps in real photos (or adds an OPENAI/GEMINI key to regenerate). Kept honest: it never fakes the asset.

06

스크린샷 자기비평 루프: 왜 AI 티가 안 나나The screenshot self-critique loop: why it doesn't look AI-made

세 단계 척추입니다. 핵심은 마지막입니다. 코드를 읽고 "괜찮아 보여요"는 허용되지 않습니다.A three-step spine. The point is the last step: "I read the code and it looks right" is not allowed.

①

토큰 먼저Plan tokens first

코드를 짜기 전에 색·타입·레이아웃·시그니처를 설계합니다.Decide color/type/layout/signature before any code.

②

기본값 금지 목록Banned-defaults list

Inter / 보라 그라데이션 / 동일 카드 4개 / 가운데 정렬. 전부 거부합니다.Inter / purple gradient / four equal cards / centered, all rejected.

③

픽셀로 검증Verify from pixels

shoot.js / serve-shoot.js로 렌더·캡처 후 독립 critic이 채점.render & capture via shoot.js / serve-shoot.js, then an independent critic grades.

렌더·캡처용 Patchright + Chromium은 첫 디자인 저장 때 백그라운드에서 1회 자동 설치됩니다(약 150MB). /design-setup은 수동·오프라인·CI·재설치용 폴백입니다. 첫 저장은 정적 채점만 하고, 다음 저장부터 독립 design-critic가 스크린샷을 읽어 SHIP / NO-SHIP을 냅니다. 만든 쪽의 말이 아니라 픽셀로 냅니다.Patchright + Chromium for render/capture auto-installs once in the background on the first design save (~150MB). /design-setup remains the manual/offline/CI/reinstall fallback. That first save grades static-only; from the next save an independent design-critic reads the screenshot and gates SHIP / NO-SHIP: on pixels, not on the builder's claims.

07

확장 & 설정How to extend & configure

브리프로 조립하기 (선택 경로)Assemble from a brief (the other route)

앞의 05번이 페이지를 쓰는 길이라면, 이건 조립하는 길입니다. 무슨 가게인지 한 장 적어 넣으면, 섹션 부품 40개 중에서 골라 페이지를 세웁니다. 페이지 모양이 대체로 정해져 있고(랜딩·요금제·한국어 상세페이지) 배치 규칙을 기억이 아니라 기계로 강제하고 싶을 때 씁니다. 카탈로그에 없는 고유한 얼굴이 필요하면 05번대로 직접 쓰는 게 맞습니다.Section 05 is the route where you write the page. This is the one where you assemble it: write down what the business is, and the composer picks from 40 section modules and stands the page up. Use it when the page is a known shape (landing, pricing, Korean detail) and you want the composition rules enforced rather than remembered. When the page needs a signature the catalog does not have, writing it by hand as in 05 is the right call.

terminal 
cd "$CLAUDE_PLUGIN_ROOT/skills/detail-page/factory"
# 브리프 → selection.json → page.htmlbrief → selection.json → page.html
node scripts/composer-run.js composer/case-cafe-subscription/brief.json composer/case-cafe-subscription
# 배치 규칙 위반이 하나라도 있으면 종료 코드 1exit 1 on any composition violation
node scripts/grammar-lint.js composer/case-cafe-subscription/selection.json
  • 두 단계로 갈라져 있습니다: composer-select.js만 사람이나 모델의 판단을 받습니다(어떤 섹션을 어떤 순서로, 어떤 모듈로, 그리고 그 섹션의 실제 카피). composer-assemble.js는 그 선택 파일만 읽고 조립합니다. 시계도 난수도 부르지 않아서, 같은 브리프를 다시 넣으면 바이트까지 같은 HTML이 나옵니다.Two stages on purpose: only composer-select.js takes a human or model decision (which sections, in what order, which module, and that section's actual copy). composer-assemble.js then reads nothing but that selection file. It calls no clock and no random source, so the same brief gives byte-identical HTML every time.
  • 카피는 브리프가 싣고 옵니다: 각 섹션의 content 블록에 그 섹션 문구를 적습니다. 빠뜨리면 부품의 기본 문장으로 메우지 않고 종료 코드 1로 멈춥니다. 글자 수 상한, 목록 개수, 필수 슬롯도 같은 방식으로 강제됩니다.The brief carries the copy: each section's content block holds that section's words. Leave one out and it does not paper over the gap with the module's placeholder sentence, it stops with exit code 1. Character bounds, list arity and required slots are enforced the same way.
  • 조립기는 배치 규칙을 집행하지 않습니다: 그건 조립 뒤에 따로 도는 grammar-lint.js가 합니다. 그래서 규칙을 어긴 선택도 완전한 페이지로 조립되고, 막는 쪽은 게이트입니다. composer/case-saas-release-refused/가 일부러 그 경우입니다(같은 섹션을 한 번 더 붙인 것 → 조립 0, 게이트 1, 위반 4건).The assembler does not enforce the composition rules: grammar-lint.js does, separately, after assembly. So a violating selection still assembles into a complete page and the gate is what refuses it. composer/case-saas-release-refused/ is that case on purpose: one section repeated, assembly exits 0, the gate exits 1 with four violations.
  • 같이 들어오는 예시 세 건: case-cafe-subscription(한국어, 원두 정기구독) · case-pilates-studio(한국어, 재활 필라테스) · case-saas-release(영어, SaaS). 브리프를 쓸 때 형식을 베낄 원본으로 쓰세요. 나오는 가게는 전부 예시로 지어낸 곳이고 각 페이지 푸터에 그렇게 적혀 있습니다.Three worked examples ship with it: case-cafe-subscription (ko, coffee subscription), case-pilates-studio (ko, rehab pilates), case-saas-release (en, SaaS). Copy their shape when writing your own brief. The businesses are invented and each page's footer says so.
  • 읽어야 할 계약서: SECTION-SCHEMA.md(부품 구조와 다섯 변형축) · COMPOSITION-GRAMMAR.md(게이트가 무엇을 거부하는가) · FACTORY-BLUEPRINT.md(전체 흐름). 미리 알아둘 것 하나: 다섯 변형축은 선택을 기록하고 게이트가 읽는 값이지, 그 값만 바꾼다고 화면이 달라지지 않습니다. 얼굴을 바꾸는 건 어떤 모듈을 골랐느냐입니다.Contracts to read: SECTION-SCHEMA.md (module anatomy, the five variation axes), COMPOSITION-GRAMMAR.md (what the gate refuses), FACTORY-BLUEPRINT.md (the pipeline end to end). One thing worth knowing up front: the five axes are the record of the choice and what the gate reads. Changing only them does not change the render. What changes a section's face is which module it is.
  • 자동 채점 + 자동 브라우저 (v1.5, 기본 켜짐): v1.4부터 *.html 저장 즉시 정적 안티-슬롭 채점과 "사람이 채워야 할 것" STOP 체크리스트가 자동 발화합니다. v1.5에서는 브라우저가 없는 첫 디자인 저장 때 Patchright + Chromium도 백그라운드에서 1회 자동 설치됩니다(약 150MB). 첫 저장은 정적 채점만, 다음 저장부터 픽셀 비평까지 자동입니다. 플러그인 훅은 인터랙티브 세션에서 발화하고, 헤드리스 CLI에서도 확실히 띄우려면 ~/.claude/settings.json의 PostToolUse에 등록하세요. /design-setup은 수동·오프라인·CI·강제 재설치용입니다.Auto-grade + auto-browser (v1.5, on by default): since v1.4, saving an *.html auto-fires the static anti-slop grade and a plain-language STOP checklist of what a human must still fill. In v1.5, if the first design save finds no browser, Patchright + Chromium also auto-installs once in the background (~150MB). That first save is static-only; from the next save pixel critique is automatic too. Plugin hooks fire in interactive sessions; to make them fire reliably in the headless CLI, register the hook in ~/.claude/settings.json under PostToolUse. /design-setup is for manual/offline/CI/forced-reinstall use.
  • 실제 이미지 생성: OPENAI_API_KEY / GEMINI_API_KEY(또는 codex login 으로 ChatGPT 로그인). 없으면 lo-fi SVG 컴프로 대체.Real image generation: OPENAI_API_KEY / GEMINI_API_KEY (or a ChatGPT login via codex login). Without it you get lo-fi SVG comps.
  • 팀 자동 적용: .claude/settings.json (02번 참고).Team auto-enable: via .claude/settings.json (see section 02).
  • 직접 부를 수 있는 빌트인 Node 스크립트: ab.js(A/B 통계), pull-funnel.js, copy-lint.js, email.js, icon-set.js, brand-book.js, logo-handoff.js, name-check.js. 30개 전부 skills/detail-page/scripts/ 아래에 있고, 모두 의존성 0입니다 (ls skills/detail-page/scripts/*.js).Built-in Node scripts you can invoke directly: ab.js (A/B stats), pull-funnel.js, copy-lint.js, email.js, icon-set.js, brand-book.js, logo-handoff.js, name-check.js. All 30 live under skills/detail-page/scripts/ and are zero-dependency (ls skills/detail-page/scripts/*.js).
  • CI 게이트 (템플릿): npm run gate / lint:brand / lint:tokens 스크립트와 .husky pre-commit, .github/workflows/design-gate.yml은 플러그인 설치 폴더(skills/detail-page/의 package.json) 안에 들어 있는 본보기 파일입니다. 스크린샷+axe+brand-lint를 머지 요건으로 만들려면 이 항목들을 당신 저장소의 package.json/CI로 복사해 쓰세요(루트에서 바로 npm run gate가 도는 게 아닙니다).CI gate (templates): the npm run gate / lint:brand / lint:tokens scripts, the .husky pre-commit, and .github/workflows/design-gate.yml are template files inside the plugin install dir (the package.json lives in skills/detail-page/). To make the screenshot+axe+brand-lint checks a merge requirement, copy them into your own repo's package.json/CI, they don't run from your project root out of the box.

08

하지 않는 것 (정직 섹션)What it does NOT do (the honesty section)

기대할 법한 주장과, 정직한 결과를 나란히 둡니다. 이게 위 인벤토리 수치를 믿어도 되는 이유입니다.The claim people might expect, beside the honest result. This is why the inventory counts above are trustworthy.

기대할 법한 주장Claim you might expect 정직한 결과Honest result
"전환율 N% 올려준다""Lifts conversion by N%"아니오No: 외부 성능 벤치마크가 저장소에 없습니다. 마케팅하는 건 인벤토리 카운트와 채점 규율뿐.there's no external performance benchmark in the repo. What's marketed is inventory counts and a grading bar.
Figma·Photoshop을 대체한다Replaces Figma/Photoshop아니오No: 공급합니다. 코드·SVG·토큰·스펙을 만들어 넘기고, 호스팅·ESP·웨어하우스로는 여전히 배포합니다.it feeds them. It makes code/SVG/tokens/specs; you still ship through hosting/ESP/warehouse.
키 없이 모든 기능Everything with no key아니오No: 정적 채점·STOP 체크리스트·픽셀 루프는 키 없이 자동으로 동작하고, 브라우저도 첫 저장 때 백그라운드에서 준비됩니다. 실제 이미지 생성만 OPENAI/GEMINI 키 또는 ChatGPT 로그인이 필요. /design-setup은 수동·오프라인·CI·재설치용.the static grade, STOP checklist, and pixel loop work without a key, and the browser prepares itself in the background on the first save. Only real image generation needs an OPENAI/GEMINI key or ChatGPT login. /design-setup is for manual/offline/CI/reinstall use.
완성된 사진/일러스트 제공Ships finished photos아니오No: 키가 없으면 lo-fi SVG 컴프(의도된 자리표시)이며 운영자가 실제 아트로 교체합니다.without a key it's a lo-fi SVG comp (intentional placeholder) the operator replaces.
법적·표시광고 적합성 보장Handles compliance/legal아니오No: 컴플라이언스·주장 입증은 운영자 몫입니다. 디자인·전환 품질을 올릴 뿐.compliance and claim-substantiation are the operator's. It raises design/conversion quality only.
모델을 더 똑똑하게Makes the model smarter아니오No: 모델 실력은 그대로입니다. 더하는 건 규율(토큰 먼저 · 픽셀로 검증 · 독립 채점)입니다.the model's ability is unchanged. What's added is discipline (tokens first · verify from pixels · independent grading).

09

FAQ & 문제 해결FAQ & troubleshooting

API 키가 꼭 필요한가요?Do I need an API key?
아니요. 디자인·코드·검수는 키 없이 됩니다. 실제 사진 생성만 키가 필요하고, 없으면 lo-fi 컴프로 대체합니다.No. Design, code and review work without one. Only real photos need a key; without it you get lo-fi comps.
/design-setup에서 권한 오류가 나요/design-setup permission error
플러그인 디렉터리에 쓰기 권한이 없는 경우입니다. sudo로 풀려고 하지 마세요. 설치 경로 권한을 확인하세요.You lack write access to the plugin directory. Don't sudo it. Fix the install-dir permissions instead.
플러그인 업데이트 후엔?After a plugin update?
보통은 할 일이 없습니다. 업데이트 뒤 첫 디자인 저장에서 브라우저 런타임이 필요하면 백그라운드에서 자동 복구되고, Chromium 캐시는 유지됩니다. 오프라인·CI에서 미리 준비하거나 즉시 강제 재설치하려면 /design-setup을 쓰세요. 기획·디자인·코드·검수·토큰·카피·빌트인 스크립트는 그대로 의존성 0이고, 핵심 경로엔 별도 npm install이 필요 없습니다.Usually, nothing. On the first design save after an update, the browser runtime restores itself in the background if needed, while the Chromium cache survives. Use /design-setup to prepare it ahead of time offline/in CI or force an immediate reinstall. Planning/design/code/review/tokens/copy and the built-in scripts remain zero-dependency, and the core path needs no separate npm install.
캡처·스크린샷은 어디에 저장되나요?Where do captures/screenshots go?
스킬의 작업 디렉터리(예: skills/detail-page/references/captures/) 아래에 저장됩니다.Under the skill's working directory (e.g. skills/detail-page/references/captures/).
커맨드를 쓸지, 그냥 설명할지?Command vs. just describing?
대부분 평소 말로 설명하면 알맞은 스킬이 자동 발동합니다. 커맨드는 입구를 명확히 하고 싶을 때의 지름길입니다.Mostly, describe it in plain language and the right skill auto-triggers. Commands are shortcuts when you want to be explicit.

10

제거 / 삭제Uninstall / remove

claude code 
# 플러그인 제거remove the plugin
/plugin uninstall visigner@visigner
  • 팀 설치를 쓴 경우 .claude/settings.json에서 extraKnownMarketplaces.visigner 와 enabledPlugins["visigner@visigner"] 항목을 지웁니다.If you used the team install, drop extraKnownMarketplaces.visigner and enabledPlugins["visigner@visigner"] from .claude/settings.json.
  • 디스크를 되찾으려면 캐시된 Chromium을 지웁니다. macOS ~/Library/Caches/ms-playwright, Linux ~/.cache/ms-playwright.To reclaim disk, remove the cached Chromium. macOS ~/Library/Caches/ms-playwright, Linux ~/.cache/ms-playwright.