Spark UI は Radix UI のアクセシブルなプリミティブと Tailwind CSS の上に構築された React デザインシステムで、モジュール性とアクセシビリティを強調しています。コンポーネントは必要な分だけインストールして導入でき、統一されたデザイントークンがスタイルの一貫性を保証します。Web とモバイル（Android/iOS）の両方をカバーし、ビジュアルはクリーンでモダン、可読性を最優先し、オレンジ（#FF6B35）をアクセントにします。分割導入の自由度が必要な React チームに適しています。
Spark UIフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a Spark UI-inspired interface. - React components with Radix UI primitives for accessibility; - Tailwind CSS styling with consistent design tokens; - Modular architecture: install only what you need; - Web + Mobile support (Android & iOS); - Clean, modern aesthetic with emphasis on readability. Colors: #FF6B35, #10B981, #3B82F6, #8B5CF6 with #FF6B35 accent. Typography: system-ui.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Spark UI aesthetics. Use Spark UI color identity with #FF6B35 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Spark UI style. Use Spark UI color identity with #FF6B35 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Spark UI design language. Use Spark UI color identity with #FF6B35 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Spark UI visual identity. Use Spark UI color identity with #FF6B35 accents. Compelling, conversion-focused.
使用例
Spark UI React アプリ
WebBuild a React app with Spark UI design language, Radix primitives, and #FF6B35 color system.
Spark UI ダッシュボード
ダッシュボードCreate a dashboard using Spark UI style with modular components and Tailwind CSS.
✅ 適した用途
- フレームワークエコシステム
- React プロジェクト
- アクセシブルな UI
❌ 適さない用途
- React 以外の技術スタックのプロジェクト
- ピクセルレトロのゲームページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。