VibeMKT Hub

内容与创意 · list

网站列表布局设计 Skill

为博客索引、文章列表、文档目录、站内搜索结果列表和资源中心设计清楚的响应式列表。先判断文字是否适合顺序扫描，再确定条目字段、信息层级、密度与分页方式。

文章目录、文档中心和搜索结果通常要在有限宽度里展示大量标题、摘要与元数据。字段太多会挤乱主次，行距太松又会拖长查找过程。这套方法先根据浏览任务比较 List 与 Grid，再用真实条目确定简洁列表、丰富列表、表格式列表或缩略图列表，统一标题、日期、作者、分类与链接区域。团队会拿到列表结构稿、字段层级、密度与响应式规格，以及无限滚动配套分页的检查清单，方便设计和开发继续实现。

WHAT IT SOLVES

解决的营销问题

为博客索引、文章列表、文档目录、站内搜索结果列表和资源中心设计清楚的响应式列表。先判断文字是否适合顺序扫描，再确定条目字段、信息层级、密度与分页方式

为博客索引、文章列表、文档目录、站内搜索结果列表和资源中心设计清楚的响应式列表。先判断文字是否适合顺序扫描，再确定条目字段、信息层级、密度与分页方式。跑完你拿到的是布局选择说明：List 或 Grid 的适用理由、列表变体与内容范围，中间一共 6 步。

最适合的真实场景

  • 01

    博客索引同时显示标题、摘要、作者、日期和分类，信息挤在一起，用户难以顺着标题浏览

  • 02

    站内搜索结果的不同内容类型使用不同字段顺序，标题与主要链接位置反复变化

  • 03

    文档目录每条内容只需标题和状态，现有卡片占用过多纵向空间

  • 04

    资源中心依赖无限滚动加载后续条目，但需要被搜索引擎抓取的目录没有可直接访问的分页入口

你要先准备的资料

  • 目标页面 URL、截图或线框图，以及列表用于博客、文档、搜索结果、资源中心或其他目录的说明
  • 一组真实条目样本，包括标题、摘要、日期、作者、分类、状态、缩略图和链接等可用字段
  • 用户主要按什么信息查找内容、预计条目数量、当前采用 List、Grid 或卡片的原因与问题
  • 品牌字体与间距规范、手机和桌面宽度、现有 HTML、CSS、组件及分页或无限滚动方式

跑完你会拿到什么

  • 布局选择说明：List 或 Grid 的适用理由、列表变体与内容范围
  • 列表结构稿：标题、摘要、元数据、缩略图、分隔与整行链接的层级和顺序
  • 密度与响应式规格：条目间距、文字换行、手机全宽、触控区域和字段取舍
  • 检查清单：真实条目适配、链接范围、分页入口、构建 HTML 与搜索可访问性

METHOD

Skill 工作流程

先根据浏览任务选择 List 或 Grid → 用真实条目确定保留哪些字段 → 选择列表变体和内容密度 等 6 个环节

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

  1. 先根据浏览任务选择 List 或 Grid标题、摘要或元数据较多，用户主要按文字顺序查找内容时，List 通常更合适。图片和视觉差异承担主要识别作用，并且各项需要同等强调时，可以采用 Grid。
  2. 用真实条目确定保留哪些字段整理正常标题、长标题、缺少摘要、不同日期和状态的真实条目，确认每项需要标题、摘要、作者、日期、分类、状态、缩略图或链接中的哪些字段。标题保持主要位置，辅助信息使用次要层级。
  3. 选择列表变体和内容密度只有标题与链接时可用简洁列表；博客索引可用标题、摘要、日期和作者组成丰富列表；文档或后台状态适合表格式排列；图片有辨识价值时再加入小缩略图。条目间距、分隔线或交替背景需保持一致。
  4. 统一标题位置与可点击范围标题左对齐，日期、作者、分类与状态保持次要样式。链接可以落在标题或整行，但每一项要使用一致的可点击范围，避免用户反复判断哪里能够打开。
  5. 分别检查手机和桌面列表手机端使用单列全宽条目，优先保留标题和必要元数据；可触控行以不小于 44×44 像素作为参考。长标题可以换行或按项目规则截断，需用真实内容检查，不能只看理想短标题。
  6. 给无限滚动目录保留分页入口无限滚动可以继续服务浏览体验，但需要被搜索引擎抓取的目录应同时提供可直接访问、相互链接的分页页面。页面源码、分页链接和后续内容需从构建产物核对，不能只看滚动后的浏览器状态。

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

WORKED EXAMPLE

业务示例

示例：整理内容中心的文章列表

示例：整理内容中心的文章列表

假设一个 B2B 团队准备在内容中心展示 80 篇文章。每篇有标题、两行摘要、发布日期、作者、分类和详情链接，部分文章没有缩略图。现有页面把这些内容放进三列卡片，长标题高度不一，用户想按主题和日期顺序浏览。团队提供真实文章表、当前页面截图和现有列表组件。

  1. 确认主要任务是按文字顺序查找，选择 List
  2. 选取长标题、缺图和不同分类的代表条目
  3. 确定标题、摘要、日期、作者和分类的层级
  4. 分别检查桌面密度与手机全宽条目
  5. 核对整行链接、分页地址和构建 HTML

预期结果：交付丰富列表结构稿、代表条目样稿、手机与桌面规格及分页检查清单，并列出图片是否保留和摘要截断方式仍需确认的项目。此为假设方案，不预设点击、收录、排名或转化变化。

PITFALLS · VERIFICATION

能力边界与常见问题

图片承担主要识别作用的目录仍使用文字密集列表，用户难以快速区分内容

最常踩的坑

  • 图片承担主要识别作用的目录仍使用文字密集列表，用户难以快速区分内容
  • 标题、摘要、作者、日期、分类和状态使用同样字重，条目主次不清
  • 每一行的链接范围不同，有的标题可点，有的整行可点，用户需要反复判断哪里能够打开
  • 只用短标题做样稿，接入真实文章和搜索结果后换行与密度失控
  • 需要被搜索引擎抓取的目录只靠无限滚动加载，没有可直接访问的分页链接

怎么确认这次跑对了

  • 已经形成可检查的布局选择说明：List 或 Grid 的适用理由、列表变体与内容范围，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的列表结构稿：标题、摘要、元数据、缩略图、分隔与整行链接的层级和顺序，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的密度与响应式规格：条目间距、文字换行、手机全宽、触控区域和字段取舍，关键判断能回到输入资料或过程证据。
  • 已逐项检查「图片承担主要识别作用的目录仍使用文字密集列表，用户难以快速区分内容」等高频问题，并记录需要人工确认的下一步。
网站列表布局设计 Skill适合哪些岗位使用？

内容运营、SEO 负责人、网站编辑、产品营销经理、增长设计师与前端开发。典型场景包括博客索引同时显示标题、摘要、作者、日期和分类，信息挤在一起，用户难以顺着标题浏览；站内搜索结果的不同内容类型使用不同字段顺序，标题与主要链接位置反复变化；文档目录每条内容只需标题和状态，现有卡片占用过多纵向空间。

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

至少需要目标页面 URL、截图或线框图，以及列表用于博客、文档、搜索结果、资源中心或其他目录的说明、一组真实条目样本，包括标题、摘要、日期、作者、分类、状态、缩略图和链接等可用字段、用户主要按什么信息查找内容、预计条目数量、当前采用 List、Grid 或卡片的原因与问题。资料越具体，结果越能直接用于决策。

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

布局选择说明：List 或 Grid 的适用理由、列表变体与内容范围、列表结构稿：标题、摘要、元数据、缩略图、分隔与整行链接的层级和顺序、密度与响应式规格：条目间距、文字换行、手机全宽、触控区域和字段取舍。每项都可以逐条核对来源和数字。

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

图片承担主要识别作用的目录仍使用文字密集列表，用户难以快速区分内容；标题、摘要、作者、日期、分类和状态使用同样字重，条目主次不清。出现这些情况时需要人工复核。

支持哪些 AI Agent？

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

ORIGINAL SOURCE

完整 Skill 内容与版本资料

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

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

列表变体、字段数量、间距、字号、截断方式和断点需要结合真实内容、设备宽度与现有设计系统确定。文件扫描、组件修改、构建检查和页面预览能否执行，取决于所用 Agent 的工具配置、项目资料与操作权限。

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

Components: List Layout

Guides list layout design for linear, stacked content display. Lists are compact, text-heavy; users scan by title or metadata. Used for blog indexes, documentation, search results, and dense content.

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.

When to Use List

Use list when Use grid when
Text-heavy; scan by title Visual content; equal emphasis
Many items; compact display Fewer items; browsing
Blog index, docs, search results Products, templates, gallery
F-pattern reading (top-left, left column) Discovery, exploration

See grid for grid layout; card for card structure.

List Structure

Element Purpose
Items Single column; stacked vertically
Per item Title, optional metadata (date, author), excerpt, link
Spacing Consistent gaps; dividers or alternating background
Density Compact (docs) vs relaxed (blog)

List Variants

Variant Use
Simple list Title + link; minimal (nav, TOC)
Rich list Title, excerpt, date, author
Table-like Columns for metadata (date, status)
With thumbnail Small image + text

Best Practices

Principle Practice
Scannable Clear titles; consistent hierarchy
Compact Less vertical space than grid
Link area Full row or title clickable
Metadata Date, author, category; secondary styling

F-Pattern

Users read top-left first, then scan left column. Place primary content (titles) left-aligned; metadata secondary.

Infinite Scroll

If using infinite scroll for list (e.g., blog index, search results): crawlers cannot access content loaded on scroll. Provide paginated component pages or use traditional pagination for SEO-critical content. See site-crawlability for search-friendly infinite scroll implementation.

Responsive

  • Mobile: Single column; full-width items
  • Touch targets: ≥44×44px for touchable rows
  • Truncation: Long titles; ellipsis or wrap by design

Related Skills

  • site-crawlability: Infinite scroll SEO; paginated component pages; search-friendly implementation
  • grid: Grid vs list; when to use each
  • carousel: Carousel for slides; when list is too long for space
  • card: Card in list (e.g., blog with thumbnail)
  • toc-generator: TOC as list; jump links
  • blog-page-generator: Blog index list
  • article-page-generator: Article list format
  • docs-page-generator: Documentation list

来源与版本声明

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

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

列表变体、字段数量、间距、字号、截断方式和断点需要结合真实内容、设备宽度与现有设计系统确定。文件扫描、组件修改、构建检查和页面预览能否执行，取决于所用 Agent 的工具配置、项目资料与操作权限。

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

FURTHER READING

网站列表布局设计 Skill 相关的实操文章

继续了解网站网格、内容卡片、轮播组件与博客列表页的具体做法。

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

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

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

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

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

  • 转化率
  • AARRR
  • 落地页

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

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

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

关键词拓展Skill怎么用：输入输出契约与验收标准

关键词拓展 Skill 的正确用法，是把它当成一个有明确输入输出契约的执行单元：你交给它种子词、业务边界和排除规则，它返回一张带意图标注的候选词表。多数人调用后拿到一堆不可用的词，问题不在 Skill

  • Vibe Marketing
  • SEO
  • 关键词研究

相似关键词该合并还是分开写：三步意图判断法

相似关键词该合并还是分开写，取决于读者要完成的任务是否同一件，而不取决于字面差了几个字。先判断搜索意图、答案框架和独占信息能不能独立成立，再决定一页还是两页。写成两篇却回答同一问题，传统搜索会互相抢排

  • Vibe Marketing
  • SEO
  • 关键词研究

搭配使用

单个列表项内的字段和层级可结合内容卡片设计；图片承担主要识别作用时可考虑网格，逐项聚焦时可考虑轮播，博客栏目规划与内容矩阵另用博客列表页 Skill。

内容与创意#02

专家评审 Skill

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

来源项目 · ericosiu/ai-marketing-skills ★ 3,488 · Fork 681
SEO 与 GEO#03

导航站收录 Skill

把产品基础信息转为分层的导航站收录档案，按梯队分发到 Product Hunt 与 AI 工具集，获取外链与曝光。

来源项目 · coreyhaines31/marketingskills ★ 47,379 · Fork 7,380
海外广告投放#04

LinkedIn Ads 投放 Skill

为 B2B 获客设计 LinkedIn 广告目标、受众、素材、表单和预算结构。

来源项目 · kostja94/marketing-skills ★ 954 · Fork 132
  • 01

    海外社区论坛推广 Skill

    这个 Skill 产出的copy、creative_matrix，正好是它需要的输入，可以直接接着跑

  • 02

    专家评审 Skill

    这个 Skill 产出的copy、creative_matrix，正好是它需要的输入，可以直接接着跑

  • 03

    导航站收录 Skill

    这个 Skill 产出的copy、creative_matrix，正好是它需要的输入，可以直接接着跑

  • 04

    LinkedIn Ads 投放 Skill

    这个 Skill 产出的copy、creative_matrix，正好是它需要的输入，可以直接接着跑

  • 05

    TikTok Ads 投放 Skill

    这个 Skill 产出的copy、creative_matrix，正好是它需要的输入，可以直接接着跑

  • 06

    TikTok 营销 Skill

    这个 Skill 产出的copy、creative_matrix，正好是它需要的输入，可以直接接着跑

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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