# 个人作品页：实际执行记录摘录

运行日期：2026-09-28。Codex CLI 0.144.1，macOS。两次 codex exec，使用已有 ChatGPT 登录。

以下为实际最终回复，工作目录已替换为 <练习目录>；不包含凭据、会话 ID 和内部推理。模型自述检查不等于浏览器检查；截图由教程编辑另行打开实际文件取得。

## 第 1 次运行

输入：prompt-1.txt

我会直接创建一个完全离线的 `index.html`，先确认目录状态与本地约束，再写入并做静态检查；不会添加复制邮箱或筛选交互。
目录中只有会话记录文件，没有现有网页或项目约束。我现在写入单文件页面，版式会在宽屏形成“左侧人物介绍 / 右侧作品预览”，窄屏自动改为自然单列。
页面主体已写入。静态复查时我注意到纸张纹理最初借用了 CSS 线性渐变来画极淡网格，这会触碰“不要渐变”的明确要求；我会去掉它，保留纯暖白纸底，再检查结构、外部资源与响应式规则。
首轮外链检查把 SVG 必需的 XML 命名空间误识别成网络地址；它只是标准声明，不会发起请求。我正在用更精确的规则复核真正会加载资源的属性，并检查三张作品、文案、断点和禁用功能。
已创建 [index.html](<练习目录>/index.html)。

检查完成：

- 单文件，CSS 和 JS 均内嵌
- 无外部图片、字体、依赖或网络资源
- 包含 3 张原创内嵌 SVG 作品插画
- 宽屏左右布局，手机端自然单列
- 邮箱明确标注为演示地址
- 未添加复制邮箱或筛选功能
- 无渐变、发光及营销数字
- 文件为 UTF-8 HTML

未运行浏览器，仅完成静态检查。

## 第 2 次运行

输入：prompt-2.txt

我会直接检查并修改 `index.html`：先确认当前结构与样式，再调整首屏布局、加入复制交互与无障碍状态，最后用本地静态检查验证 1280×900 和 390px 相关约束；不会调用子代理或新增依赖。
问题源头已经确认：桌面端 `.intro` 被设为接近一整屏高，联系区又用了 `margin-top: auto`，因此邮箱被主动推向首屏底部。接下来我会去掉这两个推底条件，把“看作品”和联系操作放在介绍文案之后，并用真实的剪贴板 Promise 结果驱动提示。
修改已经落盘。现在做收尾验证：检查脚本语法、关键 DOM 关联、空白/冲突标记，并确认环境里是否有可用浏览器；如果没有，我会在交付说明中明确区分“静态检查”和“浏览器实测”。
已直接修改 [index.html](<练习目录>/index.html)。

完成内容：

- 联系区域紧接人物介绍，不再贴底。
- 新增“看作品”页内跳转。
- 新增“复制邮箱”按钮。
  - 成功显示“已复制”。
  - API 不可用或复制被拒绝时显示“请手动选择邮箱复制”。
- 保留 `mailto:hello@example.com`。
- 按钮支持键盘操作，并添加清晰的焦点轮廓。
- 针对 390px 宽度加入换行与防溢出处理。
- 保留原配色、插画和三张作品。
- 未添加依赖或外部请求。

实际检查了 JavaScript 语法、关键链接与无障碍属性、冲突标记、尾随空白及外部资源引用。当前环境没有可用浏览器，因此未进行 1280×900 或 390px 的真实浏览器渲染测试；移动端无横向溢出的结论基于 CSS 静态检查。

## 发布后的姓名调整

按读者反馈，展示页及可复用提示词的人物名由“林小满”统一改为“示例同学”，页眉标明“虚构人物 · AI 个人主页演示”。这是编辑修改，不是新一轮模型运行。原始输入保留为 prompt-1.original.txt；两版布局与交互保持原有逻辑，截图重新拍摄。