Quasar 是「一套程式碼跑遍所有端」的 Vue 框架：SPA、PWA、SSR、SSG、瀏覽器外掛乃至行動與桌面應用共用同一份程式碼。視覺上遵循 Material：主藍（#1976D2）配標準 Material 色板，Roboto 以 0.875rem 內文與中等字重按鈕，QGrid 版面、密集模式與經典 App Bar、抽屜、懸浮按鈕構成熟悉的 Material 版面。適合跨端交付與 Material 風格產品。
Quasar前端框架
提示詞範本
基礎範本
Design a Quasar-inspired interface. - Material Design for Vue: one codebase for SPA, PWA, mobile, and desktop; - #1976D2 primary with the Material color palette; - Roboto with 0.875rem body and medium-weight buttons; - Dense mode options, QGrid layouts, and Material elevations; - App bars, drawers, and floating actions in the classic Material layout. Colors: #1976D2, #FFFFFF, #F5F5F5, #212121 with #1976D2 accent. Typography: Roboto.
變體提示詞
📱 行動裝置
Design a mobile app with Quasar aesthetics. Use Quasar color identity with #1976D2 accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Quasar style. Use Quasar color identity with #1976D2 accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Quasar design language. Use Quasar color identity with #1976D2 accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Quasar visual identity. Use Quasar color identity with #1976D2 accents. Compelling, conversion-focused.
使用範例
Quasar 跨平台應用
Web 端Build a cross-platform app with Quasar style: app bar, navigation drawer, and touch-optimized Material components with #1976D2 accents.
Quasar 分析儀表板
儀表板Create an analytics dashboard with Quasar design language: QGrid layout, data tables, and Material elevation cards.
✅ 適用情境
- Vue 專案
- 跨平台應用
- Material Design 產品
❌ 不適用情境
- 純 Web 單端產品
- 非 Vue 生態系團隊
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。