Vuetify は Vue エコシステムの Material Design フレームワークで、v- プレフィックスのコンポーネントがアプリバーからデータテーブルまで完全な体系をカバーします。主色の青（#1867C0）に #5CBBF6 の情報色と #4CAF50 の成功色、Roboto が 0.875rem の本文と字間を伴うボタンを担い、4px 基準の 12 ポイントの余白スケールと 0〜24 級のエレベーションシャドウが精密な密度制御を可能にします。「デザインの基礎がなくても規範的な UI を組み上げたい」Vue チームに適しています。
Vuetifyフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a Vuetify-inspired interface. - Material Design for Vue with v-prefixed components; - #1867C0 primary, #5CBBF6 info, #4CAF50 success; - Roboto with 0.875rem body and letter-spacing on buttons; - 12-point spacing scale (4px base), elevation 0-24 shadows; - Data tables, v-cards, and app bars with precise density control. Colors: #1867C0, #5CBBF6, #FFFFFF, #1E1E1E with #1867C0 accent. Typography: Roboto.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Vuetify aesthetics. Use Vuetify color identity with #1867C0 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Vuetify style. Use Vuetify color identity with #1867C0 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Vuetify design language. Use Vuetify color identity with #1867C0 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Vuetify visual identity. Use Vuetify color identity with #1867C0 accents. Compelling, conversion-focused.
使用例
Vuetify データダッシュボード
ダッシュボードBuild a dashboard with Vuetify style: v-data-table, navigation drawer, stat cards, and #1867C0 accent color.
Vuetify 管理アプリ
WebCreate an admin application with Vuetify design language: app bar, v-navigation-drawer, forms, and Material elevation.
✅ 適した用途
- Vue プロジェクト
- Material Design アプリ
- データ密度の高い管理画面
❌ 適さない用途
- React 技術スタックのプロジェクト
- 反 Material の個性的なビジュアル
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。