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 程式設計工具使用。