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