AI 简历制作实战

今天，我们将综合运用前 5 天学到的所有知识，用 AI 制作一份交互式简历网站。

你正在看的这个网站，就是这次实战的产物。

技术栈

• ·框架：Next.js 16（React 19）
• ·样式：Tailwind CSS 4
• ·动画：Framer Motion
• ·图标：Lucide React
• ·AI 工具：Trae（主力）+ Claude Code（辅助）

项目结构

da-e-portfolio/
├── src/
│   ├── app/           # 页面路由
│   ├── components/    # UI 组件
│   │   ├── HeroSection.tsx      # 首屏
│   │   ├── AICodingSection.tsx   # AI 编程能力
│   │   ├── ProjectTimeline.tsx   # 项目展示
│   │   ├── GADDSection.tsx       # GADD 方法论
│   │   ├── PDFGallery.tsx        # 学习指南
│   │   └── Footer.tsx            # 页脚
│   └── data/          # 数据文件
├── public/            # 静态资源
└── package.json

我们用 GADD 方法论来驱动整个项目开发：

G - 目标（Goal）

创建一个交互式简历网站，展示 AI 编程能力，让招聘方直观感受到 AI Coding 的实际产出。

A - 验收标准（Acceptance Criteria）

• ·AC1：网站包含至少 5 个功能模块
• ·AC2：每个项目都有可交互的演示
• ·AC3：页面加载时间 < 3 秒
• ·AC4：移动端适配良好
• ·AC5：代码中 AI 贡献比例 ≥ 90%

D - 开发（Development）

按照验收标准，逐模块开发：

1. 1.先做 HeroSection——首屏决定第一印象
2. 2.再做 ProjectTimeline——核心内容
3. 3.然后做 GADDSection——方法论展示
4. 4.最后做 PDFGallery 和 Footer

D - 交付（Delivery）

最终验收：

• ·✓ AC1：6 个功能模块
• ·✓ AC2：3 个项目可交互演示
• ·✓ AC3：页面加载 < 2 秒
• ·✓ AC4：移动端适配完成
• ·✓ AC5：AI 贡献约 95%

第一步：项目初始化

与 AI 对话：

用 Next.js 创建一个个人简历网站项目，使用 Tailwind CSS，配色方案为暖色调（米白 #f7f4ef 为主色，深红 #c23a2b 为强调色）。

AI 自动完成：

• ·初始化 Next.js 项目
• ·配置 Tailwind CSS
• ·设置全局样式和字体

第二步：逐模块开发

每个模块的开发流程：

1. 1.描述需求：告诉 AI 这个模块要展示什么内容
2. 2.AI 生成代码：AI 根据需求生成组件代码
3. 3.审查修改：检查代码质量，提出修改意见
4. 4.验证效果：在浏览器中查看实际效果
5. 5.迭代优化：根据效果继续调整

第三步：交互功能

让 AI 添加交互功能：

• ·项目切换动画
• ·GADD 模拟器
• ·PDF 查看器
• ·响应式布局

关键经验

• ·每次只做一个模块，做完验证后再做下一个
• ·及时 git commit，每完成一个模块就提交
• ·遇到问题时，先描述问题，让 AI 分析原因
• ·不要追求完美，先做出来，再优化

最终成果

AI 协作统计

• ·与 AI 对话轮次：约 200+ 轮
• ·AI 生成代码行数：约 3000+ 行
• ·人工修改比例：约 5%（主要是设计决策和内容调整）
• ·回滚次数：约 10 次（AI 理解偏差时）

核心收获

1. 1.AI 编程确实可行——一个不会写代码的产品经理，可以用 AI 构建完整系统
2. 2.GADD 方法论很关键——没有目标驱动，AI 容易跑偏
3. 3.审查能力比编码能力更重要——你需要知道什么是对的
4. 4.小步快跑是最佳策略——频繁验证，快速迭代

6 天的学习到这里就结束了，但你的 AI 编程之旅才刚刚开始。

建议的学习路径

1. 1.巩固基础：反复练习前 3 天的内容，熟练使用 AI 编程工具
2. 2.深入 MCP：学习更多 MCP 服务器，扩展 AI 的能力边界
3. 3.创建自己的 Skill：把你的工作经验抽象成 Skill，提升效率
4. 4.做真实项目：用 AI 完成一个你真正需要的项目

推荐资源

• ·MCP 官方文档：https://modelcontextprotocol.io
• ·Trae 官方文档：https://trae.ai/docs
• ·Claude Code 文档：https://docs.anthropic.com/claude-code

保持联系

如果你在学习过程中遇到问题，或者想交流 AI 编程的经验，欢迎联系我！

💡 记住：AI 编程的核心不是技术，是思维。目标驱动、标准先行、小步快跑——这三条原则，比任何工具都重要。