Vant 是有赞开源的移动端 Vue 组件库，专为电商与小程序场景打磨。它以 375px 设计稿为基准：主蓝（#1989FA）配 #F7F8FA 页面底，2px 圆角与 1px 发丝分割线（#EBEDF0）保持轻盈，44px 触控目标保证拇指操作，cell 列表、tabbar 与 popup 构成典型的「列表优先」移动版式，价格红（#EE0A24）点缀交易场景。适合移动电商与微信生态产品。
Vant前端框架
提示词模板
基础模板
Design a Vant-inspired interface. - Mobile-first Vue components for e-commerce and mini-programs; - #1989FA primary over #F7F8FA page background; - 375px design width, 2px radii, hairline 1px #EBEDF0 dividers; - Touch-friendly 44px targets, cell lists, tabbars, and popups; - Clean list-first layouts with red price accents. Colors: #1989FA, #F7F8FA, #EE0A24, #323233 with #1989FA accent. Typography: system-ui.
变体提示词
📱 移动端
Design a mobile app with Vant aesthetics. Use Vant color identity with #1989FA accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Vant style. Use Vant color identity with #1989FA accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Vant design language. Use Vant color identity with #1989FA accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Vant visual identity. Use Vant color identity with #1989FA accents. Compelling, conversion-focused.
使用示例
Vant 电商应用
移动端Build a mobile e-commerce app with Vant style: product lists, cart flows, and tabbar navigation with #1989FA accents.
Vant 会员中心
移动端Create a member center with Vant design language: cell groups, badges, and popup menus on #F7F8FA backgrounds.
✅ 适合场景
- 移动端网页
- 电商场景
- 微信小程序
❌ 不适合场景
- 桌面端重型后台
- 非移动优先的产品
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。