shadcn · Storybook · Figma · Claude 로 만드는
단일 원본(single source of truth) 디자인 시스템
기획서의 버튼, 피그마의 버튼, 개발이 만든 버튼이 따로따로. 단계마다 다시 그리고, 조금씩 어긋나고, 고칠 땐 전부 다시 손봐야 합니다.
버튼을 딱 한 번 정의해두고, 기획·디자인·개발이 모두 그 하나를 가져다 씁니다. 다시 그릴 일도, 어긋날 일도 없습니다.
이게 "단일 원본 디자인 시스템" — 오늘 설명할 전부입니다.
버튼·카드·입력창 같은 완성된 화면 부품 모음. 우리 디자인의 원본(기준)으로 삼습니다.
그 부품들을 하나씩 진열·설명하는 카탈로그. 눌러보며 확인하는 온라인 도감입니다.
그 부품들을 라이브러리로 가져와 기획자·디자이너가 같은 부품으로 화면을 조립.
별도 유료 툴이 아니라 Figma가 공식 제공하는 REST API로 세 곳(Figma · Storybook · 코드)을 묶습니다. 역할은 그대로 — 코드를 새로 만드는(생성) 게 아니라 "이 그림 = 이미 있는 그 부품"이라고 연결(link). 액세스 토큰만 발급하면 바로 호출 가능.
Figma 부품에 Storybook·GitHub 코드 링크를 부착하는 공식 엔드포인트(부품당 최대 10개). 등록·조회·수정·삭제 전부 API로.
공식 Postman 컬렉션을 불러오면 코드 없이 클릭으로 호출·테스트. 반복 작업은 Claude가 API를 직접 호출해 자동화.
참고 · Figma Code Connect는 기능이 비슷하지만 Organization·Enterprise 플랜 전용 → 플랜 제약 없는 REST API 방식으로 확정.
사내 DS를 shadcn 기준으로 확장, 쓸 부품만 코드 원본으로.
그 부품들을 Figma에 올려 디자인 재료로.
같은 부품으로 화면 기획(나)·세부 디자인(디자이너).
그 부품이 그대로 코드·문서가 됨.
기획=디자인=개발=실제 화면. 전부 하나.
3~4 단계 사이를 Figma REST API(Dev Resources)가 묶어줍니다.
제각각이던 버튼·간격·색이 통일됩니다.
다시 만들지 않으니 각 단계가 빨라집니다.
같은 부품 이름으로 대화 — 오해가 줄어듭니다.
부품 하나 고치면 쓰는 모든 화면에 반영.
접근성·반응형·상태가 부품에 내장.
도감만 보면 "우리 부품"을 바로 파악.
이 파이프라인 대부분은 코드 쓰기 · 문서화 · 연결 작업이라 손이 많이 갑니다. Claude가 그 손을 대신하면 기획자가 코드를 몰라도 파이프라인 전체를 돌릴 수 있습니다.
shadcn 부품 추가 + 사내 색·폰트를 코드에 주입.
말로 요구 → 부품으로 화면 프로토타입·화면설계서 초안.
Figma↔코드 연결을 REST API 호출로 자동 등록·갱신.
Storybook 스토리·사용 가이드를 자동 작성.
⑤ 유지·동기화 — 부품을 바꾸면 스토리·문서·Figma 연결까지 어긋난 곳을 Claude가 찾아 맞춰줍니다.
기획·디자인·개발이 끊김 없이 이어지고,
그 손이 많이 가는 일은 Claude가 대신합니다.
디자인 시스템 파이프라인 · 팀 공유용 · 연결 툴 = Figma 공식 REST API (확정)