Back to Details

the-homepage

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

The homepage

主页

Write your homepage for the person who actually reads it: the end-user developer, not the CTO who signs the check. The developer becomes your champion and sells it internally for you.
Use this when: your homepage speaks to buyers/ROI, it's clever but vague about what the thing does, or a developer can't tell in 5 seconds whether to care, and can't start in 5 minutes if they do.
为真正会阅读它的人撰写主页：终端用户开发者，而非签署支票的CTO。开发者会成为你的产品拥护者，帮你在内部进行推广。
适用场景：你的主页面向采购方/投资回报率（ROI）话术撰写、表述花哨但对产品功能含糊不清，或者开发者无法在5秒内判断是否值得关注，即便感兴趣也无法在5分钟内快速上手。

The core rule (Czakon)

核心规则（Czakon）

Address end-user developers on the homepage; put enterprise/ROI/buyer messaging on separate pages (enterprise, pricing, case studies). If you write the homepage for the buyer, you've written it for someone who isn't there.
在主页上针对终端用户开发者进行沟通；将企业/ROI/采购方相关内容放在单独页面（企业版、定价、案例研究）。如果你的主页是为采购方撰写的，那相当于写给了一个不会真正浏览主页的人。

Framework: the sections, in order (Czakon)

框架：按顺序排列的板块（Czakon）

  1. Hook / core message: immediately: what is it? Use a category ("CI for monorepos"), a known-incumbent comparison ("a Datadog alternative"), or a plain statement. Headline = what it is · subhead = for whom / what job.
  2. Hero: a real product shot; two CTAs: Get started (signup) and Docs. Answer "what's in it for me?" up top. Lead with the how, not the why.
  3. Social proof, right after the hero: recognizable logos are the fastest credibility you have. Impressive dynamic metrics (users, stars) if you've got them.
  4. Value prop & differentiation: why you over the 10 alternatives (see 
    value-prop-that-converts
    ).
  5. Getting started: a huge conversion lever. Free trial, no credit card, quick setup. Any hard barrier sends developers straight to a competitor.
Design: clean typography, breathing room, no "salesy BS," minimal heavy interactions. An embedded playground / copy-pasteable snippet creates an instant aha.
  1. 钩子/核心信息：立刻说明这是什么？可以使用品类定义（“适用于单体仓库的CI工具”）、对标知名竞品（“Datadog替代方案”），或者直白陈述。标题 = 产品定位 · 副标题 = 适用人群/解决的问题。
  2. Hero区：真实的产品截图；两个CTA：Get started（注册）和Docs。在顶部回答“这对我有什么好处？”。优先展示怎么做，而非为什么做。
  3. Hero区之后紧跟社交证明：辨识度高的品牌logo是最快建立可信度的方式。如果有亮眼的动态数据（用户数、星标数）也可以展示。
  4. 价值主张与差异化：为什么选择你而非其他10个竞品（参考
    value-prop-that-converts
    ）。
  5. 快速上手：这是提升转化率的关键杠杆。免费试用、无需信用卡、快速设置。任何高门槛都会让开发者直接转向竞品。
设计要求：简洁的排版、留白充足、无“商业化废话”、尽量减少复杂交互。嵌入可直接体验的演示环境/可复制粘贴的代码片段，能让开发者瞬间产生“原来如此”的共鸣。

Framework: what must be on it (Frankl)

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

Cross-check the copy has all six:
  1. the problem in the customer's language (before the solution)
  2. the villain / undeniable trend
  3. attributed proof with numbers (name · title · company)
  4. the inciting event / urgency
  5. social proof (not anonymous)
  6. a low-friction path to try (free tier · docs · GitHub)
对照检查文案是否包含以下六点：
  1. 用客户的语言描述问题（在给出解决方案之前）
  2. 反派角色 / 不可忽视的行业趋势
  3. 带数据的署名证明（姓名 · 职位 · 公司）
  4. 触发事件 / 紧迫感
  5. 非匿名的社交证明
  6. 低门槛的试用路径（免费版 · 文档 · GitHub）

The MVP website (Czakon)

MVP版本网站（Czakon）

Don't build everything. Start with: homepage · docs · pricing · navbar (login, signup, contact, GitHub) · About (an About page builds trust for an unknown brand). Add later, deliberately: case studies → comparison pages → blog → templates → sandbox → enterprise page.
Transparent pricing. "Contact sales for pricing" reads as "expensive and slow." Show a number wherever you can.
无需一次性搭建所有内容。先从以下部分开始：主页 · 文档 · 定价 · 导航栏（登录、注册、联系我们、GitHub） · About页（对于不知名品牌，About页能建立信任）。之后再针对性添加：案例研究 → 竞品对比页 → 博客 → 模板 → 沙箱环境 → 企业版页面。
透明定价。“联系销售获取定价”会让人觉得“价格昂贵且流程缓慢”。尽可能直接展示价格。

Decision tree: hero CTA

决策树：Hero区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.
开发者能否自助获取价值？
├─ 是 → 主CTA为“Get started”（注册/下载） + 次要CTA“Docs”
└─ 否 → 主CTA为“Read the docs” / “See how it works”；不要设置无法真正使用的虚假注册入口

Mistakes that look reasonable

看似合理的错误做法

  • Writing for the buyer: ROI language up top; the developer bounces.
  • Why before what: three sentences of vision before you say what it is.
  • "Contact sales" pricing: kills self-serve trust instantly.
  • No getting-started: a beautiful hero and no obvious first step.
  • Puffery hero: "The powerful, seamless platform for modern teams." Says nothing (run 
    value-prop-that-converts
    ).
  • 为采购方撰写内容：顶部全是ROI相关话术，导致开发者直接离开。
  • 先讲为什么再讲是什么：先用三句话阐述愿景，再说明产品到底是什么。
  • “联系销售获取定价”：瞬间摧毁自助服务的信任感。
  • 无快速上手入口：Hero区设计精美，但没有明确的第一步操作指引。
  • 空洞的Hero区文案：“面向现代团队的强大、无缝平台。” 毫无实质内容（可使用
    value-prop-that-converts
    工具优化）。

Your next 30 minutes

接下来30分钟你可以做的事

  • Read your hero as a skeptical developer: in 5 seconds, do you know what it is and if it's for you?
  • Confirm the five sections exist in order; move buyer/ROI copy to its own page.
  • Put a no-credit-card getting-started step above the fold or one click away.
  • Run the page through ShipReady for the full 10-point scorecard.
Built from real dev-tool GTM experience, with frameworks from Adam Frankl (The Developer-Facing Startup) and Jakub Czakon (markepear.dev). When a framework can't make the call, that's what a human is for: The DevTool GTM Company.
  • 以持怀疑态度的开发者视角阅读你的Hero区：5秒内能否明确这是什么以及是否适合你？
  • 确认上述五个板块按顺序存在；将采购方/ROI相关文案移至单独页面。
  • 将无需信用卡的快速上手步骤放在首屏或一键可达的位置。
  • 通过**ShipReady** 对页面进行完整的10项指标评分。
基于真实的开发工具GTM经验构建，整合了Adam Frankl（《面向开发者的创业公司》）和Jakub Czakon（markepear.dev）的框架。 当框架无法做出决策时，就需要人工介入：The DevTool GTM Company。