AI做UI为什么总像模板？设计师的5步修正法

AI 做出的 UI 像模板，往往不是少了一句‘高级感’，而是缺少具体任务、真实内容和明确的设计规则。先把主任务放回页面中心，再调整信息顺序；随后统一字体、颜色和组件，补齐异常状态，最后在窄屏与真实操作中修正。每轮只改有问题的区域，比连续要求‘更精致一点’更容易得到稳定结果。

拿设备借用申请页来说，员工要知道什么设备能借、哪天能取、怎样提交，而不是先看一屏经营数据。在Pixso 智能设计中生成可编辑稿后，可以围绕这些问题继续修改，把第一版页面逐步变成适合实际工作的设计。

为什么换了提示词，页面还是一个样

‘简洁、现代、科技感、企业级’只提供了很宽的视觉方向。没有说明用户是谁、要作出什么决定、哪些信息最重要，生成器就有很大的补全空间。相同的大标题、图标卡片、圆角和装饰背景因此可能出现在完全不同的业务里。问题不一定在这些元素本身，而在于它们没有回应当前任务。

还有一种模板感来自内容：页面换了 Logo，但仍写着‘高效协同、赋能团队、立即开启’，配上没有业务含义的数字。即使字体与配色已经变化，读者仍看不出这究竟是预约系统、采购系统还是客户管理工具。界面里的文字和数据，也是设计材料。

Anthropic 的前端设计 Skill同样强调从具体对象、用户和任务选择视觉方向，而不是无条件套默认外观。对设计师来说，更有用的做法不是列一张‘禁止渐变、禁止卡片’的清单，而是解释这一页为什么需要某种布局，以及什么信息不能被装饰淹没。

第一步：删掉不服务主任务的区块

先写出用户在页面上的一句任务：‘我需要借一台适合外出拍摄的相机，确认日期和取用地点，然后提交申请。’以这句话回看页面，便能判断哪些内容应该靠前。

如果初稿顶部是欢迎语、累计借用次数、设备增长率和部门占比，真正的设备列表却在第二屏，就算这些卡片做得很漂亮，信息顺序仍然不对。员工申请页应先展示可借设备与时间条件；资产利用率可以放在管理员的统计入口，不必让两类用户共用同一首屏。

删除区块之前，先确认它是否服务另一个必要任务。如果管理人员确实需要统计，不是把数据永久删掉，而是调整页面分工或收进相应视图。去模板感不能以牺牲业务信息为代价。

只调整当前设备借用申请页。使用者是需要申请设备的员工，主要动作是选择设备、确定借用时间并提交申请。把设备与日期条件放在主要内容区；移除申请页中的部门占比和经营趋势图，保留管理员入口。不要重做导航，也不要新增本次需求之外的统计模块。

第二步：用真实内容排出层级，而不是继续加阴影

结构确定后，把‘设备一、设备二’换成不同长度的名称，把统一的短说明换成实际需要读的条件。比如‘便携投影仪’与‘全画幅微单相机及双镜头拍摄套装’，对卡片宽度和文本换行提出的要求不同。只有两三字的占位文案，会掩盖许多布局问题。

设备名称、可借状态、取用地点和注意事项不应同样醒目。用户先识别设备，再判断时间与地点能否满足需要，最后决定是否申请。让名称承担识别，让状态支持判断，让辅助说明解释限制；不要给每条信息都加粗、描边和图标。

这时可以先调整三种间距：同一字段标签与内容靠近；相关字段形成一组；不同任务组之间留出更明显的分隔。留白的意义是说明关系，不是越大越高级。每个字段都放进独立卡片，反而可能把连续的填写流程切碎。

按钮文字也要表达动作。‘立即开启’可以改成‘选择借用日期’，确认页的‘提交’可以写成‘提交借用申请’。这些具体文字既减少理解成本，也让界面摆脱随处可用的宣传腔。提交之后的反馈应沿用同一个动作名称，不要忽然变成‘订单创建成功’。

如果只能选一项先改，优先改用户最容易误读的内容。例如‘剩余 2 台’究竟指当前库存，还是所选日期内可借数量？先把含义写准，再决定颜色和字号，比优化卡片阴影更重要。

第三步：把品牌规范落到可编辑的设计对象

品牌一致不等于给所有按钮刷上同一种颜色。页面标题、正文、辅助文字需要明确层级；主操作、普通操作、危险操作需要不同表达；相同字段和状态需要保持一致。把这些关系确定下来，AI 才有可沿用的设计规则。

在 Pixso 设计文件左侧打开 AI，选择‘设计稿模式’，再根据项目选择设计系统。已有团队规范时优先使用相应自定义系统；使用通用组件体系时，则选择匹配的体系，而不是每轮都改成另一种风格。生成后仍可以继续调整布局、字体和文案。入口与设置见设计稿模式说明。

设备借用页可以先确定：一个主要提交按钮、统一的日期字段样式、明确的可借与不可借状态、稳定的文本层级。然后只修改当前申请区域，保留已经确认的导航和设备详情。不要为了换视觉风格，把表单字段、状态名称和操作顺序一起改掉。

还要区分‘看起来相同’和‘结构上可以维护’。两个按钮颜色一样，不代表它们已经引用同一个组件；几处文字字号相同，也不代表它们都绑定了同一文本样式。需要团队持续维护时，应在设计对象上检查组件、样式和变量的使用情况，而不只对比截图。

保留当前导航、字段与申请顺序。仅统一申请区域的视觉规范：主要操作沿用项目主按钮，设备名称与辅助说明采用已有文本层级，日期冲突使用项目错误状态。不要新增第二套色板和圆角规则。无法对应到已有组件的部分，单独指出，避免悄悄创建外观相似的新组件。

参考图适合表达难以用文字描述的方向，但需要说明具体参考什么：信息密度、分组方法、文字节奏，还是图片处理。‘照着这张图做’容易把不适合当前任务的结构一起带进来，也不代表有权复制他人的标识、插画和整套界面。

第四步：补上真正会发生的状态

一张所有字段都刚好填对的成功页，很难说明系统是否好用。设备借用至少要考虑两类变化：用户输入带来的变化，以及系统结果带来的变化。日期不完整与库存请求失败不是同一个问题，不能都用一句‘操作失败，请重试’处理。

日期冲突时，应指出冲突发生在哪个区间，并让用户修改日期或查看其他设备。提交失败时，应保留已经填好的用途和时间，避免让人从头再来。设备暂时没有可借库存时，可以提供更换日期或返回设备列表的动作，而不是在空白页上放一个无意义的插画。

还要处理状态之间的关系。按钮显示‘提交中’时不应继续触发重复申请；提交成功后应给出申请记录的去向；需要审批与已获批准不能使用相同的成功提示。对于本例，‘申请已提交，等待审批’比‘设备预约成功’更准确。

这种业务状态会让界面形成自己的特点。它不是额外添加的‘高级功能’，而是当前任务不可省略的信息。先把状态与文案设计完整，再让开发实现相应行为；静态设计稿上的成功提示不能证明真实接口已经完成审批。

第五步：针对具体问题修改，不再整页重抽

到了这一步，应该能说清楚哪里不对，而不是继续要求‘更有设计感’。例如设备长名称把状态挤到下一行，日期字段在窄屏无法读完，错误说明离字段太远，主要按钮与次要按钮同样突出。这些问题都有明确对象，也有可以观察的结果。

修改时把三个条件一起交代：现在的问题、希望达到的表现、必须保留的内容。比如‘窗口变窄后两列改为单列，但保留设备摘要与申请信息的阅读顺序；不要隐藏日期限制，不要缩小文字来硬塞内容’。这样能减少修好一处、又引入另一处问题的情况。

可编辑设计稿阶段，检查布局、文案和状态是否清楚；进入可运行页面后，再检查点击、键盘、焦点、加载和提交行为。两种检查互相补充，不能用一张好看的截图代替运行验证。关于文本对比度，可以参照W3C 的对比度说明；窄屏与缩放则要看内容是否仍能阅读和操作，而不是只看页面有没有缩小。

不要一次把发现的所有问题交给 AI 重做。先处理影响任务完成的结构与行为，再调局部视觉，最后清理不必要的装饰。每轮保留已经确定的部分，比较修改前后同一个位置：用户是不是更容易找到设备、理解限制并完成申请。

去掉模板感，不等于让每一页都标新立异

统一的表单、导航和按钮是设计系统的价值，不是需要消灭的重复。真正要避免的是不问任务就套同一种页面：申请页像数据看板，详情页像营销落地页，所有错误都只有一句‘出了点问题’。

设计师应把精力放在能改变理解和操作的地方。设备借用页的特点可以来自清楚的可借时间、设备适用场景、审批预期和取用安排，不必来自炫目的背景。品牌表达可以集中在颜色、图片与关键视觉节奏上，其余界面保持克制，反而更容易持续维护。

当这些规则在实际页面里有效，再把适用条件、组件选择和错误处理方式整理成团队的设计方法，供后续 AI 任务沿用。如果需要把设计稿继续交给代码 Agent，可参考Codex、Cursor与设计工具的工作流组合。先有具体设计判断，再用工具放大它，通常比不断更换模型更接近你想要的结果。