CARD
团队卡片Team Member Card
居中圆形头像 + 姓名 + 职位 + 一排社交小图标。关于我们页的标准件。
效果预览
舟
林一舟
产品 & 增长负责人
适合用在哪
关于页、招聘页、作者介绍。
容易踩的坑
- 成员照片拍摄风格、背景、裁切比例各不相同，整组看起来像临时拼凑。
- 社交图标按钮只有图形没有 aria-label，读屏只能念出「链接」。
- 头像未设 object-fit:cover，非正方形照片在圆形容器里被拉伸变形。
设计提示词 · Prompt
团队卡片（Team Member Card）：垂直居中布局——64-80px 圆形头像（可加 3px 品牌色渐变描边环）→ 姓名 16px 680 字重 → 职位 13px 灰色 → 一行 8-12px 简介 → 底部一排 32px 方圆角社交图标按钮（灰底，悬停变品牌色）。卡片白底 + 1px 描边 + 16px 圆角，整组用 3-4 列网格、gap 24px。悬停时头像轻微放大 + 卡片浮起。头像一定要真实照片，插画头像会显得像模板。
Team Member Card: vertically centered layout — a 64-80px circular avatar (optionally with a 3px brand gradient ring) → name at 16px, 680 weight → role in 13px gray → a short 8-12px bio line → a row of 32px rounded-square social icon buttons at the bottom (gray background, brand color on hover). Card: white background + 1px stroke + 16px radius; arrange the group in a 3-4 column grid with gap 24px. On hover, the avatar scales up slightly + the card lifts. Avatars must be real photos — illustrated avatars make it look like a template.
常见搭配
同一页面里经常和「团队卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-team"> <span class="d-team__av">舟</span> <b>林一舟</b> <span>产品 & 增长负责人</span> <div class="d-team__social"><i>𝕏</i><i>in</i><i>gh</i></div> </div>