oh-my-design 将设计系统参考资料和技能安装到 AI 编码代理中。一条命令即可为 Claude Code、Codex、Cursor 和 OpenCode 添加 440+ 条公司设计参考资料、28 项技能和 20 个专家角色。生成便携的 DESIGN.md,包含理念、标记和组件契约。
好开源,值得被发现。
发现优质开源项目,匿名提交开源项目,认领编辑你的开源项目。
带着好奇心,发现开源世界。
THE FIRST COLLECTION这是一个基于原生 CSS 构建的轻量级、模块化且可定制的设计系统。它采用 CSS 变量、移动优先的响应式原则和无障碍实践,包含示例、设计令牌、构建与 lint 脚本、格式转换以及可直接通过 CDN 引入的合并 CSS 文件。
赫尔辛基设计系统(HDS)是赫尔辛基市政府开源的设计系统,提供可访问的React组件、CSS样式和设计令牌,以及文档和设计方案资源。
DesignMD 是一个 CLI 工具,能够从任意 URL 提取实时设计系统——包括颜色、排版、间距、断点和交互状态——并输出可供 AI 编程代理使用的便携式 DESIGN.md 文件。
CompoMo (@ds-mo/ui) 是一个框架无关的 Stencil.js Web 组件库,采用 TokoMo 设计令牌进行样式化,附带生成的 Angular、React 和 Vue 适配器以及 MCP 元数据服务器,属于 ds-mo 家族的一部分。
design-md-hub是一个开源仓库,收录了120个品牌的DESIGN.md规范文件,这些规格均从实际生产网站逆向提取,包含颜色、字体、组件和布局等详细信息。AI编码代理可直接读取这些PLAIN文本规范,生成符合品牌风格的用户界面。每个品牌文件夹还附带一个preview.html用于浏览器预览。
Tailgrids 是一个基于 Tailwind CSS 的开源 React UI 组件库,提供 100 多个生产就绪的可复制组件、UI 区块和模板,支持 TypeScript、无障碍访问、暗黑模式并配备 CLI 安装程序。
Chakra UI 是一个开源的 React 组件系统,旨在快速构建可访问的 Web 应用和 SaaS 产品。它提供可安装的组件包,支持 Next.js RSC,并采用 MIT 许可证。
Lightswind UI 是一个以英文文档编写的 React 组件库,通过 CLI 以源码形式分发。它提供 160 多个支持动画且无障碍的组件,并为 AI 编程工具提供 MCP 服务器。核心组件采用 MIT 许可,同时提供可选的 Pro 内容。
Codex 是 Wikimedia 的设计系统,提供 Vue 3 和 CSS 组件、设计令牌、图标以及 VitePress 文档站点。它支持国际化并符合 WCAG 2.1 AA 无障碍标准。
Cloudscape Design System 的 React 组件库,由 AWS 开源。提供可访问的现成 UI 组件和全局样式,用于构建大规模 Web 应用,文档位于 Cloudscape 网站。
Skeleton 是一个基于 Tailwind CSS 的自适应设计系统。它为流行的 Web 框架提供开箱即用的组件,并配备了文档、主题生成器和社区渠道。
Ark UI 是由 Chakra UI 团队维护的无样式、无头组件库,基于 Zag.js 状态机提供 45 多个符合无障碍标准的 UI 原语,且在 React、Solid、Vue 和 Svelte 中提供统一的 API。
Carbon 是 IBM 为产品和体验打造的开源设计系统。该 monorepo 提供了 React 和 Web Component 库、Sass 样式、设计令牌、图标、象形图以及用于构建一致界面的工具。
@alifd/next 是 Alibaba Fusion 为企业级中后台系统打造的可配置 React 组件库。它与 Fusion Design 主题包配合使用,使设计师与开发人员共享同一视觉源,支持 npm 或浏览器安装及按需导入。
Flowbite 是一个基于 Tailwind CSS 的开源 UI 组件库,提供由数据属性驱动的模态框、下拉菜单和日期选择器等交互组件,支持 vanilla JS API、TypeScript 类型、RTL 布局,并为 React、Vue、Svelte 和 Angular 提供绑定。
HeroUI Native 是一个基于 Apache-2.0 协议的 React Native UI 组件库,主打美观、快速且现代。它提供完整的文档、快速上手示例应用以及可用于在设备上探索组件及其变体的预览应用。
designlang 是一款基于 Playwright 的开源 CLI 工具,能够读取网站实时 DOM 并提取完整设计系统。它支持生成 DTCG 设计令牌、Tailwind 配置、Figma 变量、shadcn 主题及组件代码,同时具备 WCAG 无障碍对比度审计、多平台代码发射(iOS/Android/Flutter等)以及 MCP 服务器和 Chrome 扩展支持,专为设计系统审计与设计转代码工作流打造。
Arco Design Vue是基于Arco Design系统的Vue 3 UI组件库,提供60多个开箱即用的TypeScript组件,支持主题定制,通过npm包@arco-design/web-vue安装。
一个为开发者精心策划的英文设计系统资源集,涵盖设计工具、设计令牌(Design Tokens)、模式库、组件测试、书籍及演讲等相关文章和工具。