オープンソース。新しい可能性。

Design Oracleは、Playwrightを用いてウェブサイトを分析し、色、タイポグラフィ、コンポーネントなどのデザインシステムを抽出するツールです。Tailwind v4設定やReact JSX、JSONトークンとして書き出しが可能で、単体またはMCPサーバーとしてAIエージェントで利用できます。

Pandaは、デザインシステム向けのユニバーサルで型安全なCSS-in-JSフレームワークです。ビルド時にスタイルを抽出してモダンなCSSを出力し、レシピやバリアントをサポートしており、多くのJSフレームワークで動作します。

DembrandtはNode.js CLIツールで、PlaywrightでサイトをレンダリングしDOMスタイルを読み取って、カラー・タイポグラフィ・スペーシング・ボーダー・シャドウ・モーション・コンポーネントをW3Cデザイントークンに変換する。CIドリフト検知とMCP対応。

oh-my-designはAIコーディングエージェントにデザインシステムリファレンスとスキルをインストールするオープンソースCLIツールです。1コマンドで440以上の企業デザインリファレンス、28のスキル、20の専門エージェントをClaude Code、Codex、Cursor、OpenCodeに追加します。哲学、トークン、コンポーネント契約を含むポータブルDESIGN.mdを生成します。

Chromaticは、デザイントークンファイルからクロスプラットフォームなデザインシステムを管理するためのビルドツールです。表現力豊かなトークン式、テーマ機能、YAML/JSON入力をサポートし、Sass、CSS、iOS、Android、HTMLスタイルガイドを出力します。

バニラCSSで構築された、軽量でモジュール化可能なカスタマイズ自在なデザインシステムです。CSS変数、モバイルファーストのレスポンシブ原則、アクセシビリティを導入し、デザイントークンやビルドスクリプト、CDN対応のCSSファイルを提供します。

DesignMDはURLから実際のデザインシステムを自動抽出し、AIコーディングエージェント向けにDESIGN.md形式で出力するCLIツールです。色、タイポグラフィ、間隔、ブレイクポイント、インタラクション状態をヘッドレスブラウザで実測します。

ライブ本番サイトから逆エンジニアリングされた120件のプレーンテキスト DESIGN.md ブランド設計仕様のコレクション。AIコーディングエージェントがブランドに合った UI を生成できる。各ブランドは実際のカラー、タイポグラフィ、コンポーネント、ガードレルおよび自己完結型 preview.html を含む。

CodexはWikimediaのデザインシステムであり、Vue 3およびCSSコンポーネント、デザイントークン、アイコン、VitePressドキュメントサイトを提供します。国際化をサポートし、WCAG 2.1 AAアクセシビリティ基準に準拠しています。

designlangはPlaywrightを活用したCLIで、ライブDOMからDTCGトークン、Tailwind設定、Figma変数、WCAG監査まで含めた統合デザイン言語システムを抽出・生成するオープンソースツール。

開発者向けのデザインシステムに関するブックマーク、リソース、記事、ツールの厳選された英語コレクション。デザインツール、デザイントークン、パターンライブラリ、コンポーネントテスト、書籍、講演などを網羅しています。

TinteはデザインシステムをAgent Pluginにコンパイルするツールです。リファレンスからアイデンティティを抽出し、SKILL.mdとtokens.cssを出力し、トークンをバイパスする色をリントします。また、shadcnプリセットやエディタテーマ等も出力可能です。

実際のウェブサイトやブランドから抽出されたDESIGN.mdファイルの精選コレクション。プロジェクトにDESIGN.mdをドロップするだけで、AIコーディングエージェントがそのブランドのビジュアルアイデンティティ、カラー、タイポグラフィ、レイアウトパターンに一致するUIを生成できます。

Better Designは、AIコーディングエージェントにデザインシステム、セマンティックCSSトークン、UI原則、WCAG準拠のレビュールールなどを提供するオープンソースのMCPサーバーおよびshadcn/uiレジストリです。31のテーマを搭載し、Claude CodeやCursorなどのMCPクライアントと連携します。

brandmdは、ウェブサイトのデザインシステムを抽出し、公式の@google/design.mdリンターに準拠したDESIGN.mdを生成するCLIツールです。Claude CodeやCursorなどのコーディングエージェントにUI実装前のブランドコンテキストを提供します。

GlassKitは、iOS 26のLiquid Glassにインスパイアされたグラスモーフィズム外観を持つ、依存関係のないCSSコンポーネントライブラリです。テーマ、デザイントークン、ユーティリティクラス、およびShadow DOM用のConstructable Stylesheetを提供します。

Figmaデザインシステムのinspectとbuildを実行するClaudeスキル。WCAG等6つの監査モジュールによるread-onlyチェックと、6フェーズのワークフローでデザインシステムの構築・拡張を行う。

Marigoldは、react-ariaとTailwind CSSをベースに構築されたMarigold Design SystemのReact実装です。このモノレポには、コンポーネントとテーマのパッケージ、Storybookワークスペース、Next.jsドキュメントサイト、Vitestテスト、およびChangesetsによるCI駆動のリリース機能が含まれています。