指挥 Agent 造出第一版
你给 Agent 起一个新文件夹，把上一节的草图发进去，让它做出 Steve's Repair 官网的第一版(v1)。在浏览器里打开看一眼，再提一次小改动，跑通"我主导、它建造"的循环。
回头一题
这道题不考这一节，考前面学过的。想不起来就回去翻一眼再答——记不住的东西，真用的时候一样会卡。
下面哪个「给谁用」，最能帮 Agent 做出对路的网站？
上一节 先想后做 里，你已经为 Steve's Repair 写好了产品单页和架构草图。这一节不教语法，只练一件事：怎么把脑子里的草图，一步一步交给 Agent 建造出来。还记得 1.1 你让 Agent 做个人主页时那种"说一句、它就生出一个网页"的感觉吗？这次是同一件事，只是这回你心里先有了图纸。
就像 1.1 的个人主页那样，一个文件，浏览器能直接打开。先别想多页、别想换框架，那是后面 1.9 的事。现在你的目标很小：把草图变成一个能打开、能看的单页 v1。
你是工头，它是施工队
这门课你都不手写代码。你的角色是工头:你看着图纸(草图),告诉施工队(Agent)先盖哪面墙、再装哪扇窗；它干活，你验收。不满意就再说一句"这面墙颜色不对",它就改。
第一步，描述，告诉它做什么。第二步，读懂产出，看它给了什么、对不对。第三步，提一次迭代，指出一个要改的地方。然后回到第一步，转上几遍。
先看一眼目标:v1 大概长这样
动手前先看一眼你要做出什么。照你上一节那张草图（顶部店名标语、中间三项服务、底部联系方式），Agent 做出来的第一版大概就这样。粗糙、不花哨，但该有的几块都在，照着它验收就行。
我们能修什么
营业时间：每天 9:00 到 21:00
这是一张仿页面示意图，不是真界面，只是让你看个大概。你自己做出来的细节会不一样（文案、颜色、图标），但骨架就是这三块。
开工前：给这次造站起一个新文件夹
1.1 那个个人主页是练手的沙盒（Sandbox），这回要做的是毕业作品 Steve's Repair，得给它单开一个文件夹，别和个人主页混在一起。
这活可以让 Agent 干。在终端里直接跟它说："帮我在桌面新建一个叫 steve-repair 的文件夹，然后进入这个文件夹。" 想自己敲也行：
- 用 Spotlight 搜
Terminal打开终端(这步细节见 0.4)。 - 把下面三行一行一行敲进去：先回到桌面，建文件夹，进去。
最后一行 opencode 启动 Agent。看到提示符末尾变成 steve-repair,说明你已经站在新文件夹里了，接下来它产出的文件都会落在这儿。
- 开始菜单搜
PowerShell打开(先只用 PowerShell,别碰 cmd;这步细节见 0.4)。 - 把下面三行一行一行敲进去：先回到桌面，建文件夹，进去。
最后一行 opencode 启动 Agent。看到提示符里出现 steve-repair,说明你已经站在新文件夹里了，接下来它产出的文件都会落在这儿。
不用背这些命令。把"我想在桌面新建一个叫 steve-repair 的文件夹，然后在里面启动你"这句话直接发给 Agent,它会把命令给你、带你走。开终端、找文件夹的更多细节都在 0.6。
第一步：把草图描述给它
别让它自己猜。先把你在 1.3 生成的那段简报原样贴上(就是你自己填的给谁用、解决什么、核心三件事、页面区块)，紧接着贴下面这段收尾话:
先做一个 HTML 文件就行,先把整体结构按上面的区块搭出来,
样式简单干净就行。做完告诉我文件在哪,我看完再说下一步。回 1.3 花五分钟填一遍——那四格就是这一节要用的图纸，没有它，Agent 只能按自己的想象做。实在要先跑通流程，可以先用下面这段顶一下，但记得回去补:
帮我做一个电脑维修店「Steve's Repair」的官网首页,先做一个 HTML 文件就行。
按我的草图,从上到下分这几块:
- 顶部:店名 Steve's Repair + 一句话标语
- 中间:我们能修什么(手机 / 电脑 / 平板,三个并排)
- 底部:地址、营业时间、一个"打电话预约"按钮
先把整体结构搭出来,样式简单干净就行,我看完再说下一步。注意两点。一是"先做一个 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 没法一步做对。下面三个槽，从给定片段里挑出三条递进的小步指令：先搭骨架、再填内容、最后调一个细节。挑完点"检查一下",看你拆得够不够小、够不够明确。
递进的意思是：先 搭骨架,再 填内容,最后 调细节。每一步都小到 Agent 一次能做对，你一眼能验收。
页面打开后中间三项服务竖成了一长条，你最该怎么跟 Agent 说？
不知道怎么把草图变成一句话描述，产出找不到、打不开，或者看着画面说不清哪里要改？把你的草图、产出的文件情况发到群里问问大家，或者直接向 Abel 或助教提问。