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

Dembrandt는 Playwright로 사이트 렌더링 후 DOM 스타일을 읽어 색상, 타이포그래피, 간격, 보더, 그림자, 모션, 컴포넌트를 W3C 디자인 토큰으로 변환하는 Node.js CLI입니다. CI 드리프트 게이트와 MCP를 지원합니다.

Storybook은 UI 컴포넌트와 페이지를 독립적으로 구축, 문서화 및 테스트할 수 있는 프론트엔드 워크숍입니다. 다양한 프레임워크를 지원하며 접근성, 문서화, 인터랙티브 개발을 위한 애드온을 제공합니다.

Priceline Design System는 Priceline.com의 오픈소스 UI 컴포넌트 라이브러리이자 디자인 표준으로, 인터페이스 패턴 통합, 디자인 및 개발 가속화, 접근성·국제화·반응형 웹 설계 촉진 등을 목표로 한다.

Chromatic은 디자인 토큰 파일로부터 크로스 플랫폼 디자인 시스템을 관리하는 빌드 도구입니다. 표현식 토큰, 테마, YAML/JSON 입력을 지원하며 Sass, CSS, iOS, Android 및 HTML 스타일 가이드 출력을 생성합니다.

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

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

TW Elements는 Tailwind CSS를 위한 MIT 라이선스 컴포넌트 라이브러리로, 다크 모드 지원, 테마 옵션 및 빠른 설치를 통해 개인 및 상업적 용도로 사용할 수 있는 500개 이상의 대화형 UI 컴포넌트와 117개 이상의 디자인 블록을 제공합니다.

Radix Themes는 WorkOS가 유지보수하는 오픈소스 React 컴포넌트 라이브러리입니다. 빠른 개발, 쉬운 유지보수, 접근성을 목표로 하며, MIT 라이선스로 배포됩니다. 공식 문서, 릴리스 노트, 기여 가이드, GitHub Discussions, Discord, Twitter 등의 커뮤니티 채널을 제공합니다.

Zag는 접근 가능한 JavaScript UI 컴포넌트를 위한 headless 프레임워크 독립형 상태 기계 라이브러리입니다. React, Solid, Vue, Svelte용 어댑터를 제공하며 스타일 없는 API로 디자인 시스템을 구축할 수 있습니다.

Ant Design은 TypeScript로 작성된 기업급 UI 디자인 언어이자 React 컴포넌트 라이브러리로, 즉시 사용 가능한 고품질 컴포넌트, 디자인 리소스, 테마 및 국제화 기능을 제공합니다.

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

A collection of seven skill libraries for AI coding agents covering code cleanup, prose editing, parallel agent orchestration, interface design, product feedback, design research, and QA. Works with Claude Code, Cursor, Codex and other agents that read skill files.

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

Welcome UI는 Welcome to the Jungle(@wttj)가 공개한 React 기반의 커스터마이저블 디자인 시스템입니다. TypeScript, Tailwind CSS, Ariakit를 기반으로 하며, 웹 앱 개발에 필요한 핵심 컴포넌트를 제공합니다.

Better Design은 AI 코딩 에이전트에게 디자인 시스템, 시맨틱 CSS 토큰, 컴포넌트 오버라이드, UI 원칙, 아이콘 매칭 및 WCAG 기반 리뷰 규칙을 제공하는 오픈 소스 MCP 서버 및 shadcn/ui 레지스트리입니다.

Radix Primitives는 접근성, 커스터마이징, 개발자 경험에 중점을 둔 오픈 소스 로우 레벨 UI 컴포넌트 라이브러리로, 접근 가능한 디자인 시스템과 웹 앱 구축을 지원합니다. MIT 라이선스 기반이며 WorkOS에서 유지 관리합니다.

OpenDesign는 Claude Design의 대안인 오픈소스 로컬 우선 데스크톱 애플리케이션으로, 26개 이상의 로컬 CLI 실행 파일을 지원하고 DESIGN.md 기반 디자인 시스템으로 웹, 데스크톱, 모바일 프로토타입부터 이미지, 동영상까지 생성해 HTML/PDF/PPTX/MP4로 내보냅니다.

daisyUI는 Tailwind CSS를 위한 무료 오픈 소스 컴포넌트 라이브러리입니다. HTML에서 직접 사용할 수 있는 사전 설계된 맞춤형 UI 컴포넌트를 제공하며, 광범위한 문서, 컴포넌트 갤러리 및 커뮤니티 지원을 통해 높은 인기를 얻고 있습니다.

Primer CSS는 GitHub의 Primer Design System을 CSS로 구현한 것으로, @primer/css npm 패키지로 배포됩니다. 핵심, 제품 및 마케팅 컨텍스트를 위한 유틸리티 클래스와 컴포넌트 스타일을 제공하며, 현재는 유지 관리(KTLO) 모드입니다.

Base Web는 Uber의 Base 디자인 시스템을 구현한 React 컴포넌트 라이브러리로, TypeScript 지원과 Styletron 기반 스타일링을 갖춘 현대적이고 반응형인 UI 컴포넌트를 제공합니다. 현재 유지보수 모드입니다.