Material UI（MUI）是 React 上最成熟的 Material Design 實作，也被廣泛用作可深度客製的通用元件庫。它保留 Material 的靈魂：海拔陰影、漣漪回饋與 4px 圓角；Roboto 字階以 14px 內文、500 字重按鈕呈現，主藍（#007FFF）覆蓋白畫布與 #F5F5F5 表面，間距走 8px 網格，密集資料表格、Chip 與懸浮操作按鈕是標準配件。適合中後台與 Android 風格產品。
Material UI前端框架
提示詞範本
基礎範本
Design a Material UI (MUI)-inspired interface. - Material Design with React: elevation shadows, ripple feedback, and 4px corner radii; - Roboto type scale with 14px body and 500-weight buttons; - Default palette #007FFF primary over #FFFFFF canvas with #F5F5F5 surfaces; - 8px spacing grid, contained buttons with sentence-case labels; - Dense data tables, chips, and floating action buttons for primary actions. Colors: #007FFF, #F5F5F5, #FFFFFF, #121212 with #007FFF accent. Typography: Roboto.
變體提示詞
📱 行動裝置
Design a mobile app with Material UI aesthetics. Use Material UI color identity with #007FFF accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Material UI style. Use Material UI color identity with #007FFF accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Material UI design language. Use Material UI color identity with #007FFF accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Material UI visual identity. Use Material UI color identity with #007FFF accents. Compelling, conversion-focused.
使用範例
Material UI 儀表板
儀表板Build an admin dashboard with Material UI style: dense data tables, status chips, elevation cards, and #007FFF accent color.
Material UI 應用外殼
Web 端Create a web app shell with Material UI design language: app bar, navigation drawer, elevated cards, and Roboto typography.
✅ 適用情境
- React 專案
- 企業應用
- Material Design 產品
❌ 不適用情境
- 反 Material 風格的品牌設計
- 輕量無依賴的靜態頁
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。