PrimeVue 是 Vue 3 上資料元件最豐富的 UI 庫：DataTable、Tree、OrganizationChart 等複雜控制項開箱即用，Aura 主題預設以祖母綠（#10B981）搭配石板灰；6px 圓角、輕陰影與 1px 表面描邊保持現代觀感，主題設計器支援 unstyled 與 pass-through 兩種深度客製模式。適合資料密集型 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 企業管理後台
Web 端Create an enterprise admin with PrimeVue design language: tree navigation, organization chart, and Aura theme surfaces.
✅ 適用情境
- Vue 3 專案
- 資料密集應用
- 企業儀表板
❌ 不適用情境
- React 技術堆疊專案
- 追求極簡視覺的輕量網站
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。