卡片布局设计指南：响应式网格、SEO优化与UI组件最佳实践

card by kostja94/marketing-skills

300 周安装量

309 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/kostja94/marketing-skills --skill card

设计用户体验前端架构

🇨🇳中文介绍

组件：卡片布局

指导卡片布局设计，以实现可快速浏览、响应式的内容展示。卡片是自包含的容器，用于分组相关内容；常用于网格布局中，展示博客文章、产品、模板、工具、功能、图库和集成。

调用时机：在首次使用时，如果合适，可以用 1-2 句话开头，说明此技能涵盖的内容及其重要性，然后提供主要输出。在后续使用或用户要求跳过时，直接进入主要输出。

卡片构成要素

元素	用途
容器	边框、背景、阴影；一致的边距
图片 / 缩略图	视觉锚点；一致的宽高比（常用 1:1, 4:3）
标题	清晰；在相关处使用富含关键词的标题
描述 / 元数据	辅助文本；日期、作者、类别
行动号召	操作按钮或链接；如“查看”、“使用”、“连接”等

原则：一张卡片 = 一个主题。保持每张卡片内容聚焦，以利于快速浏览。

按用例划分的卡片类型

类型	典型元素

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

布局与响应式设计

网格：使用 CSS Grid 的 repeat(auto-fill, minmax()) 或 Flexbox；列数根据视口自适应
移动端：小屏幕上为单列；桌面端为 2-4 列
一致性：所有卡片保持相同的边距、间距和宽高比
悬停效果：轻微的提升效果（阴影、垂直平移）；避免使用导致布局偏移的缩放效果

原则	实践
视觉层次	标题 > 描述 > 行动号召；清晰的视觉流
可浏览性	文本精简；文案以好处为导向
一致性	网格中所有卡片结构相同
操作明确性	每张卡片一个主要行动号召；避免选择过多

SEO 与结构化数据

卡片本身：无特定结构化数据；布局属于用户界面
卡片内容：为页面使用适当的结构化数据（产品、文章、项目列表等）；参见 schema-markup
图片：缩略图添加替代文本；参见 image-optimization
链接：使用描述性锚文本；内部链接；参见 internal-links

网格 vs 列表 vs 瀑布流 vs 轮播

布局	最适合	技能
网格	视觉内容（产品、模板、图库）；强调平等	grid
列表	文本密集内容（博客索引、文档）；紧凑；按标题浏览	list
瀑布流	高度不一的内容；图片库、作品集	masonry
轮播	空间有限；推荐语、徽标、特色内容轮换	carousel

products-page-generator：产品卡片、网格布局、分类页面
template-page-generator：模板卡片、图库结构
tools-page-generator：工具卡片、工具集中心
features-page-generator：功能网格/列表
showcase-page-generator：图库网格、每项格式
integrations-page-generator：目录网格、集成卡片
category-page-generator：产品网格、一致的布局
grid：用于卡片展示的网格布局；何时使用网格
list：列表布局；卡片以列表格式排列
masonry：用于高度不一卡片的瀑布流布局（图库）
carousel：用于卡片轮播的轮播布局（推荐语、特色内容）
hero-generator：英雄区域 vs 卡片——英雄区域是首屏的单一区域；卡片是重复的单元
brand-visual-generator：排版、间距、视觉一致性
image-optimization：卡片缩略图优化、替代文本、LCP

🇺🇸English

Components: Card Layout

Guides card layout design for scannable, responsive content display. Cards are self-contained containers that group related content; used in grids for blog posts, products, templates, tools, features, galleries, and integrations.

When invoking : On first use , if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

Card Anatomy

Element	Purpose
Container	Border, background, shadow; consistent padding
Image / Thumbnail	Visual anchor; consistent aspect ratio (1:1, 4:3 common)
Title	Clear; keyword-rich where relevant
Description / Metadata	Supporting text; date, author, category
CTA	Action button or link; "View," "Use," "Connect," etc.

Principle : One card = one topic. Keep each card focused for scannability.

Card Types by Use Case

Type	Typical Elements	Page Skill
Product card	Image, name, price, CTA (Add to cart, View)	products-page-generator
Template card	Thumbnail, name, short description, "Use" or "Preview" CTA	template-page-generator
Tool card	Name, one-line benefit, CTA to tool page	tools-page-generator
Feature card	Name, benefit, optional screenshot	features-page-generator
Gallery / Showcase item	Thumbnail, title, creator, link	showcase-page-generator
Integration card	Logo, name, short description, "Connect" or "Install"	integrations-page-generator

Layout & Responsiveness

Grid : CSS Grid repeat(auto-fill, minmax()) or Flexbox; columns adapt to viewport
Mobile : Single column on small screens; 2–4 columns on desktop
Consistency : Same padding, spacing, and aspect ratios across cards
Hover : Subtle elevation (shadow, translate-y); avoid scale that causes layout shift (CLS)

Design Principles

Principle	Practice
Visual hierarchy	Title > description > CTA; clear flow
Scannability	Minimal text; benefit-led copy
Consistency	Same structure across all cards in a grid
Action clarity	One primary CTA per card; avoid choice overload

SEO & Schema

Cards themselves : No specific schema; layout is UI
Content in cards : Use appropriate schema for the page (Product, Article, ItemList, etc.); see schema-markup
Images : Alt text on thumbnails; see image-optimization
Links : Descriptive anchor text; internal linking; see internal-links

Grid vs List vs Masonry vs Carousel

Layout	Best for	Skill
Grid	Visual content (products, templates, gallery); equal emphasis	grid
List	Text-heavy (blog index, docs); compact; scan by title	list
Masonry	Varying heights; image gallery, portfolio	masonry
Carousel	Limited space; testimonials, logos, featured rotation	carousel

Related Skills

products-page-generator : Product cards, grid layout, category pages
template-page-generator : Template cards, gallery structure
tools-page-generator : Tool cards, toolkit hub
features-page-generator : Feature grid/list
showcase-page-generator : Gallery grid, per-item format
integrations-page-generator : Catalog grid, integration cards
category-page-generator : Product grid, consistent layout
grid : Grid layout for card display; when to use grid
list : List layout; cards in list format
masonry : Masonry for varying-height cards (gallery)
carousel : Carousel for card slides (testimonials, featured)
hero-generator : Hero vs card—hero is single above-fold; cards are repeated units
brand-visual-generator : Typography, spacing, visual consistency
image-optimization : Card thumbnail optimization, alt text, LCP

Weekly Installs

174

Repository

kostja94/market…g-skills

GitHub Stars

239

First Seen

Mar 6, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

cursor158

gemini-cli157

kimi-cli157

codex157

opencode157

github-copilot157

前端设计技能指南：避免AI垃圾美学，打造独特生产级界面

46,600 周安装

产品卡片	图片、名称、价格、行动号召（加入购物车、查看）	products-page-generator
模板卡片	缩略图、名称、简短描述、“使用”或“预览”行动号召	template-page-generator
工具卡片	名称、一句话说明其好处、指向工具页面的行动号召	tools-page-generator
功能卡片	名称、好处、可选截图	features-page-generator
图库 / 展示项卡片	缩略图、标题、创作者、链接	showcase-page-generator
集成卡片	徽标、名称、简短描述、“连接”或“安装”行动号召	integrations-page-generator
博客 / 文章卡片	封面图片、标题、摘要、日期、作者	blog-page-generator, article-page-generator
资源卡片	缩略图、标题、格式（指南、网络研讨会）、行动号召	resources-page-generator