VibeMKT Hub

内容与创意 · grid

网站网格布局设计 Skill

为产品网格、卡片网格、模板库、工具库、功能区或文章目录设计清晰的响应式 Grid。先判断 Grid 是否适合，再确定列宽、间距、网格项尺寸与分页方式。

产品库、模板库和内容中心常把许多同级条目排在一起，但列数过多会挤压标题与图片，列数太少又会让目录拖得很长。这套方法先根据素材类型和浏览任务判断采用 Grid 还是 List，再用真实内容样本确定最小列宽、列数、间距、图片比例与响应式变化。需要被搜索引擎抓取的重点目录采用无限滚动时，还会补充分页入口和图片空间预留。团队会拿到网格规格、代表内容样稿与多宽度检查清单，便于设计和开发继续实现。

WHAT IT SOLVES

解决的营销问题

为产品网格、卡片网格、模板库、工具库、功能区或文章目录设计清晰的响应式 Grid。先判断 Grid 是否适合，再确定列宽、间距、网格项尺寸与分页方式

为产品网格、卡片网格、模板库、工具库、功能区或文章目录设计清晰的响应式 Grid。先判断 Grid 是否适合，再确定列宽、间距、网格项尺寸与分页方式。跑完你拿到的是布局选择说明：Grid 或 List 的适用理由、内容范围与仍需确认的问题，中间一共 6 步。

最适合的真实场景

  • 01

    SaaS 工具库在桌面端排成四列，真实标题稍长就挤成多行，卡片高度参差

  • 02

    模板库同时有横图和竖图，图片加载后反复推动标题与按钮位置

  • 03

    产品目录在手机端仍保留三列，图片、价格和主要动作难以辨认和点击

  • 04

    内容中心使用无限滚动展示文章，但需要被搜索引擎抓取的重点目录没有可直接访问的分页入口

你要先准备的资料

  • 目标页面 URL、截图或线框图，以及目录承载的产品、模板、工具、功能、文章或图片类型
  • 一组真实内容样本，包括标题、图片、说明、价格、标签、状态和链接等可用字段
  • 用户的主要浏览任务、内容是否同级、预期条目数量，以及 Grid、List 或其他布局的现状
  • 品牌字体、间距与组件规范，桌面和手机宽度，现有 HTML、CSS 或前端组件限制

跑完你会拿到什么

  • 布局选择说明：Grid 或 List 的适用理由、内容范围与仍需确认的问题
  • 网格规格：最小列宽、列数、间距、网格项尺寸、图片比例与对齐方式
  • 响应式说明：手机、平板和桌面宽度下的列数变化、换行与交互要求
  • 检查清单：真实内容适配、图片空间预留、布局稳定、分页入口与搜索可访问性

METHOD

Skill 工作流程

先根据浏览任务选择 Grid 或 List → 用真实样本核对网格项是否同级 → 确定列宽、列数和统一间距 等 6 个环节

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

  1. 先根据浏览任务选择 Grid 或 List图片、缩略图和视觉差异承担主要识别作用，并且每项内容需要同等强调时，可以采用 Grid。标题、摘要或说明文字较长，用户主要按文字顺序扫描时，List 往往更清楚。
  2. 用真实样本核对网格项是否同级整理一组正常标题、长标题、缺图和不同状态的真实条目，确认它们是否适合使用相同尺寸与强调程度。某一项需要明显突出时，应另外设计精选区，避免在同级网格里制造含糊层级。
  3. 确定列宽、列数和统一间距根据容器宽度、内容长度和卡片尺寸确定最小列宽、列数与 gap。实现阶段可用 CSS Grid 的 auto-fill 或 auto-fit 配合 minmax() 让列宽自适应，固定列数则要为每个目标宽度单独检查。
  4. 为手机、平板和桌面分别检查列数手机通常从单列开始，平板可尝试两列，桌面再根据真实内容扩到三列或四列。断点和列数是项目选择，需检查标题换行、图片尺寸与主要动作，不能直接套用示例数值。
  5. 统一图片比例并提前预留空间给同类图片设定一致的比例或容器尺寸，并在资源加载前预留空间，减少图片到达后推动标题、说明和按钮。缺图、横图、竖图与超长文字都要进入代表样本。
  6. 给需要被搜索引擎抓取的重点目录保留分页入口无限滚动可以保留为浏览体验，但需要被搜索引擎抓取的重点目录应同时拥有可直接访问、相互链接的分页页面。页面源码、分页链接和下一页内容需通过构建产物核对，不能只看滚动后的浏览器状态。

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

WORKED EXAMPLE

业务示例

示例：整理 SaaS 工具目录的响应式网格

示例：整理 SaaS 工具目录的响应式网格

假设一个 SaaS 团队准备展示 24 个工具，每项都有 Logo、名称、两行说明、分类和详情链接。现有页面在桌面端固定四列，长名称会挤压说明；手机端仍显示两列，图片加载时卡片高度变化。团队提供真实条目表、页面截图和现有组件文件。

  1. 确认 24 个工具属于同级浏览内容，保留 Grid
  2. 选择正常、长标题、缺图和不同分类的代表样本
  3. 按内容宽度确定最小列宽、间距与图片比例
  4. 分别检查手机、平板和桌面列数
  5. 核对图片空间、分页链接和构建后的页面源码

预期结果：交付网格规格、四类代表条目样稿与多宽度检查清单，并列出分页组件和缺图状态仍需开发确认的项目。此为假设方案，不预设浏览、点击、收录或转化变化。

PITFALLS · VERIFICATION

能力边界与常见问题

文字很长的目录仍强行使用多列网格，用户难以按标题和摘要扫描

最常踩的坑

  • 文字很长的目录仍强行使用多列网格，用户难以按标题和摘要扫描
  • 只用理想短标题做样稿，接入真实内容后卡片高度和按钮位置全部变化
  • 手机端沿用桌面列数，图片、说明与主要动作被压缩
  • 横图、竖图和缺图没有统一容器，资源加载后反复推动页面
  • 需要被搜索引擎抓取的重点目录只靠无限滚动加载，没有可直接访问的分页链接

怎么确认这次跑对了

  • 已经形成可检查的布局选择说明：Grid 或 List 的适用理由、内容范围与仍需确认的问题，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的网格规格：最小列宽、列数、间距、网格项尺寸、图片比例与对齐方式，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的响应式说明：手机、平板和桌面宽度下的列数变化、换行与交互要求，关键判断能回到输入资料或过程证据。
  • 已逐项检查「文字很长的目录仍强行使用多列网格，用户难以按标题和摘要扫描」等高频问题，并记录需要人工确认的下一步。
网站网格布局设计 Skill适合哪些岗位使用？

产品营销经理、内容运营、增长设计师、独立站运营、网站编辑与前端开发。典型场景包括SaaS 工具库在桌面端排成四列，真实标题稍长就挤成多行，卡片高度参差；模板库同时有横图和竖图，图片加载后反复推动标题与按钮位置；产品目录在手机端仍保留三列，图片、价格和主要动作难以辨认和点击。

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

至少需要目标页面 URL、截图或线框图，以及目录承载的产品、模板、工具、功能、文章或图片类型、一组真实内容样本，包括标题、图片、说明、价格、标签、状态和链接等可用字段、用户的主要浏览任务、内容是否同级、预期条目数量，以及 Grid、List 或其他布局的现状。资料越具体，结果越能直接用于决策。

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

布局选择说明：Grid 或 List 的适用理由、内容范围与仍需确认的问题、网格规格：最小列宽、列数、间距、网格项尺寸、图片比例与对齐方式、响应式说明：手机、平板和桌面宽度下的列数变化、换行与交互要求。每项都可以逐条核对来源和数字。

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

文字很长的目录仍强行使用多列网格，用户难以按标题和摘要扫描；只用理想短标题做样稿，接入真实内容后卡片高度和按钮位置全部变化。出现这些情况时需要人工复核。

支持哪些 AI Agent？

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

ORIGINAL SOURCE

完整 Skill 内容与版本资料

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

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

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

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

Components: Grid Layout

Guides grid layout design for equal-hierarchy, multi-column content display. Grids display multiple items with equal emphasis; space-efficient and scannable. Used for products, templates, tools, features, blog indexes, and galleries.

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 Grid

Use grid when Use list when
Visual content (images, thumbnails) Text-heavy; scan by title
Equal emphasis across items Compact; many items; dense info
Products, templates, gallery, features Blog index, docs, search results
Browsing, discovery Reading, scanning

See list for list layout; card for card structure within grid.

Grid Structure

Element Purpose
Columns 1–4+ columns; adapt to viewport
Gap Consistent spacing between items
Items Equal or proportional sizing
Responsive 1 col mobile → 2–4 cols desktop

Implementation

  • CSS Grid: repeat(auto-fill, minmax(min, 1fr)) or repeat(auto-fit, minmax()) for fluid columns
  • Breakpoints: e.g., 1 col <768px; 2 cols 768–1024px; 3–4 cols >1024px
  • Consistency: Same padding, aspect ratios across items; see card for card structure

Best Practices

Principle Practice
Equal hierarchy Items compete equally; no single dominant item
Consistent sizing Same card/item dimensions in grid
Gap consistency Uniform gap (e.g., 16px, 24px)
No layout shift Reserve space for images; avoid CLS

Responsive

  • Mobile: Single column; full-width items
  • Tablet: 2 columns; touch targets ≥44×44px
  • Desktop: 3–4 columns; hover states OK

Infinite Scroll

If using infinite scroll with grid: crawlers cannot access content loaded on scroll. Provide paginated component pages for SEO-critical content. See site-crawlability for search-friendly implementation.

Related Skills

  • site-crawlability: Infinite scroll SEO; paginated component pages
  • card: Card structure within grid; product, template, tool cards
  • list: List layout vs grid; when to use each
  • masonry: Masonry for varying heights (Pinterest-style)
  • carousel: Carousel for slides/rotation; when grid is too dense
  • hero-generator: Hero above; grid below for content sections
  • products-page-generator: Product grid
  • template-page-generator: Template grid
  • features-page-generator: Feature grid

来源与版本声明

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

FURTHER READING

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

继续了解网站内容卡片、轮播组件与对比表的具体做法。

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

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

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

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

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

  • 转化率
  • AARRR
  • 落地页

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

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

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

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

搭配使用

单个网格项内的字段和层级可结合内容卡片设计；需要逐项聚焦时可考虑轮播，文字密集目录优先考虑 List，网格项高度差异明显时再评估 Masonry。

内容与创意#01

网站轮播组件设计 Skill

为客户评价、媒体 Logo、产品截图或精选内容设计网站轮播组件。明确适用场景、幻灯片顺序、控制方式、可访问性与加载要求。

来源项目 · kostja94/marketing-skills ★ 954 · Fork 132
内容与创意#02

网页步骤区块设计 Skill

把教程、工具用法或落地页操作流程整理成页面内有顺序、可扫描、便于维护的步骤区块。

来源项目 · kostja94/marketing-skills ★ 954 · Fork 132
内容与创意#03

网站列表布局设计 Skill

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

来源项目热度 同步中
内容与创意#05

网站内容卡片设计 Skill

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

来源项目 · kostja94/marketing-skills ★ 954 · Fork 132
SEO 与 GEO#06

电商分类页 SEO Skill

把电商商品目录整理成符合搜索意图的分类树，输出带 SEO 标签和筛选规则的分类页文案及结构。

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

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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