# AI 个人主页项目 Prompt 系统总结报告

> 建议放置路径：`docs/prompts/personal_portfolio_prompt_system_review.md`  
> 适用项目：Personal Positioning / Garrsin AI Portfolio  
> 分析对象：`merged(1).txt` 中的完整 Codex Prompt 链路  
> 覆盖范围：Step 1 ～ Step 41，含 Step 3.5、Step 3.6、Step 4.5、Step 4.6  
> 报告目的：总结当前 Prompt 工作流的结构、优点、问题、可优化方向，并沉淀为项目内可复用的 Prompt 方法论资产。

---

## 1. 总体结论

这套 Prompt 不是普通的“让 Codex 写页面”的指令集合，而是一套围绕个人主页项目持续迭代的 **AI 产品化项目管理 Prompt 系统**。

它已经完成了从 0 到 1 的个人主页创建、内容系统搭建、SEO 与部署准备、Netlify 部署、GitHub 工作流、中文优先改版、视觉主题重构、二级页面深化、Cloudflare Pages 迁移、作品集项目扩展、产品分析模块拆分、研究与思考模块整理等完整过程。

更准确地说，这套 Prompt 的价值不只是做出了一个个人主页，而是证明了：

```text
用户能够用 AI / Codex 按照产品迭代逻辑，持续推进一个真实可访问、可部署、可维护、可扩展的个人作品集系统。
```

它体现的核心能力包括：

1. AI 项目拆解能力
2. Prompt 工作流设计能力
3. 前端项目迭代管理能力
4. 内容产品化能力
5. 部署与工程验收意识
6. 视觉审美修正能力
7. 作品集信息架构能力
8. 不伪造、不夸大、不乱补链接的可信表达意识

整体判断：

```text
这套 Prompt 已经具备作品集级别的沉淀价值。
后续优化重点不是重写全部 Prompt，而是把它从“逐步长 Prompt”升级为“模块化 Prompt 工作流体系”。
```

---

## 2. Prompt 链路阶段总览

根据 45 个 step prompt 的内容，可以将整个项目分成 7 个阶段。

---

### 阶段一：从 0 到 1 创建个人主页基础系统

覆盖步骤：

```text
Step 1
Step 2
Step 3
```

主要目标：

1. 创建一个高级 AI 个人主页项目。
2. 使用 zero-dependency static portfolio 方案。
3. 建立首页基础结构。
4. 将内容抽离到 `src/data/siteData.mjs`。
5. 增加 Hero、About、Capability Matrix、Projects、AI Workflow、Timeline、Essays、Resume/Profile 等模块。
6. 完成 SEO、Open Graph、Twitter Card、favicon、robots、sitemap、404 页面等公开展示基础能力。

这一阶段的 Prompt 做得很完整，尤其清楚定义了：

```text
这不是普通简历页，而是 AI 个人能力展示中心。
```

它给 Codex 的不是一个“页面任务”，而是一个“个人品牌产品”的定义。这一点非常关键。

---

### 阶段二：部署、上线、GitHub 工作流与公开展示可信度

覆盖步骤：

```text
Step 3.5
Step 3.6
Step 4
Step 4.5
Step 4.6
Step 5
```

主要目标：

1. 尝试 Netlify 正式部署。
2. 处理 Netlify 插件、CLI、授权、网络失败等问题。
3. 回填真实生产 URL。
4. 完成二次 build 与 production deploy。
5. 增强项目详情页、文章详情页、项目预览图、链接状态。
6. 准备 GitHub + Netlify 的长期部署链路。
7. 增加 Proof of Work、Site Status、真实链接状态管理。

这一阶段非常重要，因为它让项目从“本地页面”变成了“真实可访问的作品集站点”。

尤其值得保留的是部署失败处理逻辑：

```text
如果自动部署失败，不要假装成功。
要明确失败路径、判断是不是项目代码问题，并给出手动部署步骤。
```

这说明 Prompt 已经开始具备工程项目管理意识。

---

### 阶段三：内容替换、简历融合、中英文切换与视觉精修

覆盖步骤：

```text
Step 6
Step 7
Step 8
Step 9
Step 10
Step 11
Step 12
```

主要目标：

1. 优化整体视觉节奏。
2. 建立内容替换系统。
3. 将真实简历内容融入个人主页。
4. 加入 AI 使用经验、工作经历、教育背景、岗位匹配逻辑。
5. 从英文 AI portfolio 升级为中文优先、支持中英文切换的求职展示主页。
6. 对中文表达进行自然化修正。
7. 修复中英混杂、中文残留、表达不自然的问题。

这一阶段体现了一个明显的产品判断：

```text
作品集不是越炫越好，而是要让招聘方快速看懂用户是谁、能做什么、为什么适合目标岗位。
```

这套 Prompt 在 Step 8 和 Step 9 之后，项目开始从“AI portfolio 页面”变成“求职转化型个人主页”。

---

### 阶段四：深色主题、可读性、浏览器兼容与阶段性冻结

覆盖步骤：

```text
Step 13
Step 14
Step 15
Step 16
Step 17
Step 18
Step 19
Step 20
Step 21
```

主要目标：

1. 从浅色简历卡片风格改为深色高级科技个人主页。
2. 修复字体颜色、卡片层级、按钮、标签、宽度、留白。
3. 提升深色主题可读性。
4. 扩大桌面端主内容区域。
5. 修复 Edge 与 Chrome 显示差异。
6. 弱化突兀的 section 装饰线。
7. 做最终检查与阶段性冻结。

这一阶段是典型的“视觉迭代阶段”。它的价值在于反复逼近用户审美目标：

```text
深色、高级、科技感、清楚、规整、不是模板简历。
```

但这一阶段也暴露出一个问题：

```text
视觉微调类 Prompt 数量偏多，后续应该引入设计系统变量和视觉验收清单，减少反复修修补补。
```

---

### 阶段五：参考规划图后的首页结构重构与二级页面深化

覆盖步骤：

```text
Step 22
Step 23
Step 24
Step 25
Step 26
Step 27
Step 28
Step 29
```

主要目标：

1. 根据上传的“AI 应用产品经理方向个人主页规划图”重构首页结构。
2. 引入左侧章节导航、中间主内容区、右侧价值锚点。
3. 后续移除右侧栏，回到更干净的主内容布局。
4. 优化 Hero、照片位、项目卡片、首页精选项目。
5. 将二级页面升级为正式 Case Study 页和正式文章阅读页。
6. 全站删除生硬的“能力证明”表达。
7. 统一期望城市为“杭州 / 上海”。
8. 做全站文案、链接、隐私、占位状态、页面稳定性扫描。
9. 进入阶段性冻结。

这一阶段的 Prompt 优点是：能够根据用户反馈及时调整，不执着于第一次方案。

尤其重要的是从“能力证明”改为更自然的表达。这个判断很对，因为作品集里过多出现“能力证明”会显得像自我推销，而不是自然展示结果。

---

### 阶段六：新增重点作品集项目、部署迁移与真实资产补全

覆盖步骤：

```text
Step 30
Step 31
Step 32
Step 33
Step 34
Step 35
```

主要目标：

1. 将「AI 体检报告解读与健康行动助手」加入首页和作品集系统。
2. 将站点主 URL 从 Netlify 切换到 Cloudflare Pages。
3. 增加 Cloudflare Pages 直接部署脚本和部署说明。
4. 新增「统一进度反馈组件」作为正式作品集项目。
5. 补齐用户上传的真实文档资产。
6. 加入个人照片。
7. 隐藏首页中的 placeholder 按钮，避免削弱完成度。
8. 修正返回顶部按钮位置。

这一阶段的关键变化是：

```text
个人主页开始从“个人介绍 + 项目列表”升级为“真实作品集内容系统”。
```

特别是 Step 34 对 placeholder 按钮的处理非常成熟：

```text
不伪造真实链接，但也不在首页暴露太多“待补充”，而是把占位状态放到详情页或内容审计中。
```

这很符合真实作品集展示逻辑。

---

### 阶段七：作品集模块化重组、产品分析加入与最终一致性补齐

覆盖步骤：

```text
Step 36
Step 37
Step 38
Step 39
Step 40
Step 41
```

主要目标：

1. 将首页作品集区拆成三层结构：
   - 产品分析 Product Analysis
   - 产品项目 Product Projects
   - 研究与思考 Research & Thinking
2. 新增「AI 聊天产品等待态 / 思考态 / 生成态产品功能分析」。
3. 调整产品分析模块在产品项目模块前。
4. 修复产品项目卡片图片显示不全问题。
5. 将个人主页本身作为正式产品项目加入首页。
6. 产品项目模块变成更舒展的 2x2 布局。
7. 修复能力卡 3+1 落单问题。
8. 补齐项目卡片、说明模块、PDF 文档链接、研究与思考模块结构一致性。

这一阶段让个人主页从“展示几个项目”进一步升级为：

```text
一个分层的产品经理作品集系统。
```

它开始明确区分：

```text
产品分析 ≠ 产品项目 ≠ 研究与思考
```

这对 AI 产品经理求职非常重要，因为它让浏览者能更快判断用户的能力结构。

---

## 3. 这套 Prompt 最有效的部分

### 3.1 项目定位清楚

从 Step 1 开始，Prompt 就没有把项目定义为普通个人主页，而是定义为：

```text
AI 个人能力展示中心
AI Portfolio
个人品牌网站
求职展示主页
作品集内容系统
```

这种定位让后续所有页面结构、视觉风格、项目内容都围绕一个明确方向展开。

---

### 3.2 每一步都有明确边界

几乎每一步都反复强调：

```text
不要推翻当前项目
不要引入外部依赖
不要切回 React / Vite
不要伪造真实链接
不要公开电话 / 微信
不要破坏部署
不要自动部署，除非明确要求
```

这套边界对 Codex 非常重要，因为 Codex 很容易为了完成任务而“顺手重构”或“假装填充”。

这类边界应该保留。

---

### 3.3 真实状态传递做得好

每一步 Prompt 都会告诉 Codex 当前状态，例如：

```text
Step 1 已完成
Step 2 已完成
当前仍保持 zero-dependency static portfolio
当前已部署到 Netlify
当前已迁移到 Cloudflare Pages
当前仍有哪些占位内容
```

这能减少 Codex 误判项目阶段。

---

### 3.4 验收意识强

很多 Prompt 都要求：

```text
npm run build
检查 dist 文件
检查 SEO meta
检查 robots
检查 sitemap
检查 404
检查 undefined / null / NaN
检查 fake demo / fake repo
检查 README
```

这说明 Prompt 已经不是“写完就结束”，而是有交付验收。

---

### 3.5 可信度意识强

非常值得保留的要求包括：

```text
不伪造邮箱
不伪造 GitHub / LinkedIn
不伪造项目链接
不使用 href="#"
不公开电话 / 微信
占位内容要明确标注
真实链接和 placeholder 链接要分开
```

这对作品集尤其重要。一个作品集最怕的不是内容少，而是显得不可信。

---

### 3.6 内容产品化意识强

这套 Prompt 反复要求：

```text
内容由 siteData.mjs 驱动
项目有 slug
项目有详情页
文章有详情页
项目有 linkStatus
内容有 content-audit
有 review-checklist
```

这说明项目不是一次性页面，而是一个可维护的内容系统。

---

## 4. 当前 Prompt 系统存在的问题

### 4.1 Prompt 过长，重复上下文过多

很多步骤都重复了：

```text
项目目录
当前状态
已完成步骤
重要原则
不要推翻当前项目
不要新增依赖
不要公开电话 / 微信
不要伪造链接
```

这些内容有价值，但不应该每次完整重复。后续可以沉淀成固定文件，由 Codex 每次先读取：

```text
docs/prompts/project_context.md
docs/prompts/global_constraints.md
docs/prompts/deployment_rules.md
docs/prompts/content_rules.md
```

这样每个 step prompt 只写当前任务即可。

---

### 4.2 Step 3.6 出现明显重复

Step 3.6 中同一段部署重试 Prompt 被重复写入多次。这会导致：

1. Prompt 变长
2. Codex 注意力被浪费
3. 执行重点被稀释
4. 后续合并总结时噪声增加

优化建议：

```text
合并 prompt 前先按 step 去重。
每个 step 文件中只保留一份最终有效版本。
```

---

### 4.3 视觉微调阶段缺少设计系统约束

Step 13 到 Step 20 中，视觉修正非常多，说明用户审美目标逐渐清晰，但也说明前期缺少统一设计系统。

建议以后在视觉类项目中提前建立：

```text
docs/design/design_system.md
docs/design/visual_principles.md
docs/design/css_tokens.md
docs/design/responsive_rules.md
```

并要求 Codex 每次视觉修改优先调整变量，而不是零散改 CSS。

---

### 4.4 自动部署类 Prompt 风险较高

Step 3.5、3.6、4.5、4.6、31、40 都涉及部署、Git、Cloudflare、Netlify。

这类 Prompt 要更谨慎，因为部署操作会影响线上站点。

建议区分三种执行模式：

```text
local_only：只本地修改和 build，不部署
prepare_deploy：准备部署文件和说明，不执行 deploy
deploy_allowed：用户明确允许后，才执行 git push / cloudflare deploy / netlify deploy
```

后续 Prompt 可以固定加一行：

```text
当前执行模式：local_only / prepare_deploy / deploy_allowed
```

---

### 4.5 缺少“改动前检查”标准协议

很多 Prompt 要求修改项目，但没有固定要求 Codex 先做：

```text
git status
查看目录结构
读取相关文件
确认当前真实 DOM / 数据结构 / CSS class
确认构建脚本
确认部署脚本
```

后面虽然有些步骤开始提到真实 DOM，但建议沉淀为固定协议：

```text
执行前必须先读取相关文件，不得凭想象修改 class、字段或路径。
```

---

### 4.6 缺少统一的变更记录格式

每一步最终回复都有“修改了哪些文件”，但项目内部最好有固定 changelog：

```text
docs/logs/development_log.md
docs/logs/deployment_log.md
docs/logs/content_change_log.md
```

这样作品集不仅有最终页面，也能展示项目推进过程。

---

## 5. 可优化方向总结

### 优化方向一：建立 Prompt 基础协议文件

建议新增：

```text
docs/prompts/project_context.md
docs/prompts/global_constraints.md
docs/prompts/codex_execution_protocol.md
docs/prompts/deployment_protocol.md
docs/prompts/content_integrity_rules.md
docs/prompts/visual_design_rules.md
```

用途：

| 文件 | 作用 |
|---|---|
| project_context.md | 固定记录项目定位、技术栈、部署平台、主要目录 |
| global_constraints.md | 固定记录禁止事项，如不伪造链接、不公开电话、不引入依赖 |
| codex_execution_protocol.md | 固定记录 Codex 每次执行前、中、后的流程 |
| deployment_protocol.md | 固定记录 Netlify / Cloudflare / Git 部署规则 |
| content_integrity_rules.md | 固定记录作品集内容可信度规范 |
| visual_design_rules.md | 固定记录深色主题、卡片、字体、间距、响应式规则 |

---

### 优化方向二：将长 Prompt 改为模块化 Prompt

后续每一步 Prompt 建议使用这个结构：

```text
# Step X：任务名称

## 1. 当前目标
本轮只解决什么问题。

## 2. 必读上下文
请先阅读：
- docs/prompts/project_context.md
- docs/prompts/global_constraints.md
- 相关源码文件

## 3. 当前范围
本轮允许修改哪些文件。

## 4. 禁止事项
本轮不能做什么。

## 5. 具体任务
列出 3–8 个明确动作。

## 6. 验收标准
列出可检查结果。

## 7. 输出要求
说明最后要汇报什么。

## 8. 失败处理
遇到 build / deploy / 权限 / 路径问题时如何处理。
```

---

### 优化方向三：部署操作必须显式授权

建议在项目中加入部署规则：

```text
默认不部署。
只有当 prompt 明确写出「允许部署」或「deploy_allowed」时，Codex 才可以执行 git push、Netlify deploy、Cloudflare deploy。
```

这样可以避免误操作线上站点。

---

### 优化方向四：视觉修改前必须截图或读取真实结构

后续视觉修复类 Prompt 建议增加：

```text
修改前先读取当前 HTML / CSS / build output，确认真实 class 和 DOM 结构。
不得凭想象新写一套无效 class。
```

如果有截图，则要求：

```text
先根据截图定位问题，再只做局部 CSS 修复。
```

---

### 优化方向五：内容完整度要继续做成审计系统

当前已经有 content-audit / review-checklist 的思路，后续建议进一步强化：

```text
docs/audit/content_audit.md
docs/audit/link_audit.md
docs/audit/seo_audit.md
docs/audit/portfolio_readiness_checklist.md
```

让项目长期保持：

```text
页面内容是否真实？
链接是否可用？
占位是否隐藏得当？
SEO 是否同步？
项目详情是否完整？
是否有自夸和机器翻译感？
```

---

## 6. 建议沉淀到项目中的 Prompt 文件结构

推荐新增或整理为以下结构：

```text
docs/
  prompts/
    README.md
    prompt_system_review.md
    project_context.md
    global_constraints.md
    codex_execution_protocol.md
    deployment_protocol.md
    content_integrity_rules.md
    visual_design_rules.md
    prompt_template.md
    prompt_quality_checklist.md
    step_index.md
```

其中：

### `prompt_system_review.md`

存放本报告，说明整个 Prompt 系统的价值、阶段、优点和优化方向。

### `step_index.md`

记录每个 step 的作用，例如：

```text
Step 1：创建个人主页基础项目
Step 2：补全首页内容结构
Step 3：SEO / OG / robots / sitemap / 404
Step 3.5：Netlify 部署与 URL 回填
Step 3.6：部署失败重试与手动兜底
Step 4：项目详情页与文章详情页
...
Step 41：首页内容一致性与文档补齐
```

### `prompt_template.md`

作为未来所有 Codex prompt 的标准模板。

### `prompt_quality_checklist.md`

用于每次写 prompt 前检查是否具备：

```text
目标
范围
流程
结果
验收
失败处理
```

---

## 7. 标准 Codex Prompt 模板

后续建议统一使用以下模板。

```markdown
# Step X：任务名称

## 0. 执行模式

当前执行模式：local_only / prepare_deploy / deploy_allowed

如果不是 deploy_allowed，不要执行 git push、Netlify deploy、Cloudflare deploy 或任何线上发布操作。

---

## 1. 当前项目状态

请先读取以下文件确认真实状态：

- README.md
- src/data/siteData.mjs
- scripts/build.mjs
- src/styles.css
- docs/prompts/project_context.md
- docs/prompts/global_constraints.md

不要凭记忆或假设修改项目。

---

## 2. 本轮目标

本轮只完成：

1. 目标一
2. 目标二
3. 目标三

本轮不解决其他问题。

---

## 3. 允许修改的文件

本轮允许修改：

```text
src/data/siteData.mjs
src/styles.css
scripts/build.mjs
README.md
docs/audit/content_audit.md
```

如果确实需要修改其他文件，必须说明原因。

---

## 4. 禁止事项

本轮禁止：

1. 不推翻当前项目结构。
2. 不引入新的外部依赖。
3. 不伪造真实链接。
4. 不公开电话 / 微信。
5. 不使用 href="#"。
6. 不删除已有详情页。
7. 不破坏 Cloudflare Pages URL。
8. 不自动部署，除非执行模式为 deploy_allowed。

---

## 5. 具体任务

请完成：

1. 任务一
2. 任务二
3. 任务三
4. 任务四

---

## 6. 验收标准

完成后必须检查：

```bash
npm run build
```

并确认：

- dist/index.html 存在
- dist/styles.css 存在
- 页面没有 undefined / null / NaN
- 相关链接没有 href="#"
- 相关模块没有 fake demo / fake repo
- README 已更新
- content-audit 已更新

---

## 7. 失败处理

如果遇到问题：

1. 不要伪造完成。
2. 记录失败命令和错误信息。
3. 判断是代码问题、路径问题、依赖问题、权限问题还是网络问题。
4. 保留已完成部分。
5. 给出我可以手动执行的下一步。

---

## 8. 最终回复

请用中文告诉我：

1. 本轮完成了什么
2. 修改了哪些文件
3. build 是否通过
4. 是否有未完成事项
5. 是否触发部署
6. 下一步建议
```

---

## 8. Prompt 质量检查清单

后续每次写 Codex Prompt 前，建议检查：

```text
[ ] 是否说明了本轮目标？
[ ] 是否说明了当前项目状态？
[ ] 是否说明了执行模式？
[ ] 是否说明了允许修改哪些文件？
[ ] 是否说明了禁止事项？
[ ] 是否要求读取真实文件而不是凭想象修改？
[ ] 是否给出具体任务？
[ ] 是否给出可验证的验收标准？
[ ] 是否要求 npm run build？
[ ] 是否说明失败处理方式？
[ ] 是否避免重复粘贴过多上下文？
[ ] 是否没有要求 Codex 伪造真实链接、真实数据、真实结果？
[ ] 是否明确是否允许部署？
[ ] 是否要求更新 README / audit / checklist？
```

---

## 9. 可以放进个人主页项目的总结文案

下面这段可以放入项目文档或个人主页的项目详情页中，用来解释这个项目背后的 AI 工作流价值。

```text
本项目并不是一次性搭建个人主页，而是通过多轮 Codex Prompt 逐步推进的 AI 作品集内容系统。

整个过程从项目定位、信息架构、静态构建、SEO、部署、GitHub 工作流、视觉系统、中文优先改版、二级 Case Study 页面、Cloudflare Pages 迁移，到作品集项目扩展和内容审计，形成了一套完整的 AI 辅助项目迭代流程。

在这个项目中，Prompt 不只是“让 AI 写代码”的命令，而是承担了产品需求、设计约束、工程边界、内容规范、部署策略和验收标准的作用。

这套工作流体现了一个核心方法：

高效 Prompt = 目标 + 范围 + 流程 + 结果 + 验收 + 失败处理。

通过这种方式，个人主页不再只是静态展示页，而成为一个可以持续更新、持续部署、持续补充作品集内容的个人能力系统。
```

---

## 10. 最终建议

这套 Prompt 已经具备很强的项目管理价值，建议不要只把它当作历史记录，而要把它整理成项目资产。

下一步最值得做的事情是：

1. 在项目中新建 `docs/prompts/` 目录。
2. 将本报告放入 `docs/prompts/prompt_system_review.md`。
3. 新增 `prompt_template.md`，作为后续所有 Codex prompt 的标准模板。
4. 新增 `global_constraints.md`，集中管理禁止事项。
5. 新增 `deployment_protocol.md`，避免误部署。
6. 新增 `content_integrity_rules.md`，确保作品集内容真实可信。
7. 新增 `step_index.md`，整理 Step 1 到 Step 41 的完整演进路径。

最终目标不是让 prompt 越来越长，而是让 prompt 越来越稳定、模块化、可复用、可验收。

一句话总结：

```text
这套 Prompt 的核心价值，是把 AI 从“代码生成工具”变成了“个人作品集项目的持续迭代助手”。
```