Claude Design을 활용한 디자인 시스템 만들기 (2) — 디자인 소스 추출

이번엔 실제로 Claude Design에 코드와 피그마를 넘겼다. 결과물이 어땠는지 기록한다.

디자인 소스 Import 하기

Claude Design은 코드베이스랑 피그마를 둘 다 컨텍스트로 받을 수 있다. 그래서 두 가지 다 넘겼다.

코드베이스는 GitHub에서 .zip으로 받아서 import했고, 피그마는 기존 작업물을 .fig로 export해서 import했다.

코드는 현재 구현된 상태를, 피그마는 디자인의 원본 소스를 학습시키기 위함이다.

생각보다 풍부하게 나왔다.

만들어진 디자인 시스템 각 요소를 시각적으로 보여주어 하나하나 피드백이 가능하게 되어있다.

UI Kit는 Web/Mobile로 나뉘어 있고, Type, Colors, Spacing 같은 토큰도 카테고리별로 정리됐다.
Components 8개, 그리고 3D Icons나 Logo 같은 Brand 자산까지 따로 묶여 있다.

특히 Form Inputs는 놀라웠다. disabled, error, focus 같은 상태가 다 따로 잡혀 있다.
Button도 마찬가지. 코드베이스에 이미 컴포넌트로 떼어져 있던 애들은 그 구현 디테일까지 그대로 살려서 뽑아냈다.

아쉬운 부분을 굳이 꼽자면 Hero Banner처럼 컴포넌트화 안 해도 되는 게 묶여 있는 정도.
이건 시스템에서 빼면 되니까 큰 문제는 아니다.

Claude Design은 Claude Code 한도와 별개로 자체 주간 한도가 있다. (현재까진 리서치 프리뷰라 그런듯 하다.)

이 프로젝트 한 번 뽑는 데 그날 일주일 한도의 70% 넘게 나갔다. (최초 생성시 56% 사용, 컴포넌트 한두개 피드백 이후 70% 돌파)
페이지 많은 프로젝트도 아니다. 화면 수 한 자릿수 후반인 홈페이지 하나의 디자인 시스템이었는데도.

디자인 시스템은 한 번 뽑고 끝이 아니라 계속 업데이트하면서 다듬어야 하는 건데, 이 한도 안에서 뭘 얼마나 할 수 있을지가 진짜 고민이다.

이제 이렇게 만들어진 토큰, 컴포넌트 시각 스펙, UI Kit, 브랜드 자산들을 어떻게 관리해야 할 것인가.
오늘 만들어진 작업물을 어디에 두고 어떻게 관리할지, 그리고 이를 실제 프로젝트에 적용하기 위한 밑작업들을 적어보겠다.