MasterGo AI 不生成运行时动效代码，但能高效生成符合规范的静态加载态设计稿，并通过智能动画跳转或动态面板实现原型演示，支持一键导出带 loading 逻辑的 Vue/React 代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 本身不直接生成“加载动画”这类运行时动效代码（比如骨架屏、旋转 Loading、进度条等），但它能高效支撑加载动画的设计实现与原型表达，并通过配套能力间接推动开发落地。关键在于分清两个层面：设计层表达 + 开发层实现。
加载动画在 MasterGo 中的核心定位是「视觉占位与交互反馈示意」，不是写 JavaScript 或 CSS 动画，而是让设计师快速构建可演示、可交付、可对齐开发的加载状态界面。
加载状态页面的 AI 生成方法
AI 生成的是「加载中」这个状态的设计稿，而非代码动效。操作路径很直接：
新建一个页面，命名为
首页_加载中或商品列表_加载态点击顶部 AI 图标 → 选择「AI 生成界面」
-
输入提示词，例如：
“生成一个电商 APP 首页的加载状态界面：显示骨架屏式占位图，包含顶部搜索栏占位、轮播图灰块、3 行商品卡片（每张含图片框、标题行、价格行），底部导航栏保持可见，整体使用浅灰色系，风格与主页面一致”
设置主题色、圆角等参数后点击生成
生成结果会自动匹配你已有页面的布局结构和命名规范，方便后续做智能动画跳转
✅ 这样生成的不是动效，而是符合 UI 规范的静态加载态设计稿，可直接用于评审、标注或交付给前端。
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
让加载态在原型中「动起来」的两种方式
要让「加载中 → 数据加载完成」这个过程在原型里可演示，需结合 MasterGo 的交互能力：
-
方式一：页面间跳转 + 智能动画
- 准备两个页面：
首页_加载中和首页_已加载 - 确保两页中对应图层名称完全一致（如都叫“商品列表容器”、“搜索栏”）且同级
- 用连线设置「点击按钮 → 跳转到首页_已加载」，动画类型选「智能动画」
- 效果：骨架屏元素平滑过渡为真实内容（位置/尺寸/透明度变化自动补间）
- 准备两个页面：
-
方式二：动态面板切换（适合单页内状态切换）
- 把“加载中”和“已加载”内容放在同一个动态面板的不同状态里
- 命名统一（如都叫
HomeContentPanel） - 通过交互触发面板状态切换，启用「溶解」或「滑入」动画
- 优势：无需多页管理，更适合模拟局部刷新（如下拉加载更多）
⚠️ 注意：动态面板不支持智能动画，但能用基础动效表达状态切换节奏。
后续如何对接开发实现真实加载动画？
MasterGo AI 的价值在这里延伸：
-
一键导出 Vue/React 组件代码：生成的加载态页面可导出带骨架屏结构的 JSX 或
<template>，含语义化 class 名和基础 DOM 结构 -
自动注入 loading 属性逻辑：若你在 AI 描述中注明“支持 loading 状态切换”，导出的 React 组件常会包含
isLoading: boolean判断分支 -
设计系统联动：如果团队已配置骨架屏组件规范（如 Ant Design 的
Skeleton），MasterGo AI 会优先调用对应组件，而非手绘占位图
例如输入：
“生成后台数据看板页面，包含销售额图表、用户增长折线图，并支持 loading 状态，使用 Ant Design Skeleton 组件占位”
AI 会直接产出含 <Skeleton active /> 的代码片段，开发复制即用。
小技巧：提升加载态生成质量的关键点
- 在提示词中明确「占位形式」：写清“骨架屏”“灰块”“波纹动画示意”或“旋转图标+文字”，AI 更易理解
- 复用已有页面结构：先生成正常态页面，再复制并重命名，用 AI 修改为加载态，保证图层一致性
- 主动标注动效意图：在画布上加文本说明“此处需骨架屏淡入”“按钮点击后显示 loading 状态”，便于开发理解上下文
这样一套流程下来，加载动画从设计构思 → 原型演示 → 开发落地，全程闭环，不依赖手动切图或口头描述。
