先画页面结构
再生成第一版

先理解今天的原理

访客打开作品主页时，脑子里通常有三个问题：你是谁、你做过什么、怎样联系你。页面结构就是回答这三个问题的顺序。先安排回答顺序，后面才知道标题、作品卡片和按钮应该放在哪里。

今天还会建立一个“可运行基线”。基线就是第一份能够正常打开、内容基本正确的版本。它不用精致，也不用一次装满所有功能。只要能够启动、能够阅读、能够继续修改，它就给明天的工作提供了一个清楚起点。

为什么今天要做这件事

1. 如果结构阶段就发现介绍和作品重复，可以在写代码前直接删掉，省下返工时间。
2. 先保存一份能运行的版本，明天改坏样式或链接时，你知道正确状态原来是什么样。
3. 把今天的范围控制在一个单页里，依赖安装、素材路径和启动命令有问题时会更容易查。

开始前检查

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

1. 项目根目录里已经有 PROJECT-BRIEF.md、AGENTS.md、content/profile.md、assets、evidence 和空的 app 目录。
2. 打开 content/profile.md 看一遍。姓名、介绍、三个作品和联系方式都是真实内容；暂时缺少的地方已经明确写了“待补”，没有让 Codex 编造。
3. 打开终端并进入项目根目录。运行 pwd 时，最后一级目录应当是你昨天创建的项目文件夹。
4. 运行 node --version 和 npm --version。两条命令都应返回版本号。今天用到的依赖只安装在 app 目录。
5. 确认项目文件中没有 API Key、身份证号、私人手机号或其他不应该进入页面的资料。

一步一步完成

第 1 步：先确认终端站在正确目录

终端里的命令只会作用于当前目录。目录走错以后，最常见的结果是把依赖装到别的项目，或者让 Codex 读取了一堆无关文件。所以第一步只做只读检查，不创建内容。

1. 在项目根目录打开终端。
2. 运行 pwd，确认输出是这次练习的项目目录。
3. 运行 find . -maxdepth 2 -type f | sort，查看两层以内的文件。
4. 确认清单中能看到任务书、项目规则和真实内容；app 里暂时没有程序文件。

完成这一步后，你应该看到：终端列出的都是本期作品主页文件，没有其他公司项目，也没有 `node_modules` 出现在项目根目录。

第 2 步：第一轮只让 Codex 排页面顺序

现在先讨论访客会看到什么。你会明确告诉 Codex，这一轮不能修改文件。这样即使结构建议不合适，也只需要改几行文字。

1. 把下面的“第一轮提示词”发送给 Codex。
2. 查看它是否按顺序列出首屏介绍、代表作品和联系方式。
3. 检查每一段后面有没有写清“这段回答访客的哪个问题”。
4. 如果它增加了客户评价、虚构数据、技能进度条或博客栏目，要求删掉。我们没有准备这些真实材料。

完成这一步后，你应该看到：你拿到的是一份页面提纲，没有新增或修改任何文件。提纲里的每一段都能对应昨天准备的一份真实材料。

第 3 步：亲手确认页面结构

Codex 给出的结构只是建议，最后顺序由你决定。判断方法很简单：一位第一次认识你的人，从上往下看，能不能顺利回答“你是谁、做过什么、怎么联系”。

1. 把重复表达身份的段落合并，只在首屏保留一次清楚介绍。
2. 检查三个作品是否都说明了结果，不要只列技术名称。
3. 把联系方式放在作品之后，并保留一个明确入口。
4. 确认后把最终提纲保存为 PAGE-PLAN.md。

完成这一步后，你应该看到：`PAGE-PLAN.md` 中只有本期需要的段落，顺序清楚，也没有为了填满页面而增加的空栏目。

第 4 步：第二轮再让 Codex 创建第一版

结构确认以后，再把实现任务交给 Codex。今天使用 Vite 的原生 JavaScript 模板。Vite 是一个本地开发工具，它负责启动页面并在文件修改后自动刷新浏览器。这个选择足够轻，也方便明天继续调整。

1. 把下面的“第二轮提示词”发送给 Codex。
2. 如果 Codex 准备修改 app 以外的文件，先让它停下并解释原因。
3. 如果 Codex 提出安装全局工具，要求改用 app/package.json 中的项目内依赖。
4. 允许创建第一版后，等它完整报告新增文件、启动命令和未完成项。

完成这一步后，你应该看到：`app` 目录中出现 `package.json`、`index.html` 和源码文件；任务书、原始内容和素材文件没有被改写。

第 5 步：先看改了什么，再安装依赖

第一版生成后先读文件清单。你不用逐行看懂所有代码，先确认改动范围正确。随后在 app 目录安装依赖，安装结果会记录进锁文件，下一台电脑才能得到同一套依赖。

1. 运行 git status --short；如果项目还没使用 Git，就运行 find app -maxdepth 2 -type f | sort。
2. 确认新增文件都位于 app，截图和证据文件位于 evidence。
3. 进入 app 目录运行 npm install。
4. 安装完成后确认 package-lock.json 和 node_modules 都在 app 目录中。

完成这一步后，你应该看到：终端没有安装失败信息，`app/package-lock.json` 已生成，项目根目录没有多出 `node_modules`。

第 6 步：启动页面并用肉眼检查主路径

现在才打开第一版。终端会给出一个本地网址，它通常以 http://localhost: 开头。这个网址只供你自己的电脑访问，今天还没有发布到互联网。

1. 在 app 目录运行 npm run dev。
2. 按住 Command 点击终端里的本地网址，或把网址复制到浏览器。
3. 从上往下看一遍：首屏是否有真实身份，作品是否正好三个，联系方式能否点击。
4. 打开浏览器控制台，确认没有红色报错；若图片没显示，记录缺失的文件路径。

完成这一步后，你应该看到：浏览器出现一张完整单页。页面使用真实内容，三个作品顺序正确，联系方式可点击，终端保持运行且没有反复报错。

第 7 步：保存截图、命令和待修问题

第一版一定还会有字体、间距或手机适配问题。今天不用顺手全部修掉。先把当前结果留下，明天才能看见改动前后有什么不同。

1. 把首屏截图保存为 evidence/day-3-first-screen.png。
2. 把本地启动命令和实际网址写进 evidence/day-3-run.md。
3. 最多记录五个明显问题，例如标题换行、图片比例或联系方式不够显眼。
4. 在终端按 Control + C 停止本地服务，再重新运行一次启动命令，确认它可以重复启动。

完成这一步后，你应该看到：`evidence` 目录里有首屏截图、启动记录和问题清单；关闭再启动后，页面仍能正常打开。

pwd
find . -maxdepth 2 -type f | sort
node --version
npm --version

请先读取 PROJECT-BRIEF.md、AGENTS.md、content/profile.md 和 assets 目录。

这一轮只分析，不创建、修改或删除文件。请输出：
1. 页面从上到下的段落顺序；
2. 每一段使用哪份真实内容；
3. 每一段帮助访客回答什么问题；
4. 当前还缺少哪些材料。

页面只服务三个问题：我是谁、我做过什么、怎样联系我。不要增加客户评价、虚构数字、技能进度条、博客或没有真实材料支持的栏目。

我已经确认 PAGE-PLAN.md。现在请在 app 目录生成第一版个人作品主页。

实现要求：
- 使用 Vite 原生 JavaScript 模板；
- 只修改 app 目录；
- 读取 content/profile.md 中的真实文字；
- 使用 assets 中已有且用途明确的图片；
- 页面顺序严格按照 PAGE-PLAN.md；
- 包含首屏介绍、三个代表作品和一种联系方式；
- 先完成清楚的标题层级和基础响应式；
- 不增加登录、数据库、后台、统计、第三方 UI 库和没有真实材料的内容；
- 所有依赖写入 app/package.json，不依赖全局安装。

完成后请报告：
1. 新增或修改了哪些文件；
2. 安装与启动命令；
3. 你实际运行了哪些检查；
4. 仍然需要我人工确认什么。

cd app
npm install
npm run dev

这次真实操作得到了什么

1. 使用项目内 Vite 依赖生成页面；首屏、三项作品与联系方式均来自准备好的教学原件。

本次实际结果：本地页面可以运行，且没有加入登录、后台或数据库。

正确结果长什么样

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

1. PAGE-PLAN.md 已保存，并且每个页面段落都能对应一份真实内容。
2. 在 app 目录运行 npm run dev 后，终端会给出本地网址，浏览器可以正常打开。
3. 首屏有真实姓名或品牌、身份说明和主要入口；页面往下依次出现三个作品和联系方式。
4. 所有依赖、锁文件和程序文件都在 app 目录，项目其他材料没有被意外改写。
5. evidence 中已经保存首屏截图、启动记录和不超过五项的待修问题。
6. 停止服务后再次运行启动命令，页面仍然可以打开，控制台没有阻断使用的红色错误。

常见错误与恢复

留给明天的材料

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

1. 确认后的 PAGE-PLAN.md。
2. app 目录中的第一版代码、package.json 和 package-lock.json。
3. evidence/day-3-first-screen.png 首屏截图。
4. evidence/day-3-run.md 中的启动命令、实际网址和待修问题。
5. 明天继续使用的真实内容、素材和项目规则原件。