Kilo 新用户引导Onboarding改进路线图欢迎屏、引导卡片、教程与漏斗分析的实现与规划【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode导读Kilo 是面向工程场景的全能型 Agent 编程平台。本文基于仓库中 onboarding-improvements.md 这一产品路线图文档系统梳理 Kilo 新用户首次运行路径的当前实现与后续规划包括欢迎屏现状、起始提示卡片Starter Prompt Cards、交互式教程、产品内更新日志、Provider 设置布局优化以及基于遥测漏斗的引导分析体系。读完本文你将理解 Kilo 首次体验层的产品设计与实现边界并能在参与贡献时对齐当前“已完成 / 规划中”的路线图状态明确哪些能力已落地、哪些仍属待实现项。一、文档定位与状态说明该文档是一份部分完成Partial的路线图。文档开头的状态标注明确指出Partial - welcome-screen work exists. Starter cards, interactive tutorial, changelog, provider-settings changes, and funnel events below remain roadmap items unless marked current.也就是说欢迎屏相关的部分工作已存在而起始提示卡片、交互式教程、产品内更新日志、Provider 设置改动、漏斗事件等在没有额外标注为“当前current”之前均属于路线图roadmap层面的规划项。在参与社区贡献或阅读后续源码时需要以此状态为基准避免把规划当作既有事实。文档的总体目标很明确新用户需要更清晰的首跑路径first-run path并更好地发现产品功能。路线图将“当前欢迎屏工作”与“提议中的引导改动”分开管理以便渐进式交付。二、当前实现欢迎屏Welcome Screen2.1 现状总览能力状态说明欢迎屏Welcome screenCurrent当前现有的首跑界面为新用户提供起始上下文2.2 源码印证欢迎空状态组件欢迎屏在 VS Code 扩展的 Webview UI 中有对应实现WelcomeEmptyState.tsx。从源码结构看它承担了以下职责品牌与欢迎语渲染KiloLogo根据vscode-light/vscode-high-contrast-light主题切换kilo-light.svg或kilo-dark.svg图标并展示session.messages.welcome文案最近会话列表当存在历史会话且传入onSelectSession回调时展示“Recent”最近会话条目标题 相对日期formatRelativeDate并提供“Show History”历史入口Icon namehistory反馈入口通过对话框上下文useDialog弹出FeedbackDialog按钮图标为bubble-5可扩展 Footer组件接受footer?: JSX.Element允许调用方注入自定义底部内容。对应样式位于 welcome.css文案 key 可在多语言文件中找到例如 en.ts 中的session.recent、session.showHistory、session.messages.welcome。也就是说当前欢迎屏 品牌区 欢迎语 最近会话 历史入口 反馈按钮它是后续扩展如起始提示卡片的宿主载体。这正对应文档中“welcome-screen work exists”的现状描述。三、路线图需求全景文档将后续规划归纳为六项能力下表完整继承原文的“状态 / 拟议行为”能力状态拟议行为起始提示卡片Starter prompt cardsPlanned用上下文相关的操作与 codicon 视觉元素替代通用提示交互式教程Interactive tutorialPlanned引导用户了解当前 UI 控件与聊天输入教程完成状态Tutorial completion statePlanned避免反复展示已完成或已跳过的教程产品内更新日志In-product changelogPlanned向回访用户呈现相关产品变更Kilo Provider 设置布局Kilo provider settings layoutPlanned将 Provider 设置操作放到相关字段旁提升可发现性引导分析Onboarding analyticsPlanned跟踪引导进度与后续产品参与度这六项覆盖了从**首次接触欢迎屏→ 上手教学教程→ 状态持久化完成态→ 回访触达更新日志→ 配置引导Provider→ 数据闭环分析**的完整新用户生命周期。其中“教程完成状态”尤为关键——它决定了教程只出现一次避免对已熟练用户造成打扰。四、欢迎屏扩展起始提示卡片Starter Prompt Cards4.1 设计意图在欢迎屏上增加起始提示卡片。每张卡片被点击时应将对应提示填入聊天输入框并使用 VS Code codicon 图标而非 emoji。emoji 在不同平台/字体下的渲染不一致而 codicon 是 VS Code 内置图标字体能保证跨端一致且与编辑器视觉风格统一。4.2 卡片与提示词清单原文完整保留卡片提示词调试助手Debug helperHelp me fix a bug in my code功能构建Feature builderAdd a new feature to my project文档生成DocumentationGenerate documentation for this file代码审查Code reviewReview my current changes by runninggit diffand analyzing output这四张卡片刻意覆盖了开发者最高频的四类任务排障、写新功能、补文档、自查代码。其中“代码审查”卡片直接示范了命令与 Agent 的结合用法——通过git diff获取变更集再交给 Agent 分析输出是引导用户学会“给 Agent 喂上下文”的绝佳示例。4.3 与当前实现的衔接从 WelcomeEmptyState.tsx 的组件结构可以推断起始卡片可作为footerprop 注入或在空状态布局中新增卡片区块。由于卡片需要“点击后回填聊天输入框”实现上还需要依赖会话上下文useSession与输入框组件之间的通信渠道这部分在仓库中尚未落地属于待规划工作。五、交互式教程流程Interactive Tutorial5.1 历史模式的澄清文档特别提醒早期设计笔记曾提及Chat、Edit、Architect三种模式这些名称应视为历史示例而非当前 UI 的硬性要求。实现时应以教程构建时实际存在的控件为目标。这体现了路线图文档的务实态度——教程跟随 UI 演进而非让 UI 迁就教程。5.2 教程步骤设计原文完整保留步骤焦点内容欢迎Welcome界面说明短途导览的目的Agent 或模式选择Agent or mode selection当前选择器 UI说明可用的任务行为侧边面板与 MCPSide panels and MCP侧边栏指向历史记录与 MCP 配置开始聊天Starting chat输入区说明提示词与文件引用起始提示Starter prompts欢迎动作展示常见首任务该五步导览是一条完整的“认知链”先建立动机欢迎→ 学会选择执行者Agent/模式→ 了解辅助能力历史与 MCP→ 掌握输入方式提示词与文件引用→ 用模板任务完成首次实操。5.3 完成状态管理“教程完成状态”要求已完成或已跳过的教程不得重复出现。这类需求通常需要持久化存储如 VS Code 的globalState或本地数据库并可结合引导分析事件见第七节记录tutorial.completed/tutorial.skipped状态实现“一次教学永久跳过”。六、Provider 设置布局与产品内更新日志6.1 Kilo Provider 设置布局文档拟议将Provider 设置操作放到相关字段旁以提升可发现性。这与当前遥测中已有的MODE_SETTINGS_CHANGED、CUSTOM_MODE_CREATED等事件见 types.ts形成配合设置操作本身可被度量从而验证布局改动的实际效果。6.2 产品内更新日志In-product Changelog面向回访用户returning users呈现相关产品变更。当前仓库已维护 CHANGELOG.md 与 CHANGELOG.md同时文档规划了changelog.viewed/changelog.dismissed事件见下节说明该能力的目标是把外部变更记录转化为产品内可感知、可追踪的触达渠道。七、引导分析漏斗事件设计Onboarding Analytics7.1 事件清单原文完整保留事件目前仍属路线图项最终名称与载荷需经遥测评审后再实施。候选事件分为两个漏斗漏斗候选事件引导Onboardingonboarding.started、onboarding.tutorial.completed、onboarding.tutorial.skipped、onboarding.prompt.selected、onboarding.finished参与度Engagementchat.started、mode.changed、changelog.viewed、changelog.dismissed、provider.configured、file.referenced、mcp.configured引导漏斗串起完整生命周期启动引导started→ 教程结果completed/skipped→ 选择起始卡片prompt.selected→ 完成引导finished。参与度漏斗则衡量引导之后的产品使用深度聊天、模式切换、更新日志查看/忽略、Provider 配置、文件引用与 MCP 配置。7.2 仓库遥测基础设施佐证虽然上述漏斗事件尚未落地但 Kilo 已有成型的遥测基础设施可支撑其实现事件名集中定义在 types.ts 的TelemetryEventName枚举中共 98 行覆盖任务生命周期、LLM、工具与模式、检查点、UI 交互、市场、账号、错误、自动补全等类别其中已存在与引导相关的先行事件WORK_STYLE_ONBOARDING_SHOWN工作风格引导展示与WORK_STYLE_SELECTED工作风格选择见 types.ts遥测通过POST /telemetry/capture转发到 CLI 服务端说明事件采集链路已具备“客户端 → 服务端”的标准化通道。由此可以推断新增onboarding.*/changelog.*事件时大概率会遵循同一枚举 代理转发的模式仅需在遥测评审通过后补充事件名与载荷定义。八、未来工作Future Work文档列出的后续方向如下原文完整保留引导流失的漏斗分析Funnel analysis for onboarding drop-off项目感知的首次操作推荐Project-aware first-action recommendations高级功能的渐进式披露Progressive disclosure of advanced features面向角色的引导流程Role-specific onboarding flows基于项目代码的提示建议Prompt suggestions based on project code团队与仓库特定引导Team and repository-specific onboarding这六项是引导体系的长期演进方向从“通用引导”走向“项目感知、角色感知、团队感知”的个性化引导从“静态提示”走向“基于代码生成提示建议”从“一次性教学”走向“随能力提升渐进披露高级功能”。其中“项目感知的首次操作推荐”与“基于项目代码的提示建议”在技术上可复用仓库中已有的代码索引如 kilo-indexing 的索引能力来生成上下文相关建议是后续实现的有力基础。九、贡献者行动指南若你希望参与这部分工作建议按以下顺序评估切入点确认状态以本路线图文档onboarding-improvements.md为准区分“Current已实现”与“Planned规划中”熟悉欢迎屏代码阅读 WelcomeEmptyState.tsx 与 welcome.css起始提示卡片将在此扩展对齐 UI 规范卡片图标使用 VS Code codicon参考Icon namehistory、Icon namebubble-5的既有用法不使用 emoji接入遥测新事件遵循 TelemetryEventName 枚举模式最终名称与载荷需先经过遥测评审保持向后兼容教程步骤以“构建时的实际 UI 控件”为准Chat/Edit/Architect 仅作历史参考。结语Kilo 的 Onboarding Improvements 路线图展示了一条清晰的新用户养成路径用欢迎屏承接首跑、用起始卡片降低输入门槛、用教程建立操作心智、用完成状态避免打扰、用更新日志触达回访、用遥测漏斗驱动迭代。当前仓库中欢迎屏已通过 WelcomeEmptyState.tsx 落地遥测通道已具备types.ts其余能力均标注为 Planned等待社区按路线图逐项推进。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考