邀请推荐（Referral）是什么：效果预览与 AI 设计提示词

效果预览

邀请好友，双方各得 ¥50

好友完成首单后，奖励自动到账，可叠加使用。

ATAO-50OFF复制

适合用在哪

增长期产品的「邀请好友」入口，常放在个人中心、结算成功页、设置页。

容易踩的坑

白字压在浅色渐变端上，对比度掉到 3:1 以下，奖励说明读不清。
邀请码混用 0/O、1/l 等易混字符，口头或手抄分享时频繁填错。
只写「邀请有礼」不写到账条件和上限，事后易产生纠纷与客诉。

设计提示词 · Prompt

邀请推荐（Referral）：整张卡用品牌渐变底（135-150deg 双色到三色）、白字、圆角 11px。自上而下：12px 加粗标题（说双方收益，如「双方各得 ¥50」）、9px 半透明白说明（什么时候到账），然后一个虚线描边的邀请码条——半透明白底、左侧是加宽字距（letter-spacing .11em）的大写码，右侧是一个白底彩色文字的「复制」小按钮。点击复制后按钮文案切换为「已复制」并 1.5s 后复原。可选加一行分享渠道图标。

Referral: the whole card uses a brand gradient background (135-150deg, two to three colors), white text and an 11px radius. From top to bottom: a 12px bold title (state the mutual reward, e.g. "You both get ¥50"), a 9px semi-transparent white explanation (when the reward arrives), then a dashed-border invite code strip — semi-transparent white background, an uppercase code with wide letter spacing (letter-spacing .11em) on the left, and a small "Copy" button with a white background and colored text on the right. After copying, the button label switches to "Copied" and reverts after 1.5s. Optionally add a row of share-channel icons.

常见搭配

同一页面里经常和「邀请推荐」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

复制反馈按钮Copy Button with Feedback 轻提示Toast Notification 数据卡Stat / KPI Card 底部标签栏Bottom Tab Bar

演示 HTML 结构

<div class="s d-center">
  <div class="lc-ref">
    <b>邀请好友，双方各得 ¥50</b>
    <p>好友完成首单后，奖励自动到账，可叠加使用。</p>
    <div class="lc-ref__code"><span>ATAO-50OFF</span><em>复制</em></div>
  </div>
</div>