r/vibecoding•5개월 전•42•15
내 디자인 시스템을 Claude 스킬로 '바이브 코딩'해서 오픈소스로 공개함, 사이트 전체가 이걸로 만들어짐.
vibe coded my design system into a claude skill and open sourced it, the entire site was built with this.
핵심 요약
디자인 시스템을 Claude 스킬로 구현하여 오픈소스로 공개하고, 이를 활용해 사이트 전체를 구축한 사례.
- 디자인 시스템 구현 — Supabase와 Zed의 간결함, OpenAI의 색상 체계를 참고하여 Claude 스킬로 제작함.
- 오픈소스 공개 — 누구나 자신의 코딩 에이전트에 디자인 가이드라인을 적용할 수 있도록 깃허브에 공개함.
- Claude 코드 활용 — 사이트 내 모든 컴포넌트의 해부학적 구조를 제공하여 에이전트가 특정 부분을 쉽게 복제하도록 함.
- 간편한 설치 — `/plugin install pacifio/ui` 명령어로 Claude 코드에 즉시 적용 가능함.
저는 에이전트에게 항상 똑같은 디자인 가이드라인을 재사용하고 다시 프롬프트하는 제 자신을 발견하곤 합니다. Supabase와 Zed의 간결함, 그리고 OpenAI의 색상 체계에서 큰 영감을 받았고, 일일이 설명하는 대신 이걸 하나의 스킬로 만들었습니다.
여기에 있는 여러 목업들은 Claude 코드를 위한 원샷 프롬프트로 디자인된 것들입니다. http://github.com/pacifio/ui에서 스킬을 찾을 수 있습니다.
제가 따랐던 디자인 원칙을 적용한 이전 코드베이스들을 모두 컴파일해서 이걸 만들었고, Claude 코드에게 제 디자인 시스템을 다루는 사이트를 생성해달라고 요청했습니다. 모든 컴포넌트에는 특정 부분만 필요한 경우 코딩 에이전트를 위해 복사할 수 있는 해부학(anatomy) 섹션이 있습니다.
