Headless UI 由 Tailwind Labs 出品，是一套完全無樣式但可存取性拉滿的元件：Menu、Listbox、Combobox、Switch 等把行為與過渡動畫打包好，外觀完全交給 Tailwind；天藍（#38BDF8）是官方範例裡的一抹亮色，進入/離開過渡與 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 設定面板
Web 端Build 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 程式設計工具使用。