一句提示词生成生产级头像。6 种开源方案 — 照片、Notion 风格插画、首字母回退、在线状态徽标、堆叠分组、上传器 — 全部基于 Tailwind + shadcn，无障碍、可换主题、MIT 许可。直接复制代码，或者把其中任意一种重新生成到你的 Lovable、Bolt、v0 或 Cursor 项目里。
6 个模板
每个模板都是真实的提示词，而不是截图。复制到任意 AI 编辑器，或在 MeDo 中运行，直接拿到 React + Tailwind 代码。
能加载就显示照片，加载不出来就显示首字母。每个应用最先需要的那个头像。
用 Tailwind CSS 创建一个可复用的 <Avatar /> React 组件。 方案：带图片和首字母回退的基础头像。 布局：圆形头像，src 加载成功时渲染 <img>；加载出错或缺少 src 时，渲染由 name 字符串确定性推导背景色的首字母回退。 API：props 包含 src、name（必填，用于 alt 文本和首字母）、size（"xs" | "sm" | "md" | "lg" | "xl"）以及透传的 className。 包含：由 name 生成的必填 alt 文本、loading="lazy"、通过局部 state 实现的 onError 回退切换、渲染在链接或按钮内部时的 focus-visible 焦点环、通过 Tailwind dark: 类支持浅色和深色模式。 约束：仅使用 React + Tailwind，不依赖外部 UI 或图片库，图片加载过程中不产生布局偏移（用固定 width/height 预留位置）。
在线、离开、忙碌、离线 — 一个吸附在头像边缘的在线状态点。
用 Tailwind CSS 创建一个 <AvatarWithStatus /> React 组件。 方案：带在线状态徽标的头像。 布局：圆形头像，右下角固定一个小状态点，并用与背景同色的描边圆环与照片隔开，使其在任何背景上都清晰可辨。 API：props 包含 src、name、size 和 status（"online" | "away" | "busy" | "offline"），状态点颜色按状态映射，且随头像尺寸等比缩放。 包含：首字母回退、为屏幕阅读器播报状态的视觉隐藏文字标签（不要只靠颜色传达信息）、外层容器上的 aria-label、浅色和深色模式支持。 约束：仅使用 React + Tailwind，不依赖外部 UI 库，状态点遮挡头像边缘的面积不超过 30%。
相互重叠的头像堆叠，外加 +N 溢出计数。适用于团队、任务负责人和协作者。
用 Tailwind CSS 创建一个 <AvatarGroup /> React 组件。 方案：带溢出计数的堆叠（重叠）头像组。 布局：一排横向排列的头像，相互重叠约三分之一，每个都带与背景同色的描边圆环，让堆叠保持清晰可读；超过最大可见数量后，渲染一个尺寸和形状相同的"+N"计数标签。 API：props 包含 users（{ src, name } 数组）、max（默认 4）、size，以及可选的 onAddClick — 传入时在行尾渲染一个虚线边框的"邀请"入口。 行为：悬停时被悬停的头像通过小幅位移和 z-index 变化浮到相邻头像之上；通过 "dir" prop 可反转堆叠的重叠方向。 包含：每个头像的首字母回退、概述完整成员数量的 aria-label、可键盘聚焦并带 focus-visible 焦点环的条目、浅色和深色模式支持。 约束：仅使用 React + Tailwind，不依赖外部 UI 库，不使用动画库。
xs 到 xl 统一的尺寸档位，另有 circle、squircle 和圆角方形三种形状。
用 Tailwind CSS 创建一个可换主题的 <Avatar /> React 组件，带完整的尺寸和形状档位。 方案：设计体系中的头像基础组件。 API：size（"xs" | "sm" | "md" | "lg" | "xl" | "2xl"）通过单一映射对象统一控制 width、height、字号和圆角；shape（"circle" | "squircle" | "square"）；另有 src、name 和 className。 要求：首字母字号随头像尺寸等比缩放，让 xs 和 2xl 都保持视觉平衡；所有设计变量集中放在文件顶部的一个配置对象里，方便团队在一处完成换肤。 包含：首字母回退、由 name 生成的 alt 文本、指向根元素的 forwardRef、导出的 TypeScript prop 类型、浅色和深色模式支持。 约束：仅使用 React + Tailwind，不依赖外部 UI 库，除计算得出的像素尺寸外不使用行内样式。
带相机徽标、上传按钮和文件限制的头像。适用于设置页。
用 Tailwind CSS 创建一个 <AvatarUploader /> React 组件。 方案：设置页中可编辑的头像照片控件。 布局：左侧是大尺寸头像，右下角固定一个圆形相机徽标；右侧是"头像照片"标签、一行文件限制提示（"PNG 或 JPG，最大 2 MB"），以及一个上传主按钮加一个移除文字按钮。 行为：隐藏的 <input type="file" accept="image/png,image/jpeg">，可由相机徽标和上传按钮同时触发；客户端进行大小/类型校验并给出行内错误提示；通过 URL.createObjectURL 生成本地预览，并在卸载时释放；移除后恢复首字母回退。 包含：文件输入框的 <label> 关联、用于校验提示的 aria-live 区域、focus-visible 焦点环、按钮的禁用/上传中状态、浅色和深色模式支持。 约束：仅使用 React + Tailwind，不依赖上传库，不依赖裁剪库 — 对外暴露一个 onChange(file) 回调交给调用方处理。
头像、姓名、认证标记和角色 — 撑起表格和成员列表的那一行。
用 Tailwind CSS 创建一个 <AvatarRow /> React 组件（以及一个 <MemberList /> 外层容器）。 方案：用于成员列表、表格和评论楼层的头像加信息行。 布局：左侧是头像，中间是两行区块 — 上行为姓名（可附带认证标记），下行为弱化的次要信息（"团队 · 角色"），右侧是尾部操作按钮；中间区块用 min-w-0 + truncate 截断，而不是换行。 API：props 包含 users（{ src, name, role, team, verified } 数组）、尾部操作按钮文案，以及 onAction(user) 回调。 包含：首字母回退、外层容器使用语义化的 <ul>/<li> 标记、尾部按钮的无障碍名称（"管理 {name} 的访问权限"）、行悬停高亮、focus-visible 焦点环、浅色和深色模式支持。 约束：仅使用 React + Tailwind，不依赖表格或列表库，在 320px 宽度下也不溢出。
同一个 头像 组件，针对它所在网站的类型做调整。
01 / 06
成员列表的成败全看头像行 — 照片、姓名、角色、权限操作。首字母回退让还没人上传照片时表格依然整洁。
挑选与页面其余部分匹配的变体，然后生成它。
01 / 06
图片配首字母回退，每个姓名对应一个确定性推导的背景色。其他所有变体的共同基线。
React、Next.js、Vue 3、SvelteKit、Astro 或纯 HTML —— 同一个 头像，六种接入方式。
01 / 06
一个函数组件，配一张尺寸映射表和一个 onError 回退。除了"图片加载失败"标记之外没有任何客户端状态，可安全放在 React 18+ 树的任意位置。
src/components/Avatar.tsx
export function Avatar({ src, name, size = "md" }) {
const [failed, setFailed] = useState(false);
return failed || !src
? <span className={box[size]}>{initials(name)}</span>
: <img src={src} alt={name} onError={() => setFailed(true)} />;
}设置页、组织架构图和权限表格需要的都是同一种行：头像、姓名、角色、操作。生成一次，就能复用到应用里的每一张表格。
带 +N 溢出计数的堆叠头像是成本最低的在线状态 UI — 一行就能告诉用户还有谁在编辑，既不占侧边栏，也不需要 websocket 仪表盘。
评论楼层、表情回应和 @提及会让头像在一个页面里重复出现几百次。一个带尺寸档位的基础组件既能保持布局统一，又能让打包体积保持精简。
在线状态徽标能让客服知道客户是否还在线，而首字母回退让没人上传照片时收件箱依然清晰可读。
上传头像组件负责文件类型与大小校验、本地预览和移除 — 完整的头像上传流程，不依赖任何上传库。
带认证标记的评价者头像，对信任感的提升胜过多加一颗星。把这一整行资料直接放进商品页即可。
四个步骤，从挑选 头像 模板到上线生产环境。
浏览上方 6 个模板，挑一个最接近你的使用场景 — 照片、插画、表格行、在线状态堆叠或上传控件。
每张卡片都渲染真实的 React + Tailwind 预览，复制之前就能看清间距和尺寸。
把提示词粘贴进 MeDo、Lovable、Bolt、v0 或 Cursor，也可以直接从卡片里取组件代码。
只需引入一次 <Avatar />，之后用 size 和 shape props 就能在表格、页头和评论楼层中复用。
头像组件用来渲染一张代表用户、团队或组织的小图片 — 通常是圆形的头像照片。而一个生产级的头像组件还会处理照片缺失或加载失败的情况，一般是在自动生成的背景色上显示这个人的姓名首字母。
组件会取用户姓名，按空白字符拆分，然后把首段和末段的第一个字符大写渲染出来。背景色由姓名字符串确定性推导，因此同一个人在不同会话、不同设备上始终得到同一种颜色。
头像组是一排相互重叠的头像，每个头像都带一圈与背景同色的描边圆环，让整个堆叠保持清晰可读。超过最大可见数量后，会渲染一个"+N"溢出计数标签。这是团队成员、任务负责人和实时协作者的标准展示方案。
符合。每个头像都带有由用户姓名推导的 alt 文本，在线状态通过视觉隐藏的文字标签播报，而不是只靠颜色区分，提示气泡通过 aria-describedby 关联，可交互头像也保留了可见的 focus-visible 焦点环。
可以。图库中的每个模板都采用 MIT 许可 — 个人项目、客户外包和商业产品都能使用，无需署名，也不收取任何授权费。
组件用 React + Tailwind 编写，但标记结构与框架无关。上方的框架板块展示了同一个头像在 Next.js、Vue 3、SvelteKit、Astro 和纯 HTML 中的写法。
按渲染尺寸的约两倍提供方形裁剪图（40px 的头像用 80px 图源），以便在高清屏上保持锐利；显式设置 width 和 height 以避免布局偏移；使用 object-cover；首屏以下的头像加上 loading="lazy"。
当身份识别很重要时用真实照片头像 — 团队名录、客服收件箱、平台评价 — 因为一张脸是认出一个人最快的方式。而当大多数用户从不上传照片、当你希望视觉风格统一且贴合品牌，或者展示真人面孔会带来隐私顾虑时，就用 Notion 风格的插画头像。一套好的方案会两者兼顾：有照片时用照片，没有时用确定性生成的插画或首字母。