文档教程知识库人工智能【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 Vibe Coding 零基础教程分享 OpenClaw 保姆级教程、大模型玩法DeepSeek / GPT / Gemini / Claude / GLM、最新 AI 资讯、Prompt 提示词大全、AI 知识百科Agent Skills / RAG / MCP / A2A、AI 编程教程Harness Engineering、AI 工具用法Cursor / Claude Code / TRAE / Codex / Copilot、AI 开发框架教程Spring AI / LangChain、AI 产品变现指南帮你快速掌握 AI 技术走在时代前沿。本项目为开源文档 aiguide已升级为鱼皮 AI 导航网站项目地址https://gitcode.com/GitHub_Trending/aig/ai-guide点击查看免费下载本篇技术指南以「AI Cursor 开发一个模拟面试系统」为核心完整还原了一个「模拟面试光荣榜网站」从需求分析、交互设计到 AI 提示词落地的全过程。你将掌握一套可直接复制给 Cursor 等 AI 编程工具的完整需求文档学会用「面试报告 实时打分 薪资排行榜」的模式设计趣味化产品并在 Vibe Coding 工作流的指引下用纯对话方式把一个带本地持久化的前端应用从 0 做到可运行。本项目隶属于仓库的 AI 项目教程 板块与「AI Cursor 开发一个亲戚计算器」「AI Cursor 开发一个肺活量测试器」同属一组不写一行代码的 Cursor 实战项目。一、项目定位把面试做成「光荣榜」模拟面试并不是新概念但大多数产品都做得过于严肃。这个项目的独特之处在于用游戏化的「光荣榜」氛围包裹真实的面试流程——候选人头像飞入、分数条平滑增长、里程碑触发庆祝动画、前三名戴上奖杯配合大量搞笑文案让原本紧张的面试变成一场有趣的挑战。从产品角度看它同时满足了三个诉求趣味性通过搞笑动画和文案让候选人感受到轻松愉快的面试氛围实用性通过详细的面试报告和排行榜功能帮助候选人了解自身水平明确提升方向互动性通过动态分数展示和鼓励文案增强候选人的参与感和成就感。整个项目采用纯前端方案即可完成后端可选数据落在浏览器本地这大大降低了开发门槛非常适合作为 Cursor 实战入门项目。二、需求分析六大核心功能拆解动手写提示词之前先要像产品经理一样把需求拆清楚。原文档给出的需求分析可以归纳为 6 项核心功能下面逐项拆解2.1 创建模拟面试报告面试官录入候选人信息作为一场模拟面试的起点字段含义示例姓名候选人称呼张三情况年级 / 工作经验应届生、3 年经验当前薪资候选人目前的薪资8k学习方向目标技术方向Java、前端、数据分析挑战薪资本次挑战的目标薪资15k动态效果要求输入信息后页面弹出一个小动画例如候选人头像从屏幕外飞入并附带一句搞笑文案「这位勇士准备好挑战高薪了吗」2.2 模拟面试过程这是系统的核心交互包含三层能力1问题管理面试官录入多个面试问题按顺序展示并支持在任意位置插入新问题、删除问题或调整问题顺序。2回答与打分针对每个问题面试官录入候选人的回答并给出 0 ~ 100 分的打分。3实时平均分与鼓励文案动态分数条实时显示当前所有问题的平均分并根据平均分切换文案平均分 60「别灰心再接再厉」60 ≤ 平均分 80「不错哦离高薪更近一步了」平均分 ≥ 80「哇塞你就是未来的高薪大佬」动态效果每次打分后分数条平滑更新可搭配烟花特效当平均分达到里程碑60、80、100 分时弹出搞笑动画如候选人头像戴上墨镜、播放庆祝音效。2.3 结束面试并生成完整报告面试官可以主动结束面试录入面试总结和建议给出面试结果是否通过、实际可拿到的薪资随后生成完整报告展示候选人信息与面试官录入的所有内容。动态效果报告生成时页面弹出「恭喜你完成挑战」字样从屏幕底部升起的动画报告页设计成光荣榜风格候选人头像戴上皇冠、背景撒花。2.4 数据持久化使用localStorage或IndexedDB存储所有面试报告关闭浏览器后数据不丢失。这意味着整个应用不需要服务器即可长期使用。2.5 主页报告管理与筛选主页支持创建新报告同时可以筛选查看往期所有报告。报告列表设计成「光荣榜」样式附带候选人头像和搞笑标签如「Java 大神」「前端新星」。2.6 薪资排行榜按照候选人实际可以拿到的薪资而非挑战薪资进行排名。排行榜前三名头像显示奖杯动画并根据排名切换文案第一名「王者归来无人能敌」第二名「离巅峰只差一步继续加油」第三名「稳坐前三实力不容小觑」鼠标悬停时显示候选人详细信息。三、面向 AI 的完整需求文档提示词需求想清楚之后把它整理成一份结构化的需求文档直接粘贴给 Cursor建议使用 Agent 模式作为第一轮提示词。这份提示词的关键在于把功能、交互、文案、技术选型全部写死AI 不需要猜测。以下是原文档提供的完整提示词可直接复制使用### **需求文档模拟面试光荣榜网站** --- #### **1. 项目背景** 为了帮助候选人更好地准备面试同时增加趣味性和互动性我们计划开发一个 **模拟面试光荣榜网站**。该网站将模拟真实面试场景记录面试过程生成面试报告并通过生动有趣的动画和文案营造出一种面试光荣榜的氛围激励候选人不断提升自己。 --- #### **2. 核心功能** ##### **2.1 创建模拟面试报告** - **输入候选人信息** - 姓名 - 情况年级 / 工作经验 - 当前薪资 - 学习方向如 Java、前端、数据分析等 - 挑战薪资如月薪 15k - **动态效果** - 输入信息后页面弹出一个小动画如候选人头像从屏幕外飞入并附带一句搞笑文案这位勇士准备好挑战高薪了吗。 ##### **2.2 模拟面试过程** - **问题录入** - 面试官可以录入多个面试问题并按照顺序展示。 - 支持在任意位置插入新问题、删除问题或调整问题顺序。 - **回答与打分** - 针对每个问题面试官可以录入候选人的回答并给出打分0 ~ 100 分。 - **实时展示当前平均分** - 动态分数条实时显示当前所有问题的平均分数。 - 根据平均分动态显示鼓励文案 - 平均分 60 别灰心再接再厉 - 60 ≤ 平均分 80 不错哦离高薪更近一步了 - 平均分 ≥ 80 哇塞你就是未来的高薪大佬 - **动态效果** - 每次打分后分数条动态更新伴随动画如分数条平滑增长、烟花特效等。 - 当平均分达到某个里程碑如 60、80、100 分时页面弹出搞笑动画如候选人头像戴上墨镜背景播放庆祝音效。 ##### **2.3 结束面试并生成报告** - **面试总结与建议** - 面试官可以录入面试总结和建议。 - 给出面试结果如是否通过、实际可以拿到的薪资等。 - **生成完整报告** - 展示候选人信息、面试问题、回答、打分、总结和建议。 - 报告页面设计成光荣榜风格附带搞笑动画如候选人头像戴上皇冠背景撒花。 - **动态效果** - 报告生成时页面弹出动画如恭喜你完成挑战字样从屏幕底部升起。 ##### **2.4 数据存储与持久化** - **本地存储** - 使用 localStorage 或 IndexedDB 存储所有面试报告关闭浏览器后数据不会丢失。 - **报告管理** - 支持在主页创建新报告或筛选查看往期报告。 - 报告列表设计成光荣榜样式附带候选人头像和搞笑标签如Java 大神、前端新星。 ##### **2.5 排行榜功能** - **薪资排名** - 按照候选人实际可以拿到的薪资进行排名。 - 排行榜页面设计成光荣榜风格附带动态效果如前三名头像显示奖杯动画。 - **搞笑文案** - 根据排名显示不同文案 - 第一名 王者归来无人能敌 - 第二名 离巅峰只差一步继续加油 - 第三名 稳坐前三实力不容小觑 --- #### **3. 页面设计与交互** ##### **3.1 主页** - **功能** - 创建新报告按钮。 - 往期报告筛选与查看。 - 排行榜入口。 - **设计风格** - 背景设计成光荣榜样式附带动态元素如飘动的彩带、闪烁的星星。 - 点击按钮时弹出搞笑动画如按钮变成火箭升空。 ##### **3.2 面试报告页面** - **功能** - 展示候选人信息、面试问题、回答、打分、总结和建议。 - **设计风格** - 页面顶部显示候选人头像和搞笑标签如Java 挑战者。 - 动态分数条实时展示当前平均分分数变化时伴随动画和鼓励文案。 ##### **3.3 排行榜页面** - **功能** - 展示候选人薪资排名。 - **设计风格** - 设计成光荣榜样式附带动态效果如前三名头像显示奖杯动画。 - 鼠标悬停时显示候选人详细信息。 --- #### **4. 技术实现** ##### **4.1 前端** - **框架**React 或 Vue.js。 - **动画库**使用 GSAP 或 Anime.js 实现搞笑动画。 - **本地存储**使用 localStorage 或 IndexedDB 存储数据。 ##### **4.2 后端可选** - 如果需要支持多用户或数据同步可以使用 Node.js Express 或 Firebase。 ##### **4.3 数据存储** - **数据结构示例** json { id: 12345, name: 张三, experience: 应届生, currentSalary: 8k, targetSalary: 15k, questions: [ { question: 请介绍一下 Java 的垃圾回收机制。, answer: Java 的垃圾回收机制是通过 JVM 自动管理内存..., score: 85 } ], averageScore: 85, summary: 表现优秀基础扎实建议加强项目经验。, result: 通过, finalSalary: 13k }5. 预期效果趣味性通过搞笑动画和文案让候选人感受到轻松愉快的面试氛围。实用性通过详细的面试报告和排行榜功能帮助候选人了解自身水平明确提升方向。互动性通过动态分数展示和鼓励文案增强候选人的参与感和成就感。这份提示词的使用要点 1. **一次只交付一个目标**建议先用 Agent 模式粘贴需求分析让 AI 自主生成网站直到能运行再逐个功能测试、修正同系列项目「[AI Cursor 开发一个肺活量测试器](https://link.gitcode.com/i/cd0676087d2bd606c850faf5682ede15)」中总结的「先跑通、再逐功能完成」策略同样适用 2. **文案必须逐字写死**分数段文案、排行榜文案这类「业务规则」如果不写清楚AI 会自由发挥最后效果会偏离预期 3. **数据结构先行定义**提示词里的 JSON 示例相当于数据库建表语句决定了后续所有功能代码的字段来源。 ## 四、数据模型设计从 JSON 到本地存储 提示词中的 JSON 结构是整个应用的数据骨架它一次性覆盖了「候选人信息、面试过程、面试结果」三块数据字段设计非常精炼 | 字段 | 类型 | 说明 | 写入时机 | | --- | --- | --- | --- | | id | string | 报告唯一标识 | 创建报告时 | | name | string | 候选人姓名 | 创建报告时 | | experience | string | 情况年级 / 工作经验 | 创建报告时 | | currentSalary | string | 当前薪资 | 创建报告时 | | targetSalary | string | 挑战薪资 | 创建报告时 | | questions | array | 问题列表question / answer / score | 面试过程中动态追加、插入、删除 | | averageScore | number | 全部问题的平均分 | 每次打分后实时重算 | | summary | string | 面试总结 | 结束面试时 | | result | string | 面试结果是否通过 | 结束面试时 | | finalSalary | string | 实际可以拿到的薪资 | 结束面试时 | 在实现层面有几个值得注意的细节 - **平均分的计算**averageScore 不应手工维护而应在每次「打分 / 删题 / 插题」操作后由 questions 数组实时重算sum(score) / questions.length并驱动分数条动画与文案切换 - **问题顺序的调整**提示词要求「任意位置插入、删除、调整顺序」对应数组的 splice 类操作这也是为什么问题列表必须是有序数组而不是对象 - **本地存储策略**用 localStorage 时以报告 id 为 key 存 JSON 字符串即可如果报告数量较大、需要索引查询可改用 IndexedDB 提供结构化存储 - **报告列表与排行榜**主页筛选和排行榜本质上是「读取全部报告 → 按字段过滤 / 排序」的过程排行榜按 finalSalary 降序排列数据就来自本地存储中的完整报告集合。 ## 五、「光荣榜」氛围的落地要点 这个项目最能出彩的地方是把产品体验做成「光荣榜」。从提示词看氛围营造主要靠三层手段 ### 5.1 分级文案体系 文案不是零散的而是一套按数值区间设计的激励体系 - **面试中**平均分三档 60 / 60~80 / ≥ 80对应鼓励文案 - **排行榜**前三名各配专属文案 - **创建报告**、**报告完成**各配一句开场 / 收尾文案。 这套「数值触发文案」的逻辑在后端就是一个简单的条件分支函数但却是产品趣味性的核心来源。 ### 5.2 关键节点的动画反馈 动画不是越多越好而是集中在三个关键节点**创建报告时**头像飞入、**平均分里程碑**60 / 80 / 100 分弹出庆祝动画、**报告生成时**文字升起 撒花。每个动画都对应一次用户操作或一次状态跃迁让用户清晰地感知「我的操作生效了」。 ### 5.3 光荣榜风格的视觉体系 主页背景的飘动彩带、闪烁星星、火箭升空按钮报告页顶部的头像 搞笑标签排行榜前三名的奖杯动画——这些元素统一服务于「榜单氛围」这一视觉主题避免做成普通表单工具的观感。 ## 六、技术选型与实现建议 提示词给出了明确的技术建议都是经过验证的成熟组合 - **前端框架**React 或 Vue.js两者对 AI 生成代码的友好度都很高选择你更熟悉的即可 - **动画库**GSAP 或 Anime.js用来实现分数条平滑增长、头像飞入、撒花等动画。建议让 AI 优先使用 GSAP其 timeline 能力非常适合编排多步骤动画 - **本地存储**localStorage 或 IndexedDB单机使用优先 localStorage实现简单数据量大再迁移 IndexedDB - **后端可选**如果将来需要多用户登录或云端数据同步可加 Node.js Express 或 Firebase。 需要特别说明的是**MVP 阶段完全可以省略后端**。本地存储 纯前端就能完整跑通「创建报告 → 面试 → 出报告 → 排行榜」全流程这与仓库中「[AI Cursor 开发一个亲戚计算器](https://link.gitcode.com/i/bca1334e5563bc31827c8a1d2787d6ac)」项目的技术决策一致——该教程明确提到「全程使用 AI 实现暂时不用后端降低开发复杂度」。当纯前端方案在复杂场景下力不从心时例如亲戚计算器的枚举 递归在复杂关系下难以覆盖再考虑引入后端与 AI 能力。 ## 七、用 Cursor 落地的推荐工作流 拿到需求文档只是第一步真正开发时建议遵循仓库中 [Vibe Coding 项目开发流程](https://link.gitcode.com/i/1a1e8f3ae4571605fc411842b620a841) 总结的方法论并结合 [Cursor 保姆级教程](https://link.gitcode.com/i/f949e8bd0a93661bc4628acabaa50b9f) 的工具技巧 ### 7.1 先规划再动手 这是 [Vibe Coding 五大核心心法](https://link.gitcode.com/i/4d3cf51f77af0a5b190390a663813806) 的第一条**Planning is Everything**。不要一上来就喊「帮我做一个模拟面试网站」而是先把第三节的完整需求文档交给 AI让它在明确的目标下生成代码。规划阶段多花的几分钟能省下返工上的几十分钟。 ### 7.2 用 Agent 模式生成基础框架 在 Cursor 中新建项目文件夹建议纯英文路径切到 **Agent 模式**粘贴需求文档让 AI 自主完成项目初始化、依赖安装、目录创建和页面骨架搭建。第一版不追求功能完美**确保项目能够运行**即可。 ### 7.3 小步迭代一个功能一个功能地修正 原文档特别强调「**当你能够运行项目之后建议一个功能一个功能地修正**」。具体节奏是 1. 创建报告功能 → 运行验证 2. 问题录入 打分 实时平均分 → 运行验证 3. 结束面试 生成报告 → 运行验证 4. 本地存储 主页筛选 → 运行验证 5. 排行榜 → 运行验证。 每一步都基于 [Vibe Coding 对话工程技巧](https://link.gitcode.com/i/359161c6c3be2db7bbf8aa2e1dc62477) 中的「从大到小、逐步细化」原则先跑通核心流程再补细节避免一次性要求过多导致 AI 上下文过载。 ### 7.4 善用 Cursor 的调试与回滚能力 - **Checkpoints 快照回滚**Agent 每次修改都会自动保存快照AI 改乱了可以一键回滚到之前的代码状态 - ** 引用上下文**报错时用 Terminals 引用终端错误信息或直接把相关文件拖进对话框让 AI 精准定位问题 - **Git 版本控制**每验证通过一个功能就 git commit 一次防止 AI 后续改动破坏已有功能这一点在同系列「肺活量测试器」教程的[开发技巧](https://link.gitcode.com/i/cd0676087d2bd606c850faf5682ede15)中也被反复强调。 ### 7.5 应对 AI 卡壳 AI 有时会因上下文不足陷入循环。此时可以尝试清空对话重新开始、换个角度描述问题、手动补充关键上下文如果单一模型搞不定可以把代码和错误信息发给另一个 AI如 Claude / Gemini / DeepSeek让它生成「教 AI 做事的方法和指令」再带回来执行——这正是 [Vibe Coding 五大核心心法](https://link.gitcode.com/i/4d3cf51f77af0a5b190390a663813806) 中「多元 AI 协作」的用法。 ## 八、验收清单与扩展方向 ### 8.1 对照验收清单 项目完成度可以对照以下清单逐项验收 - [ ] 能创建报告姓名 / 情况 / 当前薪资 / 学习方向 / 挑战薪资且有入场动画 - [ ] 能录入多个问题、支持中间插入、删除、调整顺序 - [ ] 每个问题可录回答、打 0 ~ 100 分 - [ ] 平均分实时更新分数条带动画三档文案正确切换里程碑有庆祝动画 - [ ] 能结束面试录入总结、建议、结果、实际薪资 - [ ] 能生成完整报告光荣榜风格 撒花动画 - [ ] 关闭浏览器后报告不丢失 - [ ] 主页能创建报告、筛选往期报告 - [ ] 排行榜按实际薪资降序排名前三名有奖杯动画和专属文案 ### 8.2 可扩展方向 MVP 完成后可以按需迭代 - **接入后端 AI 面试官**把面试提问交给 AI 大模型模拟真实的动态追问参考仓库中 [AI 海龟汤项目教程](https://link.gitcode.com/i/9931f8f3108e35f5a341de7a0421aa92) 的 AI 对话接入思路 - **报告导出与分享**把光荣榜报告生成图片 / 卡片分享到社交平台 - **多候选人批量面试**支持一场面试多个候选人并横向对比评分 - **云端同步**引入 Firebase 或 Node.js Express实现多设备数据同步与多人协作面试。 ## 九、总结 「模拟面试光荣榜」是一个典型的「有趣 有用」的 AI 编程实战项目它用完整的需求文档展示了如何把抽象想法拆成 AI 能精确执行的功能规格用 JSON 数据结构打通了「创建 → 面试 → 报告 → 排行」的完整数据流也用一套分层文案与动画体系说明了游戏化产品设计的落地手法。对照仓库中其他 Cursor 实战项目你可以看到同一套方法论的复现**先做需求分析 → 写结构化提示词 → Agent 模式生成 → 逐功能迭代验证 → Git 兜底**。掌握这套流程你就具备了用 Cursor 独立开发同类前端应用的能力。赞分享文档教程知识库人工智能【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 Vibe Coding 零基础教程分享 OpenClaw 保姆级教程、大模型玩法DeepSeek / GPT / Gemini / Claude / GLM、最新 AI 资讯、Prompt 提示词大全、AI 知识百科Agent Skills / RAG / MCP / A2A、AI 编程教程Harness Engineering、AI 工具用法Cursor / Claude Code / TRAE / Codex / Copilot、AI 开发框架教程Spring AI / LangChain、AI 产品变现指南帮你快速掌握 AI 技术走在时代前沿。本项目为开源文档 aiguide已升级为鱼皮 AI 导航网站项目地址https://gitcode.com/GitHub_Trending/aig/ai-guide点击查看免费下载相关推荐CANN ops-blas性能基准测试与传统CPU/GPU BLAS库的对比分析CANN ops blas性能基准测试与传统CPU/GPU BLAS库的对比分析 CANN ops blas是CANN提供的高性能线性代数计算以及轻量化GEM算子库高性能计算CANN从零开始理解AI系统提示词awesome-ai-system-prompts完全指南从零开始理解AI系统提示词awesome ai system prompts完全指南 awesome ai system prompts是一个精心策划的系统提人工智能提示工程文档Cursor工具系统提示词深度解析CL4R1T4S开发者工具集完全指南Cursor工具系统提示词深度解析CL4R1T4S开发者工具集完全指南 想要真正掌握AI编程助手的强大能力吗CL4R1T4S项目为您揭示了Cursor知识库人工智能AI 安全治理上一篇RBush vs KDBush如何选择最适合你的空间索引解决方案下一篇G-Helper完整教程华硕笔记本性能优化终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
用 Cursor 从零开发「模拟面试光荣榜」系统：完整需求分析与 AI 提示词实战指南
文档教程知识库人工智能【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 Vibe Coding 零基础教程分享 OpenClaw 保姆级教程、大模型玩法DeepSeek / GPT / Gemini / Claude / GLM、最新 AI 资讯、Prompt 提示词大全、AI 知识百科Agent Skills / RAG / MCP / A2A、AI 编程教程Harness Engineering、AI 工具用法Cursor / Claude Code / TRAE / Codex / Copilot、AI 开发框架教程Spring AI / LangChain、AI 产品变现指南帮你快速掌握 AI 技术走在时代前沿。本项目为开源文档 aiguide已升级为鱼皮 AI 导航网站项目地址https://gitcode.com/GitHub_Trending/aig/ai-guide点击查看免费下载本篇技术指南以「AI Cursor 开发一个模拟面试系统」为核心完整还原了一个「模拟面试光荣榜网站」从需求分析、交互设计到 AI 提示词落地的全过程。你将掌握一套可直接复制给 Cursor 等 AI 编程工具的完整需求文档学会用「面试报告 实时打分 薪资排行榜」的模式设计趣味化产品并在 Vibe Coding 工作流的指引下用纯对话方式把一个带本地持久化的前端应用从 0 做到可运行。本项目隶属于仓库的 AI 项目教程 板块与「AI Cursor 开发一个亲戚计算器」「AI Cursor 开发一个肺活量测试器」同属一组不写一行代码的 Cursor 实战项目。一、项目定位把面试做成「光荣榜」模拟面试并不是新概念但大多数产品都做得过于严肃。这个项目的独特之处在于用游戏化的「光荣榜」氛围包裹真实的面试流程——候选人头像飞入、分数条平滑增长、里程碑触发庆祝动画、前三名戴上奖杯配合大量搞笑文案让原本紧张的面试变成一场有趣的挑战。从产品角度看它同时满足了三个诉求趣味性通过搞笑动画和文案让候选人感受到轻松愉快的面试氛围实用性通过详细的面试报告和排行榜功能帮助候选人了解自身水平明确提升方向互动性通过动态分数展示和鼓励文案增强候选人的参与感和成就感。整个项目采用纯前端方案即可完成后端可选数据落在浏览器本地这大大降低了开发门槛非常适合作为 Cursor 实战入门项目。二、需求分析六大核心功能拆解动手写提示词之前先要像产品经理一样把需求拆清楚。原文档给出的需求分析可以归纳为 6 项核心功能下面逐项拆解2.1 创建模拟面试报告面试官录入候选人信息作为一场模拟面试的起点字段含义示例姓名候选人称呼张三情况年级 / 工作经验应届生、3 年经验当前薪资候选人目前的薪资8k学习方向目标技术方向Java、前端、数据分析挑战薪资本次挑战的目标薪资15k动态效果要求输入信息后页面弹出一个小动画例如候选人头像从屏幕外飞入并附带一句搞笑文案「这位勇士准备好挑战高薪了吗」2.2 模拟面试过程这是系统的核心交互包含三层能力1问题管理面试官录入多个面试问题按顺序展示并支持在任意位置插入新问题、删除问题或调整问题顺序。2回答与打分针对每个问题面试官录入候选人的回答并给出 0 ~ 100 分的打分。3实时平均分与鼓励文案动态分数条实时显示当前所有问题的平均分并根据平均分切换文案平均分 60「别灰心再接再厉」60 ≤ 平均分 80「不错哦离高薪更近一步了」平均分 ≥ 80「哇塞你就是未来的高薪大佬」动态效果每次打分后分数条平滑更新可搭配烟花特效当平均分达到里程碑60、80、100 分时弹出搞笑动画如候选人头像戴上墨镜、播放庆祝音效。2.3 结束面试并生成完整报告面试官可以主动结束面试录入面试总结和建议给出面试结果是否通过、实际可拿到的薪资随后生成完整报告展示候选人信息与面试官录入的所有内容。动态效果报告生成时页面弹出「恭喜你完成挑战」字样从屏幕底部升起的动画报告页设计成光荣榜风格候选人头像戴上皇冠、背景撒花。2.4 数据持久化使用localStorage或IndexedDB存储所有面试报告关闭浏览器后数据不丢失。这意味着整个应用不需要服务器即可长期使用。2.5 主页报告管理与筛选主页支持创建新报告同时可以筛选查看往期所有报告。报告列表设计成「光荣榜」样式附带候选人头像和搞笑标签如「Java 大神」「前端新星」。2.6 薪资排行榜按照候选人实际可以拿到的薪资而非挑战薪资进行排名。排行榜前三名头像显示奖杯动画并根据排名切换文案第一名「王者归来无人能敌」第二名「离巅峰只差一步继续加油」第三名「稳坐前三实力不容小觑」鼠标悬停时显示候选人详细信息。三、面向 AI 的完整需求文档提示词需求想清楚之后把它整理成一份结构化的需求文档直接粘贴给 Cursor建议使用 Agent 模式作为第一轮提示词。这份提示词的关键在于把功能、交互、文案、技术选型全部写死AI 不需要猜测。以下是原文档提供的完整提示词可直接复制使用### **需求文档模拟面试光荣榜网站** --- #### **1. 项目背景** 为了帮助候选人更好地准备面试同时增加趣味性和互动性我们计划开发一个 **模拟面试光荣榜网站**。该网站将模拟真实面试场景记录面试过程生成面试报告并通过生动有趣的动画和文案营造出一种面试光荣榜的氛围激励候选人不断提升自己。 --- #### **2. 核心功能** ##### **2.1 创建模拟面试报告** - **输入候选人信息** - 姓名 - 情况年级 / 工作经验 - 当前薪资 - 学习方向如 Java、前端、数据分析等 - 挑战薪资如月薪 15k - **动态效果** - 输入信息后页面弹出一个小动画如候选人头像从屏幕外飞入并附带一句搞笑文案这位勇士准备好挑战高薪了吗。 ##### **2.2 模拟面试过程** - **问题录入** - 面试官可以录入多个面试问题并按照顺序展示。 - 支持在任意位置插入新问题、删除问题或调整问题顺序。 - **回答与打分** - 针对每个问题面试官可以录入候选人的回答并给出打分0 ~ 100 分。 - **实时展示当前平均分** - 动态分数条实时显示当前所有问题的平均分数。 - 根据平均分动态显示鼓励文案 - 平均分 60 别灰心再接再厉 - 60 ≤ 平均分 80 不错哦离高薪更近一步了 - 平均分 ≥ 80 哇塞你就是未来的高薪大佬 - **动态效果** - 每次打分后分数条动态更新伴随动画如分数条平滑增长、烟花特效等。 - 当平均分达到某个里程碑如 60、80、100 分时页面弹出搞笑动画如候选人头像戴上墨镜背景播放庆祝音效。 ##### **2.3 结束面试并生成报告** - **面试总结与建议** - 面试官可以录入面试总结和建议。 - 给出面试结果如是否通过、实际可以拿到的薪资等。 - **生成完整报告** - 展示候选人信息、面试问题、回答、打分、总结和建议。 - 报告页面设计成光荣榜风格附带搞笑动画如候选人头像戴上皇冠背景撒花。 - **动态效果** - 报告生成时页面弹出动画如恭喜你完成挑战字样从屏幕底部升起。 ##### **2.4 数据存储与持久化** - **本地存储** - 使用 localStorage 或 IndexedDB 存储所有面试报告关闭浏览器后数据不会丢失。 - **报告管理** - 支持在主页创建新报告或筛选查看往期报告。 - 报告列表设计成光荣榜样式附带候选人头像和搞笑标签如Java 大神、前端新星。 ##### **2.5 排行榜功能** - **薪资排名** - 按照候选人实际可以拿到的薪资进行排名。 - 排行榜页面设计成光荣榜风格附带动态效果如前三名头像显示奖杯动画。 - **搞笑文案** - 根据排名显示不同文案 - 第一名 王者归来无人能敌 - 第二名 离巅峰只差一步继续加油 - 第三名 稳坐前三实力不容小觑 --- #### **3. 页面设计与交互** ##### **3.1 主页** - **功能** - 创建新报告按钮。 - 往期报告筛选与查看。 - 排行榜入口。 - **设计风格** - 背景设计成光荣榜样式附带动态元素如飘动的彩带、闪烁的星星。 - 点击按钮时弹出搞笑动画如按钮变成火箭升空。 ##### **3.2 面试报告页面** - **功能** - 展示候选人信息、面试问题、回答、打分、总结和建议。 - **设计风格** - 页面顶部显示候选人头像和搞笑标签如Java 挑战者。 - 动态分数条实时展示当前平均分分数变化时伴随动画和鼓励文案。 ##### **3.3 排行榜页面** - **功能** - 展示候选人薪资排名。 - **设计风格** - 设计成光荣榜样式附带动态效果如前三名头像显示奖杯动画。 - 鼠标悬停时显示候选人详细信息。 --- #### **4. 技术实现** ##### **4.1 前端** - **框架**React 或 Vue.js。 - **动画库**使用 GSAP 或 Anime.js 实现搞笑动画。 - **本地存储**使用 localStorage 或 IndexedDB 存储数据。 ##### **4.2 后端可选** - 如果需要支持多用户或数据同步可以使用 Node.js Express 或 Firebase。 ##### **4.3 数据存储** - **数据结构示例** json { id: 12345, name: 张三, experience: 应届生, currentSalary: 8k, targetSalary: 15k, questions: [ { question: 请介绍一下 Java 的垃圾回收机制。, answer: Java 的垃圾回收机制是通过 JVM 自动管理内存..., score: 85 } ], averageScore: 85, summary: 表现优秀基础扎实建议加强项目经验。, result: 通过, finalSalary: 13k }5. 预期效果趣味性通过搞笑动画和文案让候选人感受到轻松愉快的面试氛围。实用性通过详细的面试报告和排行榜功能帮助候选人了解自身水平明确提升方向。互动性通过动态分数展示和鼓励文案增强候选人的参与感和成就感。这份提示词的使用要点 1. **一次只交付一个目标**建议先用 Agent 模式粘贴需求分析让 AI 自主生成网站直到能运行再逐个功能测试、修正同系列项目「[AI Cursor 开发一个肺活量测试器](https://link.gitcode.com/i/cd0676087d2bd606c850faf5682ede15)」中总结的「先跑通、再逐功能完成」策略同样适用 2. **文案必须逐字写死**分数段文案、排行榜文案这类「业务规则」如果不写清楚AI 会自由发挥最后效果会偏离预期 3. **数据结构先行定义**提示词里的 JSON 示例相当于数据库建表语句决定了后续所有功能代码的字段来源。 ## 四、数据模型设计从 JSON 到本地存储 提示词中的 JSON 结构是整个应用的数据骨架它一次性覆盖了「候选人信息、面试过程、面试结果」三块数据字段设计非常精炼 | 字段 | 类型 | 说明 | 写入时机 | | --- | --- | --- | --- | | id | string | 报告唯一标识 | 创建报告时 | | name | string | 候选人姓名 | 创建报告时 | | experience | string | 情况年级 / 工作经验 | 创建报告时 | | currentSalary | string | 当前薪资 | 创建报告时 | | targetSalary | string | 挑战薪资 | 创建报告时 | | questions | array | 问题列表question / answer / score | 面试过程中动态追加、插入、删除 | | averageScore | number | 全部问题的平均分 | 每次打分后实时重算 | | summary | string | 面试总结 | 结束面试时 | | result | string | 面试结果是否通过 | 结束面试时 | | finalSalary | string | 实际可以拿到的薪资 | 结束面试时 | 在实现层面有几个值得注意的细节 - **平均分的计算**averageScore 不应手工维护而应在每次「打分 / 删题 / 插题」操作后由 questions 数组实时重算sum(score) / questions.length并驱动分数条动画与文案切换 - **问题顺序的调整**提示词要求「任意位置插入、删除、调整顺序」对应数组的 splice 类操作这也是为什么问题列表必须是有序数组而不是对象 - **本地存储策略**用 localStorage 时以报告 id 为 key 存 JSON 字符串即可如果报告数量较大、需要索引查询可改用 IndexedDB 提供结构化存储 - **报告列表与排行榜**主页筛选和排行榜本质上是「读取全部报告 → 按字段过滤 / 排序」的过程排行榜按 finalSalary 降序排列数据就来自本地存储中的完整报告集合。 ## 五、「光荣榜」氛围的落地要点 这个项目最能出彩的地方是把产品体验做成「光荣榜」。从提示词看氛围营造主要靠三层手段 ### 5.1 分级文案体系 文案不是零散的而是一套按数值区间设计的激励体系 - **面试中**平均分三档 60 / 60~80 / ≥ 80对应鼓励文案 - **排行榜**前三名各配专属文案 - **创建报告**、**报告完成**各配一句开场 / 收尾文案。 这套「数值触发文案」的逻辑在后端就是一个简单的条件分支函数但却是产品趣味性的核心来源。 ### 5.2 关键节点的动画反馈 动画不是越多越好而是集中在三个关键节点**创建报告时**头像飞入、**平均分里程碑**60 / 80 / 100 分弹出庆祝动画、**报告生成时**文字升起 撒花。每个动画都对应一次用户操作或一次状态跃迁让用户清晰地感知「我的操作生效了」。 ### 5.3 光荣榜风格的视觉体系 主页背景的飘动彩带、闪烁星星、火箭升空按钮报告页顶部的头像 搞笑标签排行榜前三名的奖杯动画——这些元素统一服务于「榜单氛围」这一视觉主题避免做成普通表单工具的观感。 ## 六、技术选型与实现建议 提示词给出了明确的技术建议都是经过验证的成熟组合 - **前端框架**React 或 Vue.js两者对 AI 生成代码的友好度都很高选择你更熟悉的即可 - **动画库**GSAP 或 Anime.js用来实现分数条平滑增长、头像飞入、撒花等动画。建议让 AI 优先使用 GSAP其 timeline 能力非常适合编排多步骤动画 - **本地存储**localStorage 或 IndexedDB单机使用优先 localStorage实现简单数据量大再迁移 IndexedDB - **后端可选**如果将来需要多用户登录或云端数据同步可加 Node.js Express 或 Firebase。 需要特别说明的是**MVP 阶段完全可以省略后端**。本地存储 纯前端就能完整跑通「创建报告 → 面试 → 出报告 → 排行榜」全流程这与仓库中「[AI Cursor 开发一个亲戚计算器](https://link.gitcode.com/i/bca1334e5563bc31827c8a1d2787d6ac)」项目的技术决策一致——该教程明确提到「全程使用 AI 实现暂时不用后端降低开发复杂度」。当纯前端方案在复杂场景下力不从心时例如亲戚计算器的枚举 递归在复杂关系下难以覆盖再考虑引入后端与 AI 能力。 ## 七、用 Cursor 落地的推荐工作流 拿到需求文档只是第一步真正开发时建议遵循仓库中 [Vibe Coding 项目开发流程](https://link.gitcode.com/i/1a1e8f3ae4571605fc411842b620a841) 总结的方法论并结合 [Cursor 保姆级教程](https://link.gitcode.com/i/f949e8bd0a93661bc4628acabaa50b9f) 的工具技巧 ### 7.1 先规划再动手 这是 [Vibe Coding 五大核心心法](https://link.gitcode.com/i/4d3cf51f77af0a5b190390a663813806) 的第一条**Planning is Everything**。不要一上来就喊「帮我做一个模拟面试网站」而是先把第三节的完整需求文档交给 AI让它在明确的目标下生成代码。规划阶段多花的几分钟能省下返工上的几十分钟。 ### 7.2 用 Agent 模式生成基础框架 在 Cursor 中新建项目文件夹建议纯英文路径切到 **Agent 模式**粘贴需求文档让 AI 自主完成项目初始化、依赖安装、目录创建和页面骨架搭建。第一版不追求功能完美**确保项目能够运行**即可。 ### 7.3 小步迭代一个功能一个功能地修正 原文档特别强调「**当你能够运行项目之后建议一个功能一个功能地修正**」。具体节奏是 1. 创建报告功能 → 运行验证 2. 问题录入 打分 实时平均分 → 运行验证 3. 结束面试 生成报告 → 运行验证 4. 本地存储 主页筛选 → 运行验证 5. 排行榜 → 运行验证。 每一步都基于 [Vibe Coding 对话工程技巧](https://link.gitcode.com/i/359161c6c3be2db7bbf8aa2e1dc62477) 中的「从大到小、逐步细化」原则先跑通核心流程再补细节避免一次性要求过多导致 AI 上下文过载。 ### 7.4 善用 Cursor 的调试与回滚能力 - **Checkpoints 快照回滚**Agent 每次修改都会自动保存快照AI 改乱了可以一键回滚到之前的代码状态 - ** 引用上下文**报错时用 Terminals 引用终端错误信息或直接把相关文件拖进对话框让 AI 精准定位问题 - **Git 版本控制**每验证通过一个功能就 git commit 一次防止 AI 后续改动破坏已有功能这一点在同系列「肺活量测试器」教程的[开发技巧](https://link.gitcode.com/i/cd0676087d2bd606c850faf5682ede15)中也被反复强调。 ### 7.5 应对 AI 卡壳 AI 有时会因上下文不足陷入循环。此时可以尝试清空对话重新开始、换个角度描述问题、手动补充关键上下文如果单一模型搞不定可以把代码和错误信息发给另一个 AI如 Claude / Gemini / DeepSeek让它生成「教 AI 做事的方法和指令」再带回来执行——这正是 [Vibe Coding 五大核心心法](https://link.gitcode.com/i/4d3cf51f77af0a5b190390a663813806) 中「多元 AI 协作」的用法。 ## 八、验收清单与扩展方向 ### 8.1 对照验收清单 项目完成度可以对照以下清单逐项验收 - [ ] 能创建报告姓名 / 情况 / 当前薪资 / 学习方向 / 挑战薪资且有入场动画 - [ ] 能录入多个问题、支持中间插入、删除、调整顺序 - [ ] 每个问题可录回答、打 0 ~ 100 分 - [ ] 平均分实时更新分数条带动画三档文案正确切换里程碑有庆祝动画 - [ ] 能结束面试录入总结、建议、结果、实际薪资 - [ ] 能生成完整报告光荣榜风格 撒花动画 - [ ] 关闭浏览器后报告不丢失 - [ ] 主页能创建报告、筛选往期报告 - [ ] 排行榜按实际薪资降序排名前三名有奖杯动画和专属文案 ### 8.2 可扩展方向 MVP 完成后可以按需迭代 - **接入后端 AI 面试官**把面试提问交给 AI 大模型模拟真实的动态追问参考仓库中 [AI 海龟汤项目教程](https://link.gitcode.com/i/9931f8f3108e35f5a341de7a0421aa92) 的 AI 对话接入思路 - **报告导出与分享**把光荣榜报告生成图片 / 卡片分享到社交平台 - **多候选人批量面试**支持一场面试多个候选人并横向对比评分 - **云端同步**引入 Firebase 或 Node.js Express实现多设备数据同步与多人协作面试。 ## 九、总结 「模拟面试光荣榜」是一个典型的「有趣 有用」的 AI 编程实战项目它用完整的需求文档展示了如何把抽象想法拆成 AI 能精确执行的功能规格用 JSON 数据结构打通了「创建 → 面试 → 报告 → 排行」的完整数据流也用一套分层文案与动画体系说明了游戏化产品设计的落地手法。对照仓库中其他 Cursor 实战项目你可以看到同一套方法论的复现**先做需求分析 → 写结构化提示词 → Agent 模式生成 → 逐功能迭代验证 → Git 兜底**。掌握这套流程你就具备了用 Cursor 独立开发同类前端应用的能力。赞分享文档教程知识库人工智能【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 Vibe Coding 零基础教程分享 OpenClaw 保姆级教程、大模型玩法DeepSeek / GPT / Gemini / Claude / GLM、最新 AI 资讯、Prompt 提示词大全、AI 知识百科Agent Skills / RAG / MCP / A2A、AI 编程教程Harness Engineering、AI 工具用法Cursor / Claude Code / TRAE / Codex / Copilot、AI 开发框架教程Spring AI / LangChain、AI 产品变现指南帮你快速掌握 AI 技术走在时代前沿。本项目为开源文档 aiguide已升级为鱼皮 AI 导航网站项目地址https://gitcode.com/GitHub_Trending/aig/ai-guide点击查看免费下载相关推荐CANN ops-blas性能基准测试与传统CPU/GPU BLAS库的对比分析CANN ops blas性能基准测试与传统CPU/GPU BLAS库的对比分析 CANN ops blas是CANN提供的高性能线性代数计算以及轻量化GEM算子库高性能计算CANN从零开始理解AI系统提示词awesome-ai-system-prompts完全指南从零开始理解AI系统提示词awesome ai system prompts完全指南 awesome ai system prompts是一个精心策划的系统提人工智能提示工程文档Cursor工具系统提示词深度解析CL4R1T4S开发者工具集完全指南Cursor工具系统提示词深度解析CL4R1T4S开发者工具集完全指南 想要真正掌握AI编程助手的强大能力吗CL4R1T4S项目为您揭示了Cursor知识库人工智能AI 安全治理上一篇RBush vs KDBush如何选择最适合你的空间索引解决方案下一篇G-Helper完整教程华硕笔记本性能优化终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
