VibeMKT Hub

内容与创意 · masonry

网站瀑布流布局设计 Skill

为作品集、案例墙、UGC 图片墙和视觉灵感库规划响应式瀑布流。结合真实图片比例和页面宽度，确定列数、间距与内容顺序，并检查懒加载和分页入口。

图片瀑布流常见于作品集布局、品牌案例墙和 Pinterest 式布局。用户作品和活动图片的比例经常不一致，强行裁成等高网格会损失画面，直接按原尺寸排列又容易出现大片空白。瀑布流会让不同高度的内容在多列中紧凑堆叠，但视觉顺序、DOM 顺序、懒加载和无限滚动也会影响阅读与抓取。这套方法先比较 Masonry、Grid、Bento 与 Carousel，再用真实素材确定列宽、间距和图片比例，选择 CSS Columns、JS 库或 CSS Grid 近似方案。团队会拿到布局规格、实现选择说明、响应式规则与页面检查清单，方便设计和开发继续实现。

WHAT IT SOLVES

解决的营销问题

为作品集、案例墙、UGC 图片墙和视觉灵感库规划响应式瀑布流。结合真实图片比例和页面宽度，确定列数、间距与内容顺序，并检查懒加载和分页入口

为作品集、案例墙、UGC 图片墙和视觉灵感库规划响应式瀑布流。结合真实图片比例和页面宽度，确定列数、间距与内容顺序，并检查懒加载和分页入口。跑完你拿到的是布局选择说明：Masonry、Grid、Bento 或 Carousel 的适用理由、内容范围与取舍，中间一共 6 步。

最适合的真实场景

  • 01

    客户案例墙同时有横版截图、竖版海报和长图，等高裁切遮住了关键信息

  • 02

    创作者作品集按多列瀑布流展示，但视觉位置与键盘、读屏顺序不一致

  • 03

    活动相册在桌面端排列紧凑，到了手机端仍保留过多列，标题和主要链接难以辨认

  • 04

    视觉灵感库依赖滚动和点击继续加载，后续内容没有稳定 URL、分页链接或可检查的渲染 HTML

你要先准备的资料

  • 目标页面 URL、截图或线框图，以及页面用于作品集、案例墙、UGC 图片墙、活动相册或视觉发现的说明
  • 一组真实图片或视频封面样本，包括宽高尺寸、标题、说明、替代文本、主要链接和可用条件
  • 内容优先顺序、用户主要浏览任务、预计条目数量，以及当前采用 Grid、Masonry、Bento 或 Carousel 的原因与问题
  • 品牌间距与组件规范、手机和桌面宽度、现有 HTML、CSS、前端框架、懒加载、无限滚动与分页方式

跑完你会拿到什么

  • 布局选择说明：Masonry、Grid、Bento 或 Carousel 的适用理由、内容范围与取舍
  • 瀑布流结构稿：列数、列宽、间距、图片宽高比、标题位置、链接区域与内容顺序
  • 实现与响应式说明：CSS Columns、JS 库或 CSS Grid 近似方案，以及手机、平板和桌面变化
  • 检查清单：DOM 阅读顺序、真实素材适配、懒加载、分页 URL、渲染 HTML 与页面表现

METHOD

Skill 工作流程

先判断 Masonry 是否适合当前内容 → 用真实素材确认比例与内容顺序 → 确定列宽、列数和统一间距 等 6 个环节

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

  1. 先判断 Masonry 是否适合当前内容图片或混合媒体的高度变化明显，用户主要靠画面发现内容时，可考虑瀑布流。产品、模板或功能需要在同一行比较时，优先保留等高 Grid；一次只想聚焦少量内容时，再比较 Carousel。
  2. 用真实素材确认比例与内容顺序整理横图、竖图、长图、缺图、长标题和不同链接状态的代表素材，记录真实尺寸、标题、说明和优先顺序。视觉排列可以随列高变化，但 DOM 中的内容顺序仍要保持清楚。
  3. 确定列宽、列数和统一间距从两列到四列的参考范围开始，用真实素材检查列宽、横向与纵向间距、标题位置和链接范围。图片保留自然宽高比，手机端根据可读宽度减少列数，不能直接沿用桌面配置。
  4. 按现有项目选择实现方式CSS Columns 配置简单，但内容通常先从上到下填满一列；JS 瀑布流可以按列高安排条目，但会增加脚本与维护成本；CSS Grid 的 dense 排列属于近似方案。选择时同时检查现有框架、内容顺序和构建方式。
  5. 核对视觉顺序与 DOM 阅读顺序瀑布流的位置变化不能打乱标题、链接和替代文本在 DOM 中的逻辑顺序。用键盘顺序、读屏顺序和真实点击区域复查代表条目，发现跳列或含义断裂时调整结构或改用更规则的 Grid。
  6. 检查懒加载和无限滚动的可访问入口需要搜索引擎发现的内容应存在于可抓取的 HTML 中，或通过普通链接直接访问。无限滚动应为每批内容提供稳定分页 URL 和前后页链接，并在渲染 HTML 中核对内容是否真实存在。

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

WORKED EXAMPLE

业务示例

示例：整理品牌案例作品墙

示例：整理品牌案例作品墙

假设一个设计服务团队准备展示 48 个公开案例。素材中有横版网站截图、竖版海报和长图，每项都有标题、行业标签、详情链接和替代文本。现有三列等高 Grid 会裁掉长图下半部分，团队希望保留完整画面，同时让手机端仍能清楚打开案例。

  1. 整理横图、竖图、长图与长标题样本
  2. 比较 Masonry、Grid 和 Carousel 的浏览方式
  3. 确定内容顺序、列宽、间距和标题位置
  4. 选择与现有框架匹配的实现方案
  5. 检查手机列数、DOM 顺序、懒加载和分页 URL

预期结果：交付瀑布流结构稿、代表案例样稿、实现选择说明、桌面与手机规格，以及阅读顺序和分页检查清单。此为假设方案，不预设停留时间、点击、收录、排名或转化变化。

PITFALLS · VERIFICATION

能力边界与常见问题

图片比例接近、条目需要整齐比较时仍使用瀑布流

最常踩的坑

  • 图片比例接近、条目需要整齐比较时仍使用瀑布流，增加浏览路径却没有带来展示价值
  • 视觉位置随列高变化，DOM 和键盘顺序却让用户在页面上来回跳列
  • 只用理想尺寸图片做样稿，接入长图、缺图和长标题后列高与链接区域失控
  • 直接套用桌面四列到手机端，图片、标题和主要链接变得过窄
  • 后续内容只在点击或滚动后由脚本加载，没有稳定分页 URL、顺序链接和可核对的渲染 HTML

怎么确认这次跑对了

  • 已经形成可检查的布局选择说明：Masonry、Grid、Bento 或 Carousel 的适用理由、内容范围与取舍，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的瀑布流结构稿：列数、列宽、间距、图片宽高比、标题位置、链接区域与内容顺序，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的实现与响应式说明：CSS Columns、JS 库或 CSS Grid 近似方案，以及手机、平板和桌面变化，关键判断能回到输入资料或过程证据。
  • 已逐项检查「图片比例接近、条目需要整齐比较时仍使用瀑布流，增加浏览路径却没有带来展示价值」等高频问题，并记录需要人工确认的下一步。
网站瀑布流布局设计 Skill适合哪些岗位使用？

品牌内容团队、案例运营、社区与 UGC 运营、增长设计师、网站编辑、SEO 负责人和前端开发。典型场景包括客户案例墙同时有横版截图、竖版海报和长图，等高裁切遮住了关键信息；创作者作品集按多列瀑布流展示，但视觉位置与键盘、读屏顺序不一致；活动相册在桌面端排列紧凑，到了手机端仍保留过多列，标题和主要链接难以辨认。

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

至少需要目标页面 URL、截图或线框图，以及页面用于作品集、案例墙、UGC 图片墙、活动相册或视觉发现的说明、一组真实图片或视频封面样本，包括宽高尺寸、标题、说明、替代文本、主要链接和可用条件、内容优先顺序、用户主要浏览任务、预计条目数量，以及当前采用 Grid、Masonry、Bento 或 Carousel 的原因与问题。资料越具体，结果越能直接用于决策。

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

布局选择说明：Masonry、Grid、Bento 或 Carousel 的适用理由、内容范围与取舍、瀑布流结构稿：列数、列宽、间距、图片宽高比、标题位置、链接区域与内容顺序、实现与响应式说明：CSS Columns、JS 库或 CSS Grid 近似方案，以及手机、平板和桌面变化。每项都可以逐条核对来源和数字。

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

图片比例接近、条目需要整齐比较时仍使用瀑布流，增加浏览路径却没有带来展示价值；视觉位置随列高变化，DOM 和键盘顺序却让用户在页面上来回跳列。出现这些情况时需要人工复核。

支持哪些 AI Agent？

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

ORIGINAL SOURCE

完整 Skill 内容与版本资料

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

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

列数、列宽、间距、实现方式、断点与加载策略需要结合真实素材、现有框架和设备宽度确定。素材扫描、组件修改、构建检查和页面预览能否执行，取决于所用 Agent 的工具配置、项目资料与操作权限。

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

Components: Masonry Layout

Guides masonry layout design for content with varying heights. Masonry stacks items in columns without distinct rows; items fill gaps like a brick wall. Best for image galleries, portfolios, and discovery-focused platforms.

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 Masonry

Use masonry when Use grid when
Varying heights Equal-height items
Image-heavy; varied aspect ratios Products, templates (consistent)
Gallery, portfolio, showcase Card grid
Discovery, browsing; visual-first Structured browsing

See grid for equal-height grid; card for card structure.

Masonry vs Grid vs Bento vs Carousel

Layout Structure Best for
Grid Equal rows and columns; uniform items Products, templates, features
Masonry Columns; items stack without rows; gaps filled Pinterest, Behance; varied content
Bento Intentional sections; predefined sizes Homepage, dashboard; Apple-style
Carousel Slides; one/few visible; swipe/click Testimonials, logos, featured items; see carousel

Masonry Structure

Element Purpose
Columns 2–4 columns; fluid or fixed
Items Varying heights; natural aspect ratio
Gap Consistent horizontal and vertical spacing
Order Top-to-bottom fill within columns

Implementation

  • CSS columns: column-count; simple, no JS; but items flow top-to-bottom then next column
  • Masonry.js / libraries: True masonry (left-to-right fill); may need JS
  • CSS Grid + grid-auto-flow: dense: Approximate; no JS; see grid for dense grid

Note: Pure masonry can create accessibility challenges (screen reader order); ensure logical DOM order.

SEO Considerations

Masonry + infinite scroll = content not crawlable. Masonry galleries often use infinite scroll or lazy load; crawlers cannot emulate scroll or "Load more" clicks, so content beyond the initial view is not discoverable.

If you use Then
Infinite scroll Provide paginated component pages with full URLs; implement pushState; see site-crawlability for search-friendly infinite scroll
Lazy load Ensure content exists in HTML or is reachable via crawlable links
Pagination Prefer for SEO-critical content; crawlers can follow next/prev links

Reference: Google – Infinite scroll search-friendly recommendations

Best Practices

Principle Practice
Visual-first Thumbnails; minimal text
Aspect ratio Preserve original; avoid forced cropping
Lazy load Many images; load on scroll
Performance Masonry can be heavy; consider grid for simpler cases

Use Cases

Use case Format Page Skill
Showcase / Gallery User work; varied sizes showcase-page-generator
Portfolio Projects; mixed media —
Pinterest-style Pins; discovery —
Image-heavy blog Blog with varied images blog-page-generator

Related Skills

  • site-crawlability: Infinite scroll SEO; paginated component pages; search-friendly implementation
  • grid: Equal-height grid; when masonry is overkill
  • carousel: Carousel for slides/rotation; when masonry is overkill
  • card: Card structure; masonry often uses cards
  • showcase-page-generator: Gallery masonry
  • image-optimization: Lazy load, aspect ratio, LCP

来源与版本声明

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

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