寫在前面
本文適合從事企業中後臺系統設計或者對這方面感興趣的設計師,以及在做前端元件化的開發小夥伴閱讀。給大家整理了一些Sketch UI Kit連結放在文末,作為小福利送給大家,感興趣的可以下載研究~

筆者近期在從事企業級中後臺產品的元件化設計,為了更好的開展工作,做了一些關於元件化和設計系統的市場調查,過程中收集了一些競品。現在把收集到的這些產品分享出來,目前不做深度分析和評價,對這方面感興趣的小夥伴可以另行研究或者新增本人微信(WeChat ID:627270092),相互交流學習。後面我也會結合自己的實際工作對於如何從0開始做一套Design System做一些技術和方法論的分享。
下面給大家分享13個關於前端設計系統的網站,開發框架涉及React、Vue、Angular、Bootstrap , 移動端和web端元件庫都有。
01 Ant Design 螞蟻出品

最近風頭正火的螞蟻金服在2018年年初更新的 Ant Design 3.0 , 基於Atomic Design思想打造的面向行業提供解決方案的設計系統,相信已經有跟多前端小夥伴已經嚐到了使用這套系統的甜頭。
官方提供的設計資源 Ant.Design.3.0.Components.sketch 密碼:yn5f
02 iView TalkingData的Aresn出品

Aresn的這套基於 Vue.js 的開源 UI 元件庫可以說是在Ant Design官方推出Vue實現之前對其實現方式的補充,當然現在螞蟻已經自己也實現了Vue版。但這並不妨礙iView的繼續發展。
無相關設計資源可供下載
03 Zan UI 有贊出品

Zent ( \ˈzent\ ) 是有贊 PC 端 WebUI 規範的 React 實現,提供了一整套基礎的 UI 元件以及一些常用的業務元件。目前我們有 50+ 元件,這些元件都已經在有讚的各類 PC 業務中使用,我們會在此基礎上,持續開發一些新元件。
無相關設計資源可供下載
Vant是一套輕量、可靠的移動端 Vue 元件庫。 具有以下特性:1.50+ 個經過有贊線上業務檢驗的元件;
2.單元測試覆蓋率超過 90%;
3.完善的文件和示例;
4.支援 babel-plugin-import;
5.支援 TypeScript;
6,支援 SSR;
04 Cube UI 滴滴出品

滴滴的移動元件庫,具有明顯的滴滴風格。感興趣的可以研究。
無相關設計資源可供下載
05 Element 餓了麼出品

官方提供的設計資源 Element UI Kit_v2.0.sketch 密碼:plnx
06 SHINEOUT

官方實現:React ,支援web端
07 飛冰 阿里出品

官方實現:React,支援web端
飛冰是一套基於 React 的中後臺應用解決方案,在阿里巴巴內部,已經有 270 多個來自幾乎所有 BU 的專案在使用。經過 2 年的發展,飛冰已經是中後臺 2.0 體系,這個階段中我們的目標是賦能企業、組織搭建自己的中後臺體系。飛冰包含了一條從設計端到開發端的完整鏈路,幫助我們的使用者快速搭建屬於自己的中後臺應用。
08 RSUITE

09 袋鼠UI 美團外賣出品

KangarooUI(又稱袋鼠UI) 是美團外賣元件生態平臺構建的基石,服務於提供標準化規範化的元件。當前推出的版本基於 Bootstrap 3.3.7 進行擴充套件,後續會持續推出Vue等版本。由於目前大部分業務線是jQuery和requireJs來進行開發的,所以引入袋鼠UI時,需要先引入jQuery(1.11.1以上版本)。另外需要特別注意的是袋鼠UI在1.0向2.0更新之後,所有 擴充套件元件 都必須通過 Kangaroo-Loader 進行載入。
10 Muse UI

基於 Vue 2.0 優雅的 Material Design UI 元件庫。Muse UI 擁有40多個UI 元件,用於適應不同業務環境。Muse UI 自定義主題方式極為優雅,僅需少量程式碼即可完成主題樣式替換。
11 CARBON IBM出品

官方實現:React、Angular ,支援web端
官方提供的設計資源 Carbon Design Kit.sketch 密碼:yyjj
12 Blueprint Palantir出品

官方實現:React ,支援web端
13 LIGHTNING Salesforce出品

官方實現:未知 ,支援web端和移動端
官方提供的設計資源 SLDS Component Library.sketch 密碼:frba
福利
筆者收集整理的一些關於搭建一套設計系統的元件庫參考 設計資源大禮包 密碼:46rq,歡迎下載~
下面是筆者個人微信,歡迎??掃碼來撩~

謝謝閱讀!希望讀完能對你有一點幫忙~