VibeMKT Hub

内容与创意 · carousel

网站轮播组件设计 Skill

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

官网可用空间有限时，轮播能让页面一次聚焦一条客户评价、一个合作品牌、一张产品截图或一个精选案例，但用户也可能看不到后面的内容，自动播放还会打断阅读。这套方法先判断内容是否真的需要一次聚焦一项，再用真实素材安排幻灯片顺序、可见数量、前后按钮和分页提示，同时补齐暂停、键盘、触控、减弱动画、服务器返回的完整 HTML、按需加载与空间预留。团队会拿到结构稿、交互说明和多设备检查清单，便于设计与开发实现。

WHAT IT SOLVES

解决的营销问题

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

为客户评价、媒体 Logo、产品截图或精选内容设计网站轮播组件。明确适用场景、幻灯片顺序、控制方式、可访问性与加载要求。跑完你拿到的是布局选择表：轮播、Grid、List 或 Masonry 的适用理由与内容范围，中间一共 6 步。

最适合的真实场景

  • 01

    官网首屏下方准备轮播客户评价，需要让用户看清当前第几条并能主动暂停

  • 02

    产品页有多张功能截图，手机端适合滑动查看，桌面端需要保留清楚的前后按钮

  • 03

    合作品牌 Logo 太多，团队在轮播、网格和静态 Logo 条之间拿不准

  • 04

    现有图片轮播只在点击后请求下一张内容，服务器返回的完整 HTML、加载速度和布局稳定性需要复查

你要先准备的资料

  • 目标页面 URL、截图或线框图，以及轮播所在位置、页面主要任务和目标设备
  • 真实的评价、Logo、产品截图、案例或精选内容清单，以及每项素材的来源与可用条件
  • 希望用户查看或点击的主要动作、内容优先级、是否自动播放和现有交互问题
  • 品牌视觉规范、现有组件或 HTML、图片尺寸、加载限制和桌面与手机宽度

跑完你会拿到什么

  • 布局选择表：轮播、Grid、List 或 Masonry 的适用理由与内容范围
  • 轮播结构稿：幻灯片顺序、单次可见数量、前后按钮、分页提示和主要动作
  • 交互与可访问性说明：键盘、触控、暂停、当前项提示、焦点和减弱动画处理
  • 性能与搜索检查清单：服务器返回的完整 HTML、按需加载、空间预留、图片尺寸和多设备表现

METHOD

Skill 工作流程

先判断内容是否适合藏在轮播里 → 按真实素材安排幻灯片顺序 → 设计前后按钮、分页提示和主要动作 等 6 个环节

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

  1. 先判断内容是否适合藏在轮播里如果用户需要同时浏览、筛选或比较完整目录，优先选择 Grid 或 List。只有页面空间有限、内容数量可控、条目有明确优先级，并且一次聚焦一项更有利于阅读时，才采用 Carousel。
  2. 按真实素材安排幻灯片顺序清点评价、Logo、截图或精选内容，确认每项的来源、标题、图片、说明和链接。把最重要且最能说明页面主题的内容放在前面，避免依赖用户一定会滑到最后一张。
  3. 设计前后按钮、分页提示和主要动作确定一次显示一项还是少量几项，给前后按钮、触控滑动和分页指示安排清楚位置。根据素材决定是否保留链接或主要动作，并让用户随时知道当前项和总数。
  4. 让键盘、触控和减弱动画设置都能使用支持方向键切换、Enter 或空格激活并保留清楚焦点。自动播放需要提供暂停，速度不能妨碍阅读；系统启用减弱动画时应停用或减少自动运动，手机端按钮保留足够触控面积。
  5. 控制图片加载并预留稳定空间首张与当前需要的图片优先加载，屏外图片可按需加载；图片容器提前写明尺寸或比例，避免资源到达后把正文和按钮推开。
  6. 让所有可检索内容进入服务器返回的完整 HTML评价文字、标题和链接应随页面初始 HTML 一起输出，再用 CSS 或 JavaScript 控制显示状态。只在用户点击后通过请求加载的内容，检索系统可能无法稳定读取；这项做法仍不等于获得收录或排名。

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

WORKED EXAMPLE

业务示例

示例：整理 SaaS 产品页的功能截图轮播

示例：整理 SaaS 产品页的功能截图轮播

假设一个 SaaS 团队有六张真实产品截图，准备放在功能介绍后。现有组件自动播放，按钮只在鼠标悬停时出现，手机上图片加载后会把下一段正文向下推。团队提供截图、每张说明、页面线框图和现有组件文件。

  1. 确认截图需要逐张聚焦，保留轮播布局
  2. 按核心任务安排六张截图和说明顺序
  3. 补上常显前后按钮、分页提示与暂停入口
  4. 为键盘、触控和减弱动画设置定义状态
  5. 预留截图比例，并核对六张内容都在初始 HTML

预期结果：交付轮播结构稿、交互状态表和桌面与手机检查清单，列出仍需开发确认的图片按需加载方式。此为假设方案，不预设功能点击率或试用转化变化。

PITFALLS · VERIFICATION

能力边界与常见问题

完整产品目录也使用轮播，用户需要连续点击才能浏览和比较

最常踩的坑

  • 完整产品目录也使用轮播，用户需要连续点击才能浏览和比较
  • 自动播放速度快且没有暂停，用户还没读完评价就切到下一张
  • 前后按钮只在鼠标悬停时出现，键盘和触屏用户找不到控制入口
  • 只把当前幻灯片写进 HTML，其余内容要点击后再请求
  • 图片没有预留宽高或比例，加载后推动正文产生明显布局跳动

怎么确认这次跑对了

  • 已经形成可检查的布局选择表：轮播、Grid、List 或 Masonry 的适用理由与内容范围，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的轮播结构稿：幻灯片顺序、单次可见数量、前后按钮、分页提示和主要动作，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的交互与可访问性说明：键盘、触控、暂停、当前项提示、焦点和减弱动画处理，关键判断能回到输入资料或过程证据。
  • 已逐项检查「完整产品目录也使用轮播，用户需要连续点击才能浏览和比较」等高频问题，并记录需要人工确认的下一步。
网站轮播组件设计 Skill适合哪些岗位使用？

产品营销经理、官网运营、增长设计师、内容团队、独立站运营与前端开发。典型场景包括官网首屏下方准备轮播客户评价，需要让用户看清当前第几条并能主动暂停；产品页有多张功能截图，手机端适合滑动查看，桌面端需要保留清楚的前后按钮；合作品牌 Logo 太多，团队在轮播、网格和静态 Logo 条之间拿不准。

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

至少需要目标页面 URL、截图或线框图，以及轮播所在位置、页面主要任务和目标设备、真实的评价、Logo、产品截图、案例或精选内容清单，以及每项素材的来源与可用条件、希望用户查看或点击的主要动作、内容优先级、是否自动播放和现有交互问题。资料越具体，结果越能直接用于决策。

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

布局选择表：轮播、Grid、List 或 Masonry 的适用理由与内容范围、轮播结构稿：幻灯片顺序、单次可见数量、前后按钮、分页提示和主要动作、交互与可访问性说明：键盘、触控、暂停、当前项提示、焦点和减弱动画处理。每项都可以逐条核对来源和数字。

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

完整产品目录也使用轮播，用户需要连续点击才能浏览和比较；自动播放速度快且没有暂停，用户还没读完评价就切到下一张。出现这些情况时需要人工复核。

支持哪些 AI Agent？

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

ORIGINAL SOURCE

完整 Skill 内容与版本资料

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

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

具体的自动播放间隔、单次可见数量和图片比例，需要根据实际内容长度、设备宽度和阅读节奏确定。文件扫描、组件修改、页面预览、消息提醒和多页面维护能否执行，取决于所用 Agent 的工具配置、项目资料和操作权限。

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

Components: Carousel Layout

Guides carousel (slider) layout design for sequential content display. Carousels show one or few items at a time; users swipe or click to advance. Best when space is limited and multiple items need rotation—testimonials, quotes, logos, gallery highlights.

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 Carousel

Use carousel when Use grid/list when
Limited space Full catalog visible
One focus at a time; rotation desired Browse, compare many items
Testimonials, quotes, logos, featured gallery Products, templates, blog index
Above fold; hero or section highlight Full listing; discovery

See grid for equal-hierarchy display; list for text-heavy scan; masonry for varying-height gallery.

Carousel vs Grid vs List vs Masonry

Layout Structure Best for
Grid Equal rows and columns; all visible Products, templates, features
List Single column; stacked Blog index, docs, search results
Masonry Columns; varying heights Pinterest-style gallery
Carousel Slides; one/few visible; swipe/click Testimonials, logos, featured items

Best Practices

Accessibility
  • Keyboard navigation: Arrow keys to move; Enter/Space to activate; focus visible
  • User control: Don't auto-advance too fast; allow pause; avoid auto-advance if prefers-reduced-motion is set
  • Announcements: Screen reader users need to know current slide and total (e.g., "Slide 2 of 5")
  • Touch targets: ≥44×44px for prev/next buttons on mobile
Performance
  • Lazy load: Load off-screen slides on demand; avoid loading all images upfront
  • Reserve space: Reserve space for slides to avoid layout shift (CLS)
SEO
  • Content in DOM: All carousel content must be in the initial HTML at page load. Google does not simulate clicks; content loaded via AJAX on slide change is not discoverable. Same as tab-accordion.
  • Recommendation: Server-render all slides in HTML; use CSS/JS only to show/hide. See rendering-strategies.

Use Cases

Use case Format Page Skill
Testimonials Quote carousel; multiple testimonials testimonials-generator
Showcase / Gallery Featured items; rotation showcase-page-generator
Press logos "As Seen In" logo strip or quote carousel press-coverage-page-generator
Community Banner carousel below hero community-forum

Related Skills

  • grid: Grid for full catalog; when carousel is too restrictive
  • list: List for text-heavy scan
  • masonry: Masonry for varying-height gallery
  • card: Card structure within carousel slides
  • testimonials-generator: Testimonial carousel; testimonials as content
  • showcase-page-generator: Gallery format options (grid, masonry, carousel)
  • tab-accordion: Similar SEO requirement—content in DOM at load
  • rendering-strategies: SSR, SSG; content in initial HTML for crawlers

来源与版本声明

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

FURTHER READING

网站轮播组件设计 Skill 相关的实操文章

继续了解网站内容卡片、客户评价展示与首屏内容的具体做法。

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

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

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

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

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

  • 转化率
  • AARRR
  • 落地页

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

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

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

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

搭配使用

单张幻灯片的字段与层级可结合内容卡片设计；评价素材需先确认真实性与使用条件，需要同时浏览全部条目时可改用 Grid 或 List。

内容与创意#01

网站网格布局设计 Skill

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

来源项目热度 同步中
内容与创意#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 社群的微信二维码

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