Flowbite 是建立在 Tailwind CSS 之上的组件库，以「复制即用」的模式提供从仪表盘、表单到营销区块的成套模式；主蓝（#1A56DB）统领 Gray 50-900 灰阶，组件多用 8px 圆角与克制阴影，深色模式通过 dark: 变体一等公民地支持。适合快速交付管理后台与营销站点的团队。
Flowbite前端框架
提示词模板
基础模板
Design a Flowbite-inspired interface. - Tailwind CSS component library with copy-paste patterns; - #1A56DB primary over a gray 50-900 scale; - 8px radii, rounded-lg cards and buttons, subtle shadows; - First-class dark mode via dark: variants; - Dashboards, forms, and marketing blocks as standard fixtures. Colors: #1A56DB, #F9FAFB, #111827, #6B7280 with #1A56DB accent. Typography: Inter.
变体提示词
📱 移动端
Design a mobile app with Flowbite aesthetics. Use Flowbite color identity with #1A56DB accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Flowbite style. Use Flowbite color identity with #1A56DB accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Flowbite design language. Use Flowbite color identity with #1A56DB accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Flowbite visual identity. Use Flowbite color identity with #1A56DB accents. Compelling, conversion-focused.
使用示例
Flowbite SaaS 仪表板
仪表板Build a SaaS dashboard with Flowbite style: sidebar navigation, KPI cards, charts, and #1A56DB accent color.
Flowbite 营销区块
落地页Create a marketing page with Flowbite design language: hero, pricing tables, testimonials, and dark mode support.
✅ 适合场景
- Tailwind CSS
- 仪表盘
- 深色模式站点
❌ 不适合场景
- 非 Tailwind 的样式体系
- 复杂状态管理的重型应用
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。