SA Skill Atlas GitHub skill index
EN
返回 前端

设计系统

前端框架、组件系统、Web 性能和浏览器应用架构。

6 仓库 前端 更新于 7月16日

二级分类

全部 前端 165
框架 113 UI 组件 13 设计系统 6 构建工具 1 状态与数据 0 综合 32
专题指南

如何使用这个设计系统索引

设计系统页面收录了 GitHub 上较受关注的开源项目，并按标签、语言和实际使用场景组织。它适合作为初筛入口，帮助你在打开具体仓库前先理解方向、比较工具并形成候选清单。

适合什么时候使用

  • 寻找与设计系统相关的成熟开源项目。
  • 比较仓库热度、语言、标签和适用场景。
  • 在深入技术调研前建立候选列表。
  • 通过相关专题发现相邻方向。

如何选择

  • 优先选择与你的语言、运行时和部署方式匹配的项目。
  • 采用前检查近期提交、Issue 活跃度、文档质量和许可证。
  • 星标只能说明流行度，不能直接代表适配度或生产可用性。
  • 这个专题中常见语言包括 TypeScript, CSS, JavaScript。
  • 常见标签包括 Frontend, JavaScript, TypeScript, agent-privilege, agentic-ai。

设计系统 仓库

6 个仓库按 GitHub stars 排序。需要实时筛选时可以打开交互式浏览器。

交互式浏览

system-design

设计系统

Learn how to design systems at scale and prepare for system design interviews

Frontendarchitecturedistributed-systemsengineeringinterviewinterview-preparation

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for software projects
  • Open GitHub for documentation, examples, and issues
45k stars
GitHub

design.md

设计系统

A format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.

FrontendTypeScript

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for TypeScript projects
  • Open GitHub for documentation, examples, and issues
26k stars TypeScript
GitHub

community-skeleton

设计系统

UVdesk Open Source Community Helpdesk is a comprehensive ticketing support system designed for everyone, offering robust features to streamline customer support and collaboration.

FrontendCSSagent-privilegebackbonejscustomer-supportdocker-runtime

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for CSS projects
  • Open GitHub for documentation, examples, and issues
19k stars CSS
GitHub

astryx

设计系统

An open source design system that's fully customizable and agent ready

FrontendTypeScript

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for TypeScript projects
  • Open GitHub for documentation, examples, and issues
9.1k stars TypeScript
GitHub

loop-engineering

设计系统

Practical patterns, starters & CLI tools for loop engineering with AI coding agents. Design systems that prompt and orchestrate agents (inspired by Addy Osmani and Boris Cherny). Includes loop-audit, loop-init, loop-cost.

FrontendJavaScriptagentic-aiai-agentsai-codinganthropic

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for JavaScript projects
  • Open GitHub for documentation, examples, and issues
8.0k stars JavaScript
GitHub

ant-design-landing

设计系统

:mountain_bicyclist: Landing Pages of Ant Design System

FrontendJavaScriptdesigneditorhome-pagehomepage

适合场景

  • Explore a popular frontend repository
  • Study implementation patterns for JavaScript projects
  • Open GitHub for documentation, examples, and issues
6.5k stars JavaScript
GitHub