一次真实 AI Coding 面试复盘：我如何用 Prompt Engineering 完成 Steam 官网复刻与自动化部署

最近参加了一场非常特别的前端面试。

题目并不是传统算法题。

而是：

要求使用 AI Coding 工具，
完成一个 Steam 官网首页复刻项目。

并且：

不仅要生成页面。

还要求：

- 自动化部署
- Docker 化
- VPS 部署方案
- Prompt 文档
- 工程化交付
- 测试覆盖率

说实话。

这已经不是传统前端面试了。

更像一次：

AI Engineering 实战。

# 面试要求

整个题目核心要求：

1. 使用 AI 自动生成项目
2. 稳定复刻 Steam 官网风格
3. 自动化部署至 VPS
4. 提供完整 Prompt
5. 解释 Prompt 设计思路

技术栈要求：

- React
- TypeScript
- Vite
- TailwindCSS
- React Router
- Docker
- Nginx

第一眼看：

我以为重点是 React。

但真正开始做之后才发现：

重点根本不是页面。

而是：

如何稳定控制 AI 输出。

# 我最开始踩的坑

一开始。

我尝试：

“一个 Prompt 生成整个项目”。

结果很快翻车。

AI 开始出现：

- package.json scripts 丢失
- Tailwind 配置异常
- Router 冲突
- 无关文件修改
- 项目结构漂移

尤其：

Prompt 一旦过长。

AI 输出会越来越不稳定。

后来我意识到：

AI Coding 最大的问题。

不是生成代码。

而是：

如何稳定生成代码。

# 后来我改变了策略

后面我采用：

“模块化 Prompt + 小步生成”。

将整个项目拆成：

- Header
- Hero Banner
- GameCard
- Footer
- Deployment

每个 Prompt：

只负责一个模块。

例如：

Header Prompt：

```text
请生成一个 Steam 风格 Header 组件。

要求：

- 深色导航栏
- Steam 风格
- Install Steam 按钮
- 响应式

只生成 Header.tsx。
不要修改其它文件。

Hero Banner Prompt：

请生成一个 Steam 风格 Hero Banner。

要求：

- 大背景图
- 自动轮播
- CTA 按钮
- 深蓝黑 Steam 风格

只生成 HeroBanner.tsx。

这种方式之后。

AI 稳定性明显提高。

为什么模块化 Prompt 很重要？

因为：

AI 最大的问题之一是：

“上下文漂移”。

如果一次生成太多内容。

AI 很容易：

• 修改无关文件
• 覆盖已有配置
• 出现组件耦合
• 改坏 package.json

所以后来：

我开始严格限制：

“每次 Prompt 只能修改指定文件”。

例如：

只生成 HeroBanner.tsx。
不要修改其它文件。

这个约束非常重要。

---

最离谱的一幕：AI 直接把项目删了

最刺激的是：

项目快完成的时候。

AI Agent 误判项目目录。

直接把整个项目删了。

是的。

整个目录直接没了。

当时我人都懵了。

后来我才意识到：

Agent 模式风险非常大。

尤其：

“自动修复”
“自动重构”
“自动整理项目”

这些行为。

很容易误删文件。

后面我彻底放弃：

Agent 全局模式。

改成：

单文件生成模式。

例如：

• 只生成 Header.tsx
• 只生成 Footer.tsx

这样稳定性明显提升。

---

自动化部署部分

这次面试另一个重点：

是自动化部署。

我要求 AI 自动生成：

• Dockerfile
• docker-compose.yml
• nginx.conf
• deploy.sh

形成：

AI Prompt
↓
页面生成
↓
Docker 化
↓
Nginx
↓
VPS 部署

完整交付链路。

虽然最后没有真正购买 VPS。

但已经通过：

Docker + Nginx

模拟了 Ubuntu VPS 部署环境。

本质上已经具备：

公网部署能力。

---

测试部分

后面还补充了：

• Vitest
• React Testing Library
• Playwright

用于：

• 单元测试
• E2E 测试
• Coverage 覆盖率

不过说实话。

这部分我觉得：

目前 AI 在“生成测试”方面。

稳定性还不如生成 UI。

尤其：

复杂 mock 很容易出问题。

---

这次面试最大的感受

以前我觉得：

AI Coding 就是：

“让 AI 帮我写代码”。

但这次之后。

我发现真正重要的是：

Prompt Engineering。

未来开发模式很可能会逐渐变成：

开发者负责：

• Prompt 设计
• 工程架构
• 模块拆分
• Workflow 控制

AI 负责：

• 页面生成
• 代码实现
• 自动化部署

本质上：

开发者角色正在发生变化。

---

最后总结

这次项目让我最大的收获。

并不是完成了一个 Steam Clone。

而是：

真正理解了：

AI Coding 最大的难点。

其实不是：

“生成代码”。

而是：

如何稳定、可控地生成代码。

而 Prompt Engineering。

本质上就是：

“控制 AI 输出稳定性”的工程方法。

我觉得：

未来几年。

这个能力会越来越重要。