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.
git 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/commands/naver/design-to-ui/handoff)<a href="https://agentmods.dev/commands/naver/design-to-ui/handoff"><img src="https://agentmods.dev/badge/commands/naver/design-to-ui/handoff.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.00038 | $0.01867 |
| Opus 5 | $0.00019 | $0.00933 |
| Sonnet 5 | $0.00008 | $0.00373 |
| Haiku 4.5 | $0.00004 | $0.00187 |
Grade A, and why
handoff 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 — 120 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/handoff
/figma-apply로 반복 수정한 내용을 개발자에게 리뷰 요청으로 넘기는 커맨드입니다.
이 커맨드가 실행되기 전까지는 PR이 만들어지지 않습니다 — PR 존재 자체가 "리뷰 준비 완료" 신호입니다.
사용 예시
/handoff
인자는 받지 않습니다. 현재 git 브랜치에서 모든 정보를 추론합니다.
실행 순서
1. 현재 브랜치 검증
- 현재 브랜치가
design/로 시작하는지 확인 - 아니면
~/.design-to-ui/current-project(/figma-start가 기록한 프로젝트 경로)를 읽어 그 경로에서 다시 확인하고, 이후 명령도 그 경로 기준으로 실행한다 — 폴더 이동을 요구하지 않는다. - 그래도
design/*가 아니면 검수 브랜치 자체가 없는 것이므로 에러: "검수 중인design/*브랜치를 찾을 수 없습니다./figma-start <dev_pr_link>를 먼저 실행해주세요." (/figma-apply도design/*브랜치에서만 동작하므로 여기서/figma-apply를 안내하면 안 된다) design/*는 맞는데 dev 브랜치 대비 커밋이 하나도 없으면 넘길 변경이 없다: "아직 반영된 변경이 없습니다./figma-apply <figma_link>로 피그마 변경을 먼저 반영해주세요."
2. Dev PR 확인
현재 브랜치는 design/{github_id}/{dev_pr_number}[-N] 꼴이므로, dev PR 번호를 브랜치에서 바로
읽는다. 이름으로 dev 브랜치를 역추측하지 않는다.
- 마지막 세그먼트를 PR 번호로 읽는다. 끝에
-N이 붙어 있으면/figma-start가 붙인 충돌 회피 접미사이므로 떼고 앞의 숫자를 쓴다 (design/my-id/1234-2→ PR 1234). PR 번호는 순수 숫자라 이 분해에 모호함이 없다. - 그 번호로 dev PR을 직접 조회해 head 브랜치와 author를 확정한다. 이 head 브랜치가 design PR의 base다.
- 조회 실패 시 에러에 다음 액션을 명시:
- PR이 없음/삭제됨: "dev PR #{번호}를 찾을 수 없습니다. 개발자에게 PR 상태를 확인해주세요."
- 이미 닫힘·머지됨: "dev PR #{번호}가 이미 닫혀 있습니다. 이 검수를 어디로 보낼지 개발자에게 문의해주세요."
3. PR 생성
- base: dev 브랜치 (dev PR의 head 브랜치)
- head: 현재
design/*브랜치 - 제목 예:
[design] {dev PR 제목} - assignee: 본인으로 지정
본문 작성룰
본문은 figma 링크 나열이 아니라, 세션 동안 실제로 적용한 변경을 사람이 읽을 수 있게 서술하는 것이 목적입니다. 아래 룰을 따라 작성합니다.
1. 입력 — 무엇을 근거로 쓰는가
- 이번 세션의 커밋 본문(
/figma-apply로 쌓인 커밋들)을 집계해 작성합니다. - figma 링크/URL을 그대로 bullet으로 붙여넣지 않습니다. 링크 대신 변경 내용을 문장으로 풀어 쓰고, 필요하면 node id만 괄호로 첨부합니다.
2. 골격 — 항상 들어가는 요소
## Design changes
원본 PR: #{dev_pr_number}
`/figma-apply` 로 반복 적용한 디자인 정합 변경입니다.
{변경 섹션들 — 룰 3 참고}
{개발 측 확인 필요 섹션 — 룰 4, 있을 때만}
🤖 Generated with [Claude Code](https://claude.com/claude-code)
3. 변경 섹션 — 화면/영역 기준으로 묶기
- 변경 항목을 화면·컴포넌트·영역 단위로 그룹핑해
###섹션으로 나눕니다. 섹션 제목은 이번 작업의 실제 화면/영역명으로 직접 정합니다 (예:스포츠 엔드,뉴스 엔드 (재생화면 / 리스트),위젯등). 아래 예시 제목을 그대로 복붙하지 마세요. - 변경이 한 화면에 몰려 있으면 섹션 1개여도 됩니다. 굳이 섹션을 쪼개지 않습니다.
- 각 bullet은 무엇을 → 어떻게 바꿨는지 한 줄로 적습니다. 가능하면 수치(간격 dp, 크기 등)와 figma node id를 괄호로 덧붙입니다.
- 예:
- 리스트 항목 ↔ 서브정보 간격 3dp - 예:
- 뒤로(<) 셰브론 크기 30×54 정합 (node 13419-70074)
- 예:
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 · 120 lines · 38 tokens per session scan A cc67f97678fd
handoff is a command published in the GitHub repository naver/design-to-ui (5 stars, last pushed 27d ago), licensed Apache-2.0. It adds 38 tokens to every session and 1,867 once invoked, about $0.0002 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 commands, from other repositories
ci
Runs the same checks as /verify-all but in non-interactive, machine-readable mode. Designed for CI pipelines, pre-merge gates, and automation: no prompts, JSON output, exit code reflects overall pass/fail.
design-tutorial
Interactive guided tour of Naksha — learn commands through real exercises, discover workflows, and get oriented in under 10 minutes.
figma-component-library
Generate a complete component library in Figma from a design system config — atoms, molecules, and organisms with all variants, auto layout, and component properties.
gen-video
Generate video output in one of three modes: Remotion (programmatic React-based video), Gen-AI (shot prompt pack for Runway/Kling/Sora/Pika/Luma), or Remotion+Gen-AI (programmatic scaffold with AI footage embedded).
competitive-audit
Capture a competitor website with Playwright and extract its color system, typography, layout patterns, and 'steal this' recommendations.
build-from-figma
You are the master orchestrator for converting a Figma design into a fully working, tested React application. You receive a Figma URL and guide the entire process through 9 phases, using specialized skills and agents.