PrimeVue は Vue 3 で最もデータコンポーネントが充実した UI ライブラリです。DataTable、Tree、OrganizationChart などの複雑なコントロールがすぐに使え、Aura テーマプリセットはエメラルド（#10B981）にスレートグレーを組み合わせます。6px の角丸、軽いシャドウ、1px のサーフェスボーダーがモダンな印象を保ち、テーマデザイナーは unstyled と pass-through の 2 種類の深いカスタマイズモードをサポートします。データ密度の高い Vue の管理画面と可視化管理システムに適しています。
PrimeVueフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a PrimeVue-inspired interface. - Vue 3 components with the Aura theme preset; - Emerald #10B981 primary over a slate gray scale; - 6px radii, subtle shadows, 1px surface borders; - Rich data components: DataTable, Tree, OrganizationChart; - Theme designer with unstyled and pass-through modes. Colors: #10B981, #F8FAFC, #1E293B, #64748B with #10B981 accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with PrimeVue aesthetics. Use PrimeVue color identity with #10B981 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with PrimeVue style. Use PrimeVue color identity with #10B981 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with PrimeVue design language. Use PrimeVue color identity with #10B981 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with PrimeVue visual identity. Use PrimeVue color identity with #10B981 accents. Compelling, conversion-focused.
使用例
PrimeVue データテーブルダッシュボード
ダッシュボードBuild a data dashboard with PrimeVue style: DataTable with sorting and filters, stat panels, and #10B981 accent color.
PrimeVue 企業管理画面
WebCreate an enterprise admin with PrimeVue design language: tree navigation, organization chart, and Aura theme surfaces.
✅ 適した用途
- Vue 3 プロジェクト
- データ密度の高いアプリ
- 企業ダッシュボード
❌ 適さない用途
- React 技術スタックのプロジェクト
- ミニマルなビジュアルを追求する軽量サイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。