디자인 시스템을 처음부터 구축하는 과정

몇 명의 디자이너들이 제가 현재 진행하고 있는 디자인 시스템(Design System) 구축 과정을 문의해 왔고, 이것이 간략한 제 프로세스입니다:

1. 토큰(Tokens)부터 시작합니다. Claude가 간격(2–64), 모서리 반경(8, 12, full), 색상 및 타이포그래피를 text/brand나 bg/surface와 같은 의미론적 이름으로 설정합니다.

2. 저는 스펙에 맞춰 UI를 만듭니다. 모든 간격, 모서리, 색상은 토큰을 참조합니다.

3. 실제 화면에서 패턴이 작동하면, Claude가 이를 DS 컴포넌트(variants, properties, token bindings)로 변환하여 라이브러리에 추가합니다.

저는 현재 Figma에 연결된 Claude Cowork에서 이 작업을 진행하고 있습니다. 동일한 루프는 Claude CLI와 Figma MCP를 사용하여 터미널에서도 작동합니다.