液态玻璃：技术提供方案，人决定审美

用 ui-ux-pro-max Skill 生成”液态玻璃”设计系统，得到色彩、排版、间距、圆角、阴影、动效规范，再转成 CSS 变量（前缀 --vibe-）。玻璃态靠 backdrop-filter: blur(12px) 实现；Tailwind 不原生支持，要自定义 CSS。

问题在于：AI 给的是数学上合理的方案，配色有对比度、间距有倍数关系，但”合理”不等于”顺眼”。而且 backdrop-filter 在低性能设备上明显卡顿，全站到处模糊是灾难。审美、一致性、性能这几件事，都得人把关。

暗色模式：多轮反复调整

暗色不是简单反色，细节密集，跟 AI 来回改了至少五轮：

  • 全局 * transition 导致页面加载时闪烁，改成精确选择器
  • 圆形扩散动画 scale(0) → scale(50)
  • 彩色元素单独调：主色 #6366f1 → #818cf8
  • 第三方组件（Giscus/Waline）不读 --vibe-*，要单独适配
  • SVG 要加 fill: currentColor 才能跟着文字变色
  • 主题优先级链：用户设置 > localStorage > 系统 > 默认

前端有”配置驱动”和”感觉驱动”两类问题。暗色模式属于后者，没有正确答案，只能迭代完善。

图标方向：AI 难以分辨方向

文章返回顶部按钮需要重新生成，提示词是”上方为水平横线，在下方为向上箭头”，AI 给成了”横线 + 向下的箭头”，把”在下”理解成了”朝下”。纠正位置之后，朝向还是错的。

快退/快进图标也是同样的问题，左右逻辑画反。点击按钮的实际功能是对的，但按钮上的图形方向，AI 识别不了。

核心在于：AI 不”看”自己画的，它只读字面，不补用途，把带用途的方向当成无用途的几何去凑。“在哪”（位置）和”朝哪”（朝向）是两回事。

文字来回超过一轮，就该直接上图（截图/参考图），比跟文字较劲快得多，还能省额度。

教训

  1. 视觉品味自己定，技术细节交 AI。AI 的”合理”不等于”好看”。
  2. 暗色、响应式这类细节密集的活儿，做好多轮迭代的心理准备，别指望一次到位。
  3. 视觉需求优先给参考图/截图；非文字描述时，把”在哪”和”朝哪”分开说、点明用途。
  4. 关键逻辑（持久化、权限、并发、性能）自己 review，视觉类可放手。