design-qa

design-qa is a skill for Claude Code from naver/design-to-ui. It costs 243 tokens per session (8,307 once invoked), scanned A, original, Apache-2.0.

A visual checking and correction workflow that compares a running app screen with its Figma source using captures, overlays, difference maps, and pixel measurements. An overlay places two images together so mismatches are easier to see.

In plain words
What is it for?
Use it to verify or correct Android, iOS, or web screens against Figma designs, including layout, colors, text, spacing, and other visible differences.
Why use it?
It replaces visual guesswork with measured comparisons and can repeat the build, capture, comparison, and correction cycle.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the design-to-ui plugin — 6 skills, 3 commands, 1 MCP server shipped together

Good fit Use it to verify or correct Android, iOS, or web screens against Figma designs, including layout, colors, text, spacing, and other visible differences.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/naver/design-to-ui/design-qa
Install

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.

Any agent
npx skills add naver/design-to-ui --skill design-qa
Clone the repo
git clone --depth 1 https://github.com/naver/design-to-ui

Made for: Claude Code.

Or install design-to-ui, the plugin that ships this one along with the rest of its 6 skills, 3 commands, 1 MCP server.

Wrote 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.

agentmods badge for design-qa

README.md
[![agentmods](https://agentmods.dev/badge/skills/naver/design-to-ui/design-qa/github.svg)](https://agentmods.dev/skills/naver/design-to-ui/design-qa)
Your own site
<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.

agentmods 80×15 button for design-qa

Your own site · 80×15
<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>
Per session 243 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 8,307 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00243 $0.08307
Opus 5 $0.00121 $0.04154
Sonnet 5 $0.00049 $0.01661
Haiku 4.5 $0.00024 $0.00831

Measured 10d ago against content hash 6ef957979c9a, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

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 10d ago.

The scan reads SKILL.md. This mod also ships 19 executable files (scripts/align_probe.py, scripts/capture_story.mjs, scripts/capture.py, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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 은 단명한다
plugins/design-to-ui/skills/design-qa/SKILL.md · 280 lines

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 불필요.

Read the full file on GitHub · 280 lines

Changes

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.

  1. 10d ago First seen · 280 lines · 0 tokens per session scan A 6ef957979c9a

Subscribe to this mod's changes

design-qa is a skill published in the GitHub repository naver/design-to-ui (5 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 243 tokens to every session and 8,307 once invoked, about $0.0012 per session on Opus 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.

Related

Other skills, from other repositories

accessibility-per-component

Run an accessibility audit on a specific design system component. Trigger when someone says: accessibility check, a11y audit, WCAG compliance, is this accessible, check accessibility, does this meet WCAG, screen reader support, keyboard navigation check, or anything about auditing the accessibility of a specific…

murphytrueman/design-system-ops · 65 tokens

schema-validator

Validate token files against DTCG 2025.10, Style Dictionary, or custom schemas. Trigger when someone says: validate token JSON, check my token files for errors, schema validation for tokens, are my token files valid, DTCG compliance check, validate token format, or anything about checking whether token files are…

murphytrueman/design-system-ops · 76 tokens

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…

atezer/FMCP · 94 tokens

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…

jeltehomminga/figma-design-skills · 99 tokens

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…

software-mansion/argent · 67 tokens

mobile-automation

Control Android and iOS devices, emulators and simulators — launch apps, tap, swipe, type, take screenshots, read the accessibility tree. Use when a task involves a mobile device or app, mobile UI testing, or reproducing a bug on a phone.

mobile-next/mobile-mcp · 58 tokens