第一个可打开的作品

01 · 先把终点说清楚

本课只做一件事：得到一个双击即可在浏览器打开的个人探索卡。先不要追求复杂动效，也不要拆成多个文件。单文件能减少第一轮失败点。

把姓名、目标和链接换成你自己的真实内容。真实内容会暴露排版问题，示例占位符不会。

1. 在 agent-web-course 中创建文件夹 01-first-artifact。
2. 告诉 Agent 只能在这个文件夹内工作。
3. 复制下面的 Prompt，并替换方括号里的内容。

请在当前项目的 01-first-artifact 文件夹中创建 hello-artifact.html。

目标：做一张能在浏览器直接打开的个人 AI 探索卡。
内容：姓名是「[你的姓名]」；目标是「[你的目标]」；加入链接「[链接文字]」并指向「[https://...]」。
约束：只用一个 HTML 文件；CSS 和 JavaScript 写在文件内；不加载外部框架、字体或图片；中文排版清楚；手机宽度不横向滚动。
验收：页面有且只有一个 h1；链接能点击并在新标签页打开；宽度 390px 和 1440px 时内容都完整。

完成后说明你创建了什么文件，以及我应如何打开它。

02 · 打开真实结果

先查看文件是否真的存在，再用浏览器打开。不要只相信 Agent 的“已完成”。网页工作最可靠的证据永远是可见结果。

1. 在文件列表找到 hello-artifact.html。
2. 双击文件，或在 Agent 提供的预览中打开。
3. 点击真实链接，确认目标地址正确。
4. 把浏览器缩窄到接近手机宽度，观察是否出现横向滚动。

03 · 做一次可验证的修改

第一次迭代不要说“再高级一点”。要求一个能用眼睛确认的变化，例如标题变短、按钮文案更明确、链接获得键盘焦点样式。

1. 刷新浏览器，而不是打开旧截图。
2. 按 Tab 键移动焦点，确认按钮有明显轮廓。
3. 对照 Agent 的说明，在页面上逐项指出结果。

请修改 01-first-artifact/hello-artifact.html：
1. 把主标题改为「我正在用 AI 做真实作品」；
2. 把链接呈现为明确按钮，按钮文字使用动作动词；
3. 为键盘焦点加入清晰可见的轮廓；
4. 保留原有单文件与移动端约束。
修改后逐条说明四项要求分别落在页面哪里。

04 · 留下本课证据

保存文件，并截取一张桌面宽度和一张手机宽度的页面图。截图不是装饰，它能帮助你在后续课程里比较作品如何变化。

1. 确认文件位于 01-first-artifact/hello-artifact.html。
2. 记录一句复盘：哪条要求最容易遗漏？
3. 完成下方检查点后进入下一课。