AI 实践一个包含自我介绍、三项代表作品和联系方式的响应式单页网站，可以在本机打开并分享截图。
开始前准备
先把材料准备好，再让 Codex 动手。缺少真实内容时先留空，不要让它替你编造。
- 准备 80 字以内的自我介绍
- 准备三项作品的名称、说明和真实链接
- 新建一个只用于练习的空文件夹
第一版只做这些
这一轮只完成最小可用版本。下面四项全部完成以后，再考虑增加功能。
- 首屏说明你是谁和能做什么
- 三项作品有标题、简介和入口
- 联系方式清楚但不公开敏感信息
- 手机和电脑都能正常阅读
跟着完成一次
不要一次把全部要求扔给 Codex。按顺序完成，每一步都先看结果，再继续下一步。
- 01
让 Codex 先检查练习目录并提出页面结构，不立即写代码。
- 02
确认结构后，用原生 HTML、CSS 和少量 JavaScript 完成最小版本。
- 03
启动本地服务器，逐项替换为你的真实文字和链接。
- 04
分别以桌面和手机宽度打开，检查导航、换行、链接和键盘焦点。
- 05
修复最影响阅读的三项问题，并记录启动方式。
复制给 Codex 的完整任务
把方括号中的内容替换成你自己的真实材料，再复制给 Codex。
我要在当前练习目录制作一个个人作品主页。请先只读检查目录，并根据我提供的【自我介绍】【三项作品】【联系方式】给出页面结构和验收清单，等我确认后再实现。第一版使用原生 HTML、CSS 和少量 JavaScript，不接数据库、不使用付费服务、不编造经历或数据。页面要包含清楚的首屏、作品介绍和联系方式，适配手机与电脑。完成后请启动本地服务器，真实打开页面，检查所有链接、键盘焦点、窄屏换行和控制台错误，再报告修改文件、启动命令、验证结果和仍需我替换的内容。
Skill 怎么参与
Skill 只是帮助你加快某一步，不是完成项目的前提。没有安装，也可以让 Codex 按同样的目标继续做。
用于确定页面层级、排版和视觉一致性；未安装时让 Codex先给结构方案即可。
用于真实打开桌面和移动尺寸并保存验收证据。
第一版完成以后
确认第一版可以使用，再复制下面这段升级任务。不要在基础功能还没跑通时提前增加。
在现有作品主页上做第二轮升级：保留真实内容和当前视觉方向，增加项目筛选、单项作品详情和可打印版本。先列出会修改的文件与验收标准，再实施；不要新增账号、数据库或埋点。完成后重新执行桌面、手机和打印预览检查。
常见偏差
- 先套模板再硬塞内容，结果读者看不出重点。
- 为了好看加入不存在的客户、数字或项目成果。
完成检查
- 首次打开五秒内能知道你是谁。
- 三项作品和联系方式都可访问。
- 在 390px 宽度下没有横向滚动。
- 控制台没有阻断错误。