GitHub Copilot – AI 塔罗牌占卜项目实战

这是一个利用 VSCode + GitHub Copilot 的 Plan 模式 + Agent 模式，从 0 到 1 开发的 AI 塔罗牌占卜网站。通过这个项目，你可以快速体验 GitHub Copilot 的核心 AI 编程能力，几分钟就能做出一个有翻牌动画、AI 占卜解读、神秘华丽界面的小项目。

预计 30 分钟学完，适合零基础入门 VSCode + GitHub Copilot 的 AI 编程。

如果你想了解 GitHub Copilot 的更多核心特性（MCP、Agent Skills、自定义智能体等），可以阅读本教程编程工具板块「工具实战」中的《VSCode + GitHub Copilot：微软全家桶的 AI 编程实战》。

项目介绍

用户输入一个问题（比如 “我最近的爱情运势如何”），点击「开始占卜」后，展示 3 张塔罗牌的翻牌动画，翻牌完成后调用 DeepSeek 大模型 API，根据抽到的牌生成 AI 占卜解读。

界面采用深紫色主题配金色纹理，星空背景，搭配流畅的翻牌动画效果，响应式布局手机也能用。

技术栈很简单：HTML + CSS + JavaScript，调用 DeepSeek API 生成占卜解读。

安装 VSCode + GitHub Copilot

在开始做项目之前，需要先安装好开发工具。

1）进入 VSCode 官网 下载安装包，直接傻瓜式安装。

2）打开 VSCode，点击左侧「扩展市场」图标，搜索 "GitHub Copilot"，安装官方的 AI 编程插件。

你还可以根据需要，选择安装 Chinese 汉化插件：

3）安装完后，点击 VSCode 底部状态栏的 Copilot 图标，按照提示登录 GitHub 账号就行了。

如果你还没有 Copilot 订阅，会自动进入 Copilot Free 免费计划，每月有一定的 AI 对话和代码补全额度，零门槛上手。想体验完整功能的话，Copilot Pro 支持新用户免费试用 30 天。如果你是在校学生，还可以通过 GitHub Education 申请学生认证，认证通过后 Copilot Pro 直接免费用。

安装配置搞定后，就可以开始做项目了。

开发流程

这个项目完美展示了 GitHub Copilot 的 Plan + Agent 工作流。

第一步、用 Plan 制定方案

新建一个空的项目文件夹（比如 ai-diviner），在 VSCode 中打开该文件夹，应该会默认打开 Chat 对话面板。

在对话区域的智能体选择器中选择 Plan 模式、并选择大模型（比如 Claude Opus），然后输入需求：

帮我用 HTML + CSS + JavaScript 做一个 AI 塔罗牌占卜网站。

功能描述：
1. 用户输入一个问题（比如「我最近事业运如何」）
2. 点击「开始占卜」后，展示 3 张塔罗牌的翻牌动画
3. 翻牌完成后，根据抽到的牌生成 AI 占卜解读
4. 界面要神秘华丽，深紫色主题配金色纹理，星空背景
5. 有流畅的翻牌动画效果
6. 响应式布局，手机也能用

选择 Plan 模式后，AI 不会直接开始写代码。

它会先研究你的需求，可能还会问你几个问题，比如 AI 解读是 “调用 AI 大模型接口” 还是 “从预设文案库随机生成”？

你只要像聊天一样把自己的想法告诉 AI 就好，比如希望调用 DeepSeek 大模型的 API：

如果你自己也拿不准，可以让 AI 帮你分析不同方案的优缺点，或者交给它自主决定。

AI 理解你的需求后，会给出一份结构化的实施方案。

方案里会列出要创建哪些文件、每个文件负责什么、实现步骤的先后顺序，以及怎么验证效果。你可以在这一步跟 AI 反复讨论、调整方案，直到满意为止。

Plan 模式的本质是采用 4 个阶段的迭代工作流：需求研究 → 问题对齐 → 方案设计 → 迭代细化。AI 会先用只读工具深入研究你的代码库，再通过交互式问答来消除歧义，最后才给出方案草稿。

其实这也是软件开发的标准步骤。即使你不用 Copilot 内置的 Plan 模式，也可以通过提示词引导 AI 先设计方案、人工确认后再开发执行，养成 先想清楚再动手 的好习惯。

第二步、用 Agent 执行方案

确认方案没问题后，点击方案下方的「Start Implementation」按钮，让 AI 开始自动执行，直到实现方案。

执行过程中，Agent 会自动管理一个 Todos 任务列表来跟踪进度。你可以清楚地看到 Agent 在做什么，比如创建 index.html、style.css、script.js 文件，往里面写代码，甚至可能会自动打开终端执行命令。

如果 AI 要跑终端命令或者调用某些工具，会弹出确认框让你审批，安全性有保障。

你也可以在 Agent 工作时继续发消息，选择排队等待、立即打断、或者引导 AI 调整方向。

建议刚开始 AI 编程的朋友多观察一下 AI 的工作，发现不对劲的时候赶紧人工插手，可以节约 Tokens 并避免返工。

第三步、查看效果

几分钟后，Agent 不仅完成了开发任务，还用 Python 启动了个 Web 服务器，帮忙运行了网站。

好家伙，这是多一步都不想让我做啊？照这个趋势，早晚我得退化到 Hello World 水平。

不过我还是喜欢在 Chrome 浏览器中测试，复制网址到浏览器中打开，然后输入从 DeepSeek 开放平台 获取到的大模型 API Key：

输入一个问题，测测俺今年的爱情运势，然后点击「开始占卜」：

三张塔罗牌依次翻开，下方出现 AI 生成的占卜解读。深紫色的星空背景，搭配金色边框，再加上流畅的翻牌动画，效果还真挺唬人的。

我感觉自己也可以开一个塔罗占卜小摊儿了，应该不是错觉。。。

如果你对页面的某些细节不满意，可以在内置浏览器中点击「元素选择」按钮，哪里不爽点哪里，然后在 Chat 框里编写提示词就行，比如：

改为鱼皮塔罗

Agent 会自动定位到对应的代码并精准修改，改完刷新预览就好。

整个过程，从写需求到出成品，也就几分钟。搁以前，我要是自己从零写这么个带动画的占卜网站，怎么着也得搞一下午。

你还可以继续跟 AI 对话来增加功能，整个过程中一定要注意 上下文的用量，如果满了 AI 可能会断片儿失忆，开始乱改。

因此，在上下文快满的时候，最好让 AI 把当前项目的信息沉淀为文档。这样之后每次打开新的 AI 对话框时，只要把历史文档交给 AI，就能快速找回记忆。

项目收获

通过这个小项目，你可以学到：

• 如何使用 GitHub Copilot 的 Plan 模式进行需求分析和方案设计
• 如何使用 Agent 模式让 AI 自主完成代码开发
• 如何调用 DeepSeek 大模型 API
• 如何用 CSS 实现翻牌动画和星空背景效果
• 如何在 AI 编程中进行人工插手和精细调整
• 如何管理上下文用量，避免 AI 断片儿

这个项目虽然小巧，但完整展示了 Vibe Coding 的核心工作流 —— 用自然语言描述需求，AI 帮你设计方案和编写代码，人工审核和调整细节。掌握了这个流程，你就可以用同样的方式去做更复杂的项目了。