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 程式設計工具使用。