Base UI 是 MUI 團隊打造的下一代無樣式庫，專為與 Tailwind CSS 協作而生：元件零 CSS 主張、TypeScript 完整型別安全，popup、select、slider、tabs 等模式同時提供 hooks 與元件兩種形態，無障礙開箱即符合 WCAG 2.1。適合需要企業級品質底座、又要完全控制樣式的 React 專案。
Base UI前端框架
提示詞範本
基礎範本
Design a Base UI-inspired interface. - Unstyled headless components with zero CSS opinions — full Tailwind integration; - Built by MUI (Material UI) team with enterprise-grade quality; - TypeScript-first with complete type safety; - Hooks and components for common patterns: popup, select, slider, tabs; - WCAG 2.1 accessibility compliance out of the box. Colors: #007FFF, #10B981, #F59E0B, #EF4444 with #007FFF accent. Typography: system-ui.
變體提示詞
📱 行動裝置
Design a mobile app with Base UI aesthetics. Use Base UI color identity with #007FFF accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Base UI style. Use Base UI color identity with #007FFF accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Base UI design language. Use Base UI color identity with #007FFF accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Base UI visual identity. Use Base UI color identity with #007FFF accents. Compelling, conversion-focused.
使用範例
Base UI 表單建構器
Web 端Build a form builder with Base UI design language, unstyled inputs, and #007FFF color system.
Base UI 儀表板
儀表板Create a dashboard using Base UI style with headless select, slider, and tabs components.
✅ 適用情境
- 框架生態系
- 設計系統底座
- 自訂設計系統
❌ 不適用情境
- 需要開箱即用元件樣式的團隊
- 非 React 生態系專案
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。