VibeMKT Hub

内容与创意 · card

网站内容卡片设计 Skill

把产品、文章、模板或工具信息整理成便于快速浏览的网站内容卡片。明确标题、图片、说明、元数据和主要动作的顺序。

网站目录里常见的问题，是每张卡片都想说很多，标题、标签、价格、作者和按钮一起争抢注意力；到了手机端，图片和文字又挤成一团。这套方法先确认卡片承担的浏览任务，再为产品卡片、文章卡片、模板卡片或工具卡片选择必要字段，统一图片比例、留白与交互状态。卡片式布局先确定单张卡片的信息层级，再选择外层排列。团队会拿到字段规格、代表卡片样稿和多宽度检查清单，便于设计与开发继续实现。

WHAT IT SOLVES

解决的营销问题

把产品、文章、模板或工具信息整理成便于快速浏览的网站内容卡片。明确标题、图片、说明、元数据和主要动作的顺序

把产品、文章、模板或工具信息整理成便于快速浏览的网站内容卡片。明确标题、图片、说明、元数据和主要动作的顺序。跑完你拿到的是卡片字段规格：必填、选填、显示顺序、文字长度和缺失内容处理，中间一共 6 步。

最适合的真实场景

  • 01

    SaaS 工具目录的卡片同时放功能、价格、标签和多个按钮，访客很难快速比较

  • 02

    内容中心的文章卡片标题过长、摘要不齐，列表滚动时看不出每篇文章的主题

  • 03

    模板库需要统一缩略图、名称、用途和预览入口，又要保留不同模板的辨识度

  • 04

    桌面端三列产品卡片到了手机端仍然并排，图片、说明和 CTA 被挤压

你要先准备的资料

  • 目标页面 URL、截图或线框图，以及卡片承载的产品、文章、模板、工具或资源类型
  • 真实内容样本，包括标题、图片、说明、价格、作者、日期、分类或状态等可用字段
  • 页面主要浏览任务、每张卡片的主要动作，以及点击后进入的真实页面或流程
  • 品牌字体、颜色、间距与组件规范，桌面和手机宽度，以及现有 HTML 或前端组件限制

跑完你会拿到什么

  • 卡片字段规格：必填、选填、显示顺序、文字长度和缺失内容处理
  • 代表卡片样稿：图片、标题、说明、元数据与主要 CTA 的视觉层级
  • 响应式与状态说明：列宽、换行、悬停、描述性链接和手机端排列
  • 检查清单：单卡单主题、内容可扫读、图片替代文本、描述性链接、布局稳定和真实数据适配

METHOD

Skill 工作流程

先确认卡片承载什么内容和动作 → 用真实样本筛选必要字段 → 排出图片、标题和说明的视觉层级 等 6 个环节

一共 6 步。其中 3 项能力决定了换个 AI 会不会更麻烦。

  1. 先确认卡片承载什么内容和动作说明这是产品、文章、模板、工具、功能、资源还是集成卡片，并写清用户扫过列表后要查看详情、预览、使用、连接或购买。每张卡片只围绕一个主题，并保留一个主要动作。
  2. 用真实样本筛选必要字段根据卡片类型，在图片、标题、短说明、价格、作者、日期和分类等字段中，保留有助于浏览与判断的内容，并让每张卡片只围绕一个主题和一个主要动作。
  3. 排出图片、标题和说明的视觉层级先确定标题最醒目，再安排短说明、元数据和主要 CTA；图片承担视觉识别时统一比例与裁切规则。输出代表卡片样稿或组件规格，保持同一组卡片的内边距、间距和字段顺序一致。
  4. 把单卡设计与外层排列分开卡片负责单个内容单元的组成与层级，外层 Grid、List、Masonry 或 Carousel 决定多张卡片如何排列。视觉内容可考虑等权网格，文字较多时可考虑列表，高度差异明显或展示空间有限时另选相应布局。
  5. 补齐响应式和交互状态让列数随可用宽度变化，同一组卡片保持统一的内边距、间距和图片比例。悬停只做轻微阴影或位移，避免缩放引发布局跳动。
  6. 检查缩略图、链接和所在页面语义给缩略图写准确的替代文本，链接使用能说明去向的文字。卡片本身没有专属 Schema；结构化数据应根据所在页面和内容类型选择 Product、Article 或 ItemList 等类型，并与可见内容保持一致。

这个 Skill 用到的能力： 读本地资料写本地文件页面预览 。不同 AI 对这些能力的支持程度不一样，所以同一个 Skill 换个 AI，有几步做法会变。

WORKED EXAMPLE

业务示例

示例：整理 SaaS 工具目录的内容卡片

示例：整理 SaaS 工具目录的内容卡片

假设一个 SaaS 团队准备重做工具目录。现有卡片同时出现名称、长段功能介绍、四个标签、价格、更新时间和两个按钮，手机上每张卡片高度差异很大。团队提供六条真实工具数据、现有页面截图与设计规范。

  1. 确认目录页的主要任务是浏览工具并进入详情
  2. 保留名称、一句用途、一个分类和查看详情入口
  3. 用六条真实数据检查长标题、缺图和不同说明长度
  4. 统一缩略图比例、字段顺序、内边距和按钮位置
  5. 在桌面与手机宽度核对换行、焦点和布局跳动

预期结果：交付字段规格、两种代表卡片状态和多宽度检查记录，列出仍需产品负责人确认的价格与分类字段。此为假设方案，不预设目录点击率或试用转化的变化。

PITFALLS · VERIFICATION

能力边界与常见问题

只用一条短标题、完整图片的理想数据做样稿，真实内容一进入就错位

最常踩的坑

  • 只用一条短标题、完整图片的理想数据做样稿，真实内容一进入就错位
  • 一张卡片同时放两个主要按钮，让用户无法判断下一步
  • 把卡片和 Grid 当成同一层问题，反复调整列数却没有先确定单卡字段
  • 整张卡片可点击时又嵌套多个冲突链接，键盘和触屏操作难以理解
  • 为了悬停效果放大整张卡片，导致旁边内容移动或页面出现布局跳动

怎么确认这次跑对了

  • 已经形成可检查的卡片字段规格：必填、选填、显示顺序、文字长度和缺失内容处理，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的代表卡片样稿：图片、标题、说明、元数据与主要 CTA 的视觉层级，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的响应式与状态说明：列宽、换行、悬停、描述性链接和手机端排列，关键判断能回到输入资料或过程证据。
  • 已逐项检查「只用一条短标题、完整图片的理想数据做样稿，真实内容一进入就错位」等高频问题，并记录需要人工确认的下一步。
网站内容卡片设计 Skill适合哪些岗位使用？

产品营销经理、内容运营、增长设计师、独立站运营、网站编辑与前端开发。典型场景包括SaaS 工具目录的卡片同时放功能、价格、标签和多个按钮，访客很难快速比较；内容中心的文章卡片标题过长、摘要不齐，列表滚动时看不出每篇文章的主题；模板库需要统一缩略图、名称、用途和预览入口，又要保留不同模板的辨识度。

开始前需要准备什么资料？

至少需要目标页面 URL、截图或线框图，以及卡片承载的产品、文章、模板、工具或资源类型、真实内容样本，包括标题、图片、说明、价格、作者、日期、分类或状态等可用字段、页面主要浏览任务、每张卡片的主要动作，以及点击后进入的真实页面或流程。资料越具体，结果越能直接用于决策。

最后能得到什么可检查的结果？

卡片字段规格：必填、选填、显示顺序、文字长度和缺失内容处理、代表卡片样稿：图片、标题、说明、元数据与主要 CTA 的视觉层级、响应式与状态说明：列宽、换行、悬停、描述性链接和手机端排列。每项都可以逐条核对来源和数字。

哪些情况下结果会不可靠？

只用一条短标题、完整图片的理想数据做样稿，真实内容一进入就错位；一张卡片同时放两个主要按钮，让用户无法判断下一步。出现这些情况时需要人工复核。

支持哪些 AI Agent？

已适配 WorkBuddy、OpenClaw、Hermes Agent、Codex、Claude Code、TRAE、ZCode 共 7 种，每种都有独立的安装说明和能力对照。

ORIGINAL SOURCE

完整 Skill 内容与版本资料

2 个原始文件，9 个文档章节，固定在 70987bad

上游原文完整保留在加搜服务器上，可逐节查看，也可以直接下载。 当前镜像共 2 个文件、5.6 KB。

使用说明：原始文件按固定版本完整保留。中文方案沿用卡片组成、类型、层级、响应式、SEO 与可访问性方法；桌面列数和图片比例只作为参考，应结合真实内容与页面宽度确定。平台适配页中的文件扫描、组件修改、批量检查和定期复查属于延伸做法，需要相应工具、项目资料与操作授权。

原始 Skill 文档 上游原文完整保留，中文概述已转换为营销任务、输入资料和交付结果。

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
Blog / Article card Cover image, title, excerpt, date, author blog-page-generator, article-page-generator
Resource card Thumbnail, title, format (guide, webinar), CTA resources-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

来源与版本声明

本页面由加搜科技整理业务说明并托管安装文件。原始 Skill 来源渠道：GitHub； 原始项目名称：card； 固定版本：70987bad4ebe； 许可证：MIT。技能包内保留完整出处和许可证说明。

各 Agent 能力说明参考对应官方文档。页面不提供外部跳转。

使用说明：原始文件按固定版本完整保留。中文方案沿用卡片组成、类型、层级、响应式、SEO 与可访问性方法；桌面列数和图片比例只作为参考，应结合真实内容与页面宽度确定。平台适配页中的文件扫描、组件修改、批量检查和定期复查属于延伸做法，需要相应工具、项目资料与操作授权。

INSTALL

三种安装方式

网站内容卡片设计 Skill v1.0.0，ZIP 带 SHA256 校验

默认做法是把提示词复制给 AI Agent，让它自己下载并安装。提示词里已经写清要用完整 ZIP、装完报告目录、并先跑一个小任务验证。

METHOD 01 · 交给 AI 自己装

复制提示词

适合大多数情况。Agent 会下载 ZIP、解压、放到正确目录，并在缺少权限时告诉你需要手工做哪一步。

请帮我把「网站内容卡片设计 Skill」安装到我正在使用的 AI Agent。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-card-layout/1.0.0/skill-card-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按你所用 Agent 的 Skill 目录规则安装。
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证 Skill 已被识别。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-card-layout/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-card-layout.md

FURTHER READING

网站内容卡片设计 Skill 相关的实操文章

继续了解模板页面、营销对比表与网站视觉内容的具体做法。

营销邮件打开率突然下降，先查送达、名单还是内容

这次营销邮件发出后，打开率比往期低了不少。内容同事先改主题行，运营把发送时间从上午挪到晚上，第二轮数据仍没有起色。这样的排查很常见，问题在于打开率把几件事压成了一个数字：平台怎样统计、邮件有没有被接收

  • Vibe Marketing
  • 营销自动化
  • 内容营销
  • 营销分析

产品那句话客户复述不出来，销售和市场就会各写一套

市场部改官网，销售改话术，投放改广告，三边各自有一套说法，在不少团队里已经算日常。语气不同还能凑合用。客户听完三遍，仍然复述不出你们到底解决哪一件事，这才麻烦。功能清单越长，这句话越容易丢。产品营销要

  • 定位
  • 销售赋能
  • 产品营销

转化率掉了别盯按钮颜色，来的人可能已经换了一批

流量结构一变，后台最显眼的数字就是转化率往下掉。很多人的反应是改按钮颜色、改表单字段、再开一轮首屏测试。这些能测，但排在后面。转化率是「来的人里有多少做了你要的动作」，来的人换了，动作完成率一定会动。

  • 转化率
  • AARRR
  • 落地页

分享到 LinkedIn 的标题，别拿页面 Title 直接去灌

文章页点了分享，LinkedIn 和 X 上弹出来的卡片，用的经常是页面后台 Title。后台 Title 是写给搜索和浏览器标签的，里面会塞栏目名、品牌名、竖线分隔，拿到信息流里又长又像后台。分享卡

  • 海外社媒
  • 内容分发
  • 落地页

竞品分析别从同行名单开始，先找出客户真的拿什么和你比较

市场团队准备改官网首页，先把三家同行交给 AI 研究。首页说了什么、产品有哪些功能、价格怎样分档、案例里用了哪些客户，很快就整理成一份完整的对照表。 开会时，大家依然答不上来：我们的首页究竟要赢过谁？

  • 竞品分析
  • 用户调研
  • 产品营销

试用用户没有付费，团队该先查哪三段数据

假设一个团队月底复盘：14 天试用注册量没有明显下降，付费人数却低于预期。会议很快会出现三种建议——缩短试用期、要求先绑卡、到期前增加优惠提醒。每一种都可能有效，也可能改错位置，因为“试用转付费率”把

  • Vibe Marketing
  • 产品营销
  • 试用转化
  • 用户激活

搭配使用

卡片字段确定后，可继续选择 Grid 或 List 排列；需要建立完整目录页时，再结合模板页面和网站架构规划。

出海增长#01

应用商店优化 Skill

应用商店优化把商店页链接转成六维 ASO 审计与整改清单。

来源项目 · coreyhaines31/marketingskills ★ 47,379 · Fork 7,380
数据与自动化#02

营销动作效果验证 Skill

把营销改动前后的平台数据拉取出来，对比核心指标，生成一份决定保留或放弃该改动的验证报告。

来源项目 · ericosiu/ai-marketing-skills ★ 3,488 · Fork 681
社媒与红人#04

海外社区搭建 Skill

把空白的海外 Discord 或 Reddit 群组，整理成有新人引导路径、版规和活跃度指标的社区运营手册。

来源项目 · coreyhaines31/marketingskills ★ 47,379 · Fork 7,380
内容与创意#06

专家评审 Skill

自动组建 7 到 10 人的虚拟专家团队，对文案、落地页或营销方案进行打分并提出修改建议，直到评分达到 90 分。

来源项目 · ericosiu/ai-marketing-skills ★ 3,488 · Fork 681

VibeMKT COMMUNITY

加入 VibeMKT 社群

微信扫码，交流营销 Skill 的选择、安装、试用与业务化改造。

加入 VibeMKT 社群的微信二维码

二维码会持续显示，关闭弹窗后返回当前页面。