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 编程工具使用。