Design To UI

Design-To-UI

Figma 디자인을 네이티브 UI(Android Compose/XML, iOS SwiftUI/UIKit)로 변환하는 Claude Code 플러그인입니다.

빠른 설치 (복붙)
(개발용)

(Android/iOS 선디자인검수용)

*클로드 사용 시, Shift + Tab 으로 auto mode로 바꿔놓으면, 좀 더 편하게 하실 수 있습니다!

🎉 Contribution을 환영합니다! (Web·Flutter 확장, 버그 수정 등) Fork 후 Pull Request를 보내주세요 🎉
설치 후 사용 중 gotcha·이슈·문의·공유거리가 생기면 /discussion — 세션을 자동 요약해 우리 Discussions에 분류·등록합니다(등록 전 확인).

네이티브 변환에 필요한 로직(에셋 A/B/C 분류, 동적 비주얼, 디자인 시스템 토큰 매핑, 에셋 파이프라인)을 7-Step 파이프라인으로 구성했습니다. Step 1·2·3·7은 플랫폼 공통이고, Step 4·5(에셋)·6(코드 생성)만 플랫폼별로 분기합니다 — 공통 절차는 spine에 한 벌만 두고, 에셋 사양(작음)은 SKILL.md Step 4의 플랫폼 표로, 코드 변환 규칙(큼)은 references//로 분리합니다.

스킬 구성

project-design-system은 이 플러그인에 포함되지 않습니다.
프로젝트마다 디자인 시스템이 다르므로, 각 프로젝트의 .claude/skills/project-design-system/SKILL.md에 직접 작성합니다.
design-to-ui의 requires: [project-design-system]은 이름 기반으로 해석되어, 프로젝트 스킬 디렉터리에서 자동 로드됩니다.
플러그인에 포함된 generate-project-design-system 스킬로 이 초안을 자동 생성할 수 있습니다.

커맨드 구성

디자이너가 개발자의 원본 PR 위에서 피그마 변경을 반복 반영하고, 완료 시 개발자에게 핸드오프하기 위한 슬래시 커맨드입니다.

선디자인검수 플로우

1. 개발자가 스펙, 피그마가이드 기반으로 Design-To-UI 플러그인을 활용하여 빠르게 원본 PR을 만듭니다. (결과물 : design-qa 미세조정까지 거친, 완벽한 ui)
2. 디자이너가 /figma-start  실행 → 프로젝트가 로컬에 없으면 ~/{repo} 에 클론되고 IDE로 열립니다(미리 받아둘 필요 없음), design/{github_id}/{dev_pr_number} 브랜치가 생기고 체크아웃됩니다 (커밋 없음). 한 dev PR에 몇 번이든 다시 실행할 수 있습니다.
3. /figma-start가 그 브랜치를 빌드해 기기에 올려줍니다 (실행할 기기·에뮬레이터가 없으면 검수에 맞는 걸 설치해서 만듭니다 — Android는 폰·폴더블·태블릿을 하나로 볼 수 있는 resizable 에뮬레이터). 올라온 화면을 검수하고, 피그마에서 수정이 필요하면 해당 피그마 화면 수정 후 /figma-apply  실행 → 변경이 커밋·푸시됩니다.
4. 추가 수정이 필요하면 피그마 수정 후 /figma-apply  반복 — dev PR은 현재 브랜치에서 자동 추론됩니다.
5. 확인이 필요한 케이스도 개발자에게 요구할 필요 없이, 클로드에게 요구하여 확인합니다. (ui확인을 위해 에러케이스, 로딩중 화면 보고 싶어)
6. 작업이 끝나면 /handoff 실행 → PR 생성 + 개발자 리뷰 요청. (수정이 필요한 잔여작업이 있다면, 개발자에게 pr 코멘트로 요청)
7. QA 시점에 최종 확인 (핑퐁이 없을 것으로 기대)

디자이너 브랜치 컨벤션

-…