FlyonUI は daisyUI 式のセマンティックなクラス名と Headless UI の JS インタラクションをひとつにした Tailwind コンポーネントライブラリです。btn、card、alert といったクラス名がすぐ使え、メニュー、モーダル、ドロップダウンなど 60 以上のインタラクティブコンポーネントは Headless UI が駆動します。React と Vue の両方に対応し、ダークモードは CSS 変数のテーマで切り替え、主色はインディゴ（#4F46E5）です。最小限の設定でひと揃いのインタラクティブコンポーネントを得たいチームに適しています。
FlyonUIフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a FlyonUI-inspired interface. - Semantic Tailwind class names like daisyUI: btn, card, alert; - Headless UI JavaScript interactions for menus, modals, dropdowns; - React and Vue compatible; - 60+ interactive components with clean defaults; - Dark mode support with CSS variable theming. Colors: #4F46E5, #10B981, #F59E0B, #EF4444 with #4F46E5 accent. Typography: system-ui.
バリエーションプロンプト
📱 モバイル
Design a mobile app with FlyonUI aesthetics. Use FlyonUI color identity with #4F46E5 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with FlyonUI style. Use FlyonUI color identity with #4F46E5 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with FlyonUI design language. Use FlyonUI color identity with #4F46E5 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with FlyonUI visual identity. Use FlyonUI color identity with #4F46E5 accents. Compelling, conversion-focused.
使用例
FlyonUI Web アプリ
WebBuild a web app with FlyonUI design language, semantic Tailwind classes, and #4F46E5 color system.
FlyonUI ダッシュボード
ダッシュボードCreate a dashboard using FlyonUI style with interactive components and dark mode theming.
✅ 適した用途
- フレームワークエコシステム
- 高速プロトタイピング
- マルチフレームワークプロジェクト
❌ 適さない用途
- インタラクションを完全に自作するシーン
- Tailwind を使わないプロジェクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。