Vant は Youzan がオープンソース化したモバイル向け Vue コンポーネントライブラリで、EC とミニアプリのシーンに合わせて磨き込まれています。375px のデザインカンプを基準とし、主色の青（#1989FA）に #F7F8FA のページ下地、2px の角丸と 1px のヘアライン区切り線（#EBEDF0）が軽やかさを保ちます。44px のタッチターゲットが親指操作を保証し、cell リスト、tabbar、popup が典型的な「リスト優先」のモバイルレイアウトを構成します。価格の赤（#EE0A24）が取引のシーンにアクセントを添えます。モバイル EC と WeChat エコシステムのプロダクトに適しています。
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 EC アプリ
モバイル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.
✅ 適した用途
- モバイル Web
- EC のシーン
- WeChat ミニアプリ
❌ 適さない用途
- デスクトップの重量級管理画面
- モバイル優先でないプロダクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。