摆内容
卡片
Card
「一个个小方块」「带边框的盒子」「信息小块」「圆角白块」「商品那种小格子」「卡片式布局」「一块一块的内容」
LIVE DEMO真实可交互，动手试试
周末徒步路线
精选三条城市周边轻徒步路线，适合新手，全程约两小时。
- 英文名
- Card
- 别名 · 俗称
- 信息卡卡片容器内容卡shadcn: Card
- Web 叫法
- Card
- 大白话定义
- 把一张图、一段字、几个按钮装进一个带边框的盒子里，就是一张卡片。
- 部位拆解
- 封面图 Cover可选，顶部配图吸引眼球
- 标题 Title一句话说清卡片主题
- 正文 Content一两行简介或关键信息
- 操作区 Actions底部放按钮，比如「查看详情」
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
做一个商品卡片（Card）：顶部封面图，中间标题和 ¥99 价格，底部「加入购物车」按钮（Button）
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的卡片（Card）。逐一排除：卡片内容长短不一又没设等高，网格里高低错位；封面图没固定宽高比，加载瞬间内容往下跳；卡片内部按钮点击事件冒泡，误触发整卡跳转；hover 阴影在深色背景下看不见，悬浮反馈丢失。症状是：