shadcn · Storybook · Figma · Claude 로 만드는
단일 원본(single source of truth) 디자인 시스템
기획서의 버튼, 피그마의 버튼, 개발이 만든 버튼이 따로따로. 단계마다 다시 그리고, 조금씩 어긋나고, 고칠 땐 전부 다시 손봐야 합니다.
버튼을 딱 한 번 정의해두고, 기획·디자인·개발이 모두 그 하나를 가져다 씁니다. 다시 그릴 일도, 어긋날 일도 없습니다.
이게 "단일 원본 디자인 시스템" — 오늘 설명할 전부입니다.
버튼·카드·입력창 같은 완성된 화면 부품 모음. 우리 디자인의 원본(기준)으로 삼습니다.
그 부품들을 하나씩 진열·설명하는 카탈로그. 눌러보며 확인하는 온라인 도감입니다.
그 부품들을 라이브러리로 가져와 기획자·디자이너가 같은 부품으로 화면을 조립.
Figma · Storybook · 실제 코드가 같은 부품을 가리키게 묶어줍니다. 중요한 건, 디자인을 보고 코드를 새로 만드는(생성) 게 아니라 "이 그림 = 이미 있는 그 부품"이라고 연결(link) 하는 역할이라는 점.
Figma 부품 ↔ 코드 부품 매핑. shadcn과 세트로 가장 많이 쓰임. (유력 후보)
Figma 부품 ↔ Storybook 도감 연결. "개발이 Storybook으로 만든다"와 맞물림.
→ 이름은 확정 대기 중. 알려준 분께 "Code Connect 맞죠?" 한 번 확인 예정.
사내 DS를 shadcn 기준으로 확장, 쓸 부품만 코드 원본으로.
그 부품들을 Figma에 올려 디자인 재료로.
같은 부품으로 화면 기획(나)·세부 디자인(디자이너).
그 부품이 그대로 코드·문서가 됨.
기획=디자인=개발=실제 화면. 전부 하나.
3~4 단계 사이를 연결 툴이 묶어줍니다.
제각각이던 버튼·간격·색이 통일됩니다.
다시 만들지 않으니 각 단계가 빨라집니다.
같은 부품 이름으로 대화 — 오해가 줄어듭니다.
부품 하나 고치면 쓰는 모든 화면에 반영.
접근성·반응형·상태가 부품에 내장.
도감만 보면 "우리 부품"을 바로 파악.
이 파이프라인 대부분은 코드 쓰기 · 문서화 · 연결 작업이라 손이 많이 갑니다. Claude가 그 손을 대신하면 기획자가 코드를 몰라도 파이프라인 전체를 돌릴 수 있습니다.
shadcn 부품 추가 + 사내 색·폰트를 코드에 주입.
말로 요구 → 부품으로 화면 프로토타입·화면설계서 초안.
Figma↔코드 매핑 파일 자동 작성. (연결 툴 확정 후)
Storybook 스토리·사용 가이드를 자동 작성.
⑤ 유지·동기화 — 부품을 바꾸면 스토리·문서·Figma 연결까지 어긋난 곳을 Claude가 찾아 맞춰줍니다.
기획·디자인·개발이 끊김 없이 이어지고,
그 손이 많이 가는 일은 Claude가 대신합니다.
디자인 시스템 파이프라인 · 팀 공유용 · 연결 툴 확정 시 업데이트 예정