买家画像 <PersonaCards />

三张并排卡片，每张是一个角色：图标、决策身份、用他们的话说出的需求、两个目标、两个痛点和触达渠道。主要买家顶部有强调色线条。

分组: 客户 · 采购小组里的三个角色
组件: PersonaCards · #persona-cards
交互: 卡片依次上浮；悬停时卡片抬起，图标格转动并点亮。

适合

B2B 采购小组：决策者、使用者、把关者
要让市场、销售、产品对“卖给谁”达成一致

不适合

在比较三个细分市场（不是同一笔采购里的人）：用 IconGrid
画像没有访谈依据又不标示意

内容上限

1	personas 正好 3 个
2	role ≤ 10 字；part ≤ 6 字；job ≤ 30 字
3	goals / pains 各正好 2 条，每条 ≤ 18 字
4	channels 2–3 个，每个 ≤ 8 个字符
5	focus 最多 1 个

字段

字段	类型
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`personas` · 必填	`{ icon, role, part, job, goals, pains, channels, focus? }[]`	三个角色

示例代码

<PersonaCards
  kicker="买家画像"
  title="同一笔采购，三个角色"
  personas={[
    { icon: 'user-speak', role: '市场负责人', part: '决策者', job: '让我能说清每一笔预算带来了多少客户', goals: ['预算分配有依据', '汇报少花时间'], pains: ['渠道数据对不上', '归因靠手工'], channels: ['行业活动', '同行推荐'], focus: true },
    …
  ]}
  source="示意"
/>