스킬 자체의 표현으로
디자인으로부터 개발자 핸드오프 문서를 생성하며, 디자인이 엔지니어링에 넘길 준비가 되어 스펙 시트가 필요한 팀을 대상으로 합니다. Figma URL을 지정하거나, 없으면 설명이나 스크린샷으로 대체하며, 시각 명세, 인터랙션 명세, 콘텐츠 명세, 예외 상황, 접근성을 차례로 다룹니다.
출력물은 개요, 레이아웃, 사용된 디자인 토큰, 컴포넌트, 상태 및 인터랙션, 반응형 동작, 엣지 케이스, 애니메이션 및 모션, 접근성 노트 섹션으로 구성된 Markdown Handoff Spec입니다. 여기서 명시된 네 가지 원칙은 추측하지 않고 모든 것을 명시할 것, 원시 값 대신 토큰을 참조할 것, 모든 상태를 보여줄 것, 동작의 이유를 설명할 것입니다.
산출물
- 각 토큰과 그 값, 용도를 나열한 디자인 토큰 표입니다.
- 각 컴포넌트의 variant, props, 특별 동작 노트를 정리한 컴포넌트 표입니다.
- 요소, 트리거, 애니메이션, 지속 시간, 이징을 기록한 애니메이션 및 모션 표입니다.
작동 방식
- 01디자인 소스 확인하기
Figma URL이 있으면 디자인을 Figma에서 가져오고, 없으면 스킬은 작성된 설명이나 스크린샷을 기반으로 작동합니다.
- 02비주얼 명시하기
정확한 패딩, 마진, 너비, 색상·타이포그래피·간격에 대한 디자인 토큰 참조, 반응형 브레이크포인트, 컴포넌트 variant와 상태입니다.
- 03인터랙션 명시하기
클릭 및 탭 동작, 호버 상태, 제스처 지원, 지속 시간과 이징이 기록된 전환입니다.
- 04콘텐츠와 엣지 케이스 다루기
글자 수 제한, 말줄임, 빈 상태, 로딩 및 오류 상태, 그리고 최소·최대 콘텐츠, 더 긴 다국어 문자열, 느린 연결, 데이터 누락 상황입니다.
- 05접근성 세부 사항 추가하기
포커스 순서, ARIA 레이블 및 role, 키보드 인터랙션, 스크린 리더 안내입니다.
- 06템플릿 형식으로 스펙 출력하기
결과물은 파일의 섹션 및 표 구조를 사용하여 Markdown Handoff Spec 형태로 작성됩니다.