Appearance
极速上手：用 AI 开发一个个人简历页面
目标
在这一章中，我们将用 Codex 从零开始做一个个人简历网页。整个过程不到 10 分钟，你不需要写一行代码——只需要"说话"就行。
完成后你会得到：
- 一个好看的个人简历页面
- 响应式设计（手机电脑都能看）
- 可以直接部署上线的完整项目
前置准备
确保你已经：
- ✅ 安装了 Codex（参考 Codex 介绍与安装指南）
- ✅ 配置好了 API Key
- ✅ 有一个空文件夹用来放项目
第一步：创建项目
打开终端，创建一个项目文件夹：
bash
mkdir my-resume
cd my-resume然后启动 Codex：
bash
codex第二步：描述你的需求
进入 Codex 后，直接告诉它你要什么。这是我们的第一版提示词：
text
帮我创建一个个人简历的单页网站。
要求：
1. 页面顶部是一个 hero 区域，有我的名字"张三"和一句话简介"全栈开发者 | AI 爱好者"
2. 下面分几个区域：
- 关于我：一段自我介绍
- 工作经历：时间线样式展示 2-3 段经历
- 技能：用标签或进度条展示前端/后端/AI 等技能
- 联系方式：邮箱、GitHub、微信
3. 风格：现代简约，深色主题，使用渐变色点缀
4. 需要响应式设计，手机端也能正常显示
5. 使用纯 HTML + CSS + JavaScript，不需要框架
6. 加一些流畅的滚动动画效果
请生成完整的项目文件。💡 为什么这个提示词好？ 因为它包含了：具体的内容、清晰的结构、风格偏好、技术要求。
第三步：查看效果
Codex 会生成一个或多个文件（通常是 index.html、style.css、script.js）。
在浏览器中打开 index.html 查看效果：
bash
# macOS
open index.html
# Windows
start index.html第四步：迭代优化
看到效果后，你可能想改一些东西。直接告诉 Codex：
修改示例 1：调整颜色
text
把整体配色改成：背景用 #0a0a1a 深蓝黑色，
标题用渐变色从 #667eea 到 #764ba2，
普通文字用 #e2e8f0 浅灰色。修改示例 2：添加内容
text
在技能部分，把技能改成这些：
- HTML/CSS：90%
- JavaScript：85%
- React：80%
- Python：75%
- AI/Prompt Engineering：90%
用进度条形式展示。修改示例 3：优化移动端
text
在手机上查看时，工作经历的时间线改成单列布局，
技能进度条要全宽显示。
检查一下所有文字大小在手机上是否合适。第五步：填入你自己的内容
把示例内容替换成你自己的真实信息。
完整的参考提示词
如果你想一步到位，这是一个更完整的提示词模板：
text
请帮我创建一个专业的个人简历单页网站。
【基本信息】
- 名字：[你的名字]
- 职业头衔：[你的职业]
- 简介：[一句话描述]
【页面结构】
1. Hero 区域：名字 + 职业头衔 + 简介，居中显示，有一个向下的箭头引导滚动
2. 关于我：左边放一张头像占位图，右边是一段自我介绍文字
3. 工作经历：垂直时间线布局，每段经历包含时间、公司、职位、描述
4. 技能展示：分类展示（前端/后端/工具），每项技能用进度条表示熟练度
5. 项目展示：卡片式布局，2-3 个代表项目，每个有缩略图、标题、描述
6. 联系方式：社交图标一排水平排列 + 一个简单的联系表单
【设计风格】
- 深色主题（#0f172a 背景）
- 主色调：渐变蓝紫色
- 卡片式设计，圆角 12px，微弱投影
- 无衬线字体（系统字体即可）
- 区域之间有明显的间距
- 整体有高级感
【技术要求】
- 纯 HTML + CSS + JavaScript
- 响应式设计（断点：768px、1024px）
- 平滑滚动效果
- 各区域进入视口时的淡入动画
- 技能进度条有加载动画
- 所有文件放在同一个文件夹内
请生成完整的代码文件。恭喜！你做出了第一个项目 🎉
如果一切顺利，你现在应该有一个好看的个人简历页面了。从"零"到"有"，整个过程可能只花了不到 10 分钟。做完后建议继续看 发布你的作品：从本地到线上，把它真正放到网上。
这就是 Vibe Coding 的魅力——你不需要学任何编程语言，只需要清楚地描述你想要什么。
为什么这个方法有效？
你可能会好奇：为什么一段文字描述就能生成一个完整的网页？
关键在于你的描述包含了 AI 需要的全部信息：
| 信息维度 | 你提供了什么 | AI 用来做什么 |
|---|---|---|
| 内容 | 名字、简介、经历… | 填充页面文字 |
| 结构 | Hero 区域、时间线、卡片… | 确定 HTML 布局 |
| 风格 | 深色主题、渐变色、圆角… | 编写 CSS 样式 |
| 交互 | 滚动动画、进度条动画… | 编写 JavaScript |
| 约束 | 纯 HTML/CSS/JS、响应式… | 选择技术方案 |
描述越清晰 → AI 理解越准确 → 输出越接近你想要的。
常见问题
Q：AI 生成的页面不好看怎么办？
A：给 AI 一个参考。比如"风格参考苹果官网的简洁感"或"类似 Linear.app 的设计风格"。有具体参照物比说"好看"有效 100 倍。
Q：内容可以用中文吗？
A：完全可以。提示词用中文，AI 会生成中文内容的页面。
Q：生成的代码可以直接用吗？
A：可以直接在浏览器打开使用。但如果要正式发布，建议先在手机上测试一下，确认响应式没问题，然后按照 发布你的作品：从本地到线上 的步骤部署。
Q：我能修改 AI 生成的代码吗？
A：当然可以。但更推荐的方式是用提示词让 AI 修改，而不是自己去改代码。这样 AI 知道修改了什么，后续迭代不容易出问题。具体怎么描述修改需求，可以接着看 提示词工程入门 和 进阶提示词技巧。