问题场景
用 AI 写前端时，经常遇到这样一种情况：
页面上有一个大块（比如卡片、弹窗、侧边栏），它的一部分被上层元素遮挡了，显示不完整。
你告诉 AI：“这个块被上层遮挡了，你修复一下。” 结果 AI 开始一顿操作：加 z-index、改 position、调 overflow、甚至重构整个布局。改完之后，问题可能还在，或者引入了新的样式问题。
一个更有效的说法
后来我换了一种说法，效果立刻变好了：
你先固定这个块的宽度，然后把这个块里面的 A 元素和 B 元素的宽度变小。
AI 听到这句话后，不再需要猜测"被遮挡"到底意味着什么，它只需要做两件非常具体的事：
- 给外层块一个固定的宽度；
- 把内部 A、B 两个元素的宽度调小。
问题就这样被稳定地修复了。
为什么这个方法有效
AI 处理视觉描述时，对抽象词（“遮挡”、“错位”、“不好看”）的解读空间很大，容易走偏。但如果你把问题翻译成可执行的尺寸约束，AI 的修改范围就被限定了：
- 固定外层宽度：先消除一个变量，避免 AI 盲目地改来改去。
- 缩小内部元素宽度：给出明确的调整方向，让内容在有限空间内重新排布。
这其实是把视觉问题变成了一个约束优化问题，而不是自由发挥的布局重构。
可复用的提示词模板
把这个思路抽象一下，可以得到一个通用模板：
请修复以下问题：
1. 先固定 [外层元素] 的宽度为 [具体值或百分比]；
2. 然后减小 [内部元素A] 和 [内部元素B] 的宽度，使它们不被遮挡。
不要修改 z-index、position 或 overflow，只调整宽度相关的样式。
更多适用场景
这个思路不只适用于"被遮挡"，还可以推广到其他前端微调场景：
| 你原本可能说的 | 更有效的说法 |
|---|---|
| 这行文字换行了 | 容器宽度固定为 200px，字体大小减小 1px |
| 这个图标没对齐 | 把 A 的 margin-left 设为和 B 相同 |
| 滚动条太丑 | 外层固定高度，内部子元素高度减小 10px |
| 按钮被挤下去了 | 容器宽度固定，按钮之间的 gap 减小 4px |
| 表格列太宽 | 给表格容器固定宽度，指定每列的 min-width 和 max-width |
核心原则是一致的：把感受翻译成数值，把现象翻译成约束。
总结
和 AI 协作写前端时，“被遮挡"这类描述对它来说太模糊。把它翻译成：
先固定外层宽度，再缩小内部元素宽度
AI 就能在清晰的约束下给出稳定的修复。这个技巧很小，但非常实用，值得写进你的 Vibe Coding 工具箱里。