Skip to content

非设计师用 AI 做高质感 UI

用 AI 做 UI,本质是”管理 AI 团队”而非”使用工具”——审美判断力和迭代打磨才决定最终效果。

避坑:拒绝 AI Slop#

直接让 AI 生成 UI,容易得到千篇一律的”AI 模板风”:Inter 字体、紫蓝渐变、嵌套圆角卡片、深色模式加霓虹发光。这类缺乏辨识度的设计一眼就显廉价。

四步迭代法#

  1. 起稿:/frontend-design 定风格。 先和 AI 讨论敲定产品受众与风格定位,再从字体、配色、布局、动效四个维度做差异化选择,逼它跳出安全模板,从源头避免 AI 味,然后生成初版。
  2. 审查:/critique 找问题。 让 AI 站在专业设计师视角,从排版、配色、间距、对比度、可访问性等维度逐项评分,指出肉眼难辨的细节问题——比如按钮对比度不足、组件间距不统一,并给出可执行的修改建议。人负责筛选采纳,掌握最终取舍。
  3. 打磨:/polish + /optimize 提质感。 /polish 统一设计系统细节(间距、字号、颜色值),消除不一致感;/optimize 优化加载速度、渲染性能、动画流畅度,拉开和普通设计的差距。
  4. 适配:/adapt 做响应式。 完成手机、平板、桌面多端布局适配,人只需检查关键断点,针对性调整异常处。

判断力是最大杠杆#

工具只是辅助,人的作用不可替代:

几条实战经验#

  1. 初期给大方向就好,留创意空间反而容易出惊喜。
  2. 每次只改 1-2 个问题,避免批量修改后难以定位。
  3. 多用截图反馈,对齐代码与实际渲染。
  4. 多逛 Dribbble、Land-book 训练审美,判断力是核心竞争力。