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