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 编程工具使用。