VibeMKT Hub

内容与创意 · sidebar-generator

网站侧栏设计 Skill

为博客、知识库、文档站和内容页规划侧栏。先确定侧栏承担目录导航、相关文章或辅助行动中的哪项任务，再安排位置、组件、固定方式和移动端处理。

内容侧栏经常从一个目录慢慢堆成组件仓库：分类、热门文章、订阅、广告和客户评价同时出现，正文被挤窄，手机端还要额外滚动。这个 Skill 先对照页面类型和主要目标，判断侧栏是否有必要，再选择左侧或右侧、普通滚动或固定显示，并为导航、相关文章、订阅和社会证明组件排出优先级。团队会拿到侧栏结构、组件清单、桌面与移动端规则，以及正文内行动与侧栏行动的取舍说明，方便内容、SEO、设计和开发继续实现。

WHAT IT SOLVES

解决的营销问题

为博客、知识库、文档站和内容页规划侧栏。先确定侧栏承担目录导航、相关文章或辅助行动中的哪项任务，再安排位置、组件、固定方式和移动端处理

为博客、知识库、文档站和内容页规划侧栏。先确定侧栏承担目录导航、相关文章或辅助行动中的哪项任务，再安排位置、组件、固定方式和移动端处理。跑完你拿到的是侧栏定位方案：左侧或右侧、普通滚动或固定显示，以及保留侧栏的理由，中间一共 5 步。

最适合的真实场景

  • 01

    博客侧栏同时放分类、热门文章、订阅、广告和客户评价，正文区域被压窄，主要入口也失去主次

  • 02

    产品文档需要左侧章节导航，但长目录的固定范围、当前章节和滚动状态没有统一规则

  • 03

    内容团队把订阅入口放进侧栏，却没有比较正文内行动与侧栏行动在阅读过程中的位置

  • 04

    桌面侧栏直接搬到手机端，目录、相关文章和表单占满正文前后的大段空间

你要先准备的资料

  • 目标页面 URL、截图或线框图，以及博客、知识库、产品文档、商品内容页等页面类型
  • 侧栏的主要任务、正文中的主要行动、桌面与手机端的用户阅读顺序
  • 候选组件及真实内容样本，包括目录、分类、相关文章、订阅、广告、客户评价或品牌标识
  • 现有正文宽度、页面容器、滚动方式、移动端断点、前端组件和检查要求

跑完你会拿到什么

  • 侧栏定位方案：左侧或右侧、普通滚动或固定显示，以及保留侧栏的理由
  • 组件清单与顺序：导航、相关文章、辅助行动、社会证明和需要删除或移入正文的项目
  • 移动端规则：每个组件隐藏、简化、折叠或移到正文后的处理方式
  • 行动取舍与检查表：正文主要行动、侧栏辅助行动、页面宽度、滚动状态和真实内容核对

METHOD

Skill 工作流程

确认页面类型与侧栏任务 → 决定位置与滚动方式 → 筛选组件并排出顺序 等 5 个环节

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

  1. 确认页面类型与侧栏任务先记录页面属于博客、知识库、产品文档、商品内容页或其他类型，再从章节导航、内容发现、订阅、购物辅助和社会证明中确定一项主要任务。
  2. 决定位置与滚动方式章节导航优先比较左侧侧栏，相关文章、广告和辅助内容优先比较右侧侧栏；再结合正文长度、容器高度和组件任务，选择普通滚动或固定显示。
  3. 筛选组件并排出顺序从目录、分类、相关文章、订阅、广告和社会证明中保留与主要任务直接相关的组件，记录真实内容、目标链接与顺序，删除重复、低价值或拖慢页面的项目。
  4. 区分侧栏行动与正文行动侧栏更适合导航和辅助发现。订阅或购买属于主要行动时，同时比较正文内入口和其他固定入口，避免让侧栏承担页面唯一的转化任务。
  5. 设计移动端规则并检查页面为每个组件写清手机端隐藏、简化、折叠或移到正文后的处理，再用真实内容检查正文宽度、固定范围、滚动遮挡、链接和阅读顺序。

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

WORKED EXAMPLE

业务示例

示例：整理内容博客的右侧栏

示例：整理内容博客的右侧栏

假设一个品牌博客的右侧栏已经放入分类、热门文章、邮件订阅、两处广告、三条客户评价和社交账号。正文在笔记本宽度下只剩很窄一列，手机端又把全部组件接在文章结尾前。

  1. 确认博客侧栏以内容发现为主要任务
  2. 盘点每个组件的真实内容与目标链接
  3. 保留相关文章和一处辅助订阅入口
  4. 把主要订阅行动放回正文相关段落
  5. 规定手机端顺序并检查滚动与正文宽度

预期结果：交付右侧栏结构、组件删减清单、正文与侧栏行动取舍、桌面和手机规则。此为假设方案，不预设点击、订阅、转化、抓取、收录或排名变化。

PITFALLS · VERIFICATION

能力边界与常见问题

把目录、分类、相关文章、订阅、广告和社会证明全部视为必选组件

最常踩的坑

  • 把目录、分类、相关文章、订阅、广告和社会证明全部视为必选组件，侧栏失去清楚任务
  • 只按左右位置做视觉选择，没有检查正文宽度、滚动容器和用户阅读顺序
  • 把订阅或购买完全交给侧栏，正文读到相关内容时没有对应行动入口
  • 固定侧栏的高度超过视口，页面滚动后底部组件无法看到或遮住正文
  • 手机端继续保留全部桌面组件，目录和辅助内容抢在正文前后占用大量空间

怎么确认这次跑对了

  • 已经形成可检查的侧栏定位方案：左侧或右侧、普通滚动或固定显示，以及保留侧栏的理由，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的组件清单与顺序：导航、相关文章、辅助行动、社会证明和需要删除或移入正文的项目，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的移动端规则：每个组件隐藏、简化、折叠或移到正文后的处理方式，关键判断能回到输入资料或过程证据。
  • 已逐项检查「把目录、分类、相关文章、订阅、广告和社会证明全部视为必选组件，侧栏失去清楚任务」等高频问题，并记录需要人工确认的下一步。
网站侧栏设计 Skill适合哪些岗位使用？

内容运营、SEO 负责人、博客编辑、产品文档团队、增长设计师与前端开发。典型场景包括博客侧栏同时放分类、热门文章、订阅、广告和客户评价，正文区域被压窄，主要入口也失去主次；产品文档需要左侧章节导航，但长目录的固定范围、当前章节和滚动状态没有统一规则；内容团队把订阅入口放进侧栏，却没有比较正文内行动与侧栏行动在阅读过程中的位置。

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

至少需要目标页面 URL、截图或线框图，以及博客、知识库、产品文档、商品内容页等页面类型、侧栏的主要任务、正文中的主要行动、桌面与手机端的用户阅读顺序、候选组件及真实内容样本，包括目录、分类、相关文章、订阅、广告、客户评价或品牌标识。资料越具体，结果越能直接用于决策。

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

侧栏定位方案：左侧或右侧、普通滚动或固定显示，以及保留侧栏的理由、组件清单与顺序：导航、相关文章、辅助行动、社会证明和需要删除或移入正文的项目、移动端规则：每个组件隐藏、简化、折叠或移到正文后的处理方式。每项都可以逐条核对来源和数字。

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

把目录、分类、相关文章、订阅、广告和社会证明全部视为必选组件，侧栏失去清楚任务；只按左右位置做视觉选择，没有检查正文宽度、滚动容器和用户阅读顺序。出现这些情况时需要人工复核。

支持哪些 AI Agent？

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

ORIGINAL SOURCE

完整 Skill 内容与版本资料

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

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

上游给出的注意力、移动流量、点击率和转化倍数缺少可追溯样本，公开说明不采用这些数字作为业务判断依据。侧栏组件、订阅文案、客户评价、广告、目标链接和真实页面效果需要由网站团队提供并确认。

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

Components: Sidebar

Guides sidebar design for content sites (blogs, docs). ~80% of users focus on the left; sidebars influence flow but can hurt conversion if overused. Posts without sidebars show 3.1x higher conversion; bottom-right sticky CTAs outperform sidebars (5.62% vs 0.58% CTR).

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.

Initial Assessment

Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for content structure and conversion goals.

Identify:

  1. Content type: Blog, docs, e-commerce
  2. Primary goal: Navigation, CTA, related content
  3. Mobile: Collapse to hamburger or hide on small screens

Best Practices

Placement
  • Left sidebar: Prime for nav; 80% of users focus left
  • Right sidebar: Secondary content, ads, related posts
  • Static vs sticky: Static for content-focused; sticky for persistent CTA (subscription, cart)
Conversion Reality
Approach Typical result
Sidebar CTA <1% opt-in for blog sidebars
In-content CTA 3x+ higher conversion
Bottom-right sticky 5.62% CTR vs 0.58% sidebar
No sidebar 3.1x higher conversion vs with sidebar

Recommendation: Prefer in-content CTAs or bottom-right sticky over sidebar CTAs. Use sidebar for nav and discovery, not primary conversion.

Widget Guidelines
  • One high-value CTA max; avoid clutter
  • Social proof: Testimonials, logos
  • Popular/related posts: Discovery, internal linking
  • Avoid: Too many ads, affiliate links; reduces trust and speed
Mobile
  • Collapse: Hamburger or off-canvas drawer
  • 57%+ mobile traffic: Responsive design non-negotiable
  • Reduce clutter: Hide or simplify sidebar on small screens

Output Format

  • Placement (left/right, static/sticky)
  • Widget list (nav, CTA, related, social proof)
  • Mobile behavior
  • Conversion note (in-content vs sidebar CTA)

Related Skills

  • toc-generator: TOC often in sidebar for long content
  • cta-generator: Sidebar CTA (use sparingly)
  • newsletter-signup-generator: Sidebar signup; consider in-content instead
  • internal-links: Related posts in sidebar

来源与版本声明

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

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

FURTHER READING

网站侧栏设计 Skill 相关的实操文章

继续了解博客侧栏、文档侧栏、相关文章、订阅入口与移动端布局的具体做法。

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

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

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

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

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

  • 转化率
  • AARRR
  • 落地页

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

客户不肯署名，B2B 证言怎样写得可信

市场团队手里经常有这样的反馈：客户在复盘会上说产品确实解决了问题，也同意团队整理成文字，但一提公开姓名、公司和 Logo，审批就停住了。最后，官网只剩一句“某头部客户高度认可”，销售也不愿发给潜客，因

  • 内容营销
  • 用户调研
  • 销售赋能
  • B2B营销

搭配使用

侧栏负责页面内持续导航和辅助发现；整站主导航、文章目录、正文行动、订阅组件与内部链接分别结合对应 Skill 处理。

海外广告投放#01

广告创意批量生产 Skill

广告创意批量生产会把品牌素材、买家评论和历史数据转化成符合各平台字数限制的批量广告文案与短视频脚本。

来源项目 · coreyhaines31/marketingskills ★ 49,944 · Fork 7,586
B2B 获客#03

联合营销 Skill

联合营销把受众重合线索转成伙伴评分表、双方推广分工和线索分配协议。

来源项目 · coreyhaines31/marketingskills ★ 49,944 · Fork 7,586
调研与策略#04

冷启动获客 Skill

把零用户状态转化为明确的渠道清单和 7 周上线时间表，指导产品拿到首批种子用户。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134
社媒与红人#05

海外社区搭建 Skill

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

来源项目 · coreyhaines31/marketingskills ★ 49,944 · Fork 7,586

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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