UD5工具箱
第一步：输入姓名
打开工具页面后，在左侧控制面板顶部找到"输入姓名"文本框。输入您想要生成头像的姓名，支持中文（如"张三"）、英文（如"John Doe"）或中英混合（如"张John"）。输入后，工具会自动根据当前选择的提取模式提取代表字符，并在右侧预览区实时显示效果。
第二步：选择提取模式
在姓名输入框下方的"提取模式"下拉菜单中，根据需求选择合适的模式。默认的"智能提取"适用于大多数场景，中文取首字、英文取首字母缩写；"取尾字"模式适合需要突出特定字符的场景；"手动编辑"模式允许您直接修改显示的文字内容，最多3个字符。切换模式后预览会立即更新。
第三步：配置头像形状
在"头像形状"区域选择圆形、圆角方形或方形。圆形适合移动端和社交场景，圆角方形兼顾柔和感与空间利用率，方形适合严格的网格布局。选择形状后，下方会实时显示对应的CSS border-radius值。
第四步：选择配色方案
在"预设配色"区域点击色块选择预设方案，或点击"随机"按钮快速浏览不同配色。如需精确控制，展开"自定义颜色"区域，使用颜色选择器分别设置背景色和文字色。建议确保文字与背景的对比度足够高，深色背景配白色文字是最安全的选择。
第五步：调整尺寸和字重
拖动"头像尺寸"滑块调整大小（32px到320px），拖动"字体粗细"滑块调整字重（400到900）。预览区下方会同时显示32px、48px、64px、96px四个典型尺寸的缩略图，帮助您评估不同尺寸下的显示效果。大尺寸头像建议使用较粗的字重以保持视觉冲击力。
第六步：多场景预览
在右侧预览区顶部切换不同的背景模式（白色、灰色、深色、渐变），观察头像在不同环境下的表现。特别注意深色模式下的可读性和对比度。如果需要在实际项目中预览，可以先复制HTML代码，在本地页面中粘贴查看真实效果。
第七步：导出代码或图片
确认效果满意后，点击相应的导出按钮：点击"复制CSS"获取完整样式代码，粘贴到项目CSS文件中；点击"复制HTML"获取对应的div标签，粘贴到页面模板中；点击"下载SVG"获取矢量格式图片，适合进一步编辑或高质量打印；点击"下载PNG"获取位图格式图片，适合邮件签名或社交媒体头像。工具会显示"已复制到剪贴板"的提示确认操作成功。
在项目中集成
将CSS代码和HTML标签分别添加到项目对应文件中。在React、Vue等框架中，可以将CSS属性转换为内联样式或CSS-in-JS对象。建议将头像封装为可复用组件，通过props传入姓名和颜色参数，实现动态生成。对于用户列表等批量场景，可以循环渲染组件并传入不同用户数据。