追加推荐（Upsell / Cross-sell）是什么：效果预览与 AI 设计提示词

效果预览

推荐加购

🎁

延保一年多花 ¥99，两年内免费换新

+

🚚

优先配送次日达，仅 ¥19

+

适合用在哪

购物车/结算页的「常一起买」、订阅确认页的增值服务、设置页的功能推荐。

容易踩的坑

推荐项默认已勾选并计入总价，属于暗黑模式，会引发投诉和退款。
推荐内容与当前商品无关，像硬插广告，用户会连带忽略整个区块。
加号按钮热区只有 20px，移动端很容易误点或点不中。

设计提示词 · Prompt

追加推荐（Upsell / Cross-sell）：一个白底卡，顶部一行 9px 大写小标签说明这一块是什么（如「推荐加购」）。下面每项一行：左侧 26px 圆角图标位（渐变底），中间两行文字（10px 加粗名称 + 8.5px 浅灰一行卖点，一定要写用户能得到的收益而不是功能参数），右侧一个 20px 圆形 + 按钮。整行有浅灰底与 8px 圆角。最多放 2-3 项，多了会像广告位。已添加的项要立刻变成「已加入」状态，避免重复点击。

Upsell / Cross-sell: a white card with a 9px uppercase eyebrow label at the top explaining what this block is (e.g. "Recommended add-ons"). Each item is one row: a 26px rounded icon slot on the left (gradient background), two lines of text in the middle (10px bold name + an 8.5px light-gray line of benefit — always describe what the user gains, not technical specs), and a 20px circular + button on the right. Each row has a light-gray background and 8px radius. Show at most 2-3 items; more starts to look like an ad slot. An added item must immediately switch to an "Added" state to prevent duplicate clicks.

常见搭配

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

产品卡片Product Card 加购飞入Add to Cart Fly 轻提示Toast Notification 价格锚点Price Anchoring

演示 HTML 结构

<div class="s d-center">
  <div class="lc-upsell">
    <div class="lc-upsell__t">推荐加购</div>
    <div class="lc-upsell__i"><em>🎁</em><div><b>延保一年</b><span>多花 ¥99，两年内免费换新</span></div><span class="lc-upsell__add">+</span></div>
    <div class="lc-upsell__i"><em>🚚</em><div><b>优先配送</b><span>次日达，仅 ¥19</span></div><span class="lc-upsell__add">+</span></div>
  </div>
</div>