디자인 시스템 외부 링크 인덱스
각 기업/커뮤니티 공개 디자인 시스템의 외부 링크 탐색 인덱스로, 기존 DS의 디자인 토큰, 컴포넌트 및 규범을 참조하는 데 사용됩니다.
⚠️ 본 스킬은 리소스 인덱스 레이어입니다: 링크와 한 줄 설명만 포함하며 방법론을 다루지 않습니다. 토큰 아키텍처, 명명 계층, 크로스 플랫폼 구현 방법론은 로컬
design-system스킬을 참조하세요. 두 스킬은 각자의 역할을 수행하며 중복되지 않습니다.
사용 방법 (점진적 공개)
본 SKILL.md는 스케줄링 인덱스 레이어입니다: 5개 분류 각각에 대해 가장 대표적인 2~3개 항목과 '무엇인가/언제 읽을 것인가'를 제시합니다. 더 긴 목록이 필요하면 references/<category>.md를 읽으세요(한 단계 깊이만, 중첩 없음).
먼저 아래 분류를 보고 원하는 항목을 판단한 후, 필요에 따라 해당 참조 파일을 읽어 한 번에 전체를 로드하지 않도록 하세요.
데이터 출처: klaufel/awesome-design-systems + jbranchaud/awesome-react-design-systems.
트리거 예시: 각 대기업 디자인 시스템 참조 / React 컴포넌트 라이브러리 선정 도움 / 디자인 토큰 도구 및 규범 / 패턴 라이브러리 도구 고르기.
분류 빠른 조회 (먼저 위치 파악 후 상세 조회)
판단이 어려울 때 이 표를 먼저 확인하고 해당 파일을 읽어 5개 파일을 모두 읽지 않도록 하세요:
| 원하는 것 | 읽을 파일 |
|---|---|
| 특정 대기업의 성숙한 DS 참조 | references/major-company-systems.md |
| 디자인 토큰 도구 체인 선택 / W3C 규범 정렬 | references/design-tokens.md |
| 컴포넌트 개발 환경, 문서 사이트, 패턴 라이브러리 구축 | references/pattern-libraries.md |
| React Web 프로젝트에 채택 가능한 컴포넌트 라이브러리 | references/react-ds-libraries.md |
| React Native 프로젝트용 UI 툴킷 | references/react-native-ds-libraries.md |
경계 안내: '토큰 아키텍처를 어떻게 설계할 것인가'는 본 인덱스에서 다루지 않으며 로컬
design-system스킬을 참조하세요. 'React로 컴포넌트를 어떻게 작성할 것인가'는react-best-practices를 참조하세요. 본 인덱스는 '어떤 기성 DS/라이브러리를 참조하거나 채택할 수 있는가'만 답합니다.
라우팅 예시 (점진적 공개 진행 방식)
사용자: "엔터프라이즈 백오피스에 쓸 React 컴포넌트 라이브러리를 골라줘"
- 분류 파악 → 이는 'React 디자인 시스템 라이브러리' 분류, 토큰/패턴 라이브러리가 아님.
- 먼저 아래 분류의 대표 항목(Ant Design / MUI / Blueprint)을 보고, 대부분의 경우 충분히 답변 가능.
- 더 많은 후보가 필요하면 →
references/react-ds-libraries.md읽기; 그래도 부족하면 → awesome 원본 디렉토리 참조.- 선정 후, 실제 구현 세부 사항은
react-best-practices/frontend-design에 위임하며 본 인덱스에서 다루지 않음.
주요 기업 디자인 시스템
무엇인가: 각 대기업이 공개한 완전한 디자인 시스템(토큰 + 컴포넌트 + 규범 + 문서). 언제 읽을 것인가: 특정 기업의 DS를 참조하거나, 모범이 될 만한 성숙한 시스템을 선택하거나, 디자인 언어 경쟁사 조사를 할 때.
대표 항목 (가장 유명한):
- Google Material Design - 직관적이고 아름다운 제품을 위한 Google의 디자인 시스템.
- Microsoft Fluent UI - Microsoft의 오픈소스 크로스 플랫폼 디자인 시스템 (웹/Apple/Android).
- IBM Carbon - 제품과 경험을 위한 IBM의 오픈소스 디자인 시스템.
→ 전체 목록은 references/major-company-systems.md 참조 (Polaris, Atlassian, Lightning, Primer, Pajamas, Photon, Atlaskit + 일반 DS 리소스).
디자인 토큰 리소스
무엇인가: 디자인 토큰의 규범, 생성, 변환 및 크로스 플랫폼 동기화 도구. 언제 읽을 것인가: 토큰 도구 체인을 선택하거나, W3C 규범을 준수하거나, Figma에서 토큰을 추출하거나, 다중 플랫폼 토큰 배포를 할 때.
대표 항목:
- Design Tokens W3C Community Group - 디자인 토큰 형식 사양을 정의하는 W3C 커뮤니티 그룹.
- Style Dictionary - 스타일을 한 번 정의하고 모든 플랫폼에서 사용할 수 있는 Amazon의 빌드 시스템.
- Theo - Salesforce의 디자인 토큰 변환 및 포맷팅을 위한 추상화.
→ 전체 목록은 references/design-tokens.md 참조 (DesignTokens.dev, Diez, Figmagic, Superposition, Validator, Awesome Design Tokens, Abstract Connect, Zeplin export 등).
패턴 라이브러리 리소스
무엇인가: 컴포넌트 격리 개발 환경 및 패턴 라이브러리 편성 도구(Storybook 계열). 언제 읽을 것인가: 컴포넌트 개발 환경/문서 사이트/아토믹 디자인 워크플로우를 구축하거나 문서 협업 플랫폼을 선택할 때.
대표 항목:
- Storybook - React, Vue, Angular 등을 위한 격리된 UI 컴포넌트 개발.
- Pattern Lab - 아토믹 디자인 원칙을 사용한 패턴 기반 UI 구축.
- React Styleguidist - 라이브 스타일 가이드가 포함된 격리된 React 컴포넌트 개발 환경.
→ 전체 목록은 references/pattern-libraries.md 참조 (Styled System, Stencil, Zeroheight, Backlight, Storybook DS, addons 목록 등).
React 디자인 시스템 라이브러리
무엇인가: 바로 채택 가능한 React 컴포넌트 라이브러리/엔터프라이즈급 디자인 시스템으로, 즉시 사용 가능. 언제 읽을 것인가: SaaS/백오피스/대시보드용 React 컴포넌트 라이브러리를 선택하거나 엔터프라이즈급 DS 채택 방안을 평가할 때.
대표 항목:
- Ant Design - Ant Financial - 엔터프라이즈 애플리케이션용 디자인 시스템 (자연스러움과 확정성).
- Material UI - Google Material Design을 구현하는 React 컴포넌트.
- Blueprint - Palantir - 웹용 React 기반 UI 툴킷.
→ 전체 목록은 references/react-ds-libraries.md 참조 (Grommet, Garden, Backpack, Ring UI, Canvas, Atlaskit, cf-ui, Mineral UI, Spark, Swarm, Uniform, Lightning React 등 20+).
React Native 디자인 시스템 라이브러리
무엇인가: React Native 크로스 플랫폼 즉시 사용 가능 UI 툴킷. 언제 읽을 것인가: RN 앱용 성숙한 컴포넌트 라이브러리를 선택하거나 처음부터 UI를 구축하지 않으려 할 때.
대표 항목:
- React Native Elements - 크로스 플랫폼 React Native UI 툴킷.
- React Native Paper - Material Design을 준수하는 React Native 컴포넌트.
- NativeBase - GeekyAnts - React Native 및 Vue Native용 필수 크로스 플랫폼 UI 컴포넌트.
→ 전체 목록은 references/react-native-ds-libraries.md 참조 (Shoutem UI, Teaset 등).
awesome 전체 디렉토리 포인터
더 포괄적인 awesome 디자인 관련 전체 디렉토리는 sindresorhus/awesome를 참조하세요. 본 스킬은 주로 다음 두 곳에서 정제했습니다:
- klaufel/awesome-design-systems — 주요 기업 DS / 토큰 / 패턴 라이브러리의 상위 디렉토리.
- jbranchaud/awesome-react-design-systems — React / RN DS 라이브러리의 상위 디렉토리.
관련 로컬 스킬
본 인덱스는 '어떤 기성 DS를 참조/채택할 수 있는가'만 담당하며, 방법론과 구현 세부 사항은 다음 로컬 스킬에 위임합니다:
design-system— 토큰 아키텍처, 명명 계층, 크로스 플랫폼 구현 방법론 (본 인덱스의 방법론 백엔드).react-native-skills— React Native 컴포넌트 및 스타일 패턴.react-best-practices/frontend-design— React 및 프론트엔드 구현, 디자인 적용 세부 사항.design-assets-index— 디자인 리소스 (아이콘, 글꼴, 일러스트레이션 등) 인덱스.