Mantine 是功能完備的 React 元件庫，120+ 元件、hooks 與工具函式覆蓋從表單到富文字的日常需求。設計上以 Inter 配寬裕行高、14px 基準字級，主藍（#339AF0）展開 10 級色階；4px 預設圓角、16px 卡片內距、1px 細描邊克制清爽，明暗主題被當作同等公民設計。適合追求開箱即用與深淺主題一致性的 React 應用。
Mantine前端框架
提示詞範本
基礎範本
Design a Mantine-inspired interface. - Inter with generous line-height; 14px base, 600-weight headings; - #339AF0 primary across a 10-shade palette; - 4px default radius, 16px card padding, subtle 1px borders; - Light and dark themes designed as equal citizens; - Clean forms, segmented controls, and gradient-free surfaces. Colors: #339AF0, #FFFFFF, #F8F9FA, #212529 with #339AF0 accent. Typography: Inter.
變體提示詞
📱 行動裝置
Design a mobile app with Mantine aesthetics. Use Mantine color identity with #339AF0 accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Mantine style. Use Mantine color identity with #339AF0 accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Mantine design language. Use Mantine color identity with #339AF0 accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Mantine visual identity. Use Mantine color identity with #339AF0 accents. Compelling, conversion-focused.
使用範例
Mantine SaaS 儀表板
儀表板Build a SaaS dashboard with Mantine style: AppShell layout, stat cards, segmented controls, and #339AF0 accent color.
Mantine 設定面板
Web 端Create a settings panel with Mantine design language: form sections, switches, and dark-mode-ready surfaces with Inter typography.
✅ 適用情境
- React 專案
- SaaS 產品
- 深色模式應用
❌ 不適用情境
- 非 React 專案
- 純 CSS 極簡網站
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。