A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集，已收录 70 多个真实品牌系统，包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目，编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch，合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集，已收錄 70 多個真實品牌系統，包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案，編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch，合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。
Quick start快速上手快速上手クイックスタート
What it does
Awesome DESIGN.md is a curated collection of DESIGN.md analyses of popular brand design systems, covering 70+ real-brand systems. Copy one file into your project and let your coding agent generate a UI that matches that brand look.
How it works
DESIGN.md is a plain-text design system document introduced by Google Stitch. It is just a markdown file: no Figma exports, no JSON schemas, and no special tooling. Drop it into your project root and any AI coding agent or Google Stitch understands how your UI should look, because markdown is the format language models read best. Each file carries analyzed patterns, tokens, and rules, not only surface-level outputs.
How to use it
- Browse the collection by category, such as AI and LLM platforms, developer tools, backend and DevOps, or productivity and SaaS, and pick the brand feel you want.
- Copy the chosen DESIGN.md into your project, then tell your agent to build a page that looks like it.
- If you want a specific website covered, use the request route mentioned in the README.
Key points
- The count used here is 70+, not the badge figure of 84 shown on the repo page.
- DESIGN.md defines how a project should look and feel, while AGENTS.md defines how to build it; the two files play different roles.
- Each entry names its look in one line, for example warm terracotta and clean editorial layout for Claude, or black and white precision with Geist for Vercel.
它是做什么的
Awesome DESIGN.md 是一个精选合集，收录热门品牌设计系统的 DESIGN.md 分析，覆盖 70 多个真实品牌系统。把其中一个文件复制到项目中，就能让编程智能体生成符合该品牌风格的界面。
它怎么工作
DESIGN.md 是由 Google Stitch 提出的一种纯文本设计系统文档。它就是一个 Markdown 文件：不需要 Figma 导出、不需要 JSON 模式、不需要特殊工具。把它放进项目根目录，任何 AI 编程智能体或 Google Stitch 都能理解你的界面应该是什么样子，因为 Markdown 是大模型最擅长阅读的格式。每个文件都包含分析过的模式、设计令牌和规则，而不只是表面结果。
怎么用
- 按类别浏览合集，例如 AI 与大模型平台、开发者工具、后端与 DevOps，或效率与 SaaS，从中挑选你想要的品牌感觉。
- 把选中的 DESIGN.md 复制到项目中，然后告诉智能体按它的样子构建页面。
- 如果你想覆盖某个特定网站，可使用 README 中提到的申请途径。
关键要点
- 这里使用的数量是 70 多个，而不是仓库页面徽章上显示的 84。
- DESIGN.md 定义项目应该呈现什么外观和感觉，AGENTS.md 定义如何构建项目，两者职责不同。
- 每个条目都用一句话概括其风格，例如 Claude 是暖陶土色加干净的编辑式布局，Vercel 是黑白精确加 Geist 字体。
它是做什麼的
Awesome DESIGN.md 是一個精選合集，收錄熱門品牌設計系統的 DESIGN.md 分析，涵蓋 70 多個真實品牌系統。把其中一個檔案複製到專案中，就能讓程式設計智慧體產生符合該品牌風格的介面。
它怎麼運作
DESIGN.md 是由 Google Stitch 提出的一種純文字設計系統文件。它就是一個 Markdown 檔案：不需要 Figma 匯出、不需要 JSON 結構、不需要特殊工具。把它放進專案根目錄，任何 AI 程式設計智慧體或 Google Stitch 都能理解你的介面應該是什麼樣子，因為 Markdown 是大型模型最擅長閱讀的格式。每個檔案都包含分析過的模式、設計代幣與規則，而不只是表面結果。
怎麼用
- 按類別瀏覽合集，例如 AI 與大型模型平台、開發者工具、後端與 DevOps，或效率與 SaaS，從中挑選你想要的品牌感覺。
- 把選中的 DESIGN.md 複製到專案中，然後告訴智慧體按它的樣子建構頁面。
- 如果你想涵蓋某個特定網站，可使用 README 中提到的申請途徑。
關鍵要點
- 這裡使用的數量是 70 多個，而不是專案頁面徽章上顯示的 84。
- DESIGN.md 定義專案應該呈現什麼外觀與感覺，AGENTS.md 定義如何建構專案，兩者職責不同。
- 每個條目都用一句話概括其風格，例如 Claude 是暖陶土色加乾淨的編輯式版面，Vercel 是黑白精確加 Geist 字體。
何をするのか
Awesome DESIGN.md は、人気ブランドのデザインシステムを DESIGN.md として分析したキュレーションコレクションで、70 以上の実ブランドシステムを扱う。1 ファイルをプロジェクトへコピーすれば、コーディングエージェントがそのブランドの見た目に合う UI を生成する。
仕組み
DESIGN.md は Google Stitch が導入したプレーンテキストのデザインシステム文書だ。単なる Markdown ファイルで、Figma エクスポートも JSON スキーマも特殊ツールも不要だ。プロジェクトルートへ置けば、AI コーディングエージェントや Google Stitch が UI のあるべき姿を理解する。Markdown は言語モデルが最もよく読む形式だからだ。各ファイルは表面的な出力だけでなく、分析済みのパターン、トークン、ルールを持つ。
使い方
- コレクションはカテゴリ別に見る。AI と LLM プラットフォーム、開発者ツール、バックエンドと DevOps、生産性と SaaS などから、欲しいブランドの雰囲気を拾う。
- 選んだ DESIGN.md をプロジェクトへコピーし、エージェントにその見た目でページを作るよう頼む。
- 特定のサイトを扱ってほしい場合は、README にあるリクエスト経路を使う。
押さえておきたい点
- ここで使う数は 70 以上で、リポジトリページのバッジに表示される 84 ではない。
- DESIGN.md はプロジェクトのあるべき見た目と感触を定義し、AGENTS.md は作り方を定義する。2 ファイルの役割は違う。
- 各項目は見た目を 1 行で示す。例は、Claude の温かいテラコッタとすっきりしたエディトリアルな版面、Vercel の白黒の精密さと Geist だ。
Supported platforms支持的平台支援的平台対応プラットフォーム
Generic
Notes备注備註備考
70+ real-brand design systems (Claude, Apple, Stripe, Linear, etc.); DESIGN.md concept from Google Stitch.70 多个真实品牌设计系统（Claude、Apple、Stripe、Linear 等）；DESIGN.md 概念来自 Google Stitch。70 多個真實品牌設計系統（Claude、Apple、Stripe、Linear 等）；DESIGN.md 概念來自 Google Stitch。実在ブランドのデザインシステム 70 以上（Claude、Apple、Stripe、Linear など）。DESIGN.md の概念は Google Stitch 由来。