画ui哪家强【第二期AI大擂台】

邪恶猫猫头2026-03-10 19:471177分钟原创声明，未经作者许可禁止转载

本期主题以：明日方舟:终末地 为艺术风格

设计一款后台管理系统页面

分为两组，支持参考图片组，和提示词组 【有的ai不支持参考图】

为了展示全部页面，有些地方因为滑动的缘故人工调整了一下，请在脑中自动对齐【因为实际效果就是对齐的，只是我手动拉伸了一下，要不然会展示不完全】

测试均采用pro版ai，没有功能缩水，测试结果可能有误，仅供参考

旨在更快速的了解各种ai的上手实际效果，每一个ai都测试了5次，从中选择了最好的一次，已经做到尽量客观和保证完美了

代码纯html，外接mcp到pencil和figma改成可编辑ui也是能做的，但是太过麻烦了，没啥必要，基本上html画啥样到pencil里画的也就啥样

源代码不发了，如果评论区又要的我再挂帖子里，也就看个ui效果，代码没啥含金量都ai写的

欢迎指正和交流，本人也是资深ai爱好者，一起来聊天 [family-1]

支持参考图组

提示词

使用这个设计风格，创建一个后台管理系统的页面，给我一个单独html文件

豆包

Gemini-3.1-pro-prieview

Gemini-3-pro

GPT-5.4-high

Kimi-2.5-thinking

提示词组

提示词

请你扮演资深 UI/UX 设计师与前端开发工程师，生成一个“后台管理系统首页 Dashboard”的完整单文件 HTML 页面。

整体视觉请参考一种“白 + 工业机械黄（#F4F000） + 浅灰 + 深灰文字”的海报式工业排版风格。页面气质要接近高端平面设计海报，而不是传统深色 SaaS 后台。只借鉴视觉语言，不要出现任何现成品牌、游戏、Logo、版权标题或现成宣传语。

请直接输出完整可运行的 HTML5 代码，包含内联 CSS 和必要 JavaScript，不要解释，不要拆分文件。

这次请严格执行以下要求：

一、配色要求
1. 页面必须是明亮主题，以白色、浅灰、工业机械黄（#F4F000）为主。
2. 白色和浅灰面积至少占整页 70%，黄色作为高冲击视觉块和强调色。
3. 黑色只允许用于文字、少量细线、少量标签、极少数标题强调，不能成为大面积背景。
4. 禁止做成黑黄为主的暗色工业风。
5. 禁止深色侧边栏、深色顶部栏、深色大面积图表底板。
6. 允许使用非常少量中灰色做结构分层，允许极少量青色或品红作为点缀，但不能抢主色。

二、视觉风格要求
1. 风格必须是“海报化后台界面”，不是普通企业管理系统模板。
2. 使用超大英文背景字，浅灰色或极淡灰色，允许裁切出屏幕。
3. 中文标题必须粗黑、大号、强排版，形成画面主焦点。
4. 背景中加入细网格线、斜线纹理、几何切割、编号、信息条、条码感细节。
5. 整体要更像“印刷海报 + 数据层叠加”，不要像“常规仪表盘换了个黄色主题”。

三、布局要求
1. 左侧保留窄导航栏，但必须是浅色体系：
- 背景用白色或极浅灰
- 激活项用黄色条、黑字、灰线表现
- 不要黑底导航

2. 顶部栏也必须是浅色体系：
- 白底或浅灰底
- 显示 控制中心 / CONTROL PANEL
- 包含搜索、通知、状态标签、管理员、时间
- 风格细线、标签化、印刷感，不要深色工具栏

3. Hero 首屏必须是最强视觉区：
- 以白色或浅灰为底，并叠加一块大面积工业机械黄（#F4F000）几何区域
- 加入超大浅灰英文背景字，例如 CONTROL / SYSTEM / FIELD / DATA
- 前景放粗黑中文大标题，例如“系统总览”或“实时控制台”
- 标题要压住背景元素，形成前后层次
- 增加一条大面积浅灰信息带或白灰横向带，像海报腰封
- 关键指标不能做成普通四宫格卡片
- 请改成错位的数据条、横向信息模块、叠层标签块
- 至少一个数据模块跨宽显示，至少一个模块和标题或信息带发生重叠

4. 图表区域：
- 用非对称布局，左侧一张大折线图，右侧上下两张小图
- 图表容器必须是白底或浅灰底，细线边框
- 图表标题像工业印刷标识，不要常规深色卡片
- 可使用 ECharts CDN

5. 下方内容区：
- 左侧待处理事项
- 右侧最新告警 / 操作日志
- 样式偏白底表单、浅灰分割线、黄色强调
- 不要黑色大表格底板

6. 底部区域：
- 简洁版权信息
- 一条工业排版感状态线
- 保持浅色体系

四、风格禁令
1. 不要深色主题
2. 不要黑色主背景
3. 不要大面积黑色侧边栏和黑色顶部栏
4. 不要玻璃拟态
5. 不要蓝紫赛博风
6. 不要圆润卡片风
7. 不要平均分栏的传统 Dashboard 模板
8. 不要看起来像“深色后台改成黄色点缀”

五、实现要求
1. 使用语义化 HTML5
2. 使用内联 CSS 和少量原生 JavaScript
3. 优先使用 CSS Grid 和 Flex
4. 不使用外部图片
5. 尽量用 CSS 网格、色块、线条、纹理、几何构图
6. 文案必须真实，不要 lorem ipsum
7. 动效克制，只保留轻微悬停、数字计数、图表淡入
8. 桌面端 1440px 视觉优先，同时适配移动端
9. 不使用外部字体加载，优先系统字体

最后强调：
这是一张“白黄灰主导的海报式后台首页”。
请让页面看起来明亮、理性、平面、前卫。
视觉焦点顺序必须是：超大中文标题 → 黄色几何主块 → 灰色信息带 → 数据模块 → 背景英文排版。
请直接输出完整 HTML，不要解释。
禁止出现黑底侧边栏、黑底顶部栏、黑底图表卡片，黑色仅用于文字和细节线条。