awesome-design-systems

優れたデザインシステム

目的

このスキルはビルダーではなく、検索可能なリファレンスカタログです。alexpate/awesome-design-systems を出典とする、公開デザインシステム185件をインデックス化し、その上に構造化されたフィルターを追加しています。主要なデザインシステムスキルである extract-design-system と design-system-patterns に具体的な先例を提供するために使用します。この2つのスキルがワークフローの「構築方法」を担い、このスキルは「すでに構築したのは誰か、それらは何と呼ばれているか、コードや仕様をどこで読めるか」を担います。

カタログの内容 — 主な統計

上流リポジトリから2026-04-19に取得しました。更新手順は末尾にあります。

• 185 件のデザインシステム
• 180 件がコード化された コンポーネント を公開
• 132 件が ソースコード を一般公開
• 85 件が デザイナーキット（Figma / Sketch / XD / Photoshop）を提供
• 77 件が ボイス＆トーン ／編集上の言葉遣いに関するガイダンスを文書化
• 4 つの上流機能フラグをすべてのエントリーに付与：コンポーネント · ボイス＆トーン · デザイナーキット · ソースコード

4つの機能フラグ — 意味と絞り込みに使うタイミング

• コンポーネント → システムがコード化されたサンプル（HTML、React、Web Componentsなど）を公開していることを示します。仕様だけでなく、実際に動くコードを読んだり、応用したりしたい場合に、この条件で絞り込みます。該当するエントリーは約97％（180/185）なので、このフラグで大きく絞り込めることはほとんどありません。基本条件として扱ってください。

• ボイス＆トーン → システムが編集上の語り口、マイクロコピーの慣習、言葉遣いのガイダンス、またはコンテンツの原則を文書化していることを示します。コンテンツスタイルガイドを作成する場合や、製品の言葉遣いに関する信頼できる例を探す場合に、この条件で絞り込みます（代表的なリファレンスは Mailchimp Content、Monzo Tone of Voice、Shopify Polaris です）。該当するエントリーは42％（77/185）のみなので、絞り込みに有効です。

• デザイナーキット → システムが、コンポーネントを反映したダウンロード可能な Figma / Sketch / XD / Photoshop ファイルを提供していることを示します。レイヤー構造、自動レイアウト、トークンの構成を調べるためのデザインツール用ソースファイルが必要な場合に、この条件で絞り込みます（特に充実したキットを公開しているのは、Material、Polaris、Atlassian、Porsche です）。該当するエントリーは46％（85/185）です。

• ソースコード → システムの実装リポジトリが公開されていることを示します（GitHub、Bitbucket、GitLab）。一般公開されていることと、制限のないライセンスで利用できることは同じではありません。ベンダーとして取り込む前に、必ず LICENSE を確認してください。該当するエントリーは71％（132/185）です。

このスキルを使う場面

次のようなユーザーの意図がある場合は、このスキルを読み込んでください。

• 「X はデザインシステムですか？ URL は何ですか？」 → references/all-systems.md
• 「ボイス＆トーンやコンテンツのガイダンスが充実したデザインシステムはどれですか？」 → references/with-voice-and-tone.md
• 「コンポーネント Y の参考にできる Figma キットを探してください」 → references/with-designers-kit.md
• 「コードを読めるオープンソースの React デザインシステムを見せてください」 → references/open-source.md
• 「フィンテック／行政／SaaS／旅行分野のデザインシステムの先例を3件挙げてください」 → references/notable-by-category.md
• 「{Polaris、Carbon、Material} は {空の状態、データテーブル、ボタンの階層} をどのように扱っていますか？」 → references/notable-by-category.md から始め、その後、該当システムのサイトを直接取得してください。
• 「自分のコンポーネントを実際のシステムと比較評価してください」 → 該当分野に合うものを references/notable-by-category.md から3～5件取得してください。

参照ルーティング表

質問ごとにファイルを正確に1つ読み込みます。ファイル間で内容が重複しており、すべて合わせると680行を超えるためです。

質問	ファイル	行数	内容
名前の検索、完全な一覧	references/all-systems.md	199	185件のシステムをアルファベット順に掲載。機能フラグとソースへのリンク付き
ボイス＆トーンの先例	references/with-voice-and-tone.md	81	編集上のボイスに関するガイダンス付きの77件のシステム
デザイナー向けキットの出典	references/with-designers-kit.md	89	Figma／Sketch／XDを提供する85件のシステム
OSSコードの参照	references/open-source.md	138	公開ソースコードとライセンスに関する警告付きの132件のシステム
分野・業界別の閲覧	references/notable-by-category.md	177	厳選した分類（大手テック、政府、フィンテック、SaaS、React、旅行など）

カテゴリ別の代表的なシステム

ファイルを読み込まずに全体像を把握できます。「例をN件挙げて」といった質問には、マニフェストから直接回答してください。カテゴリの全件リストを求められた場合にのみ、notable-by-category.md を取得します。

• 大手テック／プラットフォーム： Google Material、Shopify Polaris、IBM Carbon、GitHub Primer、Adobe Spectrum、Microsoft Fluent UI、GitLab Pajamas、AWS Cloudscape、Atlassian Design System、Alibaba Ant Design。
• 政府・公共部門： GOV.UK Design System、U.S. Web Design Standards (USWDS)、French Government Design System (DSFR)、Singapore Government Design System (SGDS)、Aurora (Government of Canada)、NASA Web Design System、NHS.UK Service Manual、Estonia Country Design Guidelines。
• エンタープライズ・SaaS： Atlassian、Salesforce Lightning、Workday Canvas、PatternFly (Red Hat)、VMware Clarity、SAP Fiori、Pluralsight、Morningstar、Elastic EUI、Thumbprint (Thumbtack)、Stacks (Stack Overflow)、Kaizen (Culture Amp)。
• OSSのReact／Webコンポーネントライブラリ： Chakra UI、Mantine、shadcn/ui、Radix、Blueprint (Palantir)、Uber Base Web、Grommet (HP)、Evergreen (Segment)、Reach UI、Shoelace、Semi Design、Reshaped、Untitled UI。
• 旅行・小売・ライフスタイル： Backpack (Skyscanner)、Kiwi.com Orbit、Just Eat PIE、Alaska Airlines Auro、Audi UI Kit、Porsche Design System、Decathlon Vitamin、BBC GEL、Financial Times Origami、BuzzFeed Solid。
• 金融・フィンテック： Monzo Tone of Voice、Mailchimp Content Styleguide、Santander Flame、Flexport Latitude、MongoDB Design System、Documenso、Intuit Harmony、Priceline Design System。
• 最も包括的（4つのフラグすべて）： Shopify Polaris、Google Material、IBM Carbon、Microsoft Fluent UI、Atlassian、GitLab Pajamas、HashiCorp Helios、Skyscanner Backpack、AWS Cloudscape、Firefox Photon、USWDS。
• ボイス＆トーンの基準： Mailchimp Content Styleguide、Monzo Tone of Voice、Shopify Polaris、Atlassian、Mailchimp Patterns、Duolingo（トーンのみ）、Starbucks Style Guide、Louder Than Ten Manual。

補完ルールとライセンス

• 主要スキルへの委譲。 extract-design-system と design-system-patterns は、フロントエンド／Webデザイン作業における主要な権威です。これらが担うのは「方法」です。このスキルが補完するのは、「誰が／何を／どこで」――実例と出典です。このスキルの推奨が主要スキルと矛盾する場合は、主要スキルに従ってください。
• ライセンス。 「ソースを閲覧可能」であることは、「使用するライセンスがある」ことを意味しません。オープンソースの132件の多くは閲覧できますが、寛容なライセンスではありません。コード、トークン、アセットをプロジェクトにコピーする前に、必ず LICENSE を確認してください。
• 見つからない項目についての誠実さ。 ユーザーがカタログにないシステム（例：Airbnb DLS、Nike Connect、社内向け Uber Base v2）を挙げた場合は、その旨を明確に伝えてください。URLを推測してはいけません。references/all-systems.md を案内するか、更新情報を上流リポジトリで検索するよう提案してください。

ソースと更新

• 信頼できる唯一の情報源：https://github.com/alexpate/awesome-design-systems（Unlicense — 実質的にパブリックドメインです）
• 上流データを更新します： curl -s https://raw.githubusercontent.com/alexpate/awesome-design-systems/master/README.md -o awesome-design-systems-readme.md
• 参照ファイルを再生成します：リポジトリのルートから python3 tools/parse.py を実行し、続けて python3 tools/build.py を実行します（上流の README の表を解析し、skills/awesome-design-systems/references/ の下に5つの参照ファイルを書き出します）。再生成後、上記の「captured」日付を更新してください。