SEED Design 통합 가이드. 프로젝트 셋업, 컴포넌트 탐색/사용, 파운데이션(색상·타이포·스페이싱) 활용, 테마/스타일링, CLI 워크플로우(init/add/add-all/compat/docs/upgrade), 스니펫 버전 호환성, 업그레이드 진단까지 커버. SEED Design 관련 질문이면 이 스킬을 사용한다. 사용자가 "SEED 어떻게 써?", "컴포넌트 뭐 있어?", "색상 토큰 쓰는 법", "디자인시스템 셋업" 같은 질문을 하면 반드시 이 스킬을 로드한다.
당근의 디자인 시스템 SEED Design을 프로젝트에 도입하고 활용할 때 사용하는 통합 가이드입니다. 처음 셋업부터 컴포넌트 사용, 파운데이션 활용, CLI 운영까지 모든 단계를 안내합니다.
이 스킬이 호출되면 아래 순서로 동작합니다.
사용자의 프로젝트를 분석하여 현재 상태를 파악합니다.
seed-design.json 존재 여부 → 초기 설정 완료 여부package.json에서 @seed-design/react, @seed-design/css 설치 여부와 버전vite.config, rsbuild.config, webpack.config 등)seed-design/ 디렉토리 존재 여부 → 스니펫 설치 여부bun.lockb / bun.lock → bunpnpm-lock.yaml → pnpmyarn.lock → yarnpackage-lock.json 또는 기본 → npm이후 모든 패키지 설치/실행 명령어는 감지된 패키지 매니저에 맞춰 안내합니다.
파악한 상태와 사용자의 질문에 따라 적절한 가이드로 분기합니다.
| 상황 | 참조 |
|---|---|
seed-design.json 없음 → 처음 셋업이 필요 | references/getting-started.md |
| 컴포넌트 관련 질문 (어떤 컴포넌트 있어?, 버튼 쓰고 싶은데) | references/components.md |
| 파운데이션/토큰 질문 (색상, 타이포, 스페이싱, 테마) | references/foundation.md |
| CLI 명령어 관련 (init, add, docs 등) | references/usage.md |
| 버전 호환/마이그레이션 | references/migration.md |
| 패키지 업그레이드 진단 | references/upgrade.md |
사용자가 명시적으로 주제를 말한 경우 프로젝트 분석을 건너뛰고 해당 시나리오로 직행해도 됩니다.
https://seed-design.io/react/components/{component-name}https://seed-design.io/llms/react/components/{component-name}.txtdocs 명령어로 문서/llms.txt/스니펫 링크 한 번에 조회:
npx @seed-design/cli@latest docs {component-name}
현재 작업이 끝나면 자연스럽게 다음 단계를 안내합니다.
SEED Design의 모든 문서에는 llms.txt 형태의 LLM 최적화 문서가 있습니다. 컴포넌트 목록, 파운데이션 가이드 등 최신 정보가 필요하면 llms.txt를 WebFetch로 읽어옵니다.
| 영역 | 인덱스 URL | 용도 |
|---|---|---|
| React | https://seed-design.io/react/llms.txt | 컴포넌트 목록, 설치/스타일링 가이드 |
| Design | https://seed-design.io/docs/llms.txt | 파운데이션(색상, 타이포, 스페이싱 등) |