VibeMKT Hub

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

OpenClaw × 网站列表布局设计 Skill

网站列表布局设计 Skill有 6 个执行步骤，OpenClaw 可以处理 6 步，其中 2 步需要相应工具与配置。它能直接读取本机目录里的资料，正好对应这个 Skill 里最吃工具的一段。页面预览属于有条件支持，执行路径和原生能力不同，下面单独说明。

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

WHY OPENCLAW

适配结论

OpenClaw 适合把目录数据、列表组件、样式文件与构建命令放进同一本地工作区

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

OpenClaw 适合把目录数据、列表组件、样式文件与构建命令放进同一本地工作区。它可以先只读扫描 CSV、JSON、HTML 和 Markdown，找出长标题、缺失字段、空链接与分页遗漏；获得写入授权后，再修订列表组件并保留前后报告。

CAPABILITY × STEP

核心差异

用本地脚本批量检查字段、链接和分页 HTML

网站列表布局设计 Skill 共 6 个环节。OpenClaw 可以处理 6 个环节，其中 2 个需要相应工具与配置。实际结果取决于输入资料、已接入工具与运行环境。

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

文章或搜索结果达到几十到几百条时，肉眼很难同时发现超长标题、空摘要、日期格式漂移、无效链接和分页遗漏。OpenClaw 可以按条目 ID 扫描数据，再读取构建后的 HTML，输出问题文件、字段和页面位置。先跑代表样本，规则确认后再扩到完整目录。

  1. 01

    判断 List 是否适合当前内容

    读取目录数据量、字段长度和浏览任务，对照文字扫描与视觉浏览需求，记录采用 List 或 Grid 的理由。

  2. 02

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

    扫描 CSV、JSON、Markdown 和内容目录，选出长标题、缺摘要、不同日期、分类和状态，计算真实字段范围。

  3. 03

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

    在获准目录中生成规格或组件差异，沿用项目已有样式处理间距、分隔、整行链接、换行和手机字段取舍。

  4. 04

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

    运行现有构建与测试，读取输出 HTML、可点击范围和分页链接；具备预览工具时再检查宽度，缺少时输出人工检查清单。

IMPORT · RUN

资料导入与任务下发

把 Skill、数据和组件放进独立工作区

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

需要准备的资料

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

在 OpenClaw 里是这样推进的

为一个营销项目建立文件夹，把产品资料、数据表和参考案例放进去，OpenClaw 可以直接在这些文件上工作。

安装 Skill 后，先让它完成一个品牌、一篇内容或一组关键词；确认结果符合要求后，再批量处理更多对象。

用 CLI 安装包含 SKILL.md 的目录，项目内保留 data、component、pages 和 reports 路径，办公资料先转换成 CSV 或 Markdown。

COLLABORATE · CHAIN

协作与后续衔接

内容异常与组件异常分开报告

缺少标题、摘要、日期和链接由内容负责人处理，间距、可点击范围、分页与构建问题由开发处理；每条记录保留文件和条目 ID。

先检查六条样本再扩到完整目录

样本覆盖正常、长标题、缺摘要、无缩略图、不同状态和不同日期；规则与报告格式确认后再批量扫描。

COMBINATION CASE

场景化实战案例

示例：检查搜索结果列表的构建产物

假设搜索索引保存在 JSON，结果列表有 120 项，其中五条缺少摘要，第三页链接没有进入构建 HTML。

  1. 扫描数据字段和链接
  2. 提取六类代表条目
  3. 读取 List 组件和 CSS
  4. 构建并检查分页 HTML
  5. 获准后修订组件

预期结果：交付可重复运行的检查命令、异常报告和组件差异；视觉密度、链接范围与触控体验仍需在真实页面确认。

VERIFY · TROUBLESHOOT

效果验证方法

随机抽查条目 ID，在原始数据、组件输入和构建 HTML 中逐层对照，确认字段、链接和分页内容没有丢失

随机抽查条目 ID，在原始数据、组件输入和构建 HTML 中逐层对照，确认字段、链接和分页内容没有丢失。

可直接使用的第一个任务

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

安装后的最小验证任务

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

OpenClaw 常见问题

  • 没有找到 Skill 时，检查技能文件夹内是否有 SKILL.md
  • 没有读到资料时，告诉它准确的文件名或项目目录
  • 批量结果不一致时，先用一个样本确认格式，再重新运行
  • 页面预览相关步骤结果不稳定时，先确认当前环境是否满足条件
OpenClaw 跑网站列表布局设计 Skill需要改哪几步？

6 个环节里有 6 个可以处理，其中 2 个需要相应工具与配置。请结合逐步说明确认实际做法。

资料要怎么交给 OpenClaw？

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

装完先做什么验证？

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

什么任务更适合选 OpenClaw？

OpenClaw 适合把目录数据、列表组件、样式文件与构建命令放进同一本地工作区。它可以先只读扫描 CSV、JSON、HTML 和 Markdown，找出长标题、缺失字段、空链接与分页遗漏；获得写入授权后，再修订列表组件并保留前后报告。

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

没有找到 Skill 时，检查技能文件夹内是否有 SKILL.md；没有读到资料时，告诉它准确的文件名或项目目录；批量结果不一致时，先用一个样本确认格式，再重新运行。

保留只读扫描命令和前后报告

目录更新时复用同一命令，只报告新增长标题、缺字段、空链接、日期异常和分页缺项；有 Git 时提交获准的组件差异。

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

INSTALL

安装到 OpenClaw

把网站列表布局设计 Skill装进 OpenClaw，点几下完成

用 CLI 安装包含 SKILL.md 的目录，项目内保留 data、component、pages 和 reports 路径，办公资料先转换成 CSV 或 Markdown。

METHOD 01 · 交给 AI 自己装

复制提示词

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

请帮我把「网站列表布局设计 Skill」安装到 OpenClaw。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-list-layout/1.0.0/skill-list-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 OpenClaw 的方式安装：openclaw skills install ./skill-list-layout --as list_layout_skill
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：运行 openclaw skills list 确认技能已注册，再用一条只读样本命令检查调用。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-list-layout/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-list-layout.md

OTHER AGENTS

跨 Agent 适配对比

TRAE、ZCode在这个 Skill 上覆盖更多环节

下面的步数来自逐步比对。卡在哪一步，就看哪个 AI 能直接完成那一步。

6/6 步可直接执行

TRAE 网站列表布局设计

TRAE在这个 Skill 上直接覆盖 6/6 步，而且能把成果渲染成可直接查看的页面——如果你这次的卡点正是页面预览，换它更省事。

6/6 步可直接执行

ZCode 网站列表布局设计

ZCode在这个 Skill 上直接覆盖 6/6 步，而且能把成果渲染成可直接查看的页面——如果你这次的卡点正是页面预览，换它更省事。

FURTHER READING

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

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

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

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

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

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

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

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

订阅弹窗提交率很高，为什么欢迎邮件还是没人点

订阅弹窗的周报很容易给人一种乐观错觉：新版提交率明显上涨，于是团队宣布测试胜出。打开欢迎邮件报告后，点击、优惠使用和购买却没有同步变化。这是一个假设场景，它说明了一种常见误判——团队赢了弹窗这一段，却

  • 营销自动化
  • 内容营销
  • 转化文案
  • 转化率

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

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

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

营销Skill调用失败怎么排查？按触发、路径、权限和输出定位

营销Skill调用失败怎么排查？先不要急着改提示词。用户看到的“没按Skill执行”可能是根本没有触发，也可能是Skill已启动却读不到文件、拿不到权限，或者运行成功但输出不符合预期。这几类问题需要不

  • VibeMarketing
  • 营销自动化
  • Skill排错
  • 营销Skill

NEXT WORKFLOW

搭配使用

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

OpenClaw · SEO 与 GEO#03

OpenClaw 导航站收录 Skill

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

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

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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