naver/design-to-ui

design-qa

빌드된 앱 화면을 실기기/시뮬레이터에서 캡처해 Figma 원본과 오버레이(50% 블렌드 + diff 히트맵 + figma|real 나란히 크롭 + 픽셀색 비교)로 대조하고, 코드 오차로 확정된 항목을 Figma 선언값으로 되짚어 스스로 보정하는 검증 루프. 비교·측정 엔진은 플랫폼 중립이고 캡처 계층만 플랫폼별이다(Android·iOS·Web 지원). 두 진입: ① codegen Step 7c 위임 호출, ② 직접 호출(/design-qa) — 프롬프트로…

Source text: Korean

design-to-ui

Figma 디자인을 네이티브 UI(Android Compose/XML, iOS SwiftUI/UIKit)로 변환하는 7-Step 워크플로우. 노드 추출·디자인 컨텍스트·검증(Step 1·2·3·7)은 플랫폼 공통이고, 에셋(Step 4·5)과 코드 생성(Step 6)만 플랫폼별 reference로 분기한다. 에셋 A/B/C 분류, 동적 비주얼, project-design-system 위임, 플랫폼 에셋 파이프라인을 포함한다. Figma URL이나 UI 변환…

Source text: Korean

figma-diff-apply

Figma 변경을 디자이너 검수용 design/* 브랜치에 incremental 적용. /figma-apply 커맨드에서 위임 호출. design-to-ui(7-Step 새 화면 스캐폴딩)와 달리 변경된 컴포넌트만 식별·수정합니다. figma URL 1개(figma-driven) / 2개(diff-driven) 두 모드 지원. 새 화면 변환은 이 스킬 대신 design-to-ui를 사용하세요.

Source text: Korean

discussion

design-to-ui·design-qa로 작업하다 **세션 중 gotcha/이슈가 나왔을 때** 그 경험을 우리 플러그인 레포(naver/design-to-ui)의 GitHub Discussions에 카테고리 분류로 기록한다 — 초기 결과가 안 맞아 추가 프롬프트/SKILL 수정으로 해결한 gotcha, design-qa가 찾은 오차, 기능 아이디어, 도입 사례. `/discussion` 호출로 진입. 세션을 자동 요약해 카테고리를 제안하고 반드시 사용자…

Source text: Korean

figma-asset-download

Figma REST API로 프레임 내 아이콘·이미지를 SVG·PNG로 다운로드하는 범용 스킬. Figma 에셋 다운로드, 아이콘 추출, 벡터/이미지 내보내기가 필요할 때 사용하세요. output_dir만 플랫폼별로 지정하면 iOS·Web·Android 공통으로 사용 가능합니다.

Source text: Korean

generate-project-design-system

현재 프로젝트의 디자인 시스템을 분석하여 project-design-system 스킬의 초안을 생성합니다. Figma MCP의 create_design_system_rules와 get_variable_defs를 활용하고, 코드베이스를 분석하여 Figma 토큰 → 코드 매핑 규칙을 도출합니다. 초안 생성 후 /skill-creator와 사용자 피드백으로 다듬는 과정이 필요합니다. "디자인 시스템 스킬 만들어줘", "project-design-system 생성"…

Source text: Korean