产品卡片（Product Card）是什么：效果预览与 AI 设计提示词

效果预览

限时 -30%

山系帆布双肩包

¥299~~¥428~~

适合用在哪

电商列表页、数字商品商店、模板市场。

容易踩的坑

悬停切换第二张图在移动端不存在，关键的上身效果图用户永远看不到。
加购按钮仅 36px 且贴着卡片边缘，触摸时容易误触进入详情页。
划线原价没有读屏说明，读屏会把两个价格连在一起念，用户不知道哪个是现价。

设计提示词 · Prompt

产品卡片（Product Card）：3:4 或 1:1 商品图占上部（悬停时切换到第二张图或轻微放大），左上角放状态角标（"新品"/"-30%"/"热卖"，胶囊形白底）。下方 16-20px 内边距：商品名 14-15px 600 字重（一行截断）→ 次要信息（颜色数/评分）12px 灰 → 底部一行两端对齐：价格 18-20px 700 字重（划线原价用 s 标签 12px 灰）+ 圆形加购按钮（36-40px、深色底白图标）。悬停时加购按钮从半透明变实色。整卡白底 + 1px 描边 + 12-16px 圆角。

Product Card: a 3:4 or 1:1 product image takes the top portion (switches to a second image or zooms slightly on hover), with a status badge in the top-left corner ("New"/"-30%"/"Hot", white pill). Below, 16-20px padding: product name at 14-15px, 600 weight (truncated to one line) → secondary info (number of colors/rating) in 12px gray → a bottom row justified to both ends: price at 18-20px, 700 weight (original price struck through with an s tag in 12px gray) + a circular add-to-cart button (36-40px, dark background with white icon). On hover, the add-to-cart button goes from semi-transparent to solid. Card: white background + 1px stroke + 12-16px radius.

常见搭配

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

加购飞入Add to Cart Fly 筛选标签Filter Chips 星级评分展示Star Rating Display 稀缺性徽章Scarcity Badge

演示 HTML 结构

<div class="s d-prod">
  <div class="d-prod__img d-img d-img--warm">
    <span class="d-prod__badge">限时 -30%</span>
  </div>
  <div class="d-prod__bd">
    <b>山系帆布双肩包</b>
    <div class="d-prod__row">
      <span class="d-prod__price">¥299<s>¥428</s></span>
      <button class="d-btn d-btn--p d-btn--sm" style="border-radius:99px">加入购物车</button>
    </div>
  </div>
</div>