Gate 3 · 第一次和 Agent 说话
本节课目标:亲身感受agent的力量。用一句普通中文,让 Agent 做出一个最小产出,在浏览器里打开它。
工具我们已经配置好了,现在开始我们的第一次对话吧。
你说,它做
和 Agent 协作,跟给一位靠谱的同事派活差不多。你只需要用大白话说清楚想要的东西/要求,它就会把结果交给你。你不需要懂代码每一行是怎么写的,但是你必须有架构思维,必须在抽象层理解整个项目。
看产出,不看代码。本训练营是面对0基础的vibe coder,因此Abel在这里默认大家一行代码都看不懂。在和agent合作的过程中,不用去研究每一行。你要盯的是最后那个产出,比如一个能打开来看的网页。它对不对、合不合你要的,这才是你的工作。你更像一个产品经理。
你身边从此随时多了一位顶级程序员 + IT 专家。再夸张点?你获得了瓶子里的老爷爷。
从今天起,你电脑上几乎任何技术活都可以交给它。它随叫随到,也不会嫌你问得蠢。以前遇到这类事得去请人,或者上网搜"xx 怎么做"再自己硬啃,现在直接开口让它做就行了:
替你写代码、改代码
做网页、做小工具、加一个功能、修一个 bug。你说要什么效果,它写、它改,你看产出。这就是vibe coding的定义。
替你查报错、看不懂的提示
开发过程中遇到的疑难杂症,看不懂的代码报错,把它整段贴给 Agent,他就可以出下一步。不用再自己上网逐字搜。
替你装软件、配环境
"帮我装个 xx""帮我把这个配好":那些一长串、容易敲错的命令,可以让它生成,甚至直接代你执行(执行前先看一眼它要做什么,见文末安全提示)。
替你操作命令行(terminal)
那个黑黢黢、只能打字的命令提示行窗口曾经是高手专属。现在你用中文说"把这个文件夹里的图片都压缩一下""看看这个文件夹有多大",它把对应命令准备好就可以直接专业的上手命令提示行。有些电脑本身的疑难杂症也可以它直接修好。
替你连远程服务器、做运维
将来你的网站上线、跑在一台远程服务器上时,连上去、看状态、重启服务这类工作。
替你查"这事到底怎么做"
很多时候你不是不会做,是不知道从哪下手。直接问它"我想做 xx,第一步该干嘛",它会把路径拆给你。它既是动手的人,也是随身的向导。
它不会替你做决定(呼应
0.1)。做什么、什么细节,什么要求
要你自己把握,它负责把你的决定执行。
开始之前先建个文件夹
先给这次的第一次对话准备一个文件夹。以后工作中,应该以项目为单位区分好文件夹,我们也叫”repo“。你在哪个文件夹里启动opencode,它做出来的文件就落在那个文件夹里。
先打开终端(命令行)。这一步在
0.4 安装 里教过:Mac 用 Spotlight 搜
Terminal,Windows 在开始菜单搜
PowerShell。下面这些命令,就敲进那个窗口里。
按你的系统,跟着敲下面几行。第一行建文件夹,第二行进到它里面,第三行启动 OpenCode。
- 建一个文件夹(这里建在桌面,取名
steves-repair):
mkdir ~/Desktop/steves-repair
- 进到这个文件夹里:
cd ~/Desktop/steves-repair
- 在这里启动 Agent:
opencode
- 建一个文件夹(建在桌面,取名
steves-repair):
mkdir $HOME\Desktop\steves-repair
- 进到这个文件夹里:
cd $HOME\Desktop\steves-repair
- 在这里启动 Agent:
opencode
其实这跟你平时新建文件夹是一回事。上面第一行 mkdir 就是"新建一个文件夹",第二行 cd 就是"双击进到它里面"。你也可以换个更顺手的方式:在访达(Finder)/ 文件资源管理器里打开桌面,空白处右键 → 新建文件夹,取名 steves-repair,这跟用 mkdir 建出来的是同一个文件夹。建完再回终端,用上面第 2、3 行 cd 进去、opencode 启动就行。命令行没什么玄乎的,只是把"点点点鼠标"换成了"打字"。
示意图。在桌面空白处右键,选"新建文件夹",取名 steves-repair。Windows 在文件资源管理器里右键 → 新建 → 文件夹,一样的。
敲完 opencode 回车,窗口会变成 Agent 的对话界面,底部出现一个让你输入的框。看起来大概是这样:
steves-repair - 终端
steves-repair $ opencode
OpenCode 已就绪 · 模型 deepseek-v4-pro
工作目录: ~/Desktop/steves-repair
在下面输入你的需求,回车发送。
> _
示意图,不是真界面。你确认一下它认得的工作目录就是刚才那个文件夹,底部有个 > 在等你输入,就对了。
这一步对不上怎么办?如果敲
cd 报错说"找不到目录",多半是上一行文件夹没建成,或名字打错;如果敲
opencode 提示"找不到命令",说明安装那一关没走完,回
0.4 补上。实在卡住,把报错整段贴给你的 Agent。
第一句话该怎么说?
第一句指令好不好,主要看你说得够不够具体、是不是一次只要一件事。含糊的指令(比如"给我做个东西")会让它瞎猜;说得具体、一次只要一件,它一次就能给你对的产出。下面先练个手感,再去发真正的第一句。
动手:把一条烂指令改好
下面这条指令太含糊,Agent 不知道你要啥。从三组片段里各挑一个你认为更好的,拼成一条清楚的指令。每挑一个,下面会即时点评。
原始烂指令:
给我做个东西,好看点。
本节任务:发出你真正的第一句
现在你的 Agent 已经在那个文件夹里跑着(默认 OpenCode + DeepSeek)。在底部那个 > 输入框里,把下面这段原样粘进去,按回车发送。任务故意做得很小,就为让你完整跑通一次循环:
帮我做一个单页的电脑维修店网页,HTML 一个文件就行。
上面有:店名"Steve's Repair"、一句简介、一个"联系我们"按钮。
做完把这个文件保存在当前文件夹里,然后告诉我完整路径和文件名,
我要在浏览器里打开看看。
回车是发送,不是换行。这段话有好几行,你整段一次性粘贴进去再按一次回车就行,中间不用一行行敲。粘进去之后按回车,它就开始干活了。
- 把上面整段粘进输入框,按回车,等它干活(中间刷出看不懂的字很正常,别管)。
- 等它说"做好了",并给你一个完整路径和文件名,比如
~/Desktop/steves-repair/index.html。把这个路径记下来,下一步要用。
- 在浏览器里打开这个文件(怎么打开见下一节),看看那个网页。
- 给这个网页截一张图。这就是你的第一个产出,也是 Gate 3 通关的凭证。
它没告诉你文件在哪?有时候它只把代码贴在对话里,没真存成文件,或者没说清存哪了。这时直接再说一句:"请把它整理成一个 HTML 文件,保存在当前文件夹,并告诉我完整路径和文件名。"它就会补上。文件名通常叫 index.html,这是网页的惯用名字。
把产出打开:在浏览器里看它
Agent 给的是一个 .html 文件,它就静静躺在你那个 steves-repair 文件夹里。要看到网页,得用浏览器打开它(就是你平时上网用的 Chrome、Edge、Safari 那种)。Mac 和 Windows 找文件、打开的方式略有不同,选你的系统看。
- 打开访达(Finder),左侧点"桌面",找到
steves-repair 文件夹,双击进去,看到那个 index.html。
- 在
index.html 上右键,选打开方式,再选一个浏览器(Safari 或 Chrome)。
- 还有个更省事的办法:直接把这个
index.html 拖进已经开着的浏览器窗口,松手就打开了。
示意图。右键这个 .html,沿"打开方式"挑一个浏览器就行。
- 打开文件资源管理器,左侧点"桌面",找到
steves-repair 文件夹,双击进去,看到那个 index.html。
- 在
index.html 上右键,选打开方式,再选一个浏览器(Edge 或 Chrome)。
- 有时直接双击也会用浏览器打开;要是双击打开的是别的东西,就回到右键那条路。
示意图。右键这个 .html,沿"打开方式"挑一个浏览器就行。
成功长这样
打开后,浏览器里大致会出现一个干净的单页:顶上是店名 Steve's Repair,下面一句简介,再下面一个"联系我们"按钮。具体配色、排版每次都不一样,但这三样东西都在、能看见,就算对了。
file:///Users/you/Desktop/steves-repair/index.html
Steve's Repair
十年电脑维修,快修快好,街角小店,放心交给我们。
联系我们
示意图。你的不一定长得一模一样,但店名、简介、按钮三样齐了就过关。
你刚刚跑通了一次完整的循环:说一句普通中文,它做事,你看到产出。后面再复杂的东西,也都是在重复这件事。
动手自检:这一关你真过了吗
对着你真实的产出逐条核对,做到一条勾一条。四条都勾上,Gate 3 就过了。
Gate 3 · 通关自检卡
Gate 3 过了,你有了第一个产出。
对着真实产出勾,四项都勾上就过。
卡住了?常见的几个坑
遇到下面这些,照着这一句去做
它没给文件,只把代码贴在对话里。
回它一句:"请把它整理成一个 HTML 文件,保存在当前文件夹,并告诉我完整路径和文件名。"
双击文件,打开的是一屏代码,不是网页。
那是用编辑器打开了。回到文件上右键,选"打开方式",挑一个浏览器(Chrome / Edge / Safari),就显示成网页了。
页面上中文变成乱码(一堆问号或方块)。
回 Agent 一句:"网页里的中文乱码了,请把文件保存成 UTF-8 编码再给我。"它改完重存,再打开就正常了。
还有别的卡点,别自己耗,直接把情况(连同报错或截图)发给你的 Agent,它就是来帮你的。
和它协作,记住两件事
这两点后面 1.4 会专门练,先有个印象:
- 别想一句话就憋出完美成品。先要个能跑的最小版本,再一点点改,比如"背景换浅灰""按钮大一点"。
- 一条指令只交代一件事。要改三处,就分三次说,这样它做得准,你也看得清是哪一步出的效果。
第一句发给 Agent 时,顺手加上哪句话最能帮你之后找到产出?
安全提示(记一辈子):当你让它
动你的电脑或服务器(装东西、删文件、改配置)时,先
看一眼它打算做什么再放行;重要操作尽量选
可回退的方式(后面
1.8 Git 会给你"反悔"的能力)。它很靠谱,但你是那个按下"确认"的人。
第一句发出去没反应、产出不是你想的样子,或者根本不知道怎么开口?把情况发到群里问问大家,或者直接向 Abel 或助教提问。