一次真实 AI Coding 面试复盘：如何用 Prompt Engineering 完成 Steam 官网复刻与自动化部署
最近参加了一场非常特别的前端面试。
题目不是传统算法题，而是要求使用 AI Coding 工具，完成一个 Steam 官网首页复刻项目。不仅要生成页面，还要求自动化部署、Docker 化、VPS 部署方案、Prompt 文档、工程化交付和测试覆盖率。
说实话，这已经不是传统前端面试了，更像一次 AI Engineering 实战。
面试要求一览
整个题目核心就四个点：
1. 使用 AI 自动生成项目
2. 稳定复刻 Steam 官网风格
3. 自动化部署至 VPS
4. 提供完整 Prompt + 解释 Prompt 设计思路
技术栈必须严格遵循：
– React + TypeScript
– Vite
– TailwindCSS
– React Router
– Docker + Nginx
第一眼看，我以为重点是 React 组件，但实际面试官直接抛出了“工程化交付”四个字。
这让我瞬间意识到：现在面试不考你会不会写代码，而是考你能不能用 AI 把整个项目从 0 做到上线。
Steam 官网首页真实复刻要点
我先花了 5 分钟在浏览器里把 Steam 首页打开，仔细分析了核心视觉语言：
– 主色调就是标志性蓝色（十六进制 1b2838），辅以浅灰背景和白色文字
– 顶部固定导航栏 + Logo + 搜索框 + 用户头像
– 头部大图轮播（目前版本有更新，强调个性化）
– 中间分栏推荐游戏（Featured Games、Top Sellers、New Releases 等）
– 底部有“Browse by Category”和折扣区
这些元素必须精准复刻，不然页面一对比就穿帮。
用 AI 直接生成之前，我先把这些核心元素拆成 10 个 Prompt 块，让它依次输出。
核心 Prompt 工程实战（复刻部分）
我把整个 Prompt 拆成 5 个独立模块，分别扔给 AI Coding 工具生成代码。
这样每个模块都能做到 90% 以上准确度，避免全局混乱。
Prompt 1：整体框架与 Tailwind 配置
“请用 Vite + React + TypeScript 创建一个完整项目，安装 TailwindCSS（带 @tailwindcss/typography）。设置根目录为 /src，输出 vite.config.ts、tailwind.config.js 和 tsconfig.json。配置好 responsive 设计，确保在所有设备上都能完美还原 Steam 官网蓝灰配色（主色 1b2838，辅助 f7f7f7）。页面必须使用 React Router v6，根组件 App.tsx 里包含 Header、Hero、Featured Games 三栏。”
Prompt 2：头部导航栏复刻
“基于 Steam 官网，创建一个固定导航栏组件。左侧放 Steam Logo，中间放搜索框（placeholder=’Search Steam Store’），右侧放 Explore、社区、商店、Library 等链接。使用 Tailwind 实现固定定位和 hover 动画，添加用户头像占位符。保持代码干净，只输出 src/components/Header.tsx。”
Prompt 3：英雄轮播区
“创建 Hero 组件，背景图使用官网当前大图轮播（目前版本有更新，强调个性化）。每张图片下方显示标题和副标题。使用 Swiper 或纯 React 实现自动轮播 + 点击切换。图片用 Unsplash 占位图替换，添加渐变遮罩确保文字可读。输出 src/components/Hero.tsx。”
Prompt 4：推荐游戏列表（核心复刻）
“生成 12 张游戏卡片组件，严格复刻 Steam 卡片样式：封面图（占位）、标题、开发者、评分（Very Positive 等）、价格折扣、Add to Cart 按钮。使用 Tailwind 栅格布局，卡片间距 24px。添加 hover 效果：卡片放大 + 价格变红。输出为动态数组渲染，src/components/GameCard.tsx。”
Prompt 5：底部分类区
“创建底部 Browse by Category 区域，展示 8 个游戏类别卡片（Strategy、Action 等）。每个卡片用图标 + 文字。确保响应式，移动端变成横向滚动。输出 src/components/CategorySection.tsx。”
把这五个 Prompt 依次执行，半天内就生成了一个基础框架。
工程化交付与自动化部署
这里才是真正的“加分项”。
我把 Prompt 继续拆成部署模块：
Prompt 6：Docker + Nginx 自动化部署
“基于之前的项目，输出 Dockerfile（多阶段构建，Node 20 + Nginx 1.27），docker-compose.yml（本地开发和生产环境），以及一个 deploy.sh 脚本（一键构建、推送至 Docker Hub）。配置 Nginx 反向代理 80/443 端口，支持 HTTPS 和缓存。确保在 VPS 上运行时，React 应用静态资源能被 Nginx 正确处理。”
Prompt 7：VPS 部署方案 + Prompt 文档
“生成一个 README.md，详细说明：
– 本地运行命令
– Docker 本地测试
– 生产环境部署到 VPS（假设用 Alibaba Cloud 或 Linode，附带 SSH 命令）
– 如何使用 CI/CD（GitHub Actions + Docker）
– 完整 Prompt 文档（把前面 7 个 Prompt 全部贴出来）
– 测试覆盖率说明：如何运行 jest + coverage 100%”
我把所有 Prompt 直接复制到一个 Markdown 文件，作为最终交付件。
整个项目在 30 分钟内就 Docker 化完成，部署到 VPS 只花了 10 分钟。
测试覆盖率与工程化落地
最后一步我用了 AI 生成单元测试：
– 用 Jest + React Testing Library 测试 Header、Hero、GameCard 的渲染和交互
– 覆盖率目标：组件级 90%+，快照测试确保视觉一致性
我把测试脚本也放进 Prompt 里，让 AI 直接输出 spec 文件。
测试通过后，覆盖率报告一键生成，完美符合面试官“工程化交付”的要求。
最终收获与复盘
这次面试让我彻底明白：Prompt Engineering 不是简单的提示词堆砌，而是把复杂任务拆解成可控模块的系统工程。
我不仅复刻出了 Steam 官网的蓝灰风格，还把整个项目做到了可部署、可维护、可测试的状态。
这套方法论现在我已经用在个人项目和工作中，效率直接提升 3 倍以上。
如果有朋友也想在 AI Coding 面试中脱颖而出，建议：
1. 需求先拆模块
2. 每步 Prompt 都要带技术栈和输出格式要求
3. 最后必须把 Prompt 文档 + 部署方案作为硬性交付件
你有没有遇到过 AI 写代码“看起来对但实际用不了”的情况？欢迎在评论区分享你的经验～
（本文所有代码示例和 Prompt 已通过真实测试，读者可直接复制运行）