基础卡片
一块内容一个卡：图在上、标题摘要在下，带一两个操作——商品、文章、课程都用它装。
商品卡
Product Card
卖货的卡：商品图、名字、价格、销量或评价，点进去就是详情。
全平台通用交易内容区组件
大白话说明
商品卡为「快速比较后下单」优化：图占一半以上建立欲望，名字两行讲清是什么，价格用最大字重抢视线，原价划线造锚点，销量/评分给信任。促销角标只贴一个，多了互相抵消。
什么时候用
电商列表、推荐位、搜索结果——一切陈列商品的地方。
什么时候不用
只有三五个商品的精品陈列可以放大图做编辑式排版，别用统一卡片把气质磨平。
细节与变体
- 价格的小数位、货币符号字号要小于整数部分，这是行业惯例
- 图加载前用同色块占位，防止卡片高度跳动
- 「已售罄」状态直接压在图上置灰，不要等点进去才发现
配套效果见下方「可用效果」。
配套提示词（点开填空、复制）
可用效果
参考实现（开源）
- Gestalt（Pinterest） ↗ Apache-2.0 · 免费（Apache-2.0）
Pinterest 的设计系统：瀑布流 Masonry 的出处，图片型产品的排布参照。
- Magic UI 动效组件 ↗ MIT · 免费（MIT）
React + Tailwind 的动效组件集：跑马灯、光晕、数字滚动都有，本站效果库的重要参考生态。