用途：为界面快速产出风格统一的卡片组件与卡片网格，适配产品、功能、评价、博客等内容场景。
主要能力：
- 先加载设计上下文（读取 .agents/design-context.md，或从 tailwind.config.* / :root 变量取 tokens；缺失则用默认色板与字体并告知用户）。可将 tokens 映射为 CSS 变量（如 --color-primary、--font-heading、--radius、4px 间距刻度），Tailwind v3/v4 分别用 theme.extend 或 @theme 暴露；支持 Figma MCP（get_design_context、get_screenshot）对齐稿。
- 卡片解剖分五个可选区域：Media、Header、Body、Actions、Metadata。
- 布局：均匀网格、主推卡+网格、CSS 瀑布流（columns 配合断点降列）、移动端横向滚动（snap 对齐，需可聚焦且带 aria-label）。
- 悬停效果：轻微上浮、光晕、渐变边框揭示、内容上滑、图片缩放；均需兼顾键盘焦点与触屏。
- 现成模式：产品卡（图片、徽标、收藏按钮、评分、价格、加购）、功能/利益卡、评价卡、博客文章卡。
- 交互卡：可展开（details/summary）、可翻转（键盘焦点也触发，减少动态时降级为交换）。
- 加载骨架屏：结构对应最终卡片，容器加 aria-busy 与 sr-only 提示。
使用方式：按需复制对应 Tailwind 类名或 CSS 规则；示例中的 indigo-/gray- 为 tokens 占位，需替换为项目变量；先明确卡片要放什么内容与唯一主行动。
限制：滚动条隐藏类 scrollbar-hide 非 Tailwind 核心，需插件；翻转卡易被忽略，重要内容建议用可展开卡；评价内容与评分等示例文案属演示，非真实数据；其余信息暂未提供。