Base UI 是 MUI 团队打造的下一代无样式库，专为与 Tailwind CSS 协作而生：组件零 CSS 主张、TypeScript 全类型安全，popup、select、slider、tabs 等模式同时提供 hooks 与组件两种形态，无障碍开箱即符合 WCAG 2.1。适合需要企业级品质底座、又要完全控制样式的 React 项目。
React开发者工具
提示词模板
基础模板
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 编程工具使用。