Pandaは、デザインシステム向けのユニバーサルで型安全なCSS-in-JSフレームワークです。ビルド時にスタイルを抽出してモダンなCSSを出力し、レシピやバリアントをサポートしており、多くのJSフレームワークで動作します。
オープンソース。新しい可能性。
優れたオープンソースプロジェクトを見つけ、匿名でプロジェクトを投稿し、自分のプロジェクトを申請して編集できます。
好奇心とともに、オープンソースの世界へ。
THE FIRST COLLECTIONAIエージェント向けに、UI/UX、SEO、GEO、およびWeb、iOS、Android、macOSのプラットフォーム別ガイドラインを含む、専門的なデザインおよびマーケティング知識を提供するMCPサーバーです。
Franken UI (franken-ui/ui) は、UIkit 3をベースにLitElementで拡張され、shadcn/uiからインスピレーションを得たHTMLファーストのUIコンポーネントライブラリです。現在は0buildへの移行が告知されており、ドキュメントは別サイトで提供されています。
BraidはSEEK Groupのテーマ変更可能なデザインシステムであり、Reactコンポーネントライブラリとして提供されています。Vanilla Extractによるスタイリング、BraidProvider、およびskuベースのプロジェクト向けセットアップガイドを提供します。
Priceline Design SystemはPriceline.comのオープンソースUIコンポーネントライブラリおよびデザイン標準です。インタフェースパターンの統一、デザイン・開発の高速化、アクセシビリティ、国際化、レスポンシブウェブデザインを促進することを目指しています。Storybookドキュメント付きでnpmパッケージ(pcln-design-system)として提供され、MITライセンスで公開されています。
oh-my-designはAIコーディングエージェントにデザインシステムリファレンスとスキルをインストールするオープンソースCLIツールです。1コマンドで440以上の企業デザインリファレンス、28のスキル、20の専門エージェントをClaude Code、Codex、Cursor、OpenCodeに追加します。哲学、トークン、コンポーネント契約を含むポータブルDESIGN.mdを生成します。
バニラCSSで構築された、軽量でモジュール化可能なカスタマイズ自在なデザインシステムです。CSS変数、モバイルファーストのレスポンシブ原則、アクセシビリティを導入し、デザイントークンやビルドスクリプト、CDN対応のCSSファイルを提供します。
ヘルシンキ市が公開するオープンソースのデザインシステム「Helsinki Design System (HDS)」。アクセシブルなReactコンポーネント、CSSスタイル、デザイントークンを提供し、包括的なドキュメントとデザインリソースを備える。
DesignMDはURLから実際のデザインシステムを自動抽出し、AIコーディングエージェント向けにDESIGN.md形式で出力するCLIツールです。色、タイポグラフィ、間隔、ブレイクポイント、インタラクション状態をヘッドレスブラウザで実測します。
CompoMo(@ds-mo/ui)はフレームワーク非依存のStencil.js Webコンポーネントライブラリ。TokoMoデザイントークンでスタイリングされ、Angular/React/VueアダプターとMCPメタデータサーバーを同梱する。
ライブ本番サイトから逆エンジニアリングされた120件のプレーンテキスト DESIGN.md ブランド設計仕様のコレクション。AIコーディングエージェントがブランドに合った UI を生成できる。各ブランドは実際のカラー、タイポグラフィ、コンポーネント、ガードレルおよび自己完結型 preview.html を含む。
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によるオープンソースのデザインシステム。Reactコンポーネントとグローバルスタイルを提供し、大規模なWebアプリケーション開発を支援します。
Skeletonは、Tailwind CSSをベースに構築されたアダプティブなデザインシステムです。主要なWebフレームワーク向けのターンキーコンポーネントに加え、ドキュメント、テーマジェネレーター、コミュニティチャネルを提供しています。
Ark UIはChakra UIチームによるヘッドレスでスタイルレスなコンポーネントライブラリです。Zag.jsステートマシンに基づいた45以上のアクセシブルなUIプリミティブを提供し、React、Solid、Vue、Svelteで共通のAPIを利用可能です。
Carbonは、IBMが提供する製品およびエクスペリエンスのためのオープンソース・デザインシステムです。このモノレポでは、ReactおよびWebコンポーネントライブラリ、Sassスタイル、デザイントークン、アイコン、ピクトグラム、および一貫したインターフェースを構築するためのツールを提供しています。
@alifd/nextは、Alibaba Fusionが提供するエンタープライズ向けバックエンドシステム用の設定可能なReactコンポーネントライブラリです。Fusion Designテーマパッケージと連携し、デザイナーと開発者が視覚的なソースを共有でき、npmまたはブラウザ経由でのインストールおよびモジュール単位のインポートをサポートしています。