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/figma-start)<a href="https://agentmods.dev/commands/naver/design-to-ui/figma-start"><img src="https://agentmods.dev/badge/commands/naver/design-to-ui/figma-start.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.00049 | $0.03783 |
| Opus 5 | $0.00024 | $0.01892 |
| Sonnet 5 | $0.00010 | $0.00757 |
| Haiku 4.5 | $0.00005 | $0.00378 |
Grade A, and why
figma-start 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 8d 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 — 181 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/figma-start
디자이너가 개발자의 원본 PR 위에서 검수를 시작할 때 호출하는 커맨드입니다.
PR 링크 하나만 주면 프로젝트 클론부터 합니다 — 검수할 프로젝트를 미리 받아둘 필요가 없습니다.
브랜치 생성·체크아웃 후 빌드해서 기기에 올려 화면까지 띄워줍니다 — 실행할 기기·에뮬레이터가 없으면 검수에 맞는 걸 설치해서 만듭니다.
그 브랜치의 커밋 이력 패널도 개발툴에 띄워줍니다 — 지금까지 반영한 검수 내용을 검수 내내 옆에 두고 볼 수 있습니다.
커밋·푸시는 하지 않습니다. 디자이너가 화면을 먼저 확인한 뒤, 필요하면 /figma-apply로 피그마 변경을 반영합니다.
사용 예시
/figma-start https://github.com/<owner>/<repo>/pull/123
실행 순서
1. dev PR 조회 & 프로젝트 확보
$ARGUMENTS에서 dev PR URL 추출 → API 조회 → dev 브랜치명 확보- 조회 실패(404 등) 시 에러: "dev PR을 찾을 수 없습니다: {입력 링크}"
- 채팅창에 출력: "dev PR #{번호} ({제목}) 기반으로 design 브랜치를 준비합니다."
프로젝트가 로컬에 없으면 여기서 클론한다. 초기 환경 준비를 끝낸 디자이너는 개발툴·에뮬레이터만 준비된 상태이고, 검수 대상 프로젝트는 아직 받아둔 적이 없다. PR 링크만으로 진행되게 한다.
- 현재 디렉터리의
origin이 PR의{owner}/{repo}와 같으면 그대로 쓴다. 다르면~/{repo},~/git/{repo},~/AndroidStudioProjects/{repo}에서 같은 origin인 클론을 먼저 찾고(중복 클론 방지), 없으면~/{repo}에 클론한다 — 시간이 걸리니 경로를 먼저 한 줄 알린다. 클론 실패(GitHub 인증 등)면 중단하고 안내한다. - 확보한 경로를
PROJECT_DIR로 두고, 이후 모든 git·빌드 명령은 이 경로 기준(cd {PROJECT_DIR} && …또는git -C {PROJECT_DIR} …)으로 실행한다. 세션의 시작 폴더가 프로젝트가 아니어도 디자이너에게 세션 재시작·재실행을 요구하지 않는다 — 경로를 알고 있으면 그대로 진행할 수 있다. 파일 읽기·수정에 접근 권한이 필요하면/add-dir {PROJECT_DIR}로 확보한다. - 다음 커맨드가 세션이 바뀌어도 이 프로젝트를 찾을 수 있게 경로를 남긴다:
PROJECT_DIR을~/.design-to-ui/current-project에 기록(디렉터리 없으면 생성, 한 줄 덮어쓰기). - 프로젝트를 개발툴로도 열어준다 — 디자이너가 코드·프리뷰·Terminal 패널을 쓰고, 2c에서 커밋 이력 패널도 여기에 띄운다. gradle 파일이 있으면
open -a "Android Studio" {PROJECT_DIR},*.xcworkspace(우선)/*.xcodeproj가 있으면open {해당 경로}. 둘 다 아니거나 디자이너가 다른 툴을 쓰고 있으면open -a "{앱 이름}" {PROJECT_DIR}로 그 툴에 연다. 무엇으로 열었는지(앱 이름)를 기억해 둔다 — 2c가 그 툴 기준으로 동작한다. 개발툴 실행 실패는 중단 사유가 아니다 — 빌드는 3단계에서 CLI로 하므로, 경로만 알리고 계속 진행한다.
2. 브랜치 준비
- 브랜치명 규약:
design/{github_id}/{dev_pr_number}- 예:
https://github.com/my-org/weather-app/pull/1234를my-id가 검수 →design/my-id/1234 design/prefix는 그대로 유지한다 —/figma-apply·figma-diff-apply가 이 prefix로 "지금 검수 중인 브랜치"를 판별한다.- 프로젝트명은 넣지 않는다 — 브랜치는 그 프로젝트 레포 안에만 존재하므로 이름에 또 적어도 구분되는 게
없다. 한 레포 안에서 PR 번호는 유일하고, 사람 구분은
{github_id}가 한다. {dev_pr_number}는 1단계에서 받은 PR URL에서 그대로 파싱한다(추가 조회 불필요).{github_id}는 생략 불가.GH_HOST=<PR 호스트> gh api user --jq .login으로 얻고, 얻지 못하면 임의로 짓지 말고 중단하고gh auth login을 안내한다 — 같은 dev PR을 여러 사람이 검수할 수 있어서, 소유자가 브랜치명에 없으면 남의 검수 브랜치를 덮어쓰거나 남의 것을 자기 것으로 오인한다.
- 예:
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.
- 8d ago First seen · 181 lines · 49 tokens per session scan A 6d319efce92f
figma-start is a command published in the GitHub repository naver/design-to-ui (5 stars, last pushed 28d ago), licensed Apache-2.0. It adds 49 tokens to every session and 3,783 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
design-tutorial
Interactive guided tour of Naksha — learn commands through real exercises, discover workflows, and get oriented in under 10 minutes.
design-template
Generate a production-ready web page from a curated template category. Pick a category (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, or onboarding) and get a fully-built, customized HTML/CSS template — brand colors, copy, and responsive layout included.
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.
naksha-browse
Browse any URL with browser vision — extract design patterns for research or inspect your own UI, saved to project memory.
data-viz-audit
Audit a data visualization for chart type selection, accessible color palette, annotations, and anti-patterns. Optionally audits dashboard layout fit when context is provided. Outputs a scored checklist and corrected code.
design-compare
Capture two websites with Playwright and produce a structured side-by-side design comparison — layout, color, typography, navigation, and 'steal this' recommendations.