SEED Design System

SEED는 당근 제품을 위한 통합된 디자인 언어입니다. 하나의 토큰 소스에서 React, iOS, Android, Lynx까지 여러 플랫폼에 일관된 디자인을 전달하고, Figma와 연동됩니다.

문서 사이트

패키지

Definitions — 토큰·레시피 소스

• @seed-design/rootage-artifacts — 디자인 토큰·컴포넌트 스키마 정의
• @seed-design/qvism-preset — 스타일 레시피 정의

Base Libraries — 스타일 생성물

• @seed-design/css — 디자인 토큰·컴포넌트 스타일·테마 CSS

React

• @seed-design/react — 스타일드 React 컴포넌트
• @seed-design/react-headless — Headless UI 로직
• @seed-design/stackflow — Stackflow 통합

Lynx

• @seed-design/lynx-react — Lynx 컴포넌트
• @seed-design/lynx-css — Lynx용 CSS
• @seed-design/lynx-qvism-preset — Lynx용 스타일 레시피

Framework Plugins — 번들러·Tailwind 연동

• @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 토큰 사용

CLI & Migration

• @seed-design/cli — 컴포넌트를 프로젝트에 추가하는 CLI
• @seed-design/codemod — 코드 마이그레이션 도구

Integrations

• @seed-design/figma — Figma 연동
• @seed-design/mcp — MCP 서버
• @seed-design/docs-mcp — 문서 MCP 서버

Ecosystem — 파이프라인 엔진

• rootage — 토큰 빌드 엔진 (core·cli)
• qvism — 스타일 레시피 엔진 (core·cli)
• figma-extractor — Figma 변수 추출
• postcss-engaged · postcss-responsive — PostCSS 플러그인

Documentation

• @seed-design/docs

License

Apache-2.0