MasterGo AI 不生成可滚动交互行为，仅输出静态高保真设计稿；它能精准还原滚动列表的容器尺寸、内容结构、滚动方向及交互暗示等视觉规范，为前端开发提供明确依据。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
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 会帮你设好间距与约束，但不会写 JavaScript
- 真正实现滚动交互，需导出设计标注后，由前端用 CSS
overflow或 React/Vue 的虚拟滚动方案落地
提升还原精度的小技巧
滚动列表最容易翻车的地方是“内容密度”和“边界处理”，建议：
- 避免笼统说“很多条数据”，改用具体数字 + “可滚动”关键词
- 强调容器的 固定高度 和 overflow 属性预期，比如“不要自适应高度，必须截断并允许滚动”
- 对齐设计稿时，重点检查列表项的 line-height、padding、min-height，这些值影响实际可容纳行数
- 如果列表含动态状态（如“正在加载…”），单独描述该状态样式，AI 才会保留占位逻辑
