“没什么设计感”不是反馈：与 AI 磨界面的四轮方法

每个让 AI 写过界面的人，大概率都说过那句话：「没什么设计感」。说的时候理直气壮，听的一方——如果是 AI——通常不追问、不确认，直接推倒重来。结果往往是第二轮比第一轮更花哨，也更俗。

最近我完整复盘了一次界面迭代的记录：需求只是一个打卡页面，要求有设计感、负空间、打卡历史和分享。四轮对话下来，页面换了四次脸，但真正「变好」的只有两次，而那两次恰好都是反馈更具体的时候。这个过程比任何设计教程都直白地展示了一件事：AI 生成 UI 的瓶颈，常常不在 AI 的审美，而在我们反馈的分辨率。

一、第一轮：模糊需求只能换来「正确但平庸」

第一版完全对得起需求描述：居中的 max-w-md 白卡片、gray-100 底色、蓝色打卡按钮、绿色分享按钮，历史列表挂在卡片下半部。「设计感」被翻译成了一组最安全的类名——p-6 的内边距、space-y-6 的垂直节奏、rounded-lg 的圆角、shadow-xl 的阴影。

严格说这一版没有错。负空间的三个常规手法它全用上了：限宽居中制造周围留白，内部用间距类撑开呼吸感，空状态还给了「暂无打卡记录」的斜体占位。负空间的作用本来也不是「空着好看」：按格式塔心理学的接近性原则，间距本身就是分组信息，历史列表与打卡按钮之间那一段空白，正在替界面说「这是两个功能区」。这一版把道理都做对了，问题是每个决定都取了平均值。你在提示词里写「有设计感」，这个词在 AI 眼里没有梯度，输出只能向训练分布的均值回归——也就是那种挑不出毛病、也记不住的「AI 味」。

二、第二轮：不带方向的否定，换来特征堆叠

反馈是那句经典的「没什么设计感」。AI 的响应很有代表性：它没有问「你想要什么感觉」，而是直接全面翻新——紫蓝渐变背景、backdrop-blur-lg 的毛玻璃卡片、每秒刷新的大号时钟、悬停时 scale-105 的按钮放大。

渐变、玻璃拟态、微动效，确实是「设计感」的高频词汇。但它们是特征，不是风格。这一轮的本质是：AI 把「更多设计感」理解成了「更多视觉特征」，于是往页面上又叠了一层。那个每秒跳动的大时钟是典型代表——它让页面「看起来活着」，却不服务任何任务，属于典型的伪动态。结果就是许多 AI 生成页面的通病——每个元素都在用力，整体却没有立场。

这一轮顺带有两个值得记的技术点。一是 backdrop-filter 的模糊在低端设备上代价不小，大面积使用要谨慎；二是那个每秒跳动的时钟跑在 useEffect 的 setInterval 里，代码老老实实写了 return () => clearInterval(timer)——定时器清理这个新手坑，AI 倒是替你避掉了。

三、第三轮：约束比形容词有用

转折发生在第三轮，反馈只有六个字：「不要渐变，纯色」。

AI 退回了纯色，但它做的不是简单换个背景色。整页 indigo-600，主卡片深一号用 indigo-700，次要按钮 indigo-500，次要文字和图标用 indigo-200，唯一的白色留给打卡这个主操作。同一色相，四个明度阶，层次全部靠明度差撑起来。

<div class="bg-indigo-600">        <!-- 页面画布 -->
  <div class="bg-indigo-700">      <!-- 卡片，深一号 -->
    <button class="bg-indigo-500"> <!-- 次要操作 -->
      <button class="bg-white">    <!-- 主操作，全页唯一白 -->

这是整个迭代里最有价值的一次输出。纯色方案把「设计感」的定义从特征堆叠切换到了系统一致性：不靠特效制造层次，靠色彩明度的秩序。这种玩法有现成的基建——Tailwind 的每个颜色自带 50 到 950 共十一级明度梯度，本来就是为同色系分层设计的，拿 600 做画布、700 做卡片、200 做辅助文字，等于在别人铺好的梯子上走。只是要留意一点：indigo-200 这类浅色文字压在 indigo-600 这种中间调背景上，对比度往往踩不到 WCAG AA 的及格线，正文小字别照抄，图标和大号装饰字无所谓。而对 AI 来说，「不要 X，要 Y」这种句式里，Y 才是有效信息——否定删掉了九成的解空间，它剩下的选择自然收敛。

四、第四轮：需求实体化带来的意外之喜

第四轮的反馈是「换一个背景色，打卡历史里面是音频信息」。配色从冷靛蓝切到 amber-100 的暖米色配白卡片，功能则从文本打卡变成语音打卡：录音按钮带 isRecording 状态，录音中加 animate-pulse 脉冲提示，历史列表每条记录有日期、时长和播放暂停切换。

这次有个不起眼但重要的变化。第一版的历史数据是纯 Date 数组，渲染列表时 key 用的是数组下标；第四轮记录变成了带 id、duration、date 的对象数组，key 换成了业务 id。列表 key 从下标换成稳定标识是 React 的基本功，但 AI 前三轮一直「懒得」做——直到需求实体化、每条记录真的有了身份，它自动就做对了。需求越具体，AI 的工程动作越标准。

不过也得泼盆冷水：那次对话里的录音是模拟的，时长是写死的 0:30。真实现要走 MediaRecorder 这条链路：先 getUserMedia 申请麦克风权限，把媒体流交给 MediaRecorder 分片采集，停止后合成 Blob，再用 URL.createObjectURL 生成可播放地址塞进列表项——权限被拒、中途打断这些分支也得各自兜底。分享按钮同理，从头到尾只是个入口，实际要接 Web Share API 或降级到复制链接。AI 给的是外壳，接线永远在自己手里。

五、复盘：跟 AI 谈设计的四条规则

把四轮摆在一起，反馈语言和输出质量的对应关系一目了然。可以提炼出四条可复用的规则：

形容词无效，特征和参照才有效。「有设计感」是空词，「毛玻璃」「黑白灰」「像某个你喜欢的产品那样」才是可执行的词。

否定要成对出现。「不要渐变，纯色」远好于「不要渐变」——后者只是删选项，前者还给了新方向。

**一轮只动一个变量。**颜色、布局、功能分开提，改坏了才知道归因给谁。第四轮把换色和换功能捆在一起提，页面虽然成了，但两次改动没法独立评价。

**让 AI 解释它的选择。**这四轮里 AI 每次都附了一段设计说明，从说明里能直接挑出下一轮要改的词——比如它自己说「层次感来自明度差」，你就知道明度是可调的旋钮。

四次提交里，AI 其实只做对了两次，而那两次都是人先把话说清楚了。工具的审美上限在涨，但反馈的分辨率，暂时还得自己提。