hakilee/design-farmer

Agent skill that turns design system quality from "best effort" into a repeatable engineering workflow.

GitHub에서 열기 ↗

GitHub 스타

포크

Shell

언어

미표기

라이선스

2026.06.19

최근 푸시

2026.05.23

별표한 날

AI 분석

설치 난이도: 쉬움

큐레이터 노트

이 프로젝트는 AI 에이전트 기반 코딩 워크플로에서 디자인 일관성을 자동화하려는 팀에게 적합합니다. 특히 빠른 프로토타이핑이나 바이브 코딩 환경에서 디자인 시스템을 수동으로 구축하는 부담을 줄이고 싶다면 도입을 고려해볼 만합니다.

강점

기존 코드베이스에서 디자인 시스템을 자동으로 추출하고 구축하여 수동 작업을 크게 줄임
OKLCH 색상 시스템을 사용하여 지각적 균일성과 자동 대비 검증을 제공
다양한 AI 코딩 에이전트(Claude Code, Codex CLI 등)를 지원하며 설치가 간편함

약점

README에 실제 사용 사례나 성능 벤치마크가 부족하여 효과를 정량적으로 평가하기 어려움
설치 방법이 여러 가지여서 초보자에게 혼란을 줄 수 있음
프로젝트가 비교적 초기 단계(별 57개)로, 장기적인 유지보수 및 커뮤니티 지원이 불확실함

주의사항

설치 시 Claude Code 마켓플레이스와 curl 설치 프로그램 중 하나를 선택해야 하며, 혼용 시 충돌 가능성 있음
생성된 디자인 시스템이 항상 프로젝트의 특정 요구사항에 완벽히 맞지 않을 수 있으므로 검토 필요
README에 명시된 대로 DESIGN.md 파일을 사전에 준비하면 더 나은 결과를 얻을 수 있지만, 필수 사항은 아님

시작 가이드

README에 언급된 INSTALLATION.md를 읽고 선호하는 설치 방법(Claude Code 마켓플레이스 또는 curl)을 선택하세요.
프로젝트 루트에 DESIGN.md 파일을 준비하거나 awesome-design-md에서 적절한 템플릿을 다운로드하세요.
design-farmer를 설치하고 실행하여 기존 코드베이스에서 디자인 시스템을 생성한 후 결과를 검토하세요.

README 한국어 번역

이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.

design-farmer

English | 한국어 | 日本語 | 简体中文 | 繁體中文

씨앗에서 시스템으로 — 모든 코드베이스에서 프로덕션 준비가 된 디자인 시스템을 키워냅니다.

design-farmer는 코딩 에이전트를 위한 스킬로, 저장소를 분석하고 기존 디자인 패턴을 추출하여 구조화되고 접근 가능하며 OKLCH 기반의 디자인 시스템(토큰, 컴포넌트, 테스트, 문서 포함)으로 성장시킵니다.

존재 이유

AI 에이전트와 함께 바이브 코딩할 때, 디자인 일관성이 가장 먼저 깨집니다. 색상이 어긋나고, 간격이 임의적이 되며, 다크 모드는 나중에 생각하게 됩니다. 에이전트에 명시적인 디자인 제약 조건을 부여하면 훨씬 더 일관된 UI를 만들 수 있지만, 그러한 제약 조건을 수동으로 구축하는 것은 목적에 어긋납니다.

Design Farmer는 이 전체 프로세스를 자동화합니다. 코드베이스를 읽고, 이미 가지고 있는 것을 이해하며, 그 주변에 프로덕션 등급의 디자인 시스템을 구축(또는 업그레이드)합니다. 수동 토큰 파일, 복사-붙여넣기 색상 팔레트, 추측이 필요 없습니다.

기능

Design Farmer는 단계별로 작동하며, 프로젝트의 현재 상태에 맞게 조정됩니다:

시작점	수행 작업	결과
디자인 시스템 없음	코드에서 색상/간격 발견, OKLCH로 변환, 토큰 계층 생성	기본 및 의미 토큰, 대비 검증된 색상 스케일
부분 시스템	기존 토큰 감사, 격차(상태, 역할, 테마) 식별	기존 참조를 깨지 않으면서 완전한 의미 범위
대화형 컴포넌트 누락	키보드/포커스 동작을 갖춘 접근 가능한 Button, Input, Select, Dialog 구축	상호작용 테스트가 포함된 일관된 a11y 컴포넌트
라이트 전용 테마	OKLCH 명도/채도 조정을 통해 다크 테마 생성	단일 의미 계약에서 이중 테마 시스템
"프로덕션 준비" 주장	다중 검토자 검증 실행, 드리프트 및 토큰 오용 발견	교정 노트가 포함된 증거 기반 완료 상태

전체 파이프라인은 다음을 포함합니다: 사전 점검, 발견 인터뷰, 저장소 분석, OKLCH 변환을 통한 패턴 추출, 시각적 미리보기, 아키텍처 설계, 테마 시스템, DESIGN.md 생성, 토큰 구현, 컴포넌트 라이브러리, Storybook 통합, 다중 검토자 검증, 라이브 시각적 QA, 문서화, 앱 통합, 릴리스 준비.

결과물

OKLCH 색상 시스템 — 자동 대비 검증이 포함된 지각적으로 균일한 스케일
토큰 계층 구조 — 일관된 구조의 기본, 의미, 컴포넌트 수준 토큰
접근 가능한 컴포넌트 — 키보드 탐색, 포커스 관리, ARIA 상태 내장
이중 테마 지원 — 동일한 토큰 계약에서 라이트 및 다크
DESIGN.md — 지속적인 진실 공급원으로서의 기계 판독 가능 디자인 결정
검증 증거 — "괜찮아 보임" 승인이 아닌 명시적인 통과/실패 기준을 사용한 다각도 검토

위 스크린샷은 그린필드 프로젝트(기존 토큰, 컴포넌트, 디자인 결정 없음)에서 구축되었습니다. 저장소에 이미 부분적인 구현(일부 컴포넌트, 색상 변수, 스타일 가이드 등)이 있는 경우, Design Farmer는 중단한 부분부터 시작하여 훨씬 더 정제된 결과를 생성합니다.

[!TIP]

더 나은 결과를 원하시나요? Design Farmer를 실행하기 전에 프로젝트 루트에 DESIGN.md를 넣어보세요.

- Stitch로 생성하거나,

- awesome-design-md에서 미리 구축된 것을 가져오세요 — 실제 사이트(Vercel, Linear, Stripe 등)에서 추출한 58개 이상의 디자인 시스템.

설치

Claude Code — 마켓플레이스 (권장)

Claude Code 마켓플레이스에서 직접 설치하고 Claude Code가 플러그인 수명 주기를 관리하도록 합니다:

Claude Code 설정을 열고 Plugins → Marketplace로 이동합니다.
design-farmer를 검색하고 Install을 클릭합니다.

Claude Code의 명령 인터페이스를 선호하는 경우, 이 저장소를 마켓플레이스로 등록하고 플러그인을 직접 설치합니다:

/plugin marketplace add ohprettyhak/design-farmer
/plugin install design-farmer@design-farmer

marketplace add 단계는 마켓플레이스 카탈로그를 등록합니다. 그 후 install은 등록된 마켓플레이스에서 design-farmer 플러그인을 가져오며, Claude Code는 일반적인 플러그인 새로고침 흐름에서 향후 업데이트를 유지합니다.

모든 도구 — curl 설치 프로그램

curl -fsSL https://raw.githubusercontent.com/ohprettyhak/design-farmer/main/install.sh | bash

Claude Code, Codex CLI, Amp, Gemini CLI, OpenCode를 감지하여 설치합니다.

전체 마켓플레이스 UI 및 CLI 흐름, 마켓플레이스와 curl 설치 간 마이그레이션 지침, 선택적 설치 플래그(--tool, --interactive, --dry-run), 수동 설정, 문제 해결 및 선택적 제거는 INSTALLATION.md를 참조하세요.

문서

설치 가이드 — 수동 설정, 문제 해결 및 선택적 제거를 포함한 표준 설치 수명 주기 참조.
표준 스킬 사양 — 런타임 명령 파일.

관리자 및 기여자용:

내부 프로젝트 계약 — 저장소 구현 계약 및 계획 기록.
단계 인덱스 — 관리자를 위한 간결한 실행 맵.
품질 게이트 — 검증 및 릴리스 준비 기준.
유지 관리 가이드 — 드리프트 방지 및 업데이트 워크플로.
예제 갤러리 — 시나리오 기반 전후 결과 및 단계 매핑.

기여

기여 가이드

원본 저장소: hakilee/design-farmer

라이선스: 미표기

게재 제외를 원하시면 삭제 요청을 보내주세요.