Claude Design을 활용한 디자인 시스템 만들기 (3) — 디자인 시스템 구현

2편에서 토큰, 컴포넌트 시각 스펙, UI Kit, 브랜드 자산을 얻었다. 이번엔 이 요소들을 다른 프로젝트도 가져다 쓸 수 있는 형태로 묶는다.

어떻게 받을 것인가

먼저 형태를 정해야 했다.
Claude Design이 뽑아낸 결과물을 React 컴포넌트로 한 번 더 래핑할지, 아니면 CSS 클래스 그대로 쓸지.

래핑하면 깔끔해 보이지만, 매번 Claude Design이 새 컴포넌트를 만들 때마다 내가 React로 다시 옮겨야 한다.
손이 한 단계 더 들어간다는 얘기다.

그래서 CSS-only로 가기로 했다.
Claude Design이 만든 결과물을 그대로 contract로 받고, 이를 사용하는 프로젝트는 자기 JSX에 클래스만 붙여서 쓴다.

핸드오프 받기

이렇게 만들어진 디자인은 Claude Code와의 연동도 매우 간편하다.
Share 버튼을 클릭하면, 결과물을 핸드오프 URL 하나로 받을 수 있다.
그 URL을 Claude Code에 던져주면 끝이다.

Fetch this design file, read its readme, and implement the
relevant aspects of the design.
https://api.anthropic.com/v1/design/h/UUID_URL
Implement: the designs in this project

이 한 줄로 Claude Code가 번들을 받아서 풀고, README를 읽고, 레포에 적용한다.
사람이 다운로드하고 압축 풀고 옮기고 할 게 없다.

번들 안에는 디자인 자산만 들어 있는 게 아니다. project/ 안에 토큰과 컴포넌트가 있고, 옆에 chats/ 라는 클로드디자인과의 대화 이력 폴더, 그리고 코딩 에이전트용 안내 README가 따로 있다.

Claude Code한테 "이 사람과 클로드디자인이 어떤 결정을 거쳐서 이 결과물에 도달했는지" 까지 같이 넘기는 구조다.
다음 업데이트가 와도 폴더 통째로 덮어쓰면 끝이다.
앞으로도 손 안 대고 가져다 쓰기 위해 이 구조를 그대로 수용했다.

컴포넌트 CSS 분리

다음 라운드는 컴포넌트 CSS를 파일별로 쪼개는 작업.
처음엔 명세가 어긋났다. "컴포넌트 CSS 분리해줘" 라고만 던졌더니 클로드디자인이 엉뚱한 곳을 손봤다.
내가 분리하고 싶었던 건 다른 프로젝트들이 import해서 쓸 재사용 가능한 컴포넌트 정의였는데, 클로드디자인은 홈페이지 화면 조립 코드 안의 인라인 스타일을 보고 있었다.

다시 정확히 짚어서 보냈다.
preview/*.html 안의 <style> 블록을 components/<name>.css 로 분리.
통합 파일 말고 컴포넌트별 분리 + index.css 단일 진입점.

이렇게 요청 사항을 모호하지 않게 요청하자, 정확한 return이 돌아왔다.
거기다 요청하지도 않은 BEM 네임스페이싱(.btn--primary, .chip--active 같은)까지 자발적으로 얹어서.
다른 프로젝트의 CSS와 충돌하지 않도록 막아준 거다.
추가로 각 파일 상단엔 마크업 예시 주석까지 박혀 있다.

모호한 요청은 엉뚱한 결과를 만들고, 정확한 요청은 요청 이상의 결과를 받는다.
이번에도 역시나 '어떻게 요청할지'에 대한 고민을 하게 만들었다.

다음 작업

우선 간단한 디자인 시스템 레포가 완성됐다. 이제 해당 디자인 시스템을 바탕으로 실제로 Claude Design에게 디자인을 맡겨보자.