내 디자인 시스템을 Claude Skill로 만들어봤어
Turned my design system as a Claude Skill
핵심 요약
Claude Code에서 일관된 디자인 시스템을 재사용하기 위해 나만의 디자인 가이드를 Skill로 변환함.
- 디자인 시스템 — Claude Code에서 반복되는 디자인 가이드를 Skill로 만들어 재사용함.
- 참고 레퍼런스 — Supabase, Zed, OpenAI의 디자인 요소를 혼합하여 나만의 스타일로 구축함.
- 사용자 편의성 — 컴포넌트별로 anatomy 섹션을 두어 필요한 부분만 쉽게 복사할 수 있게 함.
- 오픈 소스 공유 — 직접 만든 디자인 시스템을 GitHub에 공개하여 다른 사람들도 활용 가능하게 함.
매번 에이전트에게 똑같은 디자인 가이드를 다시 프롬프트하는 게 지겨워서, Supabase와 Zed의 간결함, OpenAI의 색상 체계에서 영감을 받아 아예 Skill로 만들어버렸어.
Claude Code로 한 번에 프롬프트해서 만든 디자인 목업들이 여러 개 있어. Skill은 여기서 볼 수 있어: http://github.com/pacifio/ui
내가 따랐던 디자인 원칙들을 적용했던 이전 코드베이스들을 모아서 Claude Code에게 내 디자인 시스템을 다루는 사이트를 생성해달라고 했어. 모든 컴포넌트에는 anatomy 섹션이 있어서, 특정 부분만 필요한 경우 코딩 에이전트를 위해 복사해서 쓸 수 있어.


