MasterGo AI 生成 Web UI 步骤条组件需精准描述结构、交互与视觉特征，基于语义建模调用设计系统规则，输出高保真界面并支持导出为带无障碍属性的 React/Vue 可用代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 生成 Web UI 步骤条组件，核心是用自然语言精准描述其结构、交互和视觉特征，AI 会据此理解语义并调用内置设计系统与组件库规则，自动生成符合规范的高保真界面。它不是简单拼图，而是基于对步骤流程（如注册、支付、表单提交）的语义建模，结合主流框架（如 Ant Design、Element Plus）的视觉逻辑完成渲染。
明确步骤条的核心要素再输入提示词
AI 需要识别“步骤条”不是孤立元素，而是一套有状态、有顺序、可响应的导航控件。输入前需确认以下四点：
- 类型：水平线性步骤条（最常见）还是垂直/环形？是否带图标或数字编号？
- 状态：当前进行中（active）、已完成（finish）、未开始（wait）三态样式是否需要区分？是否支持点击回退？
- 内容：每步标题（如“填写信息”“验证身份”“完成”）、可选描述文案、是否显示进度百分比？
- 风格：主题色（如 #409EFF）、圆角大小、字体大小、暗色模式适配、是否使用图标（如 ✅、?）？
直接可用的提示词模板（复制即用）
在 MasterGo AI 的“AI 生成界面”输入框中粘贴以下任一描述，效果稳定且适配 Web 场景：
MaterialDesign风格下拉菜单jquery插件
下载
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
- “生成一个 Web 端水平步骤条组件，共4步：1.登录 2.选择服务 3.确认订单 4.支付成功。当前第2步高亮，已完成步骤显示绿色对勾图标，未开始步骤灰色虚线连接。主题色为#1890FF，文字大小14px，使用 Ant Design 风格。”
- “设计一个响应式步骤条，用于电商结算流程。包含‘收货地址’‘配送方式’‘支付方式’‘订单确认’四步，当前处于第3步。每步右侧显示小箭头，已完成步有蓝色填充圆点，进行中步用蓝色边框+文字加粗。整体适配暗色模式。”
- “生成 Vue 组件代码：一个可交互步骤条，支持 props 传入 steps 数组（含 title、description、status），点击已完成步骤可跳转对应路由。使用 Element Plus 视觉规范，输出含 TypeScript 类型定义。”
生成后快速优化细节
AI 生成结果通常已具备基础结构，但微调更高效：
- 若间距不协调，直接输入“步骤项之间增加 24px 间距”“图标和文字垂直居中”；
- 若颜色不符，说“把进行中步骤的圆点颜色改为 #FA541C”；
- 若需添加交互说明（如 hover 效果），可追加“鼠标悬停时未完成步骤文字变深蓝，带下划线”；
- 点击“插入到画布”后，可在 MasterGo 中双击文本或组件实时编辑，所有修改同步影响后续代码导出。
导出为前端代码并验证可用性
生成的设计稿不仅可视，更可直接转为可用代码：
- 选中步骤条图层 → 右键 → “导出为代码”，选择 React（TSX）或 Vue（SFC）；
- AI 会输出带完整 props 接口、状态管理逻辑和 Tailwind 或 CSS-in-JS 样式的组件；
- 特别注意：生成的代码默认包含无障碍属性（aria-current、role="progressbar”），符合 WCAG 标准；
- 若项目已接入 Ant Design，导出时勾选“适配 Ant Design 组件”，AI 会自动替换为
+ 写法，而非纯 div 实现。
