오픈 소스. 새로운 가능성.

Helsinki Design System(HDS)는 헬싱키 시에서 구축한 오픈소스 디자인 시스템으로, 접근성 지원 React 컴포넌트, CSS 스타일, 디자인 토큰 및 문서와 디자인 리소스를 제공한다.

DesignMD는 모든 URL에서 색상, 타이포그래피, 간격, 브레이크포인트, 상호작용 상태 등 라이브 디자인 시스템을 추출하여 AI 코딩 에이전트에 최적화된 DESIGN.md 파일을 출력하는 CLI 도구입니다.

CompoMo는 프레임워크 독립적인 Stencil.js 웹 컴포넌트 라이브러리입니다. TokoMo 디자인 토큰으로 스타일링되며 Angular, React, Vue 어댑터와 MCP 메타데이터 서버를 함께 제공합니다.

design-md-hub는 120개 브랜드의 디자인 시스템을 단일 평문 DESIGN.md 파일로 저장한 오픈소스 레포지토리입니다. AI 코딩 에이전트가 온브랜드 UI를 생성할 수 있도록 실제 사이트에서 역추적한 색상, 타이포그래피, 컴포넌트, 가드레일을 제공합니다.

Tailgrids는 Tailwind CSS 기반의 오픈 소스 React UI 컴포넌트 라이브러리로, 100개 이상의 프로덕션 준비 완료된 복사-붙여넣기 가능 컴포넌트, UI 블록 및 템플릿을 제공하며 TypeScript 지원, 접근성, 다크 모드 및 CLI 설치 기능을 갖추고 있습니다.

Chakra UI는 접근 가능한 웹 앱과 SaaS 제품을 빠르게 구축하기 위한 오픈 소스 React 컴포넌트 시스템입니다. 설치 가능한 컴포넌트 패키지를 제공하며, Next.js RSC를 지원하고 MIT 라이선스로 배포됩니다.

Lightswind UI는 CLI를 통해 소스 코드로 배포되는 영어 문서 기반의 React 컴포넌트 라이브러리입니다. 160개 이상의 애니메이션 및 접근성 컴포넌트와 AI 코딩 도구용 MCP 서버를 제공하며, 핵심 컴포넌트는 MIT 라이선스, 추가 콘텐츠는 Pro 버전으로 제공됩니다.

Codex는 Wikimedia의 디자인 시스템으로, Vue 3 및 CSS 컴포넌트, 디자인 토큰, 아이콘, VitePress 문서 사이트를 제공합니다. 국제화 지원 및 WCAG 2.1 AA 접근성 표준을 준수합니다.

AWS가 오픈소스로 배포한 Cloudscape Design System의 React 컴포넌트 라이브러리. 대규모 웹 애플리케이션 구축을 위한 접근성 지원 UI 컴포넌트와 글로벌 스타일을 제공하며, Cloudscape 웹사이트에 문서화가 있음.

Skeleton은 Tailwind CSS를 기반으로 구축된 적응형 디자인 시스템입니다. 인기 웹 프레임워크를 위한 턴키 컴포넌트와 문서, 테마 생성기 및 커뮤니티 채널을 제공합니다.

Ark UI는 Chakra UI 팀이 개발한 headless, unstyled 컴포넌트 라이브러리로, Zag.js 상태 머신을 기반으로 한 45개 이상의 접근성 UI 프리미티브를 제공하며 React, Solid, Vue, Svelte에서 동일한 API를 사용할 수 있습니다.

Carbon은 제품과 경험을 위한 IBM의 오픈 소스 디자인 시스템입니다. 이 모노레포는 일관된 인터페이스 구축을 위한 React 및 웹 컴포넌트 라이브러리, Sass 스타일, 디자인 토큰, 아이콘, 픽토그램 및 툴링을 제공합니다.

@alifd/next는 Alibaba Fusion의 기업용 백엔드 시스템을 위한 설정 가능한 React 컴포넌트 라이브러리입니다. Fusion Design 테마 패키지와 결합하여 디자이너와 개발자가 시각적 소스를 공유하며, npm 또는 브라우저 설치 및 모듈별 임포트를 지원합니다.

Flowbite는 Tailwind CSS 기반의 오픈 소스 UI 컴포넌트 라이브러리로, 데이터 속성 기반의 인터랙티브 컴포넌트, vanilla JS API, TypeScript 타입, RTL 지원 및 React, Vue, Svelte, Angular 바인딩을 제공합니다.

HeroUI Native는 아름답고 빠르며 현대적인 Apache-2.0 라이선스의 React Native UI 컴포넌트 라이브러리입니다. 공식 문서, 퀵스타트 예제 앱, 기기에서 컴포넌트와 변형을 확인할 수 있는 프리뷰 앱을 제공합니다.

designlang는 Playwright 기반 CLI로 라이브 DOM에서 디자인 시스템을 추출하고 DTCG 토큰, Tailwind 설정, Figma 변수, shadcn 테마, 컴포넌트 구조, 모션 토큰, 브랜드 목소리, WCAG 대비 감사, 다중 플랫폼 에미터 등을 포함한다.

Arco Design Vue는 Arco Design 시스템을 기반으로 한 Vue 3 UI 컴포넌트 라이브러리입니다. 60개 이상의 TypeScript 컴포넌트, 커스터마이징 가능한 테마 토큰, npm 패키지 @arco-design/web-vue를 제공합니다.

개발자를 위한 디자인 시스템 관련 북마크, 리소스, 기사 및 도구들을 모은 영어 큐레이션 컬렉션으로, 디자인 도구, 디자인 토큰, 패턴 라이브러리, 컴포넌트 테스트, 도서 및 강연 내용을 다룹니다.

IBM의 오픈 소스 Carbon Design System을 구현한 Svelte 컴포넌트 라이브러리로, 90개 이상의 접근성 높은 타입 지정 컴포넌트, 5가지 내장 테마, 아이콘, 픽토그램 및 차트 패키지를 제공합니다.

Tinte는 디자인 시스템을 Agent Plugin으로 컴파일하여 identity 설정에서 SKILL.md와 tokens.css를 추출하고, 토큰을 우회하는 색상을 린팅합니다. 또한 shadcn 프리셋, 에디터 테마 및 터미널 색상 스킴을 출력합니다.