第一次动手：给周末散步做一张邀请网页

这一章，我们真的动手。练习的活动叫“周末散步小队”：不比速度，不卷步数，走累了可以坐一会儿。

最后你会得到一个叫 index.html 的文件。HTML 是网页的一种文件格式；眼下只需要知道，这个文件可以保存页面内容，也可以打开来看。

开始前，准备两件事

先打开 Agent.Space，登录你的账号。把教程留在这个标签页里，在另一个标签页操作，方便随时回来看看。

然后确认你准备使用的模型有可用的套餐额度或余额。阅读教程免费开放，实际执行任务会使用模型额度；当前可用配置和费用以产品显示为准。没有可用额度时，可以先读完整个流程，不必反复发送同一任务。

这次不用准备图片、域名，也不用安装软件。活动、地点和路线全部是练习用的虚构材料。

1. 给这件事建一个 Workspace

从 Workspace 切换入口选择“新建 Workspace”，名称填“周末散步小队”，检查时区后创建。

如果你先看到一个只读示例项目，从界面提供的入口开始自己的项目，再继续下面的步骤。我们要把第一份作品放在自己的工作空间里。

完成这一步后，确认当前 Workspace 名称就是你刚填的名字。它是这次项目的归属地。

2. 选择一个 Agent 和兼容模型

在新对话入口选择当前可用的 Codex 或 Claude Code，然后从界面提供的模型选项里，选择自己有额度的兼容模型。

不用先调遍所有高级设置。第一次的目标很小：看它能否按要求做出一张完整网页。Agent 和模型的区别，可以随时回看第 2 章。

如果界面提示不可用，先处理它显示的具体原因。模型不兼容、没有额度和服务暂时不可用，需要的处理方式并不相同。

3. 把下面这段任务发给它

你发出的任务要求，也叫 Prompt。这段可以直接复制；先照着做一遍，再改成自己的活动。

帮我为“周末散步小队”做一张中文活动邀请网页。
这是一个虚构的练习活动，页面上要标明“示例活动”。活动介绍：周末一起慢慢走一段路，不比速度，走累了可以休息。集合时间：周六下午 3 点。注明这只是示例安排，不对应真实活动日期。集合地点：梧桐公园南门（虚构地点）。路线安排：南门集合 → 沿湖散步 → 草坪休息，全程约 90 分钟。准备清单：水、舒服的鞋、帽子；下雨就改期。参加说明：真正举办活动时，请先联系组织者确认具体日期和地点。
页面要轻松、清楚，手机上也能读。让集合时间和地点一眼就能找到。做一个“看看怎么参加”按钮，点击后跳到本页的参加说明。不要收集报名信息，不需要登录、地图或外部图片。
把页面及其样式保存到 Workspace 根目录的一个 index.html 文件中。不要依赖其他文件或外部资源，不要只把代码贴在聊天里，也先不要公开发布。完成后检查内容是否齐全、按钮跳转是否正确，并告诉我文件在哪里、怎样查看。如果有没能完成的检查，请直接说明。

这段话交代了目标、材料和完成方式。细节稍多，是为了让你之后有东西可以对照检查，而不是因为 Agent 只听得懂某种神奇格式。

4. 看它工作，也留意它的提问

发送后，Agent 可能读取当前目录、创建文件、执行检查。出现工具名称和执行记录很正常，这些是它正在操作的线索。

它也可能问你想要什么风格。你可以回答：“简单一点，像给朋友看的周末邀请。”如果出现权限请求，看清请求的动作和目标；这次任务的范围是创建邀请页和检查它。

等它完成后，先看总结里有没有 index.html，以及哪些检查已经完成、哪些还没做。不要只凭“已完成”三个字就关掉窗口。

5. 找到文件，打开看看

进入当前 Workspace 的文件区域，找到根目录下的 index.html，点击打开。自包含 HTML 可以沿文件预览查看；这就是我们把页面和样式放进同一文件的原因。

如果它只在聊天里给了代码，可以直接补一句：

请把刚才的网页实际保存为当前 Workspace 根目录下的 index.html，完成后告诉我保存结果。我需要能在文件区域找到并打开它。

如果文件存在，但打开失败，把界面显示的具体错误告诉 Agent，说明失败发生在“打开文件”这一步。先定位原因，再决定怎样修复。

6. 当一次认真但不挑刺的检查员

把页面缩窄到手机差不多的宽度，读一遍，点一下按钮。检查这几件事：

• 活动名称、示例标记、时间、地点、路线和准备清单都在。
• 小屏幕上能读清文字，不需要左右拖动整页。
• “看看怎么参加”确实跳到了参加说明。
• 页面没有偷偷变成需要填写信息的报名表。

布局和这里描述的不完全一样，很正常。Agent 每次生成的样式可能不同，先判断它是否达到了这些要求。

第一份网页能打开，你就完成了这章最重要的事。下一章我们挑一个具体地方改一改，看看怎样把“总觉得差点意思”说成 Agent 能执行的要求。