deeplethe/solid-glass 建立不到 30 天累積 2,001 顆星，主打 AI 應用程式設計系統

背景

deeplethe/solid-glass 的專案說明表示，它是「A design system for AI applications」，也就是替 AI 應用程式統一介面外觀與元件的一套設計系統。風格定位在 flat design（扁平設計，不帶立體質感的平面色塊）與 liquid glass（近乎透明的玻璃質感）之間：只讓輪廓透出來，讓人看得出是玻璃，又不妨礙閱讀。專案說明提到，AI 應用程式的資訊一直在變，包括回應串流（邊產生邊顯示）、agent（能自行執行任務的 AI 程式）做事，以及等待人下決定。 GitHub 熱門專案

發生什麼事

GitHub 星數（使用者按星標記收藏的數量）是這則消息的重點：deeplethe/solid-glass 建立不到 30 天，截至本站 2026 年 10 月 18 日記錄時，星數累計 2,001。專案建立於 2026 年 10 月 12 日，主要語言是 TypeScript（加上型別檢查的 JavaScript），授權為 MIT（寬鬆的開源授權）。本站只記錄這個時間點的觀察值，來源沒有提供其他時間點的星數。 GitHub 熱門專案

重點內容

專案說明列出四項風格特徵：Tactility、Precision、Physicality、Materiality，分別對應觸感、精準、實體感與材質。實作上，Solid Glass 是一個樣式檔，專案說明表示整套以輕量 CSS（網頁樣式語言）建構，可搭配現有的 shadcn/ui（一套 React 介面元件庫）元件，亮色與暗色模式都能用。專案說明表示，它靠 shadcn/ui 元件上的 data-slot（標示元件各部分的屬性）與元件既有的 class（樣式類別名稱）找到各個部分，所以現有元件不需要改動。 GitHub 熱門專案

安裝流程從 shadcn/ui 專案開始，專案說明列出的環境是 React 19（網頁介面程式庫）、Tailwind CSS 4（樣式工具）與 Base UI components（shadcn/ui 使用的一套基礎介面元件）。先執行 npx shadcn@latest init（用 npx 執行 shadcn 的初始化指令），再執行 npx shadcn@latest add deeplethe/solid-glass/solid-glass 加入樣式檔。接著要在 tailwindcss、tw-animate-css 與 shadcn/tailwind.css 之後匯入 ./solid-glass.css，並刪除 shadcn init 寫入的 :root 和 .dark 顏色變數（CSS 中定義亮色與暗色主題顏色的變數），因為 Solid Glass 定義了同名變數。 GitHub 熱門專案

專案也附帶自己的元件。status-glyph 是三個光點，用來表示一輪對話正在進行以及在做什麼。panel、tag、dot-loader 分別是最薄的面板、小標籤與等待用的一排點。另有給 agent 介面用的 turn-status、composer、tool-steps、diff-view、ask-card、context-ring、task-notice、reasoning，涵蓋狀態列、輸入框、執行步驟、差異對照、提問卡片、上下文用量、任務通知與思考過程。Create 頁面可調整厚度、色調、圖表顏色、字型、圓角、邊緣與模糊，並產生對應的 CSS。 GitHub 熱門專案

對使用者的意義

專案說明提供了幾個入口：可以先看 Material 頁面了解玻璃面板的做法，用 Create 頁面試調參數，再到 blocks 頁面看、讀並複製整個畫面範例。想在本機跑網站，說明列出 npm install、npm run dev（位址為 http://localhost:5191）與 npm run build，後者輸出到 dist/。 GitHub 熱門專案

限制與未定事項

專案說明列出的前提是從 shadcn/ui 專案開始，環境為 React 19、Tailwind CSS 4 與 Base UI components。說明也指出，button、input、tabs、dialog、dropdown-menu、sheet、sidebar 和部分表單控制項與原版 shadcn/ui 有小幅差異，但樣式檔不依賴這些差異。專案說明表示暗色是設計本意，亮色模式也有提供。 GitHub 熱門專案