Headless UI は Tailwind Labs が手がけた、完全にノンスタイルでありながらアクセシビリティを最大限に高めたコンポーネント群です。Menu、Listbox、Combobox、Switch などが振る舞いとトランジションアニメーションをまとめて提供し、見た目は完全に Tailwind に委ねます。スカイブルー（#38BDF8）は公式サンプルの中のひとつの彩りで、enter／leave のトランジションと data-state を使ったスタイルはあなたが制御します。コントロールは rounded-md と 14〜16px の Inter で描かれます。スキンを自作しつつインタラクションを再発明したくない Tailwind プロジェクトに適しています。
Headless UIフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a Headless UI-inspired interface. - Unstyled accessible components from Tailwind Labs: Menu, Listbox, Combobox, Switch; - Sky #38BDF8 accent over a neutral gray scale; - Smooth enter/leave transitions and data-state styling; - Inter with 14-16px sizes, rounded-md controls; - Pairs natively with Tailwind utility styling. Colors: #38BDF8, #0F172A, #F8FAFC, #E2E8F0 with #38BDF8 accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Headless UI aesthetics. Use Headless UI color identity with #38BDF8 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Headless UI style. Use Headless UI color identity with #38BDF8 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Headless UI design language. Use Headless UI color identity with #38BDF8 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Headless UI visual identity. Use Headless UI color identity with #38BDF8 accents. Compelling, conversion-focused.
使用例
Headless UI 設定パネル
WebBuild a settings panel with Headless UI components: switches, listboxes, and transition effects styled with Tailwind and #38BDF8 accents.
Headless UI マーケティングページ
ランディングページCreate a marketing page with Headless UI design language: dropdown navigation, modal dialogs, and smooth enter/leave animations.
✅ 適した用途
- Tailwind CSS
- アクセシブルなコンポーネント
- React と Vue
❌ 適さない用途
- 既成スタイルが必要な高速開発
- 複雑なデータテーブルのシーン
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。