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

oh-my-design은 AI 코딩 에이전트에 디자인 시스템을 설치하는 오픈소스 CLI 도구입니다. 한 번의 명령어로 440개 이상의 기업 디자인 레퍼런스, 28개 스킬, 20개 전문 역할을 Claude Code, Codex, Cursor, OpenCode 등 지원 에이전트에 추가합니다. 철학, 토큰, 컴포넌트 계약을 담은 휴대용 DESIGN.md를 생성합니다.

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

vanilla CSS로 구축된 가볍고 모듈화된 맞춤형 디자인 시스템입니다. CSS 변수, 모바일 우선 반응형 원칙 및 접근성 관행을 사용하며, 예제, 디자인 토큰, 빌드 및 린트 스크립트, 포맷 변환 및 CDN 지원 통합 CSS 파일을 포함합니다.

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

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

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

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

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

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

Awesome DESIGN.md: Curated design system documents from real websites. Drop into your project, let AI agents generate UI matching brand identity.

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

brandmd는 웹사이트의 디자인 시스템을 추출하여 공식 @google/design.md 린터를 통과하는 DESIGN.md 파일을 생성하는 CLI 도구입니다. 이를 통해 Claude Code, Cursor 등 코딩 에이전트에게 UI 작성 전 브랜드 컨텍스트를 제공하며, 기본적으로 API 키 없이 로컬에서 실행됩니다.

GlassKit은 iOS 26 Liquid Glass에서 영감을 받은 글래스모피즘 스타일의 의존성 없는 CSS 컴포넌트 라이브러리로, 테마, 디자인 토큰, 유틸리티 클래스 및 Shadow DOM용 Constructable Stylesheet를 제공합니다.

Claude가 Figma 디자인 시스템을 감사하고 구축하는 스킬로, 읽기 전용 감사를 제공하고 빌드 모드에서 컴포넌트 생성, 슬롯 추가, tokens.css 및 AI 규칙 Export를 지원합니다.

Marigold는 react-aria와 Tailwind CSS를 기반으로 구축된 Marigold Design System의 React 구현체입니다. 이 모노레포는 컴포넌트 및 테마 패키지, Storybook 워크스페이스, Next.js 문서 사이트, Vitest 테스트 및 Changesets를 통한 CI 기반 릴리스를 제공합니다.

Design Oracle은 Playwright를 통해 웹사이트를 분석하여 색상, 타이포그래피, 간격, 컴포넌트 및 UX 패턴과 같은 디자인 시스템을 추출하며, Tailwind v4 설정, React JSX, JSON 디자인 토큰 또는 DESIGN.md 보고서로 내보냅니다. 단독 실행 또는 AI 에이전트를 위한 MCP 서버로 작동합니다.

Panda는 디자인 시스템을 위한 범용적이고 타입 안전한 CSS-in-JS 프레임워크입니다. 빌드 타임에 스타일을 추출하여 캐스케이드 레이어와 변수가 포함된 현대적인 CSS를 생성하며, 레시피와 변형을 지원하고 대부분의 JS 프레임워크와 호환됩니다.

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