VibeMKT Hub

ZCode × 内容与创意 · 可处理 6/6 个环节

ZCode × 网站列表布局设计 Skill

网站列表布局设计 Skill有 6 个执行步骤，ZCode 可以处理 6 步。它能把成果渲染成可直接查看的页面，正好对应这个 Skill 里最吃工具的一段。这个 Skill 用到的能力它全部原生支持，不需要额外的手工衔接。

  • 6个核心环节
  • 6/6当前可处理的环节
  • 未进前十在本 Agent 的推荐清单

WHY ZCODE

适配结论

ZCode 适合在较长项目里维护多个目录页面和共享 List 组件

网站列表布局设计 Skill可以作为独立任务在 ZCode 中使用。具体适配方式、资料交接和需要人工确认的环节见下方说明。

ZCode 适合在较长项目里维护多个目录页面和共享 List 组件。它可以把页面清单、组件引用、内容数据与每轮检查记录放进同一项目，先完成一个代表页面，再按共享规则和页面特例分批推进；离开电脑后也能继续跟进待确认项。

页面预览

把成果渲染成可直接查看的页面。网页类成果可以直接预览并配合 Git 状态检查改动

CAPABILITY × STEP

核心差异

按页面清单分批统一博客、文档和搜索结果列表

网站列表布局设计 Skill 共 6 个环节。ZCode 可以处理 6 个环节。实际结果取决于输入资料、已接入工具与运行环境。

6个核心环节
6当前可处理的环节
无需要工具与配置
无需要团队补充
ZCode 跑 网站列表布局设计 Skill 的逐步对照 · 每步要做什么见 网站列表布局设计 Skill原生页面
步骤所需能力等级在 ZCode 下具体怎么做
01 先根据浏览任务选择 List 或 Grid 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
02 用真实条目确定保留哪些字段 读本地资料 直接执行 直接交给 ZCode：它能直接读取本机目录里的资料。
03 选择列表变体和内容密度 写本地文件 直接执行 直接交给 ZCode：它能把过程文件和成果直接落盘保存。
04 统一标题位置与可点击范围 写本地文件 直接执行 直接交给 ZCode：它能把过程文件和成果直接落盘保存。
05 分别检查手机和桌面列表 页面预览 直接执行 直接交给 ZCode：它能把成果渲染成可直接查看的页面。
06 给无限滚动目录保留分页入口 读本地资料页面预览 直接执行 直接交给 ZCode：它能直接读取本机目录里的资料。

官网可能同时有博客、文档、资源中心和搜索结果，共享列表基础，却使用不同字段、密度和分页方式。ZCode 可以先建立页面—组件—数据对应表，标出共享标题层级和场景例外。每批完成后记录实际文件、代表状态与待确认问题，减少长任务中的重复修改。

  1. 01

    判断 List 是否适合当前内容

    引用页面、组件和数据文件，按页面记录文字扫描、视觉浏览、内容密度与 List/Grid 选择。

  2. 02

    用真实条目确定字段与信息层级

    每类目录选择正常、长标题、缺摘要和不同状态，建立共享字段、页面特有字段和链接清单。

  3. 03

    设计列表密度、链接区域和响应式规则

    先完成一个代表页面，确认字段层级、间距、整行链接和手机取舍后，再更新共享组件或同族页面。

  4. 04

    检查分页、构建内容和真实页面表现

    每批回看构建产物、页面预览、文件差异与检查记录；没有实际预览的页面继续保留待检查状态。

IMPORT · RUN

资料导入与任务下发

启用 Skill 并指定首批页面

ZCode可以直接读取目录里的资料，把这些文件放在同一个位置即可。

需要准备的资料

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

在 ZCode 里是这样推进的

打开营销项目工作区，用 @ 引用网站文件、品牌资料、数据表或需求文档，并为长任务设置一个可以验收的目标。

从设置页导入或安装 Skill，在对话中输入 $ 选择技能；它可以结合文件、终端、预览和子任务持续推进。

在用户 Skills 目录安装后刷新启用，把页面清单、组件路径、数据文件、品牌规范和检查命令加入项目，先选一个代表页面。

COLLABORATE · CHAIN

协作与后续衔接

共享 List 组件只由一个任务修改

多个子任务分页面检查时，共享组件保持单一修改责任，其他任务只报告页面特例，合并前对照状态表。

代表页确认后再扩到同族页面

先锁定真实样本、字段层级、密度和链接范围，再按组件引用关系扩展；不同目录不强行共用全部字段和断点。

COMBINATION CASE

场景化实战案例

示例：分批统一四类官网列表

假设博客、文档、资源中心和搜索结果使用四套 List，团队准备统一标题层级、间距、链接范围和分页检查。

  1. 建立页面组件对应表
  2. 整理共享和特有字段
  3. 完成资源中心样本
  4. 分批处理其余页面
  5. 汇总多宽度检查状态

预期结果：交付共享组件方案、四类页面差异和逐页检查表；未实际预览的页面继续保留待确认状态。

VERIFY · TROUBLESHOOT

效果验证方法

页面清单记录样本、文件差异、构建 HTML、分页、桌面与手机结果；没有打开或渲染过的页面继续标记待检查

页面清单记录样本、文件差异、构建 HTML、分页、桌面与手机结果；没有打开或渲染过的页面继续标记待检查。

可直接使用的第一个任务

请在 ZCode 中使用「网站列表布局设计 Skill」。本次要完成：博客索引同时显示标题、摘要、作者、日期和分类，信息挤在一起，用户难以顺着标题浏览。我会提供目标页面 URL、截图或线框图，以及列表用于博客、文档、搜索结果、资源中心或其他目录的说明和一组真实条目样本，包括标题、摘要、日期、作者、分类、状态、缩略图和链接等可用字段。请先完成一份小样，交付布局选择说明：List 或 Grid 的适用理由、列表变体与内容范围和列表结构稿：标题、摘要、元数据、缩略图、分隔与整行链接的层级和顺序，并列出需要我确认的金额、日期、适用人群和目标链接。

安装后的最小验证任务

安装完成后，先只做第 2 步：让 ZCode 用真实条目确定保留哪些字段，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

ZCode 常见问题

  • Skill 没有出现时，在设置页刷新并确认已启用
  • 外部 Agent 的 Skill 没有导入时，重新选择复制或软链接模式
  • 长任务偏离目标时，更新 Goal 并用 @ 指定本次优先文件
ZCode 跑网站列表布局设计 Skill需要改哪几步？

不需要改。6 步用到的能力ZCode全部原生支持，可以按 Skill 的原始方法直接执行。

资料要怎么交给 ZCode？

ZCode可以直接读取目录里的资料，把这些文件放在同一个位置即可。

装完先做什么验证？

安装完成后，先只做第 2 步：让 ZCode 用真实条目确定保留哪些字段，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

什么任务更适合选 ZCode？

因为它能把成果渲染成可直接查看的页面，在 7 个 Agent 里具备这些能力的不多。如果你的卡点不在这里，页面下方列出了更合适的选择。

ZCode 常见的失败情况有哪些？

Skill 没有出现时，在设置页刷新并确认已启用；外部 Agent 的 Skill 没有导入时，重新选择复制或软链接模式；长任务偏离目标时，更新 Goal 并用 @ 指定本次优先文件。

继续任务先读取上批差异与待办

数据 schema、品牌规范或共享组件变化时，重新列出受影响页面，只复查相关批次并更新状态表。

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

INSTALL

安装到 ZCode

把网站列表布局设计 Skill装进 ZCode，一条命令完成

在用户 Skills 目录安装后刷新启用，把页面清单、组件路径、数据文件、品牌规范和检查命令加入项目，先选一个代表页面。

METHOD 01 · 交给 AI 自己装

复制提示词

适合大多数情况。Agent 会下载 ZIP、解压、放到正确目录，并在缺少权限时告诉你需要手工做哪一步。

请帮我把「网站列表布局设计 Skill」安装到 ZCode。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-list-layout/1.0.0/skill-list-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 ZCode 的方式安装：mkdir -p ~/.zcode/skills && cp -R ./skill-list-layout ~/.zcode/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在设置页确认技能已启用，对话中输入 $ 选择技能，再跑一个只读小任务。
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

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

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

免费工具访问量很高，为什么销售还是收不到好线索

假设一家 SaaS 公司上线了 ROI 计算器。三个月后，工具页的自然流量和使用次数都在涨，市场团队把它当作新的获客入口，销售却说收到的邮箱很难跟进：有人只想算一道题，有人来自目标行业之外，还有人留下

  • SEO
  • B2B获客
  • 增长策略
  • 营销分析

播客每期都在更新，为什么用户还是搜不到单集

一档节目已经接上 RSS，Apple Podcasts、Spotify 和 YouTube 都能正常播放。团队每周更新，也会在公众号、社媒和社群里贴链接。可一旦让没听过节目的人直接搜本期讨论的话题，他

  • SEO
  • 内容策略
  • 内容营销
  • 内容运营

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

官网菜单越改越简，定价和文档为什么更难找

假设一家 SaaS 公司把官网从六个一级栏目收成“产品、解决方案、资源”三个下拉菜单。价格页和文档页仍在，只是从页头可见入口移到了第二层。改版后如果销售频繁收到“有没有公开价格”“API 文档在哪里”

  • SEO
  • 内容策略
  • 产品营销
  • 信息架构

NEXT WORKFLOW

搭配使用

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

ZCode · 内容与创意#02

ZCode 专家评审 Skill

用 ZCode 完成「评估两版邮件标题哪个转化率更高」，最终得到达到 90 分及格线的最终内容。

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

ZCode 导航站收录 Skill

用 ZCode 完成「新产品准备在 Product Hunt 做首发」，最终得到带网址与收录状态的 CSV 跟踪表单。

来源项目 · coreyhaines31/marketingskills ★ 52,924 · Fork 7,914

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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