SEED Design System
SEED는 당근 제품을 위한 통합된 디자인 언어입니다. 하나의 토큰 소스에서 React, iOS, Android, Lynx까지 여러 플랫폼에 일관된 디자인을 전달하고, Figma와 연동됩니다.
패키지
Definitions — 토큰·레시피 소스
- @seed-design/rootage-artifacts — 디자인 토큰·컴포넌트 스키마 정의
- @seed-design/qvism-preset — 스타일 레시피 정의
- @seed-design/css — 디자인 토큰·컴포넌트 스타일·테마 CSS
- @seed-design/react — 스타일드 React 컴포넌트
- @seed-design/react-headless — Headless UI 로직
- @seed-design/stackflow — Stackflow 통합
- @seed-design/lynx-react — Lynx 컴포넌트
- @seed-design/lynx-css — Lynx용 CSS
- @seed-design/lynx-qvism-preset — Lynx용 스타일 레시피
- @seed-design/vite-plugin — Vite에 SEED 테마 적용
- @seed-design/webpack-plugin — Webpack·Rspack에 SEED 테마 적용
- @seed-design/rsbuild-plugin — Rsbuild에 SEED 테마 적용
- @seed-design/tailwind3-plugin — Tailwind 3에서 SEED 토큰 사용
- @seed-design/tailwind4-theme — Tailwind 4에서 SEED 토큰 사용
- @seed-design/cli — 컴포넌트를 프로젝트에 추가하는 CLI
- @seed-design/codemod — 코드 마이그레이션 도구
- @seed-design/figma — Figma 연동
- @seed-design/mcp — MCP 서버
- @seed-design/docs-mcp — 문서 MCP 서버
- rootage — 토큰 빌드 엔진 (core·cli)
- qvism — 스타일 레시피 엔진 (core·cli)
- figma-extractor — Figma 변수 추출
- postcss-engaged · postcss-responsive — PostCSS 플러그인