클로드로 디자인 시스템 가이드 만들기

질문

피그마에서 어느 정도 디자인을 해 둔 상태에서 클로드가 디자인 시스템을 읽어 개발자 전달용 가이드까지 만들게 할 수 있는지, 파일을 어느 수준까지 정리해 두어야 하는지.

답변

Figma MCP를 연결해 클로드에 디자인 파일 링크와 컨텍스트를 주고 디자인을 읽어 컴포넌트를 생성하고 가이드로 정리해 달라고 하면 핸드오프용으로 만들 수 있다(토큰은 많이 든다). 그냥 시키면 정확도가 떨어지므로 최소한 컴포넌트와 베리어블 이름 지정까지 마친 뒤 요청하는 것이 유리하고, 컨텍스트 문서나 컴포넌트 디스크립션이 자세할수록 좋으며 파일이 크면 누락이 생기므로 섹션별로 나눠 요청하는 것이 좋다. 피그마 AI 에이전트는 컴포넌트 추출은 약하지만 컬러·스페이싱·타이포를 추출해 primitive/semantic 계층의 베리어블로 등록하고 화면에 연결하는 작업은 잘하므로, 이를 먼저 한 뒤 클로드로 넘기는 방법도 있다. 또 피그마에 정의한 내용을 스토리북으로 만들어 달라고 하면 규격이 명확해 개발자와 AI 에이전트 모두 이해하기 쉽다.