创作5：用 AI 做个人网站

先确定作品要解决什么

作品集首页把多个独立页面组成一个静态站点。路径要能在项目子目录下工作，./cards.html 比写死 /cards.html 更适合项目站点。代码中不放 API 密钥；需要密钥的功能应由后端处理，不属于本次纯静态作品。

给 AI 的任务卡

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

请为我的四个 HTML 项目设计静态作品集首页。用相对路径连接 cards.html、story.html、game.html、tracker.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>

做一次有理由的修改

用参考首页组织五个文件。为每个项目补上实现说明和已知限制，增加清楚的焦点样式；选做自己的封面素材时记录授权与来源，并在部署目录中包含图片。创建 README，写明入口、运行方式、测试与版本记录。

用实际操作验收

检查直接访问各页面、从首页跳转、刷新、路径大小写、手机宽度、键盘顺序、图片缺失与空链接。模拟部署到子路径，确认没有依赖本机绝对路径。网页源码可能被访客看到，发布前检查密钥和个人资料。