Vant is Youzan's open-source Vue component library for mobile web apps, polished for e-commerce and mini-programs. It designs against a 375px canvas: primary blue (#1989FA) over a #F7F8FA page, 2px radii and hairline #EBEDF0 dividers keep things light, 44px touch targets respect the thumb, and cell lists, tabbars, and popups form the list-first mobile layout with red price accents (#EE0A24) for commerce.
VantFramework
Prompt Template
Base Template
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.
Variant Prompts
📱 Mobile
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.
📊 Dashboard
Design a dashboard with Vant design language. Use Vant color identity with #1989FA accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Vant visual identity. Use Vant color identity with #1989FA accents. Compelling, conversion-focused.
Usage Examples
Vant E-commerce App
MobileBuild a mobile e-commerce app with Vant style: product lists, cart flows, and tabbar navigation with #1989FA accents.
Vant Member Center
MobileCreate a member center with Vant design language: cell groups, badges, and popup menus on #F7F8FA backgrounds.
✅ Best For
- Mobile web
- E-commerce
- WeChat mini-programs
❌ Avoid For
- Heavy desktop back offices
- Non-mobile-first products
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.