Vuetify 是 Vue 生態系的 Material Design 框架，v- 前綴元件覆蓋從應用列到資料表的完整體系：主藍（#1867C0）配 #5CBBF6 資訊色與 #4CAF50 成功色，Roboto 以 0.875rem 內文與帶字距的按鈕呈現，4px 基準的 12 點間距刻度與 0-24 級海拔陰影讓版面有精確的密度控制。適合希望「零設計基礎也能搭出規範介面」的 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 管理應用
Web 端Create 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 程式設計工具使用。