创作5：用 AI 做个人网站

先确定作品要解决什么

作品集回答三个问题：做了什么、怎样打开、学到了什么。用虚构昵称，不需要真实学校、班级、照片或联系方式。每个作品写一句自己的介绍，说明借助 AI 或参考代码的地方。

给 AI 的任务卡

把主题和内容换成自己的版本，先检查助手复述的需求再生成代码。使用家长或学校允许的编程工具；本站提供的代码是预写参考，没有调用实时 AI。记录实际借助了什么帮助。

请制作单文件作品集首页，使用虚构昵称。包含四个作品链接 cards.html、story.html、game.html、tracker.html，写简短介绍、创作帮助说明和版本号。用相对链接，不用聊天表单或统计代码；手机窄屏能读，键盘能访问链接。先检查文件清单，再给首页 HTML。

从可运行的起点开始

下方是完整参考代码，也已放入练习草稿。点击“导出当前草稿”，再在预览中点击“下载文件”；把下载的文件重命名为 index.html，保留 .html 后缀，在电脑浏览器中打开。先验证原版，再另存自己的版本。代码在本地运行，不会训练或调用 GuppyLM。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>星光工作室 · 我的作品集</title>
<style>
*{box-sizing:border-box}body{font:18px/1.7 system-ui;margin:24px auto;padding:0 20px;max-width:720px;color:#183b36;background:#f7faf9}
h1{font-size:28px}h2{font-size:22px}button,input{font:inherit}button,a{touch-action:manipulation}button{padding:10px 16px;margin:4px;border:1px solid #287b68;border-radius:6px;background:white;color:#183b36;cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:#1468a0}label{display:block;padding:6px 0}section{border-top:1px solid #bfcfc8;padding:16px 0}p,li{overflow-wrap:anywhere}img{max-width:100%}:focus-visible{outline:3px solid #cc7600;outline-offset:3px}
</style>
<h1>星光工作室 · 我的作品集</h1>
<p>我用代码记录学习中的发现。这是虚构署名的课程示例。</p>
<nav aria-label="页面导航"><a href="#works">作品</a> · <a href="#about">关于创作</a></nav>
<section id="works"><h2>我的作品</h2>
<ul>
<li><a href="cards.html">科学学习卡</a>：先思考，再查看答案。</li>
<li><a href="story.html">互动故事</a>：不同选择通往不同结尾。</li>
<li><a href="game.html">心算小游戏</a>：完成一轮，再回顾错题。</li>
<li><a href="tracker.html">阅读打卡器</a>：记录自己的阅读日期。</li>
</ul></section>
<section id="about"><h2>关于创作</h2><p>我负责主题、测试和修改决定；使用了本站参考代码。实际借助 AI 时，在这里说明它帮助了哪些部分。</p>
<p>版本：v1。已检查的功能和仍待改进的地方，请用自己的实际记录替换。</p></section>
<footer><a href="#">回到顶部</a></footer>

</html>

做一次有理由的修改

把前四课的 HTML 导出并分别命名为 cards.html、story.html、game.html、tracker.html；首页命名为 index.html，五个文件放在同一文件夹。修改参考首页的昵称与介绍。没有做完的作品先删去链接或标注待完成，不能留下打不开的按钮。

用实际操作验收

从 index.html 依次打开四个作品，再用浏览器返回。检查文件名大小写一致、手机文字不被遮住、Tab 可以选中链接。请家长检查署名和素材，再进入后面的发布课。