MasterGo AI不直接生成头像组件，而是通过上下文描述（如“顶部导航栏含圆形头像、用户名”）生成带该元素的Dashboard页面，再结合截图与设计稿参考精准还原头像区域结构与样式，最后提取并微调为可配置UI元素。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 本身不直接生成“头像组件”这类原子级 UI 元素，它面向的是页面级或模块级设计生成。但你可以用它高效产出含头像的 Dashboard 页面结构，并在后续快速提取、复用或精修头像区域——关键在于不把它当图库用，而当智能布局引擎用。
明确目标：先生成带头像的 Dashboard 区域
AI 不识别“头像组件”这个抽象概念，但能理解“用户信息栏”“顶部导航栏含头像和用户名”“侧边栏个人资料卡片”等具体场景描述。所以第一步不是搜“头像”，而是描述它所在的上下文：
- 输入类似：“生成一个后台 Dashboard 顶部导航栏，左侧为 Logo，右侧包含用户头像（圆形）、用户名、下拉箭头，背景浅灰，文字深灰”
- 或：“设计一个左侧菜单栏 + 右侧内容区的 Dashboard 页面，右上角固定显示用户头像（40px 圆形）、昵称和退出按钮”
- 避免只写“生成一个头像”，否则 AI 容易输出孤立图标或插画，而非可嵌入的 UI 元素
用双参考提升头像区域还原精度
单靠文字描述，AI 对头像尺寸、圆角、边框、间距等细节容易偏差。推荐组合使用：
Cursor 2.4
下载
Agents 正在你的整个代码库中处理越来越复杂、运行时间更长的任务。本次版本引入了新的 agent 框架改进，以实现更好的上下文管理，并在编辑器和 CLI 中带来了许多提升使用体验的修复。
- 本地截图参考：提前截取你已有项目中风格一致的头像区域（比如带阴影、有状态徽标、点击态反馈），放进 MasterGo 的 reference 文件夹
- MasterGo 设计稿链接：提供完整 Dashboard 页面的设计稿链接，让 AI 知道头像在整个视觉系统中的定位、字号、行高、对齐方式
- 两者并用后，AI 生成的头像容器（包括 img 标签占位、外层 div 结构、flex 布局代码）更接近真实交付要求
生成后快速提取与微调
AI 输出的是整块导航栏或用户卡片，你需要从中“摘出”头像部分：
- 在 MasterGo 画布中选中头像所在图层组，右键 → “导出为 SVG/PNG”，或直接复制图层样式用于开发
- 若需适配不同状态（如离线灰阶、加载骨架、带红点未读），不要重跑 AI，而是用 Chat 模式提问：“把当前头像区域增加一个右上角红色数字徽标，大小12px，背景#FF4D4F”
- 开发侧如用 Cursor + MCP，可将该区域截图+链接喂给 AI，指令：“生成 React 组件，实现圆形头像 + 右上角红点徽标，支持传入 src 和 badgeCount prop”
避坑提醒：头像不是贴图，是可配置元素
很多新手会把头像切图粘贴进去，结果响应式失真或无法换肤。正确做法是：
- 确保 AI 生成的头像用的是
<img>或background-image，而非位图图层 - 检查是否设置了
border-radius: 50%、object-fit: cover等关键样式 - 若需支持深色模式，提示 AI：“头像容器在暗色模式下保持白色边框，背景透明”
