MasterGo AI 生成原型卡片的核心流程，其实可以归纳为三个步骤：清晰描述需求、选择合适的生成模式、花几分钟微调细节。这一过程并不依赖复杂操作，而是通过自然语言将卡片的结构、内容、风格与交互意图表述清楚，AI 便会自动解析并渲染为可编辑的高保真卡片组件——简单来说，你只需输入一段文字，就能获得一张可直接投入使用的卡片。
一、明确卡片的关键要素再输入提示词
AI 无法凭空猜测你想要什么样的卡片。因此，在输入提示词之前，建议先理清以下四个基本要素：
- 用途与场景：是笔记卡片、商品展示卡、用户信息卡，还是数据概览卡？举个例子，“知识管理类应用中的双链笔记卡片”就比“随便做个卡片”精准得多——两者的区别就像“我要一杯拿铁”与“我要一杯饮料”那么明显。
- 视觉结构：标题放置在哪个位置？正文内容多长？是否需要图标、标签、头像或操作按钮？要不要考虑悬停效果或可展开区域？这些细节提前规划好，AI 出错的概率会显著降低。
- 风格偏好：想要亮色还是暗色模式？圆角大小是多少（例如 8px 或 12px）？阴影深浅程度如何？主色调可以直接填写色号，比如 #4F46E5，或者简单描述为“科技蓝”。
- 交互暗示：是否需要体现点击跳转、收藏状态、拖拽手柄，或者右上角常见的“三点菜单”？哪怕只提一句“加上三点菜单图标”，AI 也会自动为你添加。
二、在 MasterGo 中正确触发卡片生成
操作步骤非常直接：
- 登录 MasterGo → 新建文件 → 点击顶部工具栏的 AI 图标 → 选择“AI 生成界面”
- 在输入框中粘贴或输入你的卡片描述（推荐使用中文，识别更稳定）。例如这样一段提示词：
“设计一个深色模式的知识卡片：顶部是带双链图标的标题栏，中间展示两行摘要文字，底部左侧显示标签‘#AI’‘#设计’，右侧放置收藏按钮和分享图标；整体圆角为10px，卡片间距16px，使用 #374151 背景和 #F9FAFB 文字色” - 点击“生成”或按回车键，等待大约10–20秒，AI 会先输出结构理解稿，确认无误后再点击“开始生成”
三、生成后快速优化卡片细节
首版卡片通常已经具备可用性，但如果你希望进一步调整，只需通过几句话就能完成优化：
- 改布局：输入“将标签移动到标题下方并居左对齐，收藏按钮右对齐”——AI 会立即响应调整。
- 调样式：输入“阴影稍微变浅”“字体加粗”“图标尺寸统一调整为20×20”——实现精准控制。
- 增状态：输入“添加已收藏状态（实心星形图标+红色）”“悬停时卡片轻微上浮并加深阴影”——交互细节一步到位。
- 批量复用：复制该卡片图层，右键选择“生成多个实例”，快速铺满网格，AI 会保持风格一致性。这套流程下来，效率提升非常明显。
四、进阶技巧：让卡片更真实可用
真正提升效率的关键，并非单张卡片本身，而是让它能够直接融入工作流程。以下几个实用方向值得关注：
- 导出为代码：选中卡片 → 右键“导出代码” → 选择 React/Vue，即可获取带 className 和基础交互逻辑的 HTML/CSS/JS 片段——设计稿直接转化为代码，省去大量中间转译环节。
- 插入团队组件库：生成满意的卡片后，右键“保存为组件”，归入自定义团队库。下次只需输入“插入我的知识卡片组件”，就能一键复用，风格统一且可集中更新。
- 结合草图启动：手绘一张卡片草图拍照上传，再加一句“按照此布局还原，文字替换为中文，风格改为简约圆角”，AI 识别后即可精准重建。这一技巧特别适合快速将想法落地为可交互的原型。