MasterGo AI生成进度条组件需用自然语言精准描述类型、样式、行为和容器位置四要素，如“移动端表单提交用的线性进度条：主色#FA2549，高度6px，圆角3px，显示百分比，位于表单底部，点击‘下一步’后匀速增长至100%”，并支持导出带props的React/Vue代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 生成进度条组件，不是靠“搜索模板”或“拖拽拼凑”，而是用自然语言精准描述行为+视觉特征，让 AI 理解它该是什么、怎么动、在哪用。关键不在“画出来”，而在“说清楚”。
明确进度条的类型和交互场景
AI 需要区分是静态展示型（如安装完成度）、线性加载型（如文件上传）、还是带文字提示的交互型（如表单提交中）。比如：
- ❌ 模糊描述：“加个进度条”
- ✅ 有效描述：“在用户点击‘提交订单’按钮后，显示一个带百分比数字的蓝色线性进度条，从0%平滑过渡到100%，完成后自动跳转到成功页”
用结构化提示词锁定核心参数
在 AI 输入框中直接写清以下四要素，生成结果更可控：
- 类型：线性进度条 / 圆形进度条 / 步骤式进度条
- 样式：主色（如#4A90E2）、高度（4px）、圆角（2px）、是否显示数值（是/否）
- 行为：是否自动动画？是否支持手动更新？是否绑定某个操作（如上传、计算、API调用）？
- 容器位置：放在弹窗顶部 / 表单底部 / 卡片内嵌 / 全局顶部固定
例如输入：
“生成一个移动端表单提交用的线性进度条组件：主色#FA2549，高度6px，圆角3px，始终显示当前百分比（如‘35%’），位于表单底部，点击‘下一步’后从0%匀速增长到100%，完成后显示绿色对勾图标”
生成后快速适配开发需求
AI 输出的设计稿默认带图层结构，但真正落地需要两步确认：
- 点击画布右侧「代码」面板 → 选择框架（React/Vue）→ 导出带 className 的 JSX 或 template
- 检查导出代码是否含关键 props：
value、max、showText、color—— 若缺失，可回到 AI 输入框追加指令，如：“导出 React 组件，支持传入 value 和 max 属性，并能响应式更新”
常见问题处理技巧
- 进度条太细看不清？追加提示：“将进度条高度设为8px，背景色#eee，填充色#FA2549，文字大小12px，居中显示”
- 动画卡顿？说明：“使用 CSS transition 实现 smooth 过渡，duration 300ms”
- 需要多步骤？写清楚：“生成三步式进度条，节点文字分别为‘填写信息’‘验证身份’‘完成’，当前步骤高亮，其余灰阶，支持通过 JS 切换 activeStep”
本质上，MasterGo AI 不是画图工具，而是把你的工程语义翻译成视觉与代码的中间件。进度条这种高频组件，一次写准提示词，后续复制页面+微调描述，30秒就能产出多个变体。
