设计、优化或审查卡片布局时使用：用自包含卡片分组内容…

适用于为博客、产品、模板、工具、功能、画廊、集成等内容页面设计、优化或审计卡片与卡片网格布局。

适用场景

解决思路

1. 首次调用时，如合适，先用 1–2 句话说明该技能覆盖什么、为什么重要，再提供主要输出；后续使用或用户要求跳过时，直接提供主要输出。
2. 卡片解剖：容器负责边框、背景、阴影，并保持一致 padding。
3. 卡片解剖：图片/缩略图作为视觉锚点，保持一致宽高比，常用 1:1、4:3。
4. 卡片解剖：标题要清晰，在相关场景包含关键词。
5. 卡片解剖：描述/元数据提供支持性文本，如日期、作者、分类。
6. 卡片解剖：CTA 使用操作按钮或链接，如 `View`、`Use`、`Connect` 等。
7. 卡片原则：一张卡片等于一个主题；保持每张卡片聚焦以便扫描。
8. 产品卡片：使用图片、名称、价格、CTA（如 `Add to cart`、`View`），并配合 products-page-generator。
9. 模板卡片：使用缩略图、名称、短描述、`Use` 或 `Preview` CTA，并配合 template-page-generator。
10. 工具卡片：使用名称、一句话收益、指向工具页的 CTA，并配合 tools-page-generator。
11. 功能卡片：使用名称、收益、可选截图，并配合 features-page-generator。
12. 画廊/展示项：使用缩略图、标题、创建者、链接，并配合 showcase-page-generator。
13. 集成卡片：使用 Logo、名称、短描述、`Connect` 或 `Install`，并配合 integrations-page-generator。
14. 博客/文章卡片：使用封面图、标题、摘要、日期、作者，并配合 blog-page-generator、article-page-generator。
15. 资源卡片：使用缩略图、标题、格式（如 guide、webinar）、CTA，并配合 resources-page-generator。
16. 布局与响应式：网格使用 CSS Grid `repeat(auto-fill, minmax())` 或 Flexbox；列数随视口自适应。
17. 布局与响应式：移动端小屏使用单列；桌面端使用 2–4 列。
18. 布局与响应式：所有卡片保持相同 padding、spacing 和宽高比。
19. 布局与响应式：Hover 使用轻微 elevation（shadow、translate-y）；避免使用会导致布局偏移（CLS）的 scale。
20. 设计原则：视觉层级为标题 > 描述 > CTA；保持清晰流。
21. 设计原则：可扫描性要求文本最少；使用利益导向文案。
22. 设计原则：一致性要求网格中所有卡片结构相同。
23. 设计原则：行动清晰要求每张卡片一个主 CTA；避免选择过载。
24. SEO 与 Schema：卡片本身没有特定 schema；布局属于 UI。
25. SEO 与 Schema：卡片中的内容根据页面使用合适 schema（如 Product、Article、ItemList 等）；参见 schema-markup。
26. SEO 与 Schema：缩略图添加 alt 文本；参见 image-optimization。
27. SEO 与 Schema：链接使用描述性锚文本；做内部链接；参见 internal-links。
28. 布局选择：视觉内容且等权重（产品、模板、画廊）使用 Grid；参见 grid。
29. 布局选择：文本密集、紧凑、按标题扫描（博客索引、文档）使用 List；参见 list。
30. 布局选择：高度不一（图片画廊、作品集）使用 Masonry；参见 masonry。
31. 布局选择：空间有限（推荐语、Logo、精选轮换）使用 Carousel；参见 carousel。
32. 相关技能配合：产品卡片、网格布局、分类页配合 products-page-generator。
33. 相关技能配合：模板卡片、画廊结构配合 template-page-generator。
34. 相关技能配合：工具卡片、工具包中心配合 tools-page-generator。
35. 相关技能配合：功能网格/列表配合 features-page-generator。
36. 相关技能配合：画廊网格、单项格式配合 showcase-page-generator。
37. 相关技能配合：目录网格、集成卡片配合 integrations-page-generator。
38. 相关技能配合：产品网格、一致布局配合 category-page-generator。
39. 相关技能配合：实现卡片展示的网格布局时配合 grid；判断何时使用网格也参见 grid。
40. 相关技能配合：实现列表布局、以列表格式展示卡片时配合 list。
41. 相关技能配合：实现不同高度卡片（画廊）时配合 masonry。
42. 相关技能配合：实现卡片轮播（推荐语、精选）时配合 carousel。
43. 相关技能配合：区分 Hero 与卡片——Hero 是首屏单个主视觉，卡片是重复单元；需要 Hero 时配合 hero-generator。
44. 相关技能配合：字体、间距、视觉一致性配合 brand-visual-generator。
45. 相关技能配合：卡片缩略图优化、alt 文本、LCP 配合 image-optimization。

适用边界 · 注意事项

• 需要单个首屏主视觉、非重复内容单元时，不要用卡片布局，应使用 hero-generator。
• 内容以文本为主、需要紧凑按标题扫描（如博客索引、文档）时，不要优先用卡片网格，应使用 list。
• 卡片高度差异很大且需要瀑布流/作品集，或空间有限需轮播时，不要用普通卡片网格，应分别使用 masonry 或 carousel。