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 フォームビルダー
WebBuild 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 コーディングツールに渡せます。