Logo
← 全部极客知识库

主流 Agent 入门教程 / Kimi Code

3. 实战起航-创建体重管理小助手

原文备份 · 第 4 / 14 篇 · 查看极客时间原知识库 ↗

本篇目录 · 6 节

来源：Kimi Code

环境已经就绪，从这一章开始，我们正式进入实战。整个教程的剩下部分，我们都会围绕一个项目展开——体重管理小助手：它能记录你每天吃了什么（热量摄入）、运动了多少（热量消耗），还能跟踪体重的变化。

这不是一个程序员玩具，而是一个你打开浏览器就能用的网页应用。本章的目标是让它从 0 到 1：建好项目和 git 仓库、让 Kimi 生成一个能用的骨架、学会三个高频输入技巧、完成第一次提交。内容不少，但每一步我都会带着你做。

3.1 先想清楚做什么，再立下第一个规矩

动手之前，先把第一版的范围想清楚——这是跟 AI 协作的重要习惯：你得先知道自己要什么，才能判断它做得对不对。

先说技术方案。 我们采用纯前端路线：HTML + CSS + JavaScript 三件套，数据保存在浏览器的 localStorage 里，不引入任何框架、第三方库和后端服务。选它的理由很实在：

  • 零依赖：不用装 Python、不用装 Node，有浏览器就能跑；
  • 跨平台一致：macOS、Linux、Windows 上的表现完全相同，教程后面再也不用为运行环境分平台；
  • 够用：一个个人使用的小应用，数据存在自己浏览器里，简单又私密。

再定第一版（v0.1）的范围，刻意做减法，只保留最小核心：记录某一天的体重（公斤）、按日期查看历史记录列表、刷新页面数据不丢。

接下来立第一个规矩：先 git init，再写代码。

# macOS / Linux / WSL2
mkdir ~/weight-tracker
cd ~/weight-tracker
git init -b main

# Windows PowerShell
mkdir ~\weight-tracker
cd ~\weight-tracker
git init -b main

为什么一行代码还没写就要初始化 git？因为 git 是你和 AI 协作时的"后悔药"。Kimi Code 干活又快又多，偶尔也会有你不满意的改动——只要每一步都有提交记录，改坏了随时能还原，你才敢放心放手让它做。先有版本管理，再谈大胆尝试。

如果你是第一次使用 git，顺手把身份信息配好（提交记录里要署名），把命令里的名字和邮箱换成你自己的：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱@example.com"

3.2 启动固定的本地页面地址

先确认 Python 可用：macOS/Linux python3 --version，Windows py --version。在项目目录另开终端运行 python3 -m http.server 8000 --bind 127.0.0.1（Windows 用 py -m http.server 8000 --bind 127.0.0.1）。保持该终端运行，结束时 Ctrl+C。后续始终使用同一浏览器的 http://127.0.0.1:8000，测试页为 /tests.html；不要混用 localhost、不同端口或 file://。

localStorage 按 origin 隔离，旧 file:// 数据不会自动迁移；先导出／抄录练习数据，再在新地址导入或重新录入。

页面操作 让 Kimi 生成项目骨架

确保终端当前就在 weight-tracker 目录里，输入 kimi 回车，然后把下面这段需求发给它：

我们来做一个网页版的体重管理小助手，这是第一版。要求：
1. 纯前端实现：index.html、style.css、app.js 三个文件，不引入第三方库和框架
2. 数据保存在浏览器的 localStorage 里，刷新页面不丢
3. 功能：记录某一天的体重（公斤）、按日期查看历史记录列表
4. 界面简洁清爽，附一个简短的 README.md 说明用法
创建好后告诉我怎么打开使用。

注意这段话的写法，它包含了"好需求"的三要素：目标（做什么）、约束（用什么技术、几个文件）、验收（怎么算完成）。以后你给它派活，都尽量把这三样说全，返工率会低很多。第 6 章我们还会专门练这个。

发送之后，盯着对话区看它是怎么工作的：它会先思考、列出步骤，然后开始调用工具创建文件。当它第一次要创建文件时，你会正式见到审批面板——上一章混过脸熟，这次仔细看：

  • 面板里会写明它想做什么（比如"写入 index.html"），并给出几个选项，通常是：批准这一次、本次会话内对同类操作不再询问、拒绝；
  • 用方向键移动选择，回车确认；也可以直接按数字键 1 / 2 / 3 快速选择；
  • 想拒绝，按 Esc、Ctrl-C 或 Ctrl-D 都可以。

本章建议一律选"批准这一次"，把每一步都看清楚；至于什么时候可以放手让它自动跑，是下一章的主题。

骨架建好后，按它说的方式打开页面——使用前面启动的 http://127.0.0.1:8000/index.html。不要双击本地文件；可在终端用一行命令打开这个 HTTP 地址：

# macOS
open http://127.0.0.1:8000

# Linux
xdg-open http://127.0.0.1:8000

# WSL2（借用 Windows 的浏览器打开）
explorer.exe http://127.0.0.1:8000

# Windows PowerShell
start index.html

页面打开后，试着录入一条体重、刷新页面再看看——记录还在，说明 localStorage 持久化生效了。如果它生成的界面和我描述的不完全一样，别意外——AI 每次的实现细节可能不同，这是正常的，只要满足需求即可。

它的回复和你看到的不一样怎么办？ 本教程里所有的对话示例都是"示意"，你的实际输出不会逐字相同。判断标准不是"和书上长得一样"，而是"需求有没有被满足"。没满足就直接告诉它哪里不对，让它改。

3.3 输入技巧三连：@、/、!

骨架已经跑起来了，先别急着加功能。工欲善其事，必先利其器——我们来学三个几乎每天都会用到的输入技巧，它们能让你和 Kimi 的协作效率高一个档次。

@ 引用文件。 在输入框里输入 @，会触发文件路径补全，用方向键选中后回车，路径就插进你的消息里了。文件夹会以 / 结尾，选中后可以继续往里面补全。比如：

@app.js 给我讲讲这个文件的结构，每个函数是干什么的

它读到消息时会直接加载这个文件的内容，不用你手动复制粘贴代码。

/ 唤起命令。 输入 / 会弹出命令菜单，边输入边过滤，按 Esc 关闭。如果输入的内容不匹配任何命令，回车后会作为普通消息发给 Kimi，不会报错。记不住命令没关系，看到什么点什么就行。

! 进入 Shell 模式。 在空输入框里输入 !（或直接粘贴一条以 ! 开头的命令），输入框左边的提示符会变成 !、边框变成紫色——这表示进入了 Shell 模式，可以直接跑终端命令，比如：

!git status

Shell 模式有两个妙处：一是命令的输出会写进对话上下文，Kimi 之后能看到结果，你可以紧接着问"上面这个输出是什么意思"；二是全程不用离开对话。命令执行完会自动回到正常模式（在空输入框按 Backspace 或 Esc 也可以退出）。如果命令跑得很久，按 Ctrl+B 可以把它转为后台任务，不阻塞你继续聊。

再补两个零碎但实用的：写长需求时用 Shift + Enter（或 Ctrl + J）换行；输入框为空时按 ↑/↓ 可以翻阅历史输入。

3.4 第一次提交

到这里，第一版应用已经能跑能用了，但眼下的成果还只是散落在目录里的几个文件，该把它们郑重地收进 git 了。提交之前，先补一个 .gitignore——让 Kimi 来：

帮我创建一个 .gitignore，忽略各操作系统的垃圾文件，比如 macOS 的 .DS_Store、Windows 的 Thumbs.db

我们的数据存在浏览器 localStorage 里，仓库里天然没有隐私数据，这一点很省心。不过要记住一个对应关系：数据跟着浏览器走，代码跟着 git 走——换一台电脑，拉下代码就能继续开发，但体重记录不会跟过去（第 6 章我们会给应用加数据导出功能来解决这个问题）。

然后，提交也交给它：

帮我完成第一次 git 提交。提交信息遵循「类型: 简述」的格式，这次用 feat 类型

审批它的 git add 和 git commit 操作，完成后用 !git log 看一眼成果——第一次提交就这样诞生了。

顺便把"小步提交"的理念说透：每完成一个能用的小版本，就提交一次。 不要攒了一堆改动再提交——提交越频繁，每个提交越纯粹，出问题时越容易定位和回退。这个习惯会在后面的章节里反复实践。

本章小结

这一章我们的项目正式起航了：

  • 定下技术方案：纯前端网页应用（HTML + CSS + JS + localStorage），零依赖、跨平台一致；
  • 立下第一个规矩：先 git init 再写代码，git 是你和 AI 协作的后悔药；
  • 用"目标 + 约束 + 验收"三要素描述需求，让 Kimi 生成了能用的项目骨架，并完整体验了审批面板的操作；
  • 学会了三个输入技巧：@ 引用文件、/ 唤起命令、! 进入 Shell 模式；
  • 完成了第一次提交，并理解了"小步提交"的原则。

目前的 Kimi 每做一件事都要你点头，安全是安全，但你可能已经开始觉得"有点黏人"了。下一章我们就来解决这个问题：三种权限模式怎么选、什么时候可以放心放手，以及对付复杂任务的大杀器——Plan 模式。