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 编程工具使用。