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