Tailwind CSS 把设计决策写进原子类：灰阶中性色承担全部背景与文字层，#2563EB 蓝只留给主操作，4px 基础圆角搭配极轻阴影，间距严格走在 4px 刻度上。界面因此干净、克制、有秩序，是最具代表性的现代 SaaS 视觉底座。
Tailwind CSS设计系统
提示词模板
基础模板
Design a Tailwind CSS-inspired interface. - Utility-first composition with consistent atomic spacing; - Neutral gray ramp (gray-50 to gray-900) for all surfaces; - #2563EB blue reserved for primary actions and links; - 4px radii, #E5E7EB hairlines, subtle shadows; - Clean SaaS and marketing layouts. Colors: #2563EB, #F9FAFB, #E5E7EB, #111827 with #2563EB accent. Typography: Inter.
变体提示词
📱 移动端
Design a mobile app with Tailwind CSS aesthetics. Use Tailwind CSS color identity with #2563EB accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Tailwind CSS style. Use Tailwind CSS color identity with #2563EB accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Tailwind CSS design language. Use Tailwind CSS color identity with #2563EB accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Tailwind CSS visual identity. Use Tailwind CSS color identity with #2563EB accents. Compelling, conversion-focused.
使用示例
Tailwind 数据仪表盘
仪表板Build a SaaS analytics dashboard with Tailwind style: #2563EB primary buttons, gray-50 canvas, 4px radii, and a clean card grid.
Tailwind 开发者落地页
落地页Design a developer tool landing page with Tailwind aesthetics: bold type hierarchy, blue-600 primary CTAs, and subtle gray borders.
✅ 适合场景
- SaaS 产品界面
- 营销落地页
- 设计系统快速搭建
❌ 不适合场景
- 需要强烈品牌个性的产品
- 复杂的数据可视化大屏
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。