從一句提示詞生成可上線的頭像。6 個開源模式 — 照片、Notion 風格插畫、首字母備援、在線狀態徽章、疊加頭像組、上載器 — 全部採用 Tailwind + shadcn，符合無障礙標準、可換主題並以 MIT 授權。直接複製程式碼，或把其中任何一個重新生成到你的 Lovable、Bolt、v0 或 Cursor 專案中。
6 個模板
每個模板都是真實的提示詞，而非截圖。複製到任何 AI 編輯器，或在 MeDo 中執行，直接取得 React + Tailwind 程式碼。
載入成功顯示照片，失敗則顯示首字母。每個應用最先需要的頭像。
用 Tailwind CSS 建立一個可重用的 <Avatar /> React 元件。 模式：帶圖片與首字母備援的基礎頭像。 版面：圓形頭像，src 載入成功時渲染 <img>；發生錯誤或缺少 src 時，渲染生成的首字母備援，背景色由姓名字串決定性地推導。 API：提供 src、name（必填，用於 alt 文字與首字母）、size（"xs" | "sm" | "md" | "lg" | "xl"）等 props，並支援 className 傳遞。 包含：由 name 產生的必要 alt 文字、loading="lazy"、透過本地 state 實現的 onError 備援切換、置於連結或按鈕內時的 focus-visible 圓環、透過 Tailwind dark: 類別支援淺色與深色模式。 限制：僅用 React + Tailwind，不使用任何外部 UI 或圖片依賴，圖片載入期間不得出現版面位移（以固定 width/height 預留空間）。
online、away、busy、offline — 一個貼在頭像邊緣的狀態點。
用 Tailwind CSS 建立一個 <AvatarWithStatus /> React 元件。 模式：帶在線狀態徽章的頭像。 版面：圓形頭像，右下角固定一個小狀態點，並以與背景同色的圓環和照片分隔，令它在任何底色上都清晰可辨。 API：提供 src、name、size 及 status（"online" | "away" | "busy" | "offline"）等 props，狀態點顏色按 status 映射，並隨頭像尺寸等比縮放。 包含：首字母備援、為螢幕閱讀器宣告狀態的視覺隱藏文字標籤（不可單靠顏色）、外層容器上的 aria-label、淺色與深色模式支援。 限制：僅用 React + Tailwind，不使用外部 UI 依賴，狀態點覆蓋頭像邊緣不得超過 30%。
重疊的疊加頭像配 +N 溢出標籤。適用於團隊、負責人、協作者。
用 Tailwind CSS 建立一個 <AvatarGroup /> React 元件。 模式：帶溢出計數的疊加（重疊）頭像組。 版面：一行頭像互相重疊約三分之一，每個都帶與背景同色的圓環令疊加後仍清晰；超過最大可見頭像數後，渲染一個相同尺寸與形狀的「+N」計數標籤。 API：提供 users（{ src, name } 陣列）、max（預設 4）、size 等 props，以及可選的 onAddClick，用於在行末渲染一個虛線「邀請」操作區。 行為：hover 時以輕微 translate 與 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、字體大小與 border-radius；shape（"circle" | "squircle" | "square"）；另有 src、name 與 className。 要求：首字母字體大小隨頭像方框等比縮放，令 xs 與 2xl 都保持視覺平衡；所有設計 token 集中在檔案頂部的一個設定物件內，令團隊可以在同一處換主題。 包含：首字母備援、由 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：提供 users（{ src, name, role, team, verified } 陣列）、尾端操作標籤，以及 onAction(user) 回呼等 props。 包含：首字母備援、外層元件中語意化的 <ul>/<li> 標記、尾端按鈕的無障礙名稱（「管理 {name} 的存取權」）、hover 時整列高亮、focus-visible 圓環、淺色與深色模式支援。 限制：僅用 React + Tailwind，不使用表格或清單函式庫，在 320px 寬度下不會溢出。
同一個 頭像 組件，針對它所在網站的類型作調整。
01 / 06
成員清單的成敗全在頭像列 — 照片、姓名、角色、存取權操作。無人上載照片時，首字母備援令表格保持整潔。
挑選與頁面其餘部分相襯的變體，然後產生它。
01 / 06
圖片配首字母備援，每個姓名對應一個決定性的背景色。其他所有變體都以此為基準延伸。
React、Next.js、Vue 3、SvelteKit、Astro 或純 HTML —— 同一個 頭像，六種接入方式。
01 / 06
單一函式元件，帶尺寸查找表與 onError 備援。除了圖片載入失敗的旗標外沒有其他客戶端 state，可安全用於 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 風格的插畫頭像。好的系統兩者兼備：有照片時用照片，沒有時用決定性的插畫或首字母。