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