先说一个很多人容易误解的点：MasterGo AI 目前并不会直接帮你生成“可滚动的交互行为”——它输出的是静态的高保真设计稿。换句话说，你在画布上看到的滚动列表，本质上是一个带溢出内容的容器区域，容器尺寸、内容排列、滚动条样式都能精准呈现，但真正能不能用手指滑动或者鼠标滚轮滚动，那是前端开发阶段的事，得靠代码来实现。

不过别失望，AI 在视觉还原上确实有两下子。只要你把结构和约束条件描述清楚，它能给出非常明确的布局规范，前端同学拿到设计稿就知道该怎么写。

滚动列表的视觉还原要点

想让 AI 正确输出滚动列表，关键在于你如何描述它。下面这几个维度是必须交代清楚的：

• 明确容器尺寸：比如“固定高度 400px 的垂直列表容器”——有了这个限制，AI 才会把超出部分自动截断，并给出溢出示意（比如加省略号、底部阴影渐隐或者直接画个滚动条）。
• 说明内容特征：例如“显示 20 条订单记录，每条含图标、标题、时间、状态标签”。AI 会按这个数量合理排布，同时为后续扩展预留空间。
• 指定滚动方向：写清楚“垂直滚动”或“水平滚动卡片组”，否则 AI 很可能会默认平铺展示，把内容全摊开。
• 标注交互暗示：加上“右侧显示默认滚动条”或者“支持手指滑动浏览”，AI 就会在设计稿中画出滚动条样式或手势图示，让开发人员一目了然。

用 MasterGo AI 生成滚动列表的实操步骤

实际操作起来，不是点一个“滚动组件”按钮那么简单，而是通过自然语言配合参考图来引导：

• 在 AI 生成界面 输入类似描述：“后台 Dashboard 订单列表模块，容器宽 800px、高 500px，垂直滚动；每项含订单号、客户名、金额、状态标签和操作按钮；共显示 15 条，底部有‘加载更多’按钮”。
• 如果手里已经有设计稿，直接粘贴 MasterGo 链接，并补充一句：“严格对齐设计稿中订单列表区域的尺寸、行高、内边距和滚动表现”。
• 有局部截图（比如列表头部或某一行样式），放进 reference 文件夹，然后说明：“以此为基准复现列表项样式与间距”。
• 生成后发现内容被压缩或者没有溢出？追加指令：“将列表容器设为 overflow-y: auto，保持高度 500px，确保第 10 条之后内容可向下滚动查看”。

为什么不能一键生成“真滚动”？

根本原因在于 MasterGo 是设计工具，不是运行环境。它输出的是 Figma-style 的矢量画布，所有“滚动”都只是视觉模拟：

• AI 生成的滚动条是图形元素，不是功能控件，点不了。
• 列表项之间如果用自动布局（Auto Layout），AI 会帮你设好间距与约束，但不会写 Ja vaScript。
• 真正实现滚动交互，得导出设计标注后，由前端用 CSS overflow 或者 React/Vue 的虚拟滚动方案来实现。

提升还原精度的小技巧

滚动列表最容易翻车的地方是“内容密度”和“边界处理”。实战中建议：

• 避免笼统说“很多条数据”，改用具体数字再加“可滚动”关键词，效果会好很多。
• 强调容器的 固定高度 和 overflow 属性预期——比如“不要自适应高度，必须截断并允许滚动”。
• 对齐设计稿时，重点检查列表项的 line-height、padding、min-height，这些值直接影响实际能容纳的行数。
• 如果列表包含动态状态（比如“正在加载…”），单独描述该状态的样式，AI 才会保留占位逻辑。