实战案例：个人作品集网站开发全过程

难度：⭐⭐ 进阶 | 工具：Codex / Claude Code | 耗时：约 40 分钟 | 技术栈：HTML + CSS + JS

项目背景

一个完整的个人作品集（Portfolio）单页网站，包含自我介绍、技能、项目展示、联系方式，有丰富的动画效果。这是一个综合性较强的项目，涉及多区域布局、滚动动画、标签筛选、表单等。这个案例正好对应进阶提示词技巧里“链式提示”的典型场景。

第一阶段：需求规划

这个项目比前两个复杂，所以规划要更细致。我把它拆成了5 个模块，每个模块用一轮对话完成：

序号	模块	对应提示词
1	导航栏 + Hero 区域	提示词 #1
2	关于我 + 技能	提示词 #2
3	项目作品展示	提示词 #3
4	联系方式 + 页脚	提示词 #4
5	全局动画 + 响应式 + 打磨	提示词 #5

💡 关键思路：复杂项目一定要拆模块。一口气全说完，AI 会顾此失彼。一次只做一个区域，质量可控。

第二阶段：模块化开发

提示词 #1：导航栏 + Hero 区域

text

帮我创建一个个人作品集网站的第一部分：导航栏和 Hero 区域。

后续我还会在这个文件上继续添加更多区域，所以请把基础结构搭好。

【导航栏】
- 固定在页面顶部，z-index 高于其他内容
- 左侧：我的名字 "Jensen"，加粗，可以点击回到顶部
- 右侧：4 个导航链接——关于、技能、作品、联系
- 导航链接点击后平滑滚动到对应区域（用 a href="#section-id" + scroll-behavior: smooth）
- 默认背景透明，滚动超过 50px 后变成 rgba(10,10,15,0.9) + backdrop-filter: blur(10px)
- 手机端（<768px）：导航链接隐藏，显示汉堡菜单按钮（☰）
  - 点击汉堡按钮显示全屏菜单
  - 菜单项垂直居中排列
  - 点击任意菜单项后菜单自动关闭

【Hero 区域】
- 全屏高度（100vh）
- 垂直水平居中的内容：
  1. 一行小字 "Hello, I'm"（14px，灰色，上方有一段空间）
  2. 我的名字 "Jensen Wu"（大标题，48px，白色加粗）
  3. 自动打字效果循环显示身份：
     "前端开发者" → "AI 爱好者" → "产品创造者"
     打字速度 100ms/字，删除速度 50ms/字，每个词停留 2 秒
     光标用 | 字符闪烁表示
  4. 两个 CTA 按钮水平排列：
     - "查看作品"：实心蓝紫渐变按钮（#667eea → #764ba2），白色文字
     - "联系我"：透明边框按钮（1px 白色边框），白色文字
     - 两个按钮 hover 都有 scale(1.05) 放大效果

- Hero 区域背景：
  - 纯色 #0a0a0f
  - 加一些缓慢移动的半透明圆形光斑作为装饰（用 CSS 实现，2-3 个不同颜色的模糊圆）
  - 圆形光斑用 @keyframes 做缓慢飘动

【整体设置】
- 全局背景色 #0a0a0f
- 全局文字色 #e2e8f0
- 使用 CSS 变量管理颜色
- 字体：system-ui, -apple-system, sans-serif
- 纯 HTML + CSS + JavaScript，单文件

请生成完整代码。后续我会在这个基础上继续添加更多区域。

效果检查

检查项	结果	备注
导航栏固定	✅
滚动时导航栏变色	✅
手机端汉堡菜单	⚠️	菜单打开后点链接没关闭
Hero 居中	✅
打字效果	✅	很流畅
光斑动画	✅	有点好看
CTA 按钮	✅

修复汉堡菜单问题：

text

手机端汉堡菜单有个bug：点击菜单中的导航链接后，菜单没有自动关闭。
请给每个菜单链接添加 click 事件监听器，点击后关闭菜单（移除 active 类名）。
同时，点击菜单外部区域也应该关闭菜单。

提示词 #2：关于我 + 技能

text

在现有代码基础上，在 Hero 区域下方添加两个新区域：

【关于我区域 (id="about")】
- 区域标题 "关于我"，居中，下方有一条短横线装饰（40px宽，3px高，蓝紫渐变）
- 内容分两列（左 40% 右 60%）：
  - 左列：一个 280px 的圆形头像占位区域（灰色背景 + 一个人物轮廓图标）
  - 右列：
    - 3 段自我介绍文字（填充合理的示例文字，关于开发经验、兴趣、目标）
    - 文字行高 1.8，颜色 #94a3b8
    - 3 个关键数字展示（横排）：
      - "3+" 年经验
      - "20+" 完成项目
      - "10+" 技术栈
      数字用大号白色加粗，标签用小号灰色
- 手机端：左右列改为上下排列，头像居中，缩小到 200px

【技能区域 (id="skills")】
- 区域标题 "技能" + 短横线装饰（跟关于我一样的样式）
- 分为 3 列展示技能分类：
  - 前端：HTML, CSS, JavaScript, React, Vue, TypeScript
  - 后端：Node.js, Python, PostgreSQL, Redis
  - 工具：Git, Docker, Figma, VS Code, AI Tools

- 每列有一个小标题和图标
- 每个技能显示为：技能名 + 水平进度条
  - 进度条高度 6px，圆角，底色 #1e293b，填充色蓝紫渐变
  - 熟练度百分比显示在右侧
  - 进度条在进入视口时有从 0 到目标值的加载动画（用 Intersection Observer）

- 手机端：3 列改为 1 列

保持已有的导航栏和 Hero 区域不变。

提示词 #3：项目作品展示

text

继续在现有代码基础上，在技能区域下方添加作品展示区域：

【作品区域 (id="works")】
1. 区域标题 "我的作品" + 短横线装饰

2. 标签筛选按钮行（居中）：
   - "全部" / "网站" / "工具" / "游戏"
   - 默认 "全部" 高亮（实心蓝紫渐变背景）
   - 其他按钮透明背景 + 白色边框
   - 点击切换筛选，有平滑的过渡动画
   - 筛选时，不匹配的卡片淡出 + 缩小，匹配的卡片淡入

3. 项目卡片网格（3列，间距 24px）：
   生成 6 个示例项目：

   项目 1：个人博客 | 标签：网站
   - 缩略图区域用渐变色 #667eea→#764ba2 占位
   - 描述："使用 HTML/CSS/JS 构建的个人博客，支持暗色模式和文章分类"
   - 技术标签：HTML, CSS, JavaScript

   项目 2：番茄钟 | 标签：工具
   - 缩略图用渐变色 #e74c3c→#c0392b 占位
   - 描述："精美的番茄钟应用，支持自定义时间和专注统计"
   - 技术标签：HTML, CSS, JavaScript

   项目 3：天气查询 | 标签：工具
   - 缩略图用渐变色 #2196F3→#64B5F6 占位
   - 描述："实时天气查询工具，支持 5 天预报和城市收藏"
   - 技术标签：HTML, CSS, JavaScript, API

   项目 4：记忆翻牌游戏 | 标签：游戏
   - 缩略图用渐变色 #9b59b6→#8e44ad 占位
   - 描述："卡片记忆翻牌游戏，支持多种难度和成绩排行"
   - 技术标签：HTML, CSS, JavaScript

   项目 5：Markdown 编辑器 | 标签：工具
   - 缩略图用渐变色 #1abc9c→#16a085 占位
   - 描述："在线 Markdown 编辑器，实时预览，支持导出"
   - 技术标签：HTML, CSS, JavaScript, Markdown

   项目 6：企业官网 | 标签：网站
   - 缩略图用渐变色 #f39c12→#e67e22 占位
   - 描述："现代风格的企业官方网站，响应式设计"
   - 技术标签：HTML, CSS, JavaScript

4. 每个卡片的样式和交互：
   - 背景 #1e293b，圆角 16px
   - 缩略图区域高度 180px
   - 悬停效果：卡片整体上移 8px + 阴影加深
   - 悬停时缩略图区域显示半透明遮罩层，上面有两个按钮：
     - "预览" 按钮（链接用 # 占位）
     - "源码" 按钮（链接用 # 占位）
   - 技术标签用小圆角胶囊样式，蓝紫半透明背景

5. 手机端：卡片改为 1 列

保持所有已有区域不变，只在技能区域后面添加。

提示词 #4：联系方式 + 页脚

text

继续添加联系区域和页脚：

【联系区域 (id="contact")】
1. 区域标题 "联系我" + 短横线装饰

2. 两列布局（左 50% 右 50%）：
   左列 - 联系信息：
   - 一段邀请文字："有项目想法或合作意向？随时联系我！"
   - 联系方式列表（每项前有图标）：
     - 📧 email@example.com
     - 📱 +86 xxx-xxxx-xxxx  
     - 📍 中国，上海
   - 社交链接图标横排：GitHub / Twitter / WeChat / LinkedIn
     - 每个图标 40x40，圆形白色半透明背景
     - 悬停时背景变蓝紫色，图标变白

   右列 - 联系表单：
   - 姓名输入框
   - 邮箱输入框
   - 消息文本域（4 行高度）
   - 发送按钮（蓝紫渐变，全宽）
   - 所有输入框样式：#1e293b 背景，白色文字，圆角 8px，聚焦时蓝色边框
   - 发送按钮点击后显示"已发送！"的成功提示（纯前端模拟，2秒后消失）
   - 简单的前端验证：姓名和邮箱不能为空，邮箱格式检查

3. 手机端：两列改为上下排列

【页脚】
- 深色背景 #080810
- 居中文字："© 2026 Jensen Wu. Built with ❤️ and AI"
- 下方一行：回到顶部按钮 "↑"，圆形，固定在页面右下角
  - 滚动超过一屏后才显示
  - 点击平滑滚动到顶部

保持所有已有区域不变。

提示词 #5：全局动画 + 最终打磨

text

最后一轮：给整个页面添加全局动画效果并做最终打磨：

1. 滚动进入动画：
   - 给每个区域的标题、内容块、卡片添加 Intersection Observer
   - 元素初始状态：opacity: 0; transform: translateY(30px)
   - 进入视口后：opacity: 1; transform: translateY(0)，transition 0.6s ease
   - 每个子元素有 0.1s 的延迟（交错效果）
   - threshold 设为 0.15

2. 性能优化：
   - 所有动画使用 CSS transform 和 opacity（GPU 加速）
   - 滚动事件使用 requestAnimationFrame 或 passive listener
   - 图片（如果有的话）使用 loading="lazy"

3. 导航栏当前区域高亮：
   - 滚动时自动检测当前在哪个区域
   - 对应的导航链接添加高亮样式（下方加一条蓝紫渐变横线）

4. 最终样式检查：
   - 确保所有区域之间的间距统一（上下 padding 80px）
   - 确保所有标题的样式统一
   - 确保颜色方案一致（都使用 CSS 变量）
   - 确保手机端（<768px）所有区域都正常显示

请检查全部代码，确保没有遗漏或冲突。

开发总结

时间花费

阶段	耗时	对话轮次
需求规划	5 分钟	-
导航+Hero	8 分钟	2 轮（1轮生成 + 1轮修bug）
关于+技能	8 分钟	1 轮
作品展示	8 分钟	1 轮
联系+页脚	6 分钟	1 轮
全局动画打磨	5 分钟	1 轮
总计	~40 分钟	7 轮对话

关键经验

模块化开发是王道：复杂页面一定要拆模块，一次做一个区域
保持代码在同一个文件中：每轮都说"在现有代码基础上添加"
CSS 变量非常重要：第一轮就定好颜色变量，后续所有区域自动统一
反复强调"保持已有不变"：否则 AI 可能重写之前已经好的代码
最后一轮做统一打磨：先把功能做完，最后再统一优化动画和响应式

常见问题

问题	解决方案
汉堡菜单点链接不关闭	给菜单链接加 click 事件关闭菜单
技能进度条没动画	检查 Intersection Observer 是否正确绑定
标签筛选闪烁	给 CSS transition 加上 opacity 和 transform
导航高亮不准	调整 Intersection Observer 的 threshold 和 rootMargin
手机端内容溢出	检查是否有固定宽度元素，改用 max-width

实战案例：个人作品集网站开发全过程 ​

项目背景 ​

第一阶段：需求规划 ​

第二阶段：模块化开发 ​

提示词 #1：导航栏 + Hero 区域 ​

效果检查 ​

提示词 #2：关于我 + 技能 ​

提示词 #3：项目作品展示 ​

提示词 #4：联系方式 + 页脚 ​

提示词 #5：全局动画 + 最终打磨 ​

开发总结 ​

时间花费 ​

关键经验 ​

常见问题 ​

继续阅读 ​

实战案例：个人作品集网站开发全过程

项目背景

第一阶段：需求规划

第二阶段：模块化开发

提示词 #1：导航栏 + Hero 区域

效果检查

提示词 #2：关于我 + 技能

提示词 #3：项目作品展示

提示词 #4：联系方式 + 页脚

提示词 #5：全局动画 + 最终打磨

开发总结

时间花费

关键经验

常见问题

继续阅读