页面一眼像 AI 做的？先把这 5 个设计决定说清楚

一个紫色渐变背景、三张卡片、一个超大标题，并不自动等于好设计。真正让页面看起来完整的，是信息层级一致、组件关系明确，以及实际操作时没有乱跳的状态。

UI UX Pro Max 的官方项目提供设计系统生成、样式与实现建议。本篇借用这个思路，给你一份可以用于任何设计 Agent 的原创简报；不要求先照搬某个页面，也不把工具推荐当成视觉保证。

1. 先说清楚这个页面要促成什么

同样是 AI 工具站，下载客户端、选择工具和阅读教程是三种不同目标。首屏只能有一个最主要动作，第二个动作要弱一级。把所有入口做成一样醒目的按钮，只会让人不知道先点哪个。

2. 内容密度比装饰更早决定布局

先列真实内容：标题最长多少字、卡片是否有价格、按钮有几个、是否需要状态。用最长标题和最复杂状态做一张样例。卡片在宽屏上不应无限拉宽，在手机上也不应为了固定列数把字挤成一条竖线。

3. 字体和间距需要成套

给出标题、正文、辅助文字三个层级，再约定卡片间距和内边距。正文不要靠浅灰小字堆信息；辅助文字可以弱一些，但必须在浅色和深色背景都可读。别让每个区块临时决定自己的字号和圆角。

4. 颜色先服务功能，再服务情绪

一组主色负责主要动作，中性色负责背景和文字，警告与错误有各自语义。渐变可以出现在品牌区域，但不要让“未配置”“加载中”“失败”都变成红色大块。图片占主角时，界面配色更应克制。

5. 状态也是设计的一部分

请同时画出默认、加载、空数据、失败和成功状态。点击后按钮变宽、整行突然增高、停止按钮挤掉主按钮，都是状态没有一起设计的结果。为图标、操作和提示预留位置，比事后补动画更重要。

把这份简报给 Agent

请为一个 AI 学习资料站制作首页。读者是希望直接找到方法的个人用户。
首屏目标：进入一份能立即使用的资料；次要入口：浏览全部内容。
视觉：深墨色文字、暖白底、单一蓝色强调色；避免每个区块都套大渐变。
内容：1 个专题横幅、3 个主题入口、8 张资料卡片。卡片包含封面、两行标题、两行简介。
先输出字号、颜色、间距、卡片宽度范围和按钮状态，再实现页面。
检查 390、768、1440 像素宽度；使用最长标题验证溢出；加载时不要改变卡片操作区高度。

使用 UI UX Pro Max 时怎么提要求

先说明行业、用户、目标动作和技术栈，让它生成设计系统，再决定页面细节。官方仓库有各 Agent 的安装入口和命令；如果你的项目已经有成熟设计系统，优先让它沿用现有规则，而不是重新引入一套视觉语言。

验收时做这三个动作

缩窄窗口检查是否横向溢出；连续切换加载和错误状态检查是否跳动；只看首屏五秒，能否说出页面用途和下一步。最终以真实浏览器里的表现为准，漂亮截图只是开始。

来源与更新

EasyAI 编辑部原创整理 · 2026-10-31 核对。案例、提示词和验收清单为原创；工具能力以项目官方说明为准，未宣称所有环境均已实测。

UI UX Pro Max · 官方仓库