如何使用 uiverse-io/galaxy一個(gè)超過 3000 個(gè)免費(fèi) UI 元素的寶藏庫相關(guān)地址名稱地址GitHub 倉庫源代碼uiverse-io/galaxy官網(wǎng)推薦瀏覽入口uiverse.io/MCP 服務(wù)器配置參考在 AI 工具的 MCP 配置中加入uiverse-mcp支持npx一鍵運(yùn)行uiverse-io/galaxy是 Uiverse.io 官方維護(hù)的 GitHub 倉庫收錄了超過3000 個(gè)由社區(qū)設(shè)計(jì)師貢獻(xiàn)的免費(fèi) UI 元素。所有組件均基于MIT 開源協(xié)議你可以自由用于個(gè)人或商業(yè)項(xiàng)目。一、這個(gè)倉庫里有什么倉庫按組件類型分門別類目前包含以下目錄分類說明Buttons按鈕Cards卡片Checkboxes復(fù)選框Forms表單Inputs輸入框Notifications通知提示Patterns背景圖案Radio-buttons單選框Toggle-switches開關(guān)Tooltips工具提示loaders加載動(dòng)畫每個(gè)組件都提供純 CSS或Tailwind CSS兩種實(shí)現(xiàn)方式不依賴額外的 JavaScript 庫集成成本極低。二、三種使用方式方式一手動(dòng)瀏覽與復(fù)制最通用適合所有開發(fā)者無需任何額外工具。瀏覽組件雖然可以直接在 GitHub 倉庫https://github.com/uiverse-io/galaxy 中查看分類文件夾但官方推薦在 Uiverse.io 官網(wǎng)https://uiverse.io/ 瀏覽。官網(wǎng)支持實(shí)時(shí)預(yù)覽和搜索體驗(yàn)更好。獲取代碼找到喜歡的組件后進(jìn)入詳情頁復(fù)制它的 HTML 和 CSS 代碼。集成到項(xiàng)目將 HTML 放入頁面結(jié)構(gòu)將 CSS 放入樣式文件或style標(biāo)簽即可。方式二使用 MCP 服務(wù)器最適合 AI 編程如果你在使用 Cursor、Claude Code 等 AI 編程工具可以通過配置 MCP 服務(wù)器讓 AI 助手直接調(diào)用這個(gè)組件庫。安裝配置在 AI 工具的 MCP 配置中加入uiverse-mcp支持npx一鍵運(yùn)行。自動(dòng)緩存首次使用時(shí)會(huì)自動(dòng)將galaxy倉庫克隆到本地并建立索引約 85MB后續(xù)使用速度很快。對(duì)話式使用直接用自然語言提需求即可。例如“我需要一個(gè)玻璃擬態(tài)風(fēng)格的定價(jià)卡片”AI 就能搜索到并返回完整的 HTML 和 CSS 代碼。方式三在設(shè)計(jì)工具中使用面向設(shè)計(jì)師如果你使用Figma可以在 Uiverse.io 上找到喜歡的元素直接復(fù)制其設(shè)計(jì)稿并粘貼到 Figma 項(xiàng)目中方便二次修改?？偨Y(jié)uiverse-io/galaxy是一個(gè)拿來即用的 UI 組件寶庫。無論你是手動(dòng)復(fù)制代碼的開發(fā)者、使用 AI 編程工具的效率黨還是習(xí)慣在 Figma 中工作的設(shè)計(jì)師都能找到適合自己的使用方式。免費(fèi)、開源、MIT 協(xié)議——沒有理由不試試看。核心地址速查源代碼倉庫https://github.com/uiverse-io/galaxy官方瀏覽與搜索平臺(tái)https://uiverse.io/