使用 AI Coding 调整 UI 时，我最常遇到的情况是：一次修改看起来不错，却顺手改变了其他区域的间距、颜色或尺寸。原因通常不是 AI 不会写布局，而是修改目标不够具体，或者页面结构过于集中。

我的习惯是先描述可观察的问题，再给出约束。例如，卡片左右边距统一为 16vp、卡片之间保持 12vp 间距、标题最多两行、图片区域保持固定比例，并明确不改变其他组件。这样 AI 更容易做局部修改，也方便对比修改前后的效果。

下面是一个简化的卡片布局示例。实际设计时，尺寸、颜色和字体规范应统一管理，避免每个组件都散落一套魔法数字。

@Component

struct ItemCard {

 title: string = ''

 location: string = ''

 build() {

   Column({ space: 8 }) {

     Text(this.title)

       .fontSize(16)

       .fontWeight(FontWeight.Medium)

       .maxLines(2)

       .textOverflow(TextOverflow.Ellipsis)

     Row() {

       Text('地点').fontColor('#667085').fontSize(12)

       Text(this.location).fontColor('#344054').fontSize(12)

     }.width('100%')

   }

   .padding(16)

   .width('100%')

   .backgroundColor('#FFFFFF')

   .borderRadius(12)

 }

}

让 AI 调整布局时，我会把问题拆成独立任务：先解决宽度和对齐，再处理字体和溢出，最后检查不同屏幕尺寸下的表现。一次只改一类问题，回归验证会简单很多。

如果项目已有设计规范，可以把颜色、间距和圆角抽成公共常量，再要求 AI 复用这些规范，而不是为每个页面重新选择数值。最终还要在模拟器或真机上检查长文本、不同分辨率和系统字体缩放等情况。

AI 可以帮忙快速迭代，但视觉验收仍然离不开真实运行效果。建议保留修改前后的截图，并记录哪些约束已经满足，这样也更容易向 AI 描述下一轮要调整的具体问题。