我用 Claude 做了一个 AI 面试刷题系统，支持 DeepSeek / 阿里 / GPT 帮你打分

GitHub：github.com/2384830985/... 纯前端，本地运行，数据全存浏览器，0 部署成本

背景：为什么要做这个

最近 AI 开发岗位的面试越来越卷，光会用 ChatGPT 已经不够了。面试官会问：

"你的 Agent 上下文窗口满了怎么办？"
"SSE 和 WebSocket 选哪个，为什么？"
"RAG 和 GraphRAG 的区别，你做过哪个？"
"SFT / DPO / GRPO 分别适合什么场景？"

这些问题没有标准答案，考察的是真实的工程经验和深度理解。

我把自己整理的 45 道高频 AI 开发面试题做成了一个学习系统，加上 AI 实时评分，让你在家就能模拟面试考官的追问。

项目是什么

AI 面试题学习 + 考试系统，基于 Vue 3 + Vite + Pinia，纯前端，无需服务器。

核心功能：

📚 45 道精选 AI 开发面试题，涵盖 Coding Agent、RAG、Fine-tuning、流式输出、Vibecoding 工具等 10 个分类
🤖 AI 实时评分：答完题目，由 DeepSeek / Claude / GPT / 阿里百炼帮你打分、指出不足、给出建议
📥 导入自定义题目：粘贴任意文本或上传 .md 文件，AI 自动整理成结构化题目加入题库
✏️ 题目增删改查：手动新建题目、编辑、删除，支持分类管理
💾 学习进度持久化：标记已学习，进度保存在浏览器本地，刷新不丢失
🌙 深色 / 浅色主题

核心功能展示

1. 分类浏览 + 搜索

45 道题按 10 个维度分类：

分类	代表题目
Vibecoding工具	GPT / Gemini / Claude 各自什么脾性，怎么搭配多模型工作流
Coding Agent	上下文压缩三层策略是什么；多 Agent 编排怎么设计
RAG	GraphRAG 和纯向量检索的区别；PDF 中各种形式的内容怎么处理
Fine-tuning	SFT / DPO / GRPO 分别是什么，区别在哪
流式输出	为什么 AI 流式输出用 SSE 不用 WebSocket
Skill系统	Skill 发现、注册、热更新、隔离怎么设计

每道题都包含三层内容：

📌 核心答案：可以直接背的要点，含表格、代码块
🔧 Demo 代码：可运行的最小示例
💬 深追 Q&A：模拟面试官追问，附参考回答

2. AI 考试评分

这是最核心的功能。配置好 AI 模型后，点击「开始考试」：

题目逐道显示，你在输入框写回答
提交后 AI 秒级返回评分（0-10 分）
给出「亮点」「不足」「改进建议」三个维度的反馈
低分题显示参考答案要点，供对照复习
最后汇总总分，列出每题得分

支持的 AI 模型：

模型	说明
DeepSeek	国产，性价比高，推荐
阿里百炼（Qwen）	国产，延迟低
Anthropic Claude	效果最好，需要梯子
OpenAI GPT	经典，全球可用
Google Gemini	超长上下文
自定义	任意 OpenAI 兼容接口

API Key 存在本地浏览器，不经过任何服务器。

3. 导入自定义题目

有自己整理的面试题？直接导入：

上传 .md / .txt 文件，或直接粘贴文本
点击「AI 整理」，模型自动解析成「标题 + 答案 + 追问」结构
预览确认后一键导入，与默认题库合并
支持按分类筛选、编辑、删除

4. 手动新建题目

遇到新的面试题想收录？点击顶部 ➕ 新建：

填写标题、分类、答案（支持 HTML 格式）
可添加 Demo 代码、追问 Q&A
保存后立即进入题库参与考试

技术实现亮点

CORS 问题的解决方案

直接在浏览器里请求 DeepSeek、阿里百炼等 API 会遇到跨域错误。本项目在 Vite 配置里内置了一个本地代理中间件：

js 复制代码

// vite.config.js
function aiProxyPlugin() {
  return {
    name: 'ai-proxy',
    configureServer(server) {
      server.middlewares.use('/ai-proxy', async (req, res) => {
        // 读取请求体，提取 url / headers / body
        // 由 Node.js 服务端发起请求，无跨域限制
        const upstream = await fetch(url, { method: 'POST', headers, body })
        res.end(await upstream.text())
      })
    },
  }
}

浏览器请求打到本地 /ai-proxy，Vite dev server 用 Node.js 转发到真实 API，完美绕过 CORS，任何 OpenAI 兼容接口都能用。

状态管理设计

用 Pinia 集中管理所有状态，重点是三类持久化数据：

js 复制代码

// 学习进度 ------ 哪些题目标记为已学习
const learnedIds = ref(new Set(LS.get('ai-learned', [])))

// AI 模型配置 ------ 含 API Key，存本地不上传
const providers = ref(LS.get('ai-providers', []))

// 自定义题目 ------ 导入 / 手动创建的题目
const customQuestions = ref(LS.get('ai-custom-questions', []))

每次修改自动同步到 localStorage，刷新页面数据完整保留。

快速上手

bash 复制代码

git clone https://github.com/2384830985/interview-ai-vue-
cd interview-ai-vue-
npm install
npm run dev

打开 http://localhost:5173，点击右上角 ⚙️ 配置一个 AI 模型（推荐 DeepSeek，便宜量大），就可以开始刷题了。

DeepSeek API 申请： platform.deepseek.com，新用户有免费额度，考试评分用 deepseek-chat 模型，每次评分消耗不到 ¥0.01。

题目涵盖范围

45 道题，覆盖 AI 开发岗位的主要考察点：

Vibecoding / AI 工具（5题）

多模型工作流如何搭配
Claude Code 和 Codex 有什么区别
Cursor vs Claude Code 怎么选
用过哪些 Vibecoding 工具、第三方增强工具
Vibecoding 时需要注意什么

Coding Agent（14题）

Agent 整体链路、Plan 制定
多 Agent 编排、子 Agent 设计
上下文三层压缩策略
长短期记忆设计、静态 vs 动态记忆
工具调用流程、动态 vs 静态 Prompt
模型底座选型与成本估算

Skill 系统（4题）

发现、注册、热更新、隔离完整设计
三层 Skill 分层体系
用户输入如何匹配 Skill
Skill 沉淀机制

RAG（8题）

数据来源和清洗 Pipeline
GraphRAG vs 纯向量检索
PDF 各类内容处理（表格/图片/公式/扫描件）
增量更新、文档冲突、版本控制

流式输出（3题）

SSE vs WebSocket 的选型分析
SSE 完整数据处理链路
流式 Markdown 渲染（表格完整性判断）

Fine-tuning（3题）

SFT / DPO / GRPO 对比
为什么选 Llama3、数据集规模
评测指标（HumanEval、C-Eval 等）

其他

SDD（Spec-Driven Development）实践经验
AI 赋能团队量化数据
上下文污染识别和处理

为什么不用现成的刷题网站

市面上的面试题网站缺少以下内容：

没有 AI 评分：只能看答案，不能检验自己真正掌握了多少
题目不够新：AI 开发是新领域，大多数网站没有 Coding Agent、GraphRAG 这类题目
没有深追 Q&A：面试不只是背答案，关键是能不能回答追问
不支持自定义：每个人面试的方向不同，需要能导入自己整理的题目

这个项目的出发点，就是解决这四个问题。

后续计划

错题本：低分题自动加入复习队列
模拟面试模式：限时作答，完全模拟真实面试节奏
题目分享：生成题目卡片，方便朋友间交流
更多题目：持续收录新的 AI 开发面试题

欢迎 Star ⭐ 和提 Issue，有好的面试题也可以提 PR 贡献到题库。

GitHub：github.com/2384830985/...

如果觉得有用，点个赞再走 👍