Elastic UI（EUI）为 Kibana 与 Elasticsearch 生态而生：蓝色 #0077CC 承担主操作，浅灰 #F5F7FA 画布与 #343741 墨色文本构成安静的信息层，4px 到 12px 的分级圆角对应行内、控件与面板的层级。密集表格、筛选器和统计卡片让海量数据可读可控，适合日志分析与可观测性产品。
Elastic UI设计系统
提示词模板
基础模板
Design an Elastic UI (EUI)-inspired data interface. - #0077CC blue for primary actions and focus rings; - #F5F7FA canvas with #343741 ink and #D3DAE6 hairlines; - 8px radii for controls and 12px for panels; - Dense data tables, filter bars, and stat cards; - Kibana-style analytics and observability layouts. Colors: #0077CC, #F5F7FA, #D3DAE6, #343741 with #0077CC accent. Typography: Inter.
变体提示词
📱 移动端
Design a mobile app with Elastic UI aesthetics. Use Elastic UI color identity with #0077CC accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Elastic UI style. Use Elastic UI color identity with #0077CC accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Elastic UI design language. Use Elastic UI color identity with #0077CC accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Elastic UI visual identity. Use Elastic UI color identity with #0077CC accents. Compelling, conversion-focused.
使用示例
EUI 数据表格后台
仪表板Build a data table admin with Elastic UI style: #F5F7FA canvas, dense tables, filter bar, stat cards, and #0077CC primary actions.
EUI 日志分析控制台
Web 端Design a log analytics console with EUI aesthetics: query bar, facet filters, dense result rows, and clear focus rings in #0077CC.
✅ 适合场景
- 日志与可观测性平台
- 数据密集型后台
- 搜索与分析产品
❌ 不适合场景
- 情感化消费产品
- 轻量内容站点
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。