AI 스킬 만들기 10계명: Figma→Code 자동화 실전기
AI
AI 스킬 만들기 10계명: Figma→Code 자동화 실전기
두줄요약
Claude Agent Skills로 Figma 디자인을 Android UI로 변환하는 맞춤 스킬 설계 원칙을 정리했습니다. 워크플로 분리, 에셋 처리, 토큰 절감, 오염 없는 검증 방법을 제시합니다.
구조와 흐름
- Claude Agent Skills의 SKILL.md·references·scripts를 이용한 Figma 디자인의 Android UI 변환 자동화
- Node ID 추출, 디자인 컨텍스트·스크린샷 확보, 에셋 분류·처리, 코드 변환, 검증으로 이뤄진 7단계 워크플로
- 정적 에셋·동적 비주얼·기존 리소스를 A/B/C로 분류해 VectorDrawable·WebP·Canvas 처리 방식 결정
선택 이유
- 반복 프롬프트에 포함되던 디자인 토큰, 에셋 변환, 기존 drawable 확인 규칙의 재사용
- 범용 Figma 스킬 워크플로 위에 Android 에셋 파이프라인과 프로젝트 디자인 시스템 규칙 추가
- 동일 모델·프롬프트·MCP 조건에서 맞춤 스킬의 colorScheme 참조 39회와 drawable 생성 1개 측정
주의할 점
- 모델이 이미 아는 일반 지식까지 SKILL.md에 넣을 때 토큰 낭비와 핵심 규칙 희석 가능성
- 모호한 description에 따른 스킬 미트리거 또는 과도한 트리거 위험
- 작성 세션의 대화 맥락, 메모리, 기존 코드·Git 히스토리에 따른 테스트 결과 오염
적용해볼 점
- 결과가 고정된 에셋 변환·검증은 스크립트로, 판단이 필요한 분류·스타일은 기준표나 가이드로 분리
- 각 단계의 명령뿐 아니라 생략 시 깨지는 결과를 명시해 단계 건너뛰기 방지
- 공통 워크플로와 플랫폼별 규칙을 분리해 Compose·XML 등 대상 확장
