Phase 1 · 第 1.4 节 · 主资源:回看 0.6 第一次对话

指挥 Agent 造出第一版

本节课目标:你给 Agent 起一个新文件夹,把上一节的草图发进去,让它做出 Steve's Repair 官网的第一版(v1)。在浏览器里打开看一眼,再提一次小改动,跑通"我主导、它建造"的循环。

上一节 先想后做 里,你已经为 Steve's Repair 写好了产品单页和架构草图。这一节不教语法,只练一件事:怎么把脑子里的草图,一步一步交给 Agent 建造出来。还记得 1.1 你让 Agent 做个人主页时那种"说一句、它就生出一个网页"的感觉吗?这次是同一件事,只是这回你心里先有了图纸。

这次只做一个 HTML 文件。就像 1.1 的个人主页那样,一个文件,浏览器能直接打开。先别想多页、别想换框架,那是后面 1.9 的事。现在你的目标很小:把草图变成一个能打开、能看的单页 v1。

你是工头,它是施工队

这门课你都不手写代码。你的角色是工头:你看着图纸(草图),告诉施工队(Agent)先盖哪面墙、再装哪扇窗;它干活,你验收。不满意就再说一句"这面墙颜色不对",它就改。

一次循环分三步:第一步,描述,告诉它做什么。第二步,读懂产出,看它给了什么、对不对。第三步,提一次迭代,指出一个要改的地方。然后回到第一步,转上几遍。

先看一眼目标:v1 大概长这样

动手前，先明确目标产物大致是什么样子。按照你上一节的草图（顶部店名标语、中间三项服务、底部联系方式），Agent 做出的第一版大约如下。低保真、不花哨，但该有的几块都在，你照着它验收就行。

file:///.../steve-repair/index.html
Steve's Repair
手机 电脑 平板 当天修好

我们能修什么

手机维修
屏幕 电池 进水
电脑维修
开不了机 卡顿 清灰
平板维修
触屏 充电 系统
地址:示例市示例路 1 号
营业时间:每天 9:00 到 21:00
打电话预约

这是一张仿页面示意图，并非真实的软件界面，仅用于展示 v1 的大致形态。你自己做出来的细节会不一样（文案、颜色、图标），但骨架是这三块。

开工前：给这次造站起一个新文件夹

▸ 操作：在桌面新建 steve-repair 文件夹，然后在其中启动 Agent。

1.1 节中的个人主页是练习用的沙盒（Sandbox），而本次制作的是毕业作品 Steve's Repair，需要为它单独建立一个新文件夹，与个人主页的项目分开存放。

可以让 Agent 代劳。在终端里直接对它说："帮我在桌面新建一个叫 steve-repair 的文件夹，然后进入这个文件夹。" 如果更习惯手动操作，也可以自己敲命令：

  1. 用 Spotlight 搜 Terminal 打开终端(这步细节见 0.4)。
  2. 把下面三行一行一行敲进去:先回到桌面,建文件夹,进去。
终端 · Mac
~ $ cd ~/Desktop
~/Desktop $ mkdir steve-repair
~/Desktop $ cd steve-repair
~/Desktop/steve-repair $ opencode

最后一行 opencode 启动 Agent。看到提示符末尾变成 steve-repair,说明你已经站在新文件夹里了,接下来它产出的文件都会落在这儿。

记不清 cd、mkdir 的含义，或运行时出现报错？不用背这些命令。把"我想在桌面新建一个叫 steve-repair 的文件夹,然后在里面启动你"这句话直接发给 Agent,它会把命令给你、带你走。开终端、找文件夹的更多细节都在 0.6。

第一步：把草图描述给它

▸ 操作：把 1.3 的简报发给 Agent。不要让 Agent 在没有明确指令的情况下自行判断。一个好的开场描述长这样：
帮我做一个电脑维修店「Steve's Repair」的官网首页,先做一个 HTML 文件就行。
按我的草图,从上到下分这几块:
- 顶部:店名 Steve's Repair + 一句话标语
- 中间:我们能修什么(手机 / 电脑 / 平板,三个并排)
- 底部:地址、营业时间、一个"打电话预约"按钮
先把整体结构搭出来,样式简单干净就行,我看完再说下一步。

注意两点。一是"先做一个 HTML 文件就行"：本次只生成一个文件，不一次性铺开过多功能。二是最后那句"我看完再说下一步"：节奏握在你手里，这是这一节的重点。

发出去之后,终端里大概会刷成这样(你不用看懂中间那些字,盯最后两行):

终端 · steve-repair
steve-repair $ 帮我做一个电脑维修店 Steve's Repair 的官网首页…
正在生成页面结构…
写入文件…
好了。我新建了 index.html,包含三块:顶部店名加标语、
中间三个并排的服务卡片(手机/电脑/平板)、底部地址营业时间和一个预约按钮。
在浏览器里打开 index.html 就能看到。要我接着调整哪里吗?

看到它说"我新建了 index.html"和那段总结，这一步就对了。接下来在浏览器中打开它进行验收。

第二步：在浏览器里打开它，做工头验收

▸ 操作：找到 index.html → 用浏览器打开 → 对照草图和目标预览验收。

Agent 产出的 index.html 就在你刚建的 steve-repair 文件夹里。怎么在文件夹里找到它、怎么用浏览器打开(Mac 右键选打开方式里的浏览器,或把文件拖进浏览器窗口;Windows 双击,或右键选打开方式),这套动作 0.6 已经手把手走过,这里不重讲。打开之后,你要做的是"工头验收",不用读代码:

本节最容易犯的错误：一次性提出过多修改需求。新手最容易犯的错,是开口就把脑子里所有想法一股脑全倒给 Agent:"再加个客户评价、再来个地图、按钮改蓝色、字体换圆润的、顶部加个 logo、底部加社交链接……" 需求越多,它越容易顾此失彼;你也越难看出哪里做错了、错在哪一句。一次只推一件事。

第三步:提一次迭代(就改一件事)

验收完,挑出你记下的那一条,只说这一句。下面给三种常见的小改动,各一句话照着说就行。

改文案。比如标语不满意:

整体不错。现在只改一个地方:把顶部的标语换成
"7 天保修,当天取机",其它都先别动。

某块没出来。比如你看了半天,底部那个"打电话预约"按钮根本没出现:

底部少了"打电话预约"按钮,帮我在地址和营业时间下面
补一个,其它别动。

布局乱了。比如中间三项服务没有并排,而是上下叠成了一长条:

中间的手机、电脑、平板现在是竖着堆的,我想要三个
并排在一行,其它别动。

三句话有个共同的尾巴:"其它别动"。这是新手最该学会的一句。它让 Agent 聚焦,你每次只验收一处变化,清楚、可控,也不怕弄坏。改完满意,再提下一件。这个圈转上几遍,v1 就成型了。

说不清要改哪里怎么办？不必勉强使用专业术语。用最直白的方法：先描述当前看到的样子，再描述你希望改成什么样。比如"现在三个服务框是上下排成一长条的，我想让它们左右并排在一行"；或者"顶部那行字现在是黑色的，我想换成白色"。说清"现在什么样、要改成什么样"，Agent 就能理解，你不需要知道它在代码中具体修改了什么。

动手清单：把这一版真正做出来

▸ 操作：逐项完成并勾选。这不是形式化的自填项——每一条都需要对照你电脑上真实的产物，确认做到了再勾选。五步走完，你的 Steve's Repair v1 就在浏览器里活着了。

动手清单 · 对照你自己的产物逐项勾

五步走完,你的 v1 跑通了。

每做到一步就勾上,五步全勾就过。

遇到问题？以下为三种常见情况及对应解决方法。
一,浏览器里打开是一片空白或满屏代码。多半是你用了"查看源代码"或文本编辑器打开。回到文件夹,右键文件选打开方式里的浏览器(Chrome、Edge、Safari 都行),别用记事本。
二,文件夹里找不到 index.html。很可能 Agent 不是在这个文件夹里起的。确认你启动 Agent 前已经 cd 进了 steve-repair;不确定就问 Agent"你刚才把文件写到哪个文件夹了"。
三,改完刷新没变化。先确认你改的和打开的是同一个文件;再在浏览器里按一下强制刷新(Mac 是 Command 加 Shift 加 R,Windows 是 Ctrl 加 F5)。

动手练习:把一句大需求,拆成三小步

新手开口常是一句笼统的大需求,比如"我想要个 Steve's Repair 官网"。这句话太大,Agent 没法一步做对。下面三个槽,从给定片段里挑出三条递进的小步指令:先搭骨架、再填内容、最后调一个细节。挑完点"检查一下",看你拆得够不够小、够不够明确。

1
2
3

递进的意思是:先 搭骨架,再 填内容,最后 调细节。每一步都小到 Agent 一次能做对,你一眼能验收。

页面打开后中间三项服务竖成了一长条,你最该怎么跟 Agent 说?

不知道怎么把草图变成一句话描述，产出找不到、打不开，或者看着画面说不清哪里要改？把你的草图、产出的文件情况发到群里问问大家，或者直接向 Abel 或助教提问。

课程术语表 回看:0.6 第一次对话 上一节:先想后做 下一节:让它好看 · 设计基础