Show GN: design-farmer - 코드베이스를 읽어 디자인 시스템으로 정리하는 AI 코딩 에이전트용 스킬
(github.com/ohprettyhak)레포지토리를 분석하고 기존 디자인 패턴을 추출한 뒤, 토큰, 컴포넌트, 테스트, 문서를 갖춘 OKLCH 기반 디자인 시스템으로 키워냅니다.
왜 필요한가요?
AI 에이전트와 바이브 코딩을 하다 보면 디자인 일관성이 가장 먼저 무너집니다. 색상은 제각각이고, 간격은 들쭉날쭉하고, 다크 모드는 뒷전입니다. 에이전트에게 명확한 디자인 제약을 주면 훨씬 일관된 UI가 나오지만, 그걸 직접 만드는 건 배보다 배꼽이 큰 일입니다.
Design Farmer는 이 과정을 통째로 자동화합니다. 코드베이스를 읽고, 이미 있는 것을 파악한 뒤, 그 위에 프로덕션 수준의 디자인 시스템을 구축하거나 업그레이드합니다. 토큰 파일을 손으로 만들 필요도, 컬러 팔레트를 복붙할 필요도 없습니다.
주요 기능
- OKLCH 기반 디자인 토큰 정리
- primitive / semantic 토큰 계층 구성
- 접근성을 고려한 기본 컴포넌트 구축
- dark theme 확장
- DESIGN.md 생성
- 스타일 drift 및 토큰 오용 검증
에이전트가 이후 작업에서도 계속 참고할 수 있는 반복 가능한 디자인 워크플로를 만드는 것을 목표로 합니다.
awesome-design-md에서 제공하는 DESIGN.md 파일을 프로젝트에 넣어놓으면, 사용자가 원하는 시스템을 이해하고 시작합니다.