Element Plus 是 Vue 3 生態系最成熟的企業級元件庫：el-table、el-form、el-dialog 幾大體系覆蓋最完整的中後台需求；主藍（#409EFF）配 9 級淺色用於懸停與停用，4px 圓角、1px #DCDFE6 描邊、32px 緊湊控制項，表單驗證與表格排序篩選精度拉滿。適合中後台系統、管理平台與資料密集型業務介面。
Element Plus前端框架
提示詞範本
基礎範本
Design an Element Plus-inspired interface. - Vue 3 enterprise components: el-table, el-form, el-dialog; - #409EFF primary with 9-step light shades for hover and disabled states; - 4px radii, 1px #DCDFE6 borders, compact 32px default controls; - Precise form validation states and table sorting/filtering; - Dense back-office screens with clear hierarchy. Colors: #409EFF, #DCDFE6, #F5F7FA, #303133 with #409EFF accent. Typography: system-ui.
變體提示詞
📱 行動裝置
Design a mobile app with Element Plus aesthetics. Use Element Plus color identity with #409EFF accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Element Plus style. Use Element Plus color identity with #409EFF accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Element Plus design language. Use Element Plus color identity with #409EFF accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Element Plus visual identity. Use Element Plus color identity with #409EFF accents. Compelling, conversion-focused.
使用範例
Element Plus 管理後台
儀表板Build an admin dashboard with Element Plus style: el-table with filters, el-form validation, and #409EFF accent color.
Element Plus 表單流程
Web 端Create a multi-step form flow with Element Plus design language: el-steps, validated inputs, and dialog confirmations.
✅ 適用情境
- Vue 3 專案
- 企業後台
- 表單密集型流程
❌ 不適用情境
- React 技術堆疊專案
- 輕量極簡的小型頁面
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。