Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add naver/design-to-ui --skill design-qagit clone --depth 1 https://github.com/naver/design-to-uiWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/naver/design-to-ui/design-qa)<a href="https://agentmods.dev/skills/naver/design-to-ui/design-qa"><img src="https://agentmods.dev/badge/skills/naver/design-to-ui/design-qa/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/naver/design-to-ui/design-qa"><img src="https://agentmods.dev/badge/skills/naver/design-to-ui/design-qa.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00243 | $0.08307 |
| Opus 5.5 | $0.00097 | $0.03323 |
| Sonnet 5.5 | $0.00049 | $0.01661 |
| Haiku 4.5 | $0.00024 | $0.00831 |
Grade A, and why
design-qa scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
curl -sL -o "$OUT/figma.png" "<export.url>" # MCP 응답이 지시하는 회수 방법. URL 은 단명한다 How it starts
The opening of the file, as written. The whole thing — 280 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-qa — 오버레이 검증 루프
codegen의 "LLM 눈대중 대조"를 실기기/시뮬레이터 런타임에서 수치로 수행하는 보완 트랙이다. JVM (layoutlib) 정량 트랙과 달리 실 렌더엔진·다크모드·디바이스 density가 그대로 반영된다 — 둘은 경쟁이 아니라 병행이다.
비교·측정 엔진(overlay·align_probe·glyph_probe·edge_probe·enumerate_regions)과 crop 의 auto/box/
anchor/정합 게이트는 플랫폼 중립이다. 플랫폼에 종속되는 건 뷰포트 정규화(0단계)와 캡처, dumpsys frame
crop, "고치는 법(코드 어휘)"뿐이다. 그래서 이 문서는 루프·판정·종료 계약을 중립으로 기술하고,
플랫폼별 명령·보정 어휘는 references/<platform>.md로 분리한다(android.md, ios.md, web.md).
두 진입 — 빌드·진입·캡처는 공유
목표는 인간 개입 최소화 자율 검증이다. 빌드·화면 진입·캡처는 진입과 무관하게 design-qa가 스스로 한다. 두 진입은 앞단 입력을 어떻게 얻느냐만 다르다.
- 위임 진입 (codegen Step 7c):
file_key·node_id·crop 인자 + 빌드/실행 정보가 넘어옴 → 0단계 건너뛰고 "빌드·화면 진입"부터 자율 수행. - 직접 진입 (
/design-qa <프롬프트>): 입력이 자연어뿐 → 0단계(입력 해소)로 모드·링크를 먼저 정한 뒤 합류.
0단계 — 입력 해소 (직접 진입 전용)
0a. 모드 판별. 기본값은 보정 모드(자율 루프).
- 인자 없는
/design-qa또는 애매한 프롬프트 → 보정 모드: 검증→보정→재빌드→최종 오버레이까지 묻지 않고 자동. - 오차 서술("틀렸/밀렸/색이/폰트/위치/간격/크기가 …")이 있으면 → 보정 모드, 그 영역 우선 조준.
- "오버레이만/겹쳐봐/확인만" 신호가 명시되면 → 검증 모드(blend-only 표시, 코드 미수정).
0b. Figma 링크 해소. ① 프롬프트의 URL → ② 없으면 세션 직전 링크 재사용 → ③ 둘 다 없을 때만 요청.
확보한 URL의 file_key·node_id를 추출하고 세션에 유지해 후속 호출이 ②로 재사용하게 한다.
빌드·화면 진입 (양 진입 공유, 자율)
- 빌드: 타겟 앱을 지금 체크아웃된 브랜치 그대로 빌드한다(보정 루프의 코드 수정도 현재 트리에 적용 후 재빌드).
- 화면 진입 + 캡처 fallback (인간 개입은 최후수단): 대상 화면 포그라운드 진입을 자동 시도한다. 자율 진입이 끝까지 막힐 때(프로젝트 의존 로그인 등)에만 안내 후 사용자 신호를 받아 캡처한다 — 성공하면 신호 없이 진행.
산출물 위치(outdir) — 기본은 Desktop. 기본 outdir는 $HOME/Desktop/design-qa/{검수화면}/(예:
$HOME/Desktop/design-qa/날씨-엔드/)이고, 캡처·크롭 중간물도 같은 디렉터리에 둔다. {검수화면}은 node id가
아니라 사람이 알아보는 화면 이름(figma 프레임명 등, 공백은 -)으로 쓴다 — Desktop에 폴더가 쌓였을 때 어느
검수 결과인지 이름만으로 구분돼야 한다. 이 루프의 마지막 동작이 "사람이 이미지를 눈으로 확인"이라서 산출물은
Finder에서 바로 열리는 자리에 있어야 한다 — /tmp는 사용자가 찾아가기 어렵고 정리·재부팅으로 사라진다.
사용자가 경로를 명시하면 그 경로를 따른다.
마무리는 호출 종류로 갈린다:
- 직접/자율 호출: 수렴 후 outdir를
blend50.png한 장만 남기고 정리 →open으로 띄우고 종료. 사람은 이미지 한 장만 본다. - 위임 보정: full rubric 산출물 +
OVERLAY-REPORT.md를 유지(위임자가 코드 오차 리스트·리포트 경로를 소비).open불필요.
What ships with it
24 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/android.md 12 KB
- references/ios.md 6.0 KB
- references/web.md 6.6 KB
- scripts/.gitignore 97 B
- scripts/align_probe.py 3.6 KB runs code
- scripts/capture_story.mjs 1.9 KB runs code
- scripts/capture.py 9.9 KB runs code
- scripts/color_probe.py 2.6 KB runs code
- scripts/crop.py 17 KB runs code
- scripts/edge_probe.py 9.1 KB runs code
- scripts/enumerate_regions.py 15 KB runs code
- scripts/glyph_id_probe.py 11 KB runs code
- scripts/glyph_probe.py 8.0 KB runs code
- scripts/ledger_gate.py 5.9 KB runs code
- scripts/lib.mjs 3.8 KB runs code
- scripts/overlay.py 17 KB runs code
- scripts/run.mjs 7.2 KB runs code
- scripts/selftest_crop.py 5.8 KB runs code
- scripts/selftest/meta_mcp.json 2.0 KB
- scripts/selftest/mkfix.py 8.1 KB runs code
- scripts/selftest/test_viewport.py 11 KB runs code
- scripts/selftest/verify_all.sh 22 KB runs code
- scripts/trim.py 1.3 KB runs code
- scripts/viewport.py 21 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 280 lines · 0 tokens per session scan A 6ef957979c9a
design-qa is a skill published in the GitHub repository naver/design-to-ui (8 stars, last pushed 2mo ago), licensed Apache-2.0. It adds 243 tokens to every session and 8,307 once invoked, about $0.0010 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
accessibility-per-component
Audit one design system component's accessibility against WCAG 2.2 AA: keyboard, screen reader, contrast, focus, ARIA, target size. Trigger: a11y audit, is this accessible, WCAG check, screen reader support, keyboard navigation check. Not for page- or product-wide audits.
schema-validator
Validate token files structurally against DTCG 2025.10 (including resolvers), Style Dictionary 3 to 5 or Tokens Studio: parse errors, $type/$value, name rules, broken or circular aliases. Trigger: validate token JSON, DTCG compliance, are my token files valid. Naming or architecture: token-audit.
build-from-figma
Autonomous Figma-to-working-app pipeline. Intake, design-token lockfile, failing tests first, per-component build lanes, pixel-diff visual QA, E2E, cross-browser, quality gate and build report, for React, Vue, Svelte or React Native. Use when the user gives a Figma URL and wants a working, tested app. Keywords: build…
fmcp-ds-audit-orchestrator
Figma ekranlarını 5 kategori açısından platform-agnostic denetler (DS compliance / a11y / drift / visual QA / impact). Read-only çalışır; bulguları raporlar, düzeltmeleri sadece önerir — mutation için onay + ayrı agent. Her platformda çalışır. Condensed-first: Essentials bölümü %80 case'i kapsar, Advanced sadece edge…
design-fidelity-verify
Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this pixel-perfect", "check against Figma", "does the app match the design", or "design QA this screen". Runs a bounded vision+numeric loop over web or mobile…
argent-lens
Propose multiple visual design variants for on-screen elements and let the human pick in the Argent Lens window. Use when the user asks for design alternatives / options / A-B choices for a screen or component, or any time you have produced more than one candidate look for an element and want a human decision before…