mcpField
T
the-homepage

the-homepage

github.com/aidevgtm营销与增长329178 次安装2 天前更新
代码仓库

关于 the-homepage

the-homepage 是帮助团队设计开发者工具网站的营销技能，涵盖首页信息、内容顺序、可信依据，以及让开发者快速开始的路径。

主要功能

  1. 01面向最终使用的开发者撰写
  2. 02清晰安排首页内容顺序
  3. 03说明产品及其价值
  4. 04加入可信依据和低门槛试用路径
  5. 05将买家信息与开发者文案分开

适用场景

  1. 01检查首页是否能快速说明产品
  2. 02为开发者受众重排页面内容
  3. 03选择首屏主次行动号召
  4. 04将企业和投资回报信息移出首页

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aidevgtm/gtm-cofounder --skill the-homepage

安装后在 Claude Code 中输入/the-homepage确认已加载。

详细介绍

首页

为真正阅读首页的人撰写内容：终端用户开发者，而不是签支票的 CTO。开发者会成为你的拥护者，并在公司内部为你推销产品。

**适用场景：**你的首页在谈买家和投资回报，文案很巧妙，却没说清产品的用途；或者开发者无法在 5 秒内判断是否值得关注，也无法在决定尝试后于 5 分钟内开始使用。

核心原则（Czakon）

首页面向终端用户开发者；企业、投资回报和买家相关信息放到独立页面（企业版、定价、案例研究）。如果你为买家撰写首页，那你写的就是给一个不在场的人看的。

框架：页面板块及顺序（Czakon）

  1. 钩子 / 核心信息：开门见山说明产品是什么。可以用产品类别（“用于 monorepo 的 CI”）、与知名现有产品对比（“Datadog 替代品”），或直接陈述。标题 = 产品是什么 · 副标题 = 面向谁 / 解决什么任务。
  2. 主视觉区：展示真实的产品画面；设置两个 CTA：开始使用（注册）和 文档。在页面顶部回答“这对我有什么好处？”。重点介绍如何使用，而不是为什么要用。
  3. 紧接主视觉区展示社会认同：知名品牌 Logo 是你最快建立信誉的方式。如果有令人印象深刻的动态指标（用户数、星标数），也可以展示。
  4. 价值主张与差异化：说明相比其他 10 个替代方案，用户为什么该选你（参见 value-prop-that-converts）。
  5. 开始使用：这是提升转化率的重要杠杆。免费试用、无需信用卡、快速设置。任何硬性门槛都会让开发者直接转向竞争对手。

**设计：**排版清晰、留白充足、不搞“油腻推销”，尽量减少复杂交互。嵌入式试用区 / 可复制粘贴的代码片段能让用户立刻恍然大悟。

框架：页面必须包含的内容（Frankl）

核对文案是否包含以下六项：

  1. 用客户自己的语言描述的问题（先于解决方案）
  2. 反派 / 不容置疑的趋势
  3. 带数字的归属明确的证明（姓名 · 职务 · 公司）
  4. 触发事件 / 紧迫性
  5. 社会认同（非匿名）
  6. 低门槛的试用路径（免费层级 · 文档 · GitHub）

MVP 网站（Czakon）

别一次性把所有内容都建好。从这些开始：首页 · 文档 · 定价 · 导航栏（登录、注册、联系、GitHub）· 关于页（对于陌生品牌来说，关于页有助于建立信任）。之后再有计划地添加：案例研究 → 对比页面 → 博客 → 模板 → 沙盒 → 企业版页面。

定价透明。“联系销售获取定价”听起来就像“价格昂贵，流程缓慢”。能标出价格的地方就标出价格。

决策树：主视觉区 CTA

Can a developer get value self-serve?
├─ YES → primary CTA "Get started" (signup/download) + secondary "Docs".
└─ NO  → primary CTA "Read the docs" / "See how it works"; don't fake a signup that dead-ends.

看似合理的常见错误

  • 面向买家撰写内容：页面顶部就谈投资回报；开发者会直接离开。
  • 先讲为什么，后讲是什么：用三句话讲愿景，却还没说清产品是什么。
  • 定价处写“联系销售”：立刻摧毁用户自助服务的信任。
  • 没有开始使用入口：主视觉区很漂亮，却没有明显的第一步。
  • 主视觉区浮夸空洞：“为现代团队打造的强大、无缝平台。”什么也没说（运行 value-prop-that-converts）。

接下来 30 分钟

  • 像一个持怀疑态度的开发者那样阅读你的主视觉区：5 秒内，你能否知道产品是什么，以及它是否适合你？
  • 确认这五个板块都存在，且顺序正确；把面向买家 / 投资回报的文案移到独立页面。
  • 在首屏或一步之遥处，放置一个无需信用卡的开始使用步骤。
  • 使用 ShipReady 检查页面，获取完整的 10 项评分卡。

内容基于真实的开发者工具 GTM 经验，并采用 Adam Frankl（The Developer-Facing Startup）和 Jakub Czakon（markepear.dev）的框架。 想让有数百次拆解经验的人逐行分析你的实际首页？欢迎通过 LinkedIn 联系我。

评论

支持 Markdown