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 generate-project-design-systemgit 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/generate-project-design-system)<a href="https://agentmods.dev/skills/naver/design-to-ui/generate-project-design-system"><img src="https://agentmods.dev/badge/skills/naver/design-to-ui/generate-project-design-system/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/generate-project-design-system"><img src="https://agentmods.dev/badge/skills/naver/design-to-ui/generate-project-design-system.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.00105 | $0.01673 |
| Opus 5 | $0.00053 | $0.00837 |
| Sonnet 5 | $0.00021 | $0.00335 |
| Haiku 4.5 | $0.00011 | $0.00167 |
Grade A, and why
generate-project-design-system 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 10d 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 — 122 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Generate Project Design System Skill
현재 프로젝트의 디자인 시스템을 분석하여, Figma 디자인을 코드로 변환할 때 참조할 project-design-system 스킬의 초안을 생성합니다.
이 스킬은 분석과 초안 생성까지를 담당합니다. 자동 분석만으로는 import 경로나 세부 컴포넌트를 놓칠 수 있으므로, 초안 생성 후 반드시 /skill-creator와 사용자 피드백으로 다듬어야 합니다.
워크플로우
Step 1: Figma 공식 도구로 분석 가이드 획득
Figma MCP create_design_system_rules 호출하여 분석 항목 체크리스트를 받습니다.
create_design_system_rules(
clientLanguages = "<프로젝트 언어>", // kotlin,xml / typescript / swift 등
clientFrameworks = "<프레임워크>" // android,jetpack-compose / react / swiftui 등
)
반환된 체크리스트(토큰, 컴포넌트, 스타일링, 에셋 등)를 Step 3의 분석 가이드로 사용합니다.
Step 2: Figma 토큰 구조 확인
사용자가 Figma URL/nodeId를 제공하면 get_variable_defs로 실제 토큰 구조를 가져옵니다.
get_variable_defs(nodeId = "...", clientLanguages = "<언어>")
Figma URL이 없으면 사용자에게 '토큰 패턴 추론에 필요하니 제공해달라'고 요청해서 참고합니다.
Step 3: 코드베이스 분석
플랫폼에 따라 아래 항목을 Grep/Glob으로 분석합니다.
3-1. 색상 토큰
어떤 디자인 토큰 시스템을 쓰는지, 코드에서 어떻게 참조하는지 파악합니다.
Android (XML): @color/ 패턴에서 가장 많이 쓰이는 접두사와 토큰명 추출
Android (Compose): colorResource, MaterialTheme.colorScheme, 커스텀 테마 등 색상 참조 패턴
iOS (SwiftUI): Color("..."), Asset Catalog, 커스텀 Color extension
Web (React): CSS variables, Tailwind config, styled-components theme 등
도출할 것: Figma 토큰 키(kebab-case) → 코드 토큰명 변환 규칙
3-2. 텍스트/타이포
Android: 커스텀 TextView 클래스, textSize 단위(dp/sp), Compose TextStyle 패턴 iOS: Font system, custom font 사용 방식, Text modifier 패턴 Web: CSS font 시스템, Typography 컴포넌트, font token 참조 방식
3-3. 레이아웃/컴포넌트
- 주요 레이아웃 타입과 커스텀 컴포넌트 (상위 5개)
- 테마 래퍼 사용 여부
- 이미지 로딩 방식
3-4. 에셋 최종 형식 (아이콘/이미지)
design-to-ui Step 4·5는 에셋 최종 형식을 PDS에 위임한다(없으면 플랫폼 기본값 — design-to-ui Step 4 표 기준). 코드베이스에서 이 프로젝트가 아이콘/이미지를 어떤 형식·배율로 두는지 확인하고(iOS *.xcassets, Android res/drawable*), 기본값과 다르면 초안에 간단한 규칙 문구로 명시한다(예: "아이콘·사진 모두 PNG @1x/2x/3x, PDF 미사용"). 같으면 생략. (Android/iOS 공통)
Step 4: 초안 SKILL.md 생성
Step 1~3 결과를 종합하여 .claude/skills/project-design-system/SKILL.md 초안을 생성합니다.
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.
- 10d ago First seen · 122 lines · 105 tokens per session scan A c0d26c718739
generate-project-design-system is a skill published in the GitHub repository naver/design-to-ui (5 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 105 tokens to every session and 1,673 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
figma-design-handoff
Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping, and visual regression with Applitools. Use when converting Figma designs to code, documenting component specs, setting up design-dev…
design-to-code-check
Check alignment between a specific design specification and its code implementation — a focused, single-component or single-screen comparison. Trigger when someone says: does this match the design, check implementation, design code alignment, what's different between the design and the build, spec check…
visual-qa-verification
Automated visual QA with pixel-level diff comparison, iterative fix loop, and cross-browser verification. Uses pixelmatch for programmatic screenshot comparison with region-based analysis. Covers responsive checks, Lighthouse audits, and accessibility validation. Keywords: verify app, visual QA, compare to Figma…
canva-token-inference
AI-powered design token extraction from Canva screenshots. Uses Claude vision to infer colors, typography, spacing, and effects with confidence scoring. Presents tokens for user confirmation before locking. Keywords: Canva tokens, token inference, design tokens, Canva extraction, AI token detection, color extraction…
design-token-lock
Extracts exact design values from Figma and writes a lockfile that becomes the single source of truth for colors, typography, spacing, and text content. Generates tailwind.config.ts and tokens.css from the lockfile. Keywords: design tokens, lockfile, Figma variables, token extraction, style drift, Tailwind config…
export-design-system
Exports generated components + design-tokens.lock.json as a publishable pnpm workspace. Generates a framework-agnostic tokens package and a framework-specific component library (React/Vue/Svelte via Vite library mode, React Native via tsc). Includes Tailwind preset, ThemeProvider, Changesets versioning, and a properly…