mcpField
D
developer-signup-flow

developer-signup-flow

github.com/jonathimer设计与 UI8791 次安装34 周前更新
代码仓库

关于 developer-signup-flow

这项设计技能帮助产品团队减少开发者注册到开始编码之间的阻碍,涵盖 OAuth 选项、API 密钥展示、渐进式资料收集、个性化引导和转化衡量。

主要功能

  1. 01按受众选择 OAuth 选项
  2. 02减少注册表单字段
  3. 03在注册后展示 API 密钥
  4. 04逐步收集资料
  5. 05个性化引导路径
  6. 06衡量注册与激活漏斗

适用场景

  1. 01设计开发者产品的注册流程
  2. 02决定何时收集用户资料
  3. 03规划 API 密钥展示和引导
  4. 04查找注册漏斗中的流失点

安装

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

$npx skills add https://github.com/jonathimer/devmarketing-skills --skill developer-signup-flow

安装后在 Claude Code 中输入/developer-signup-flow确认已加载。

附带文件README.md

详细介绍

开发者注册流程

打造尊重开发者时间、让他们尽快开始编写代码的注册体验。

概述

开发者注册是你展示自己了解开发者的第一个机会。每一个不必要的表单字段、每一次额外点击、每一条“继续前请验证邮箱”,都在传递一个信息:你并不重视他们的时间。最好的开发者注册体验几乎让人感觉不到它的存在——开发者从“我想试试这个”到“我正在编写代码”,不到 60 秒。

本技能涵盖 OAuth 集成、API 密钥生成体验、渐进式信息收集,以及如何衡量真正重要的注册转化指标。

开始之前

查看 /devmarketing-skills/skills/developer-audience-context 技能,了解你的目标开发者细分群体。针对周末探索的爱好者和为公司评估工具的企业开发者,注册优化方式有很大差异。

有效的 OAuth 选项

优先使用 GitHub 的方式

对于开发者工具,GitHub OAuth 应该是你的首选。原因如下:

  1. 内置身份验证——活跃的 GitHub 账号有提交历史、代码仓库和社交证明
  2. 熟悉授权范围——开发者了解 GitHub 的权限模型
  3. 个人资料数据——你可以获取用户名、邮箱,并根据公开活动推断经验水平
  4. 信任信号——开发者本来就活跃在 GitHub 上

良好的实现(Vercel):

  • 页面上最醒目的是一个“使用 GitHub 继续”按钮
  • 提供邮箱选项,但将其作为次要选项
  • 无需创建密码
  • OAuth 后立即跳转到仪表板

糟糕的实现:

  • GitHub、Google、Twitter、LinkedIn、邮箱和“使用手机号注册”都同等醒目
  • 即使使用 GitHub OAuth,也要求验证邮箱
  • 在显示仪表板前要求填写额外的个人资料信息
OAuth 选项优先级

根据你的受众确定优先级:

受众首选次选避免
开源开发者GitHub邮箱Google Workspace
初创公司开发者GitHubGoogle企业 SSO
企业开发者SSO/SAMLGoogle Workspace社交账号登录
数据科学家GitHubGoogleTwitter
移动开发者GoogleGitHubFacebook
Google OAuth 注意事项

以下情况适合使用 Google OAuth:

  • 你的工具集成了 Google Cloud 服务
  • 你的目标用户是 Android 开发者
  • 你的受众包括非技术利益相关者(产品经理、设计师)

以下情况不适合使用 Google OAuth:

  • 开发者使用个人 Gmail,但需要使用工作身份注册
  • 你的工具没有集成 Google 生态系统
  • 你需要 Google Workspace 专用授权范围
邮箱注册:适用场景

应提供邮箱 + 密码注册,但不要将其作为主要选项。它适用于:

  • OAuth 受限的企业环境中的开发者
  • 限制第三方访问、注重隐私的开发者
  • GitHub/Google 账号无法体现职业身份的情况

如果支持邮箱注册:

  • 只需邮箱即可注册——发送魔法链接,无需创建密码
  • 显示仪表板前绝不要求验证邮箱
  • 为偏好使用魔法链接的开发者提供“稍后设置密码”选项

减少表单字段

零字段理想方案

最好的注册不包含自定义字段。你需要的信息都可以通过 OAuth 获取:

  • 姓名(来自 OAuth 个人资料)
  • 邮箱(来自 OAuth 个人资料)
  • 用户名/昵称(来自 GitHub 用户名)
  • 头像(来自 OAuth 个人资料)
必须提问时

如果确实需要收集信息,请将其延后:

不佳:阻塞注册

Create Account
- Email
- Password
- Company Name (required)
- Role (required)
- Team Size (required)
- How did you hear about us? (required)
[Create Account]

良好:渐进式收集

Continue with GitHub
[Immediate dashboard access]

[Later, contextually in dashboard]
"To customize your experience, what are you building?"
[ ] API/Backend
[ ] Web app
[ ] Mobile app
[ ] Data pipeline
[Skip for now]
字段筛选清单

对于要添加的每个字段,请回答:

  • 能否从 OAuth 个人资料数据中推断?
  • 能否根据注册后的行为推断?
  • 能否等到相关情境出现时再询问?
  • 这个字段能帮助做出什么必须现在就做的决策?
  • 这个字段会带来多大的转化成本?

研究表明,每增加一个必填字段,转化率就会降低 5-10%。

API 密钥生成体验

立即生成密钥

开发者注册是为了编写代码。立即向他们显示 API 密钥。

良好的实现(Stripe):

  1. 完成 OAuth
  2. 控制面板立即显示测试 API 密钥
  3. 无需额外点击即可查看和复制密钥
  4. 生产密钥采用“显示”模式,测试密钥则无需此模式

糟糕的实现:

  1. 完成 OAuth
  2. “欢迎!请完善个人资料以开始使用”
  3. 必须填写个人资料表单
  4. “创建你的第一个项目”向导
  5. 项目设置页面
  6. “生成 API 密钥”按钮
  7. 终于看到密钥
密钥显示最佳实践
Your API Key
sk_test_xxxxxxxxxxxxxxxxxxxx  [Copy]

[Show in cURL example] [Show in SDK example]
  • 使用等宽字体显示密钥
  • 提供一键复制按钮
  • 在使用情境中显示密钥(代码示例)
  • 默认显示测试密钥
  • 生产密钥需点击“显示”才能查看
  • 切勿要求将密钥下载到文件中
多个密钥和密钥管理

等到开发者有此需求时再提供。首次注册时应只显示一个密钥。

在以下情况下引入密钥管理:

  • 开发者创建第二个项目
  • 开发者邀请团队成员
  • 开发者询问密钥轮换事宜

个性化引导流程

基于使用场景的路径

提出一个问题,然后自定义体验:

问题(注册后显示,可跳过): “你正在构建什么?”

  • 与现有应用集成
  • 构建新项目
  • 为团队评估
  • 只是随便看看

路径自定义:

选择控制面板重点首个 CTA默认文档
与现有应用集成SDK 和集成“安装 SDK”集成指南
构建新项目快速入门教程“开始教程”入门指南
为团队评估定价和功能“预约演示”使用场景
只是随便看看交互式 Playground“试用 Playground”API 参考
检测框架/语言

如果使用 GitHub OAuth,请检查公开仓库中的语言使用模式:

Primary language: Python (45% of repos)
Also uses: JavaScript (30%), Go (15%)

→ Show Python SDK first in docs
→ Default code examples to Python
→ Suggest Python quickstart
基于行为的个性化

注册后,跟踪行为并进行调整:

行为调整
复制 cURL 示例显示更多 cURL 示例,减少 SDK 示例
提前查看定价页面在控制面板中展示免费层级限制
创建多个项目推荐团队功能
频繁访问文档添加“遇到问题?”帮助小组件

渐进式资料收集

收集内容和时机

注册(仅 OAuth):

  • 姓名、电子邮件、头像(来自 OAuth)

首次会话(可选,在相关情境中):

  • 主要使用场景(点击一次即可选择)
  • 首选语言(推断或点击一次即可选择)

首次 API 调用后:

  • 公司名称(用于企业功能)
  • 团队规模(用于协作功能)

达到免费层级限制后:

  • 电话号码(用于计费)
  • 账单地址(用于开具发票)

升级后:

  • 完整公司资料(用于账户管理)
  • 行业/垂直领域(用于案例研究)
让渐进式资料收集显得自然

不佳:随机弹窗

[Popup after 3 days]
Help us serve you better!
Company: ___
Role: ___
Team size: ___
How did you hear about us: ___

良好:结合情境进行询问

[When developer invites first team member]
To set up your team workspace, what should we call it?
Company/Team name: ___

[When developer hits rate limit]
To increase your rate limit, we need to verify your account:
Phone: ___

衡量注册转化率

核心指标

注册开始率

  • 点击“注册”或“开始使用”的访客
  • 基准:占着陆页访客的 5-15%

注册完成率

  • 完成 OAuth 或提交表单的用户
  • 基准:注册开始用户中的 70-90%(OAuth)
  • 基准:注册开始用户中的 30-50%(表单)

注册耗时

  • 从点击注册到进入控制面板所用的秒数
  • 基准:OAuth 少于 30 秒,表单少于 60 秒
激活指标(注册后)

API 密钥复制率

  • 复制 API 密钥的用户
  • 基准:首次会话中达到 60-80%

首次 API 调用率

  • 至少发起一次 API 调用的用户
  • 基准:前 24 小时内达到 30-50%

首次 API 调用所需时间

  • 从注册到首次 API 调用所需的分钟数
  • 基准:设计良好的引导流程应少于 10 分钟
漏斗分析

跟踪完整漏斗:

Landing page visitors: 10,000
├── Clicked signup: 1,000 (10%)
├── Completed signup: 800 (80% of clicks)
├── Copied API key: 600 (75% of signups)
├── First API call: 300 (50% of key copies)
└── Second day return: 150 (50% of first call)

找出开发者在哪个环节流失,以及原因:

  • 放弃 OAuth 权限页面
  • 电子邮件验证延迟
  • 对控制台感到困惑
  • 找不到 API 密钥
  • 首次 API 调用失败
A/B 测试优先级

按以下顺序测试(从影响最大到最小):

  1. 显示的 OAuth 选项数量
  2. 表单字段数量
  3. 电子邮件验证时机
  4. 控制台上 API 密钥的位置
  5. 默认快速入门语言
  6. 欢迎邮件发送时机

真实开发者工具案例

优秀的注册流程:Vercel
  1. “使用 GitHub 继续”选项最醒目
  2. 一键完成 OAuth
  3. 立即显示可导入项目的控制台
  4. 不询问任何问题
  5. 60 秒内即可完成首次部署
优秀的注册流程:Stripe
  1. 使用电子邮件注册,但流程精简
  2. 进入控制台前无需验证电子邮件
  3. 立即显示测试 API 密钥
  4. 引导式设置为可选
  5. 清晰区分测试模式和生产模式
糟糕的注册流程:[应避免的常见模式]
  • “完善个人资料”阻止用户访问控制台
  • 必须先验证电子邮件才能查看任何内容
  • 必须填写公司名称和团队规模
  • 必须验证电话号码
  • 无法跳过的“创建首个项目”向导
  • API 密钥藏在多层导航之后

工具

分析与测试
  • Amplitude/Mixpanel - 漏斗分析和群组跟踪
  • LaunchDarkly/Split - OAuth 流程 A/B 测试
  • FullStory/LogRocket - 通过会话回放调试注册流程
  • Customer.io/Intercom - 引导邮件序列
身份验证提供商
  • Auth0 - 功能全面,但会增加复杂度
  • Clerk - 面向开发者,默认设置合理
  • WorkOS - 需要企业 SSO 时使用
  • Supabase Auth - 简单的开源选项
  • Firebase Auth - 适合移动端优先的场景
API 密钥管理
  • Unkey - API 密钥管理即服务
  • Custom - 大多数开发者工具都会自行构建

相关技能

  • /devmarketing-skills/skills/developer-onboarding - 注册后会发生什么
  • /devmarketing-skills/skills/developer-audience-context - 了解注册用户是谁
  • /devmarketing-skills/skills/free-tier-strategy - 他们注册是为了什么

评论

支持 Markdown