跳到正文
UIGrammer
EN 中文

反模式 · 布局 ·

同族组件圆角不一致

同族圆角不一致指按钮、输入框、卡片等同级组件各自使用不同的圆角,而非一条阶梯。

症状

尺寸相近的同级组件带着明显不同的圆角。

为什么会这样

每个组件都生成自不同的参考图,提示词里也没有任何东西把它们的几何绑在一起。没有阶梯,模型就逐个猜。

规则

一条两到三档的圆角阶梯,按组件尺寸分配。

  1. 定义阶梯——例如控件 6px、卡片 10px、大面板 16px。
  2. 每个组件按尺寸取档,而不是按类型。
  3. 搜索代码里硬编码的圆角值,逐个映射到某一档。

同族组件圆角不一致是什么?

按钮全圆角、输入框 4px、卡片 16px 的页面,说着三种互不相干的圆角语言。圆角是一套系统:选一条短阶梯——通常按组件尺寸分三档——然后让每个元素取它尺寸对应的那一档。小控件取小档,大表面取大档。

修复 Prompt

贴在你现有 Prompt 之后,把这类毛病从结果里剥掉。