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 クロスプラットフォームアプリ
WebBuild 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 コーディングツールに渡せます。