补全真实内容
和核心交互

先理解今天的原理

信息层级通过字号、位置、间距和对比告诉读者先看哪里。内容层级混乱时，再多动画也无法帮助理解。

交互需要让用户看得出可以操作，并在悬停、聚焦和点击后给出反馈。链接只是文字但没有状态，用户会犹豫它是否可以点击。

为什么今天要做这件事

1. 真实长度会暴露标题换行、卡片高度和图片比例问题。
2. 链接状态决定访客是否能顺利完成联系动作。
3. 今天完成主路径，明天才能集中测试不同设备和输入方式。

开始前检查

这是第 04 天。先完成下面的检查，再开始操作。缺少关键材料时，先补材料，不要让 Agent 猜。

1. 第一版可以稳定启动。
2. 所有待补内容已经替换或保留明确说明。
3. 列出页面唯一的主要动作，例如查看作品或联系。

一步一步完成

第 1 步：先启动昨天的版本并保存对照截图

今天会连续修改内容和交互。先保存昨天的样子，后面才能判断页面是否更清楚，也能发现某次修改有没有破坏原来正常的部分。

1. 进入 app 目录运行 npm run dev。
2. 打开终端给出的本地网址，从首屏浏览到联系方式。
3. 确认昨天的三个作品和联系方式仍然存在。
4. 把当前桌面首屏保存为 evidence/day-4-before.png。
5. 把今天唯一的主要动作写进 evidence/day-4-goal.md，例如“让访客找到最相关作品并联系我”。

完成这一步后，你应该看到：页面可以正常打开，改动前截图已经保存，今天要优化的访客动作只有一个。

第 2 步：用五秒检查首屏

首屏先回答身份和价值。请找一位不了解项目的人看五秒，或者自己把页面缩小后快速扫一眼，再说出第一眼获得的信息。

1. 遮住首屏以下内容，只看姓名、身份说明和主要入口。
2. 检查姓名或品牌是否比装饰文字更醒目。
3. 把身份说明改成“为谁完成什么结果”，控制在一到两行。
4. 主要入口使用动作词，例如“查看代表作品”，不要只写“了解更多”。
5. 修改后重新截图，对比第一眼阅读顺序。

完成这一步后，你应该看到：第一次访问的人能在五秒内说出你是谁、主要做什么，以及页面下一步可以看哪里。

第 3 步：把三个作品整理成相同结构

三个作品使用相同字段，访客才能快速比较。每个作品先讲结果，再补过程和工具；只有技术名会让非技术访客无法判断价值。

1. 为每个作品保留名称、服务对象、完成结果、你的工作和公开链接。
2. 把最长与最短的作品说明放在一起，检查卡片是否还能稳定排列。
3. 删除无法证明的效果数字；没有公开链接时写明可提供演示，不使用假链接。
4. 统一三个链接的文案，例如“查看项目”或“查看演示”。
5. 让 Codex 列出三张作品卡字段差异，只修缺失项。

完成这一步后，你应该看到：三个作品都能回答“给谁做、做出了什么、在哪里查看”，字段顺序一致，没有虚构结果。

第 4 步：让链接在鼠标和键盘下都看得出能点

可点击文字需要稳定的视觉提示。默认状态、鼠标悬停和键盘聚焦都要能辨认，手机端还要有足够的触控范围。

1. 检查作品链接和联系方式默认状态是否有下划线、箭头或明显颜色差。
2. 用鼠标悬停，确认颜色或箭头有轻微反馈。
3. 从浏览器地址栏开始按 Tab，确认每个链接都有清楚焦点框。
4. 按 Enter 打开链接，再返回页面继续检查。
5. 在 390px 宽度确认可点击区域不会挤在一起。

完成这一步后，你应该看到：不移动鼠标也能辨认链接；鼠标、键盘和触控都能完成查看作品与联系动作。

第 5 步：处理图片尺寸、比例和替代文字

真实图片经常大小不同。统一展示比例可以稳定页面节奏，替代文字会在图片无法显示或读屏时说明图片内容。

1. 逐张确认图片方向、主体位置和可公开范围。
2. 在页面中使用统一容器比例，并让图片保持原比例裁切。
3. 把体积明显过大的图片压缩后保存新文件，不覆盖原图。
4. 为头像和作品图写具体替代文字，例如“AI 剪辑软件项目主页截图”。
5. 临时改错一个图片路径，确认替代文字能够出现，再恢复正确路径。

完成这一步后，你应该看到：图片没有变形，三个作品媒体区高度稳定；图片加载失败时仍能知道原位置展示什么。

第 6 步：删除干扰主路径的装饰并保存结果

动画和装饰只在帮助理解状态时保留。它们如果抢走标题注意力、遮住正文或延迟点击，就会增加访客完成任务的成本。

1. 关闭动画后浏览一次页面，判断信息是否仍然完整。
2. 删除与阅读顺序无关的自动循环动画和漂浮装饰。
3. 保留用于链接悬停、焦点和状态变化的短反馈。
4. 重新检查首屏、三个作品和联系方式。
5. 保存 evidence/day-4-after.png 和本日修改清单。

完成这一步后，你应该看到：页面主路径比改动前更容易扫描，没有装饰遮挡内容；前后截图和修改清单已经保存。

请启动或读取当前页面，以第一次访问的潜在合作伙伴视角检查。

只输出问题清单，暂时不要修改文件。按影响从高到低回答：
1. 五秒内能否知道我是谁、主要完成什么结果；
2. 三个作品是否都先讲结果，再讲过程；
3. 查看作品和联系入口是否明显；
4. 鼠标、键盘和手机下是否都能辨认可点击元素；
5. 哪些动画或装饰妨碍阅读。

每个问题请写出所在位置、用户会遇到什么困难和最小修改建议。

| 元素 | 默认可辨认 | 鼠标悬停 | 键盘焦点 | Enter 可用 | 手机可点 |
|---|---|---|---|---|---|
| 主要入口 |  |  |  |  |  |
| 作品 1 链接 |  |  |  |  |  |
| 作品 2 链接 |  |  |  |  |  |
| 作品 3 链接 |  |  |  |  |  |
| 联系方式 |  |  |  |  |  |

这次真实操作得到了什么

1. 原生 details/summary 支持展开、收起和键盘操作；打开状态下能看到问题、做法与交付。

本次实际结果：内容顺序与任务书一致，交互不依赖鼠标才能完成。

正确结果长什么样

完成操作后，用结果来判断今天是否学会。页面能打开或命令能运行，只能说明流程启动了；下面这些证据同时出现，今天才算完成。

1. 首屏能快速说清身份、能力和下一步。
2. 每个作品都包含真实结果与可用链接，缺失项有诚实说明。
3. 鼠标与键盘都能看见交互反馈。
4. 页面没有会遮挡正文或干扰阅读的动画。

常见错误与恢复

留给明天的材料

结束前把今天的关键结果保存到项目目录。下一天会直接使用这些材料，保存清楚可以减少重复说明和错误猜测。

1. 完成真实内容替换的页面。
2. 主路径问题清单和已修复前三项。
3. 图片替代文字与链接清单。