awesome-design-systems

优秀设计系统

用途

这项技能是一个可搜索的参考目录，而不是构建工具。它索引了 185 个公开设计系统，数据来自 alexpate/awesome-design-systems，并在此基础上添加了结构化筛选条件。可用它为主要的设计系统技能——extract-design-system 和 design-system-patterns——提供具体的先例；这两项技能负责工作流中“如何构建”的部分。这项技能负责“谁已经构建了这类系统、它们叫什么，以及在哪里能查看其代码／规范”的部分。

目录内容——关键数据

数据于 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 是设计系统吗？它的网址是什么？” → references/all-systems.md
• “哪些设计系统有完善的语气与风格／内容指南？” → references/with-voice-and-tone.md
• “帮我找一个可以参考组件 Y 的 Figma 套件” → references/with-designers-kit.md
• “给我看看可以查看代码的开源 React 设计系统” → references/open-source.md
• “给我 3 个金融科技／政府／SaaS／旅游领域的设计系统先例” → references/notable-by-category.md
• “{Polaris、Carbon、Material} 如何处理{空状态、数据表格、按钮层级}？” → 先查看 references/notable-by-category.md，然后直接访问该系统的网站。
• “将我的组件与真实系统进行对比” → 从 references/notable-by-category.md 中选取 3–5 个匹配该领域的系统。

参考路由表

每个问题只能加载一个文件——这些文件内容有重叠，合计超过 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 个系统
开源代码阅读	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)。
• 开源 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 个参考文件）。重新生成后更新上方的“捕获日期”。