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 figma-diff-applygit 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/figma-diff-apply)<a href="https://agentmods.dev/skills/naver/design-to-ui/figma-diff-apply"><img src="https://agentmods.dev/badge/skills/naver/design-to-ui/figma-diff-apply.svg" alt="Measured on agentmods" 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.00109 | $0.04203 |
| Opus 5 | $0.00055 | $0.02101 |
| Sonnet 5 | $0.00022 | $0.00841 |
| Haiku 4.5 | $0.00011 | $0.00420 |
Grade A, and why
figma-diff-apply scanned grade A with 0 findings 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 7d 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.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 202 lines — stays where its author put it; the contents beside it link to each section on GitHub.
figma-diff-apply
Figma URL의 현재 디자인과 design/* 브랜치의 현 코드를 대조하여 변경된 컴포넌트만 최소 수정으로 반영합니다. 신규 화면 전체 변환이 아니라 iteration(N→N+1) 시점에 사용합니다.
design-to-ui의 7-Step 풀 파이프라인을 호출하지 않습니다. 그 파이프라인은 "없던 화면을 처음 만들 때"에 최적화되어 있어, iteration마다 돌리면 토큰이 낭비되고 의도치 않은 전체 리팩토링 위험이 있습니다.
Prerequisites
- 호출 시점에
design/*브랜치가 체크아웃되어 있을 것 (/figma-start가 보장) - Figma Desktop MCP 연결(
get_design_context사용 가능) 또는FIGMA_ACCESS_TOKEN중 하나 project-design-system이 있으면 토큰 매핑에 사용 (없으면 기존 코드 컨벤션 유지)
Phase 0: 경로 판정 (먼저 이걸 정한다)
0-1. 먼저 요청 유형을 가른다. 이 스킬은 "Figma 선언값 ↔ 코드"를 대조하는 도구다. 그 전제가 성립하지 않는 요청에 Phase 1·2를 돌리면 아무 근거도 못 얻고 비용만 쓴다.
| 유형 | 신호 | 처리 |
|---|---|---|
| A. 확인·캡처 | "~노출되는지 확인", "~케이스 보여줘", "이미지 저장해줘" — 코드를 바꾸라는 말이 없다 | 이 스킬이 할 일이 없다. Figma 수집·diff 없이 design-qa(또는 캡처)로 넘긴다. 대조 대상이 아예 없으므로 Phase 1·2 전체를 건너뛴다 |
| B. 프롬프트-스펙 | 기준값이 프롬프트에 있고 Figma엔 아직 없다. ① Figma가 표현 못 하는 것을 수치까지 지정("240ms 등속", "즉시 전환") ② 상대 증감("5dp 올려줘") ③ 절대값인데 Figma가 아직 그 값이 아님 | 프롬프트 값이 기준이다. Figma는 diff 원본이 아니라 ⓐ 색·치수 토큰 확인 ⓑ 정지 상태 정합 제약 ⓒ 차이 보고용으로만 쓴다. Figma 선언값으로 요청을 덮어쓰지 말고, 어긋나면 Phase 4 "디자이너 확인 필요"에 올린다 |
| C. Figma 대조 | 기준값이 Figma에 있다 — Figma 쪽이 바뀌었으니 코드를 맞춰 달라는 요청 | 아래 0-2로 진행 |
유형 B의 판정은 추측하지 말고 확인한다 — get_motion_context(nodeId, recursive=true)가 {"nodes":[]}면 Figma에 모션 데이터가 없다는 뜻이고, 그러면 그 요청의 수치는 프롬프트에만 존재한다.
0-2. 유형 C면 규모로 경로를 가른다. 잘못 고르면 20dp 한 줄 바꾸는 데 서브에이전트 4홉이 돌거나, 반대로 화면 전체 변경을 메인이 혼자 훑는다.
| 국소 경로 (기본) | 광범위 경로 | |
|---|---|---|
| 조건 | 디자이너 프롬프트가 요소와 속성을 지목하고(예: "트랙 리스트 사이 간격 20dp로", "타이틀 색 초록으로"), 대상 파일이 Grep으로 1~2개로 확정됨 |
대상 화면·요소가 프롬프트로 특정되지 않음 / 후보 파일 3개+ / "전체적으로 바뀌었어" 류 / 신규 컴포넌트 추가 |
| Phase 2 | 메인이 직접 (서브에이전트 0개) | Diff Agent 팬아웃 + QA Agent |
| 근거 | 국소 변경에서 팬아웃은 요청과 무관한 오탐을 만들고, QA는 그 오탐을 걷어내는 데 다시 비용을 쓴다 (실측: 607s·202k → 53s·11k, 정확도는 국소 경로가 더 높았음) | 대상이 불명확할 때는 컨텍스트 격리·독립 QA가 실제로 누락을 잡는다 (v6.1: QA 제거 시 통과율 5/5 → 2/5) |
애매하면 국소 경로로 시작하고, Phase 1에서 후보가 3개+로 벌어지면 광범위로 승격한다.
유형 B의 정지 상태 회귀 검증
Figma에 없는 동작을 넣을 때 가장 깨지기 쉬운 것은 정지 상태다. 애니메이션을 얹었더니 시작·끝 프레임이 기존 에셋과 미세하게 달라져 design-qa 오버레이가 전부 어긋나는 식이다. 그래서 유형 B는 구현 후 다음을 픽셀로 확인한다:
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.
- 7d ago First seen · 202 lines · 109 tokens per session scan A cfb0d3a2b5e9
figma-diff-apply is a skill published in the GitHub repository naver/design-to-ui (5 stars, last pushed 28d ago), licensed Apache-2.0. It adds 109 tokens to every session and 4,203 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
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…
create-anatomy
Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions "anatomy", "anatomy annotation", "component anatomy", "create anatomy", or wants to annotate a component's structural elements.
create-property
Generate a visual property annotation in Figma showing each configurable property axis with component instance previews. Use when the user mentions "property", "properties", "property annotation", "create property", or wants to document a component's configurable properties visually.
create-component-md
Generate a canonical JSON contract and a self-contained implementation Markdown specification for a Figma component covering API, structure, color, and screen-reader behavior. Reads a base.json produced by the uSpec Extract plugin, runs four read-only interpretation skills in parallel, reconciles their outputs, and…
create-structure
Generate structure specifications documenting component dimensions, spacing, padding, and how values change across density, size, and shape variants. Use when the user mentions "structure", "structure spec", "dimensions", "spacing", "density", "sizing", or wants to document a component's dimensional properties.
create-color
Generate color annotation specifications mapping UI elements to design tokens. Use when the user mentions "color", "color annotation", "color spec", "tokens", "design tokens", or wants to document which color tokens a component uses.