NW PL +4
Nova Wake 40px · online
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create an avatar component.
STYLE
- 32px circle, #E5E5EA surface, 1px inner ring
- initials fallback: 13px 600 #1D1D1F, two characters max
- presence dot 8px, #34C759 online, #C7C7CC away, bottom-right
- a group overlaps by 8px with a +N chip at the end
STATES
- default, with image, initials fallback, group overflow chip
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing avatars fall back to initials.
Use:
- when the image fails or is missing, show up to two initials
- 13px 600 #1D1D1F centered on a tinted surface
- keep sizes, shapes and the presence dot unchanged
Only add the initials fallback.
Create an avatar component, replacing the existing one.
Requirements:
- sizes 24, 32, 40, 64px; circle by default, 8px squircle option
- image fills the shape; initials appear when the image is missing
- presence dot 25% of the size, bottom-right, online green and away grey
- group: 8px overlap, white 2px separator ring, +N chip past four
- the whole avatar is the hit target in menus
Keep the surrounding list layout unchanged.
MOTION
- Image: 200ms fade once loaded. No scale, no pop-in.
- Presence dot: 150ms scale on state change only.
- No hover motion. An avatar is not a button unless it is one.
- prefers-reduced-motion: instant swap.
修改类 Prompt 只动目标，不碰页面其余部分。
头像是什么？ 头像代表一个人。点名形状、无图时的兜底，以及角标含义。
变体 点击属性即可在预览中高亮。
单个 只能从菜单中选择一个值的下拉。
成组 在 Prompt 里写明这个类型。
带状态 在 Prompt 里写明这个类型。
尺寸 给具体值，不要只给感觉词。
形状 给具体值，不要只给感觉词。
图片 给具体值，不要只给感觉词。
首字母 给具体值，不要只给感觉词。
在线状态 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
有图 在 Prompt 里写明这个状态。
首字母兜底 在 Prompt 里写明这个状态。
成组溢出 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
01 底板 02 图片 03 首字母 04 状态点 05 溢出计数 什么时候别用 超过五个人——显示计数而非堆叠 图片只是装饰——它并不代表人 没有姓名且首字母有歧义 Cap a group at four faces — past that, a “+12” chip reads faster than a pile of overlapping circles.
复制 Prompt Create an avatar component.
STYLE
- 32px circle, #E5E5EA surface, 1px inner ring
- initials fallback: 13px 600 #1D1D1F, two characters max
- presence dot 8px, #34C759 online, #C7C7CC away, bottom-right
- a group overlaps by 8px with a +N chip at the end
STATES
- default, with image, initials fallback, group overflow chip
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui