VibeMKT Hub

Claude Code × 内容与创意 · 原生覆盖 14%

Claude Code × 网站首屏 Hero 设计 Skill

网站首屏 Hero 设计 Skill有 7 个执行步骤，其中 1 步可以在 Claude Code 里直接完成。它能在敏感写入前请求确认，正好对应这个 Skill 里最吃工具的一段。需要提前知道的是：产物区审阅这 1 项它不做，涉及的 1 个步骤要按下面的手工方式衔接。

  • 1/7步可直接执行
  • 1步需手工衔接
  • 未进前十在本 Agent 的推荐清单

WHY CLAUDE CODE

适配结论

Claude Code 适合把首屏规则长期写进项目：品牌语气、页面目标、组件约定和验收命令进入项目上下文

网站首屏 Hero 设计 Skill不在 Claude Code 的前十推荐里——Claude Code更擅长项目上下文、文件、终端和 MCP，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

Claude Code 适合把首屏规则长期写进项目：品牌语气、页面目标、组件约定和验收命令进入项目上下文，文案、设计系统、前端与测试子任务分别处理候选、待改清单和检查，Hooks 可以在每次改动后发现多个 H1、缺失 alt 或未通过的构建。获得编辑授权后，Agent 可把已确认方案写入组件并运行构建；最终视觉与发布仍需人工批准。

操作前确认

在敏感写入前请求确认。这是 Claude Code 在 7 个 Agent 里相对少见的能力。

CAPABILITY × STEP

核心差异

项目上下文固定首屏规则并复用检查

网站首屏 Hero 设计 Skill 共 7 个环节。Claude Code 可直接执行 1 个环节（含 1 个仅需判断的环节），5 个需要相应工具与配置，1 个需手工衔接。判断质量取决于输入资料与具体推理。

1步可直接执行
5步有条件支持
1步需手工衔接
14%原生覆盖率
Claude Code 跑 网站首屏 Hero 设计 Skill 的逐步对照 · 每步要做什么见 网站首屏 Hero 设计 Skill原生页面
步骤所需能力等级在 Claude Code 下具体怎么做
01 确认页面任务 读本地资料写本地文件页面预览操作前确认 有条件 可以做但有条件：Claude Code 对页面预览的支持有限制。
02 建立首屏信息层级 页面预览 有条件 可以做但有条件：Claude Code 对页面预览的支持有限制。
03 选择布局与对齐 页面预览中文办公文档 有条件 可以做但有条件：Claude Code 对页面预览的支持有限制。
04 安排视觉与移动端 页面预览 有条件 可以做但有条件：Claude Code 对页面预览的支持有限制。
05 检查 SEO 与性能 页面预览 有条件 可以做但有条件：Claude Code 对页面预览的支持有限制。
06 完成可访问性验收 打开网页取正文产物区审阅 不支持 改成手工：在对话流里分段核对结果。（没有独立产物区，成果以项目文件形式落地）
07 准备测试与判定 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。

首屏方法通过项目说明、Skill 和测试脚本长期复用。主任务固定受众、主行动和品牌限制，子任务分别提交文案、布局、媒体与无障碍结果，再在 PR 中汇总。验收标准是新会话也能按同一规则生成首屏，自动检查能指出偏离项目约定的文件。

  1. 01

    对齐页面目标与首屏信息

    从项目上下文、需求和现有页面提取页面目标、受众、主行动与品牌规则，写入共享任务说明。

  2. 02

    设计 H1、副标题与主 CTA

    文案子任务生成候选，主任务核对来源与品牌语气，确认版本后再交给前端任务。

  3. 03

    选择版式、视觉与响应式规则

    设计系统与前端子任务分别检查 Token、布局、媒体和断点，主任务合并不冲突的改动。

  4. 04

    完成 SEO、性能、无障碍与测试验收

    测试子任务运行构建、H1、alt、焦点、减弱动效和资源检查，结果进入 PR。

IMPORT · RUN

资料导入与任务下发

把 Skill 和首屏规则放进项目目录

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

需要准备的资料

  • 页面类型、目标受众、流量来源和单一转化目标
  • 产品价值主张、核心利益点、可使用的证明与常见异议
  • 品牌字体、颜色、Logo、图片、视频或产品界面素材
  • 网站技术栈、桌面与移动端要求、性能和无障碍限制

在 Claude Code 里是这样推进的

把品牌规范、项目背景和现有文件放在同一个项目目录，Claude Code 会结合项目内容调用相应 Skill。

让它先列出任务步骤，再读取文件、调用终端或 MCP 工具完成研究和制作；复杂任务可以分给多个子任务。

团队 Skill 放入项目级 skills 目录，页面目标、文案规则、组件入口和验收命令写进项目说明。

MANUAL HANDOFF

能力缺口与人工衔接

产物区审阅需要手工补

有 1 项能力需要你在 Claude Code 之外完成，下面写清了各自影响哪一步、怎么补。

  • 产物区审阅

    影响：第 6 步 完成可访问性验收

    原因：没有独立产物区，成果以项目文件形式落地

    做法：在对话流里分段核对结果

COLLABORATE · CHAIN

协作与后续衔接

通过 PR 汇总文案、设计与前端意见

通过 PR 汇总文案、设计与前端意见

每个改动写明依据、目标文件和验收证据。外部设计或数据系统只通过已获批的 MCP 连接。

共享首屏规则约束所有子任务

受众、主行动、H1、布局和技术验收要求先冻结，子任务围绕同一组规则工作，主任务拒绝额外 CTA 和无来源证明。

COMBINATION CASE

场景化实战案例

示例：团队长期维护官网与活动页首屏

示例：团队长期维护官网与活动页首屏

假设一个团队每月上线活动页，多个开发者容易各自增加 CTA 或跳过移动端检查。

  1. 建立项目级首屏规则
  2. 拆分文案与前端子任务
  3. 整理代表页面的改动清单
  4. 加入自动检查
  5. 在 PR 汇总验收

预期结果：交付物应形成可版本化的首屏规则、首屏版本差异和检查机制；最终设计与上线由负责人批准。

VERIFY · TROUBLESHOOT

效果验证方法

完成示例页面后新开会话，核对项目上下文能否恢复页面目标、组件入口、移动端顺序和全部验收命令

完成示例页面后新开会话，核对项目上下文能否恢复页面目标、组件入口、移动端顺序和全部验收命令。

可直接使用的第一个任务

请在 Claude Code 中使用「网站首屏 Hero 设计 Skill」。本次要完成：官网首屏同时放了多项产品能力和多个按钮，需要收紧价值主张与主行动。我会提供页面类型、目标受众、流量来源和单一转化目标和产品价值主张、核心利益点、可使用的证明与常见异议。请先完成一份小样，交付首屏内容结构：H1、副标题、主 CTA、可选次 CTA、视觉与信任信息和文案备选：标题、副标题和按钮文字及各自适用条件，并列出需要我核对的事实和数字。注意：产物区审阅这部分你做不到，遇到时直接告诉我，我手工补。

安装后的最小验证任务

安装完成后，请 Claude Code 读取这份 Skill 与已提供的输入资料，复述本次任务，并列出缺少的材料。只返回核对结果，不修改文件或网页。

Claude Code 常见问题

  • 没有调用 Skill 时，在任务里直接写出 Skill 名称
  • 没有取到 MCP 数据时，检查连接和授权状态
  • 项目资料太多时，指出本次优先参考的文件
  • 第 6 步 完成可访问性验收停住时，不用反复换提示词——没有独立产物区，成果以项目文件形式落地，按上面的手工方式补这一步即可
  • 页面预览相关步骤结果不稳定时，先确认当前环境是否满足条件
Claude Code 跑网站首屏 Hero 设计 Skill需要改哪几步？

7 步里 1 步可直接执行，5 步需要相应工具与配置，1 步需手工衔接。请结合逐步说明确认实际做法。

资料要怎么交给 Claude Code？

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

装完先做什么验证？

安装完成后，请 Claude Code 读取这份 Skill 与已提供的输入资料，复述本次任务，并列出缺少的材料。只返回核对结果，不修改文件或网页。

为什么选 Claude Code 而不是别的 Agent？

因为它能在敏感写入前请求确认，在 7 个 Agent 里具备这些能力的不多。如果你的卡点不在这里，页面下方列出了更合适的选择。

Claude Code 常见的失败情况有哪些？

没有调用 Skill 时，在任务里直接写出 Skill 名称；没有取到 MCP 数据时，检查连接和授权状态；项目资料太多时，指出本次优先参考的文件。

用 Hooks 发现首屏回归

在相关文件变化后检查 H1 数量、图片 alt、构建、焦点样式和资源路径，失败时给出具体文件。

INSTALL

安装到 Claude Code

把网站首屏 Hero 设计 Skill装进 Claude Code，一条命令完成

把提示词复制给 Claude Code，它会自己下载 ZIP 并完成安装，装完会报告实际目录。

METHOD 01 · 交给 AI 自己装

复制提示词

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

请帮我把「网站首屏 Hero 设计 Skill」安装到 Claude Code。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-hero-section/1.0.0/skill-hero-section.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 Claude Code 的方式安装：mkdir -p ~/.claude/skills && cp -R ./skill-hero-section ~/.claude/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在项目里提一个只读任务并点名 Skill，确认它按 SKILL.md 的步骤复述计划。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-hero-section/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-hero-section.md

OTHER AGENTS

跨 Agent 适配对比

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

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

4/7 步可直接执行

TRAE 网站首屏 Hero 设计

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

4/7 步可直接执行

ZCode 网站首屏 Hero 设计

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

2/7 步可直接执行

WorkBuddy 网站首屏 Hero 设计

WorkBuddy在这个 Skill 上直接覆盖 2/7 步，而且能直接读写 Word、Excel、PPT 等办公文档——如果你这次的卡点正是中文办公文档，换它更省事。

FURTHER READING

Claude Code 与网站首屏 Hero 设计相关的实操文章

围绕 Claude Code 和这个任务的共同标签挑出来的，换成别的 Agent 看到的不是同一批。

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

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

  • 转化率
  • AARRR
  • 落地页

产品那句话客户复述不出来，销售和市场就会各写一套

市场部改官网，销售改话术，投放改广告，三边各自有一套说法，在不少团队里已经算日常。语气不同还能凑合用。客户听完三遍，仍然复述不出你们到底解决哪一件事，这才麻烦。功能清单越长，这句话越容易丢。产品营销要

  • 定位
  • 销售赋能
  • 产品营销

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

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

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

竞品分析别从同行名单开始，先找出客户真的拿什么和你比较

市场团队准备改官网首页，先把三家同行交给 AI 研究。首页说了什么、产品有哪些功能、价格怎样分档、案例里用了哪些客户，很快就整理成一份完整的对照表。 开会时，大家依然答不上来：我们的首页究竟要赢过谁？

  • 竞品分析
  • 用户调研
  • 产品营销

试用用户没有付费，团队该先查哪三段数据

假设一个团队月底复盘：14 天试用注册量没有明显下降，付费人数却低于预期。会议很快会出现三种建议——缩短试用期、要求先绑卡、到期前增加优惠提醒。每一种都可能有效，也可能改错位置，因为“试用转付费率”把

  • Vibe Marketing
  • 产品营销
  • 试用转化
  • 用户激活

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

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

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

NEXT WORKFLOW

搭配使用

按产出物与输入资料的衔接关系计算，都是同一个 Agent 下的版本，装完可以直接接着跑。

Claude Code · 数据与自动化#01

Claude Code 营销动作效果验证 Skill

用 Claude Code 完成「测了五条短视频开头数据需要决定留哪条」，最终得到包含基线和测试组各核心指标变化的 Markdown 对照表。

来源项目 · ericosiu/ai-marketing-skills ★ 3,488 · Fork 681

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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