docs: 新增 AI 热点监控、GitHub 文档翻译、AI 塔罗占卜项目实战文章，完善教程体系
- 合并 AI 热点监控工具的口播文案和项目总览为一篇项目实战文章 - 合并 GitHub 文档翻译工具的口播文案和项目总览为一篇项目实战文章 - 从 VSCode + Copilot 文章中抽取塔罗占卜项目为独立实战文章 - 更新进阶企业级 AI 编程实战项目，新增热点监控和文档翻译项目 - 补充 AI IDE 插件文章中 GitHub Copilot 的深度介绍和国产插件推荐 - 调整编程工具大全、项目实战导读等总览类文章的关联引用 - 统一超链接为文字引导风格，符合教程创作规范 Made-with: Cursor
This commit is contained in:
liyupi
@@ -121,6 +121,7 @@
|
||||
|
||||
工具实战板块主要讲解特定工具的使用方法和实战案例，可以根据需要选择性学习。
|
||||
|
||||
- **VSCode + GitHub Copilot 实战**：从安装到实战的完整教程，涵盖 Agent 模式、MCP 管理、Skills 技能包、自定义智能体等核心特性
|
||||
- **规范驱动开发**：Spec-kit、OpenSpec 的详细使用教程
|
||||
- **AI 技能库**：Agent Skills、Superpowers 的安装和进阶用法
|
||||
- **命令行工具实测**：OpenCode、Gemini CLI、TRAE SOLO 等工具的实战评测
|
||||
|
||||
@@ -112,13 +112,15 @@ Claude Code 是 Anthropic 推出的 AI 编程助手，原本是独立的命令
|
||||
|
||||
### GitHub Copilot
|
||||
|
||||
[GitHub Copilot](https://github.com/features/copilot) 是最成熟的 AI 编程助手，支持 VS Code、JetBrains 全系列、Vim、Neovim 等多个编辑器。
|
||||
[GitHub Copilot](https://github.com/features/copilot) 是最成熟的 AI 编程助手之一，支持 VS Code、JetBrains 全系列、Vim、Neovim 等多个编辑器。
|
||||
|
||||
主要功能是代码补全，当你写代码时会自动提示下一行要写什么。还有 Copilot Chat 功能，可以在侧边栏和 AI 对话。
|
||||
除了代码补全和 Chat 对话之外，GitHub Copilot 现在已经支持了非常强大的 Agent 模式、Plan 模式、MCP 服务管理、Agent Skills 技能包、自定义智能体、Hooks 自动化脚本等核心特性，体验上堪称 “六边形战士”。
|
||||
|
||||
|
||||
|
||||
它的优点是成熟稳定、代码补全质量很高、跨平台支持。最关键的是，学生和开源贡献者可以免费使用。
|
||||
它的优点是成熟稳定、代码补全质量高、跨平台支持、支持最新的 AI 大模型随便切换。最关键的是，学生和开源贡献者可以免费使用，新用户还有 30 天 Pro 免费试用。
|
||||
|
||||
鱼皮写了一篇非常详细的 VSCode + GitHub Copilot 实战教程，涵盖了从安装到核心特性的方方面面，感兴趣的可以去本教程编程工具板块的「工具实战」中阅读《VSCode + GitHub Copilot：微软全家桶的 AI 编程实战》。
|
||||
|
||||
|
||||
|
||||
@@ -213,11 +215,12 @@ Console Ninja 能让你在编辑器里直接看到代码的运行结果，不用
|
||||
## 五、怎么选择 AI IDE 插件？
|
||||
|
||||
- 如果想要最强大的功能（智能体、多文件编辑），选 Cline。它支持 VS Code 和 JetBrains，完全免费，功能接近 Cursor。
|
||||
- 如果主要需要代码补全，选 GitHub Copilot。它最成熟稳定，代码补全质量最高，而且跨平台支持。
|
||||
- 如果想要全面的 AI 编程体验，选 GitHub Copilot。它不仅代码补全质量最高，现在还支持 Agent 模式、MCP、Skills 等核心能力，而且学生和开源贡献者可以免费使用。
|
||||
- 如果你已经订阅了 JetBrains，直接用 JetBrains AI Assistant，因为它和 IDE 的集成最好。
|
||||
- 如果想要轻量级的工具，选 Continue。
|
||||
- 如果想要轻量级、开源免费的工具，选 Continue。它功能和 Cline 类似但更简洁，支持多种 AI 模型，有代码补全、对话、代码编辑等能力，上手容易。
|
||||
- 如果你习惯用国产工具，也可以试试智谱 CodeGeeX、通义灵码等国产 AI 插件，对国内网络环境更友好，部分功能免费。
|
||||
|
||||
我现在用 IDE 插件的频率不是很高，之前主要用 Cline（功能全面 + 免费）、GitHub Copilot（代码补全质量高）还有一些国产的 AI 插件，比如智谱 CodeGeex、通义灵码之类的。
|
||||
我之前一直沉迷于 Cursor 和 Claude Code，最近做新项目认真体验了一把 GitHub Copilot，发现它在 Agent 编程、MCP 管理、Skills 集成等方面的体验确实很好。如果你本来就在用 VSCode，装个 Copilot 插件就能无缝升级到 AI 编程，使用门槛是最低的。当然，每个人的使用习惯不同，建议都试试再做选择。
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -677,7 +677,7 @@ tools: ['search', 'search/codebase', 'edit/editFiles']
|
||||
|
||||
|
||||
|
||||
就写到这，吃饭去了，觉得有用的话记得收藏这篇文章，也欢迎在评论区聊聊你喜欢用哪款 AI 编程工具，帮到更多同学做选择。
|
||||
就写到这，觉得有用的话记得收藏这篇文章，也欢迎在评论区聊聊你喜欢用哪款 AI 编程工具，帮到更多同学做选择。
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
如果你不知道做什么项目，可以先看看项目灵感大全，里面有 100 个项目创意，总有一个能激发你的兴趣。
|
||||
|
||||
对于想深入学习的同学，可以在完成基础项目后，继续学习《企业项目开发流程》，了解真实的商业项目是如何开发的。或者学习 [鱼皮的原创项目](https://www.codefather.cn/post/1797431216467001345)，跟着完整的视频和图文教程做出完整的企业级项目。
|
||||
对于想深入学习的同学，可以在完成基础项目后，继续学习《企业项目开发流程》，了解真实的商业项目是如何开发的。或者学习 [鱼皮的原创项目实战教程](https://www.codefather.cn/post/1797431216467001345)，跟着保姆级视频和图文教程做出完整的企业级项目。比如 [AI 热点监控工具](https://www.codefather.cn/course/2026625439052627970)（基于 GitHub Copilot）和 [GitHub 文档翻译工具](https://www.codefather.cn/course/2014303010343092226)（基于 Cursor）都是很好的 Vibe Coding 实战项目，代码完全开源，零基础也能跟着做出来。
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -45,6 +45,56 @@
|
||||
|
||||
|
||||
|
||||
### AI 热点监控工具
|
||||
|
||||
基于 Express 5 + React 19 + OpenRouter + Socket.io 开发的 AI 热点监控工具，以 Vibe Coding 为核心，全程使用 VSCode + GitHub Copilot 进行 AI 编程。系统自动从 Twitter、Bing、B 站等 8+ 信息源聚合抓取内容，利用 AI 进行真假识别和相关性分析，通过 WebSocket 实时推送和邮件通知。还将热点监控能力封装为 Agent Skills 技能包。
|
||||
|
||||
适合人群：想快速体验 Vibe Coding 全流程、学习工具类产品开发的同学，零基础也能跟着做。
|
||||
|
||||
[👉🏻 点击开始学习](https://www.codefather.cn/course/2026625439052627970)
|
||||
|
||||
技术亮点：
|
||||
|
||||
- VSCode + GitHub Copilot AI 编程
|
||||
- MCP 插件（Firecrawl + Context7）
|
||||
- Agent Skills 开发
|
||||
- OpenRouter 统一接入多种大模型
|
||||
- 多数据源聚合爬虫
|
||||
- WebSocket 实时推送
|
||||
- Query Expansion 查询扩展
|
||||
- Aceternity UI 科技感前端
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### GitHub 文档翻译工具
|
||||
|
||||
基于 Next.js + GitHub App + OpenRouter 开发的 GitHub 仓库 AI 文档翻译 SaaS 平台，以 Vibe Coding 为核心，全程使用 Cursor 进行 AI 编程。输入任意 GitHub 仓库地址，AI 自动将文档翻译成 20 种语言并创建 PR，还支持 Webhook 自动增量翻译。
|
||||
|
||||
适合人群：想学 AI 编程做出海工具、SaaS 产品，掌握 GitHub App 开发的同学。
|
||||
|
||||
[👉🏻 点击开始学习](https://www.codefather.cn/course/2014303010343092226)
|
||||
|
||||
技术亮点：
|
||||
|
||||
- Cursor AI 编程 + MCP 插件
|
||||
- Next.js 全栈一体化架构
|
||||
- GitHub App 安全授权
|
||||
- GitHub Webhook 增量翻译
|
||||
- OpenRouter 统一接入多种大模型
|
||||
- Prisma ORM 类型安全数据库
|
||||
- Ngrok 内网穿透调试
|
||||
- Vercel 一键部署上线
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### AI 零代码应用生成平台
|
||||
|
||||
基于 Spring Boot + LangChain4j + LangGraph4j + Vue 3 开发的企业级 AI 代码生成平台，对标大厂。这是一个以 AI 开发 + 后端架构为核心的微服务全栈项目，实战 AI 智能体、AI 工作流、多种设计模式、Spring Cloud + Dubbo 微服务架构、多维度系统优化等。
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
# Cursor - GitHub 文档翻译工具项目实战
|
||||
|
||||
这是一套以 AI 编程实战为核心的项目教程，基于 Next.js + GitHub App + OpenRouter，用 AI 编程的方式从 0 到 1 开发一个《GitHub 仓库 AI 文档翻译 SaaS 平台》，带你亲身体验 Vibe Coding 的完整工作流，学会用 AI 做出真正能用、能部署、能赚钱的产品！
|
||||
|
||||
项目代码免费开源：https://github.com/liyupi/github-global
|
||||
|
||||
完整视频教程 + 文字教程（预计 3 ~ 5 天学完）：https://www.codefather.cn/course/2014303010343092226
|
||||
|
||||
项目介绍视频：https://bilibili.com/video/BV1mAAmzqEfP
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 项目介绍
|
||||
|
||||
鱼皮开源了一套 AI 编程教程仓库 [ai-guide](https://github.com/liyupi/ai-guide)，包含了上百个中文教程文档。为了让海外用户也能看到，想把仓库翻译成多语言版本，但人工翻译成本太高，GitHub Actions 又要自己折腾配置……
|
||||
|
||||
既然如此，**不如做一个更通用的工具**。
|
||||
|
||||
这就是 GitHub Global 项目的起点：输入任意一个 GitHub 仓库地址，AI 自动将文档翻译成多种语言，并在基准语言内容发生变更时自动增量同步翻译，生成 PR 等待仓库负责人合并，全程无需人工干预。
|
||||
|
||||
不需要人工翻译、不需要配环境、不需要折腾什么 GitHub Actions 工作流，直接在平台上操作，轻松帮你的开源项目出海。
|
||||
|
||||
**零配置，一键翻译，让你的 GitHub 项目走向全球！**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 项目功能演示
|
||||
|
||||
1）用 GitHub 账号一键登录
|
||||
|
||||
基于 GitHub App 实现安全登录与授权，比传统 OAuth App 权限更细粒度，Token 1 小时自动过期，更安全。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2）导入 GitHub 仓库
|
||||
|
||||
输入 GitHub 仓库地址，点击导入，平台就会自动拉取你的仓库信息，方便后续配置翻译。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3）配置翻译，灵活选择翻译范围
|
||||
|
||||
可以自由选择要翻译成哪些语言（支持英语、法语等 20 种主流语言），还能通过可视化的文件树勾选要翻译哪些文档。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4）一键执行翻译，自动提交 PR
|
||||
|
||||
点击翻译，AI 调用 OpenRouter 大模型执行翻译任务，前端实时展示进度状态：
|
||||
|
||||
|
||||
|
||||
翻译完成后自动创建 GitHub 代码合并请求，仓库负责人可以选择是否合并，既方便又安全：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5）自动触发增量翻译
|
||||
|
||||
开启「自动翻译」开关后，每当往仓库推送了新的文档变更，GitHub Webhook 会自动通知平台，系统只翻译「在翻译范围内且发生了变更」的文件，省时省钱：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6）自定义大模型和 API Key
|
||||
|
||||
平台默认提供了免费的 AI 翻译额度，也可以在设置页面配置自己的 OpenRouter API Key，从排行榜前 20 的主流大模型中自由选择翻译模型（支持 GPT、Claude、Gemini、DeepSeek 等）：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 项目收获
|
||||
|
||||
本项目选题新颖，紧跟 AI 编程时代，以真实 SaaS 产品开发为导向，区别于增删改查的烂大街项目。你不是在写代码，而是在用 AI 做一个真正有价值的产品。
|
||||
|
||||
项目以 Vibe Coding 为核心，99% 以上的代码都是 AI 写的，主要用的是 Cursor 这款 AI 编程工具，搭配了 firecrawl-mcp 联网搜索、context7 获取最新技术文档这两个 MCP 扩展，前端页面还用了 ui-ux-pro-max 这个 Agent Skills 来生成更精美的 UI。
|
||||
|
||||
整个项目累积不到 1 天就做完并且上线让大家都能访问了！
|
||||
|
||||
从这个项目中你可以学到：
|
||||
|
||||
- 如何用 AI 进行需求调研，生成专业的《需求规格文档》？
|
||||
- 如何用多 AI 并行的方式，同时开发前端和后端？
|
||||
- 如何与 GitHub App 对接，实现安全的 OAuth 授权和仓库操作？
|
||||
- 如何接入 OpenRouter，统一对接数百种 AI 大模型？
|
||||
- 如何使用 GitHub API 获取仓库文件树、提交文件、创建 PR？
|
||||
- 如何通过 GitHub Webhook 实现事件驱动的自动化翻译？
|
||||
- 如何使用内网穿透工具，在本地调试 Webhook 回调？
|
||||
- 如何用 Vercel 部署 Next.js 全栈项目，快速上线？
|
||||
- 如何在 AI 开发流程中进行代码审查、版本控制和问题修复？
|
||||
- 如何识别竞品差异化机会，设计真正有竞争力的产品？
|
||||
|
||||
|
||||
|
||||
## 功能梳理
|
||||
|
||||
该项目功能丰富，涵盖用户认证、仓库管理、翻译配置、翻译执行、变更同步 5 大模块，20+ 功能点，覆盖了真实 SaaS 产品的核心业务场景。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## AI 编程开发流程
|
||||
|
||||
这个项目遵循最主流的 AI 应用开发流程：
|
||||
|
||||
第一步，给 AI 写一段需求调研的提示词，让它联网搜索竞品、分析差异化机会，最后生成需求规格文档。
|
||||
|
||||
第二步，让 AI 设计技术方案，确定用 Next.js 全栈加 TypeScript、数据库用 MySQL 加 Prisma、AI 接入走 OpenRouter。
|
||||
|
||||
第三步最关键，开了两个 AI 窗口，一个写后端、一个写前端，后端先出接口文档给前端，两边并行开发。写完了再开一个窗口专门做测试验收和修 Bug。
|
||||
|
||||
跑通核心业务流程之后，就开始做各种扩展功能。建议每做完一个阶段都用 Git 提交代码，防止 AI 后面乱改把项目搞崩。为了防止上下文过多导致 AI 断片儿和浪费 Tokens，做扩展功能的时候按需开新的 AI 对话窗口，把需求文档、方案文档丢给 AI，再让它分析一下已有的项目源码，AI 就能快速找回记忆，接着干活。
|
||||
|
||||
最后通过 Vercel 一键部署上线，整个项目累积不到 1 天就做完并且上线了！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 核心业务流程
|
||||
|
||||
用户使用流程非常简单：登录 GitHub 账号 → 导入仓库 → 配置翻译范围和语言 → 一键翻译 → 审核合并 PR，几分钟搞定。
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[GitHub 账号登录] --> B[安装 GitHub App 授权]
|
||||
B --> C[输入仓库地址导入]
|
||||
C --> D[可视化选择翻译文件]
|
||||
D --> E[选择目标语言 + AI 模型]
|
||||
E --> F[点击开始翻译]
|
||||
F --> G[AI 调用 OpenRouter 翻译]
|
||||
G --> H[实时展示翻译进度]
|
||||
H --> I[自动创建 PR]
|
||||
I --> J{仓库负责人审核}
|
||||
J -->|合并| K[多语言文档上线]
|
||||
J -->|拒绝| L[不合并，保留原文]
|
||||
|
||||
style A fill:#e3f2fd,stroke:#1976d2
|
||||
style G fill:#f3e5f5,stroke:#7b1fa2
|
||||
style I fill:#e8f5e9,stroke:#388e3c
|
||||
style J fill:#fff3e0,stroke:#f57c00
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 技术选型
|
||||
|
||||
本项目以 Next.js 全栈 + TypeScript 为核心，前后端一体，综合运用了多种主流 SaaS 开发技术。
|
||||
|
||||
|
||||
|
||||
前后端：Next.js 15（App Router）、TypeScript、shadcn/ui + Tailwind CSS、Prisma ORM、MySQL、NextAuth.js
|
||||
|
||||
AI 相关：OpenRouter API 统一接入 100+ 大模型、AI 智能翻译、AI 分析 README 结构
|
||||
|
||||
GitHub 对接：GitHub App 细粒度权限控制、GitHub REST API、GitHub Webhook、Octokit
|
||||
|
||||
工具和部署：Ngrok 内网穿透、Vercel 一键部署、Docker 容器化、Git 版本控制
|
||||
|
||||
AI 编程工具：Cursor、MCP 插件（firecrawl-mcp + context7）、Agent Skills（ui-ux-pro-max）
|
||||
|
||||
|
||||
|
||||
## 架构设计
|
||||
|
||||
本项目采用 Next.js 全栈一体化架构，前后端合并在一套代码中，通过 API Routes 提供服务端接口，结合本地任务队列处理耗时的翻译任务，并对接 GitHub API 和 OpenRouter 完成核心业务。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
完整视频教程 + 文字教程（预计 3 ~ 5 天学完）：https://www.codefather.cn/course/2014303010343092226
|
||||
|
||||
|
||||
|
||||
## 推荐资源
|
||||
|
||||
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||
|
||||
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||
|
||||
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||
|
||||
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||
|
||||
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
# 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 官网](https://code.visualstudio.com/) 下载安装包，直接傻瓜式安装。
|
||||
|
||||
|
||||
|
||||
2）打开 VSCode，点击左侧「扩展市场」图标，搜索 "GitHub Copilot"，安装官方的 AI 编程插件。
|
||||
|
||||
|
||||
|
||||
你还可以根据需要，选择安装 Chinese 汉化插件：
|
||||
|
||||
|
||||
|
||||
3）安装完后，点击 VSCode 底部状态栏的 Copilot 图标，按照提示登录 GitHub 账号就行了。
|
||||
|
||||
|
||||
|
||||
如果你还没有 Copilot 订阅，会自动进入 **Copilot Free 免费计划**，每月有一定的 AI 对话和代码补全额度，零门槛上手。想体验完整功能的话，Copilot Pro 支持新用户免费试用 30 天。如果你是在校学生，还可以通过 [GitHub Education](https://education.github.com/pack) 申请学生认证，认证通过后 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 开放平台](https://platform.deepseek.com/api_keys) 获取到的大模型 API Key：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
输入一个问题，测测俺今年的爱情运势，然后点击「开始占卜」：
|
||||
|
||||
|
||||
|
||||
三张塔罗牌依次翻开，下方出现 AI 生成的占卜解读。深紫色的星空背景，搭配金色边框，再加上流畅的翻牌动画，效果还真挺唬人的。
|
||||
|
||||
|
||||
|
||||
我感觉自己也可以开一个塔罗占卜小摊儿了，应该不是错觉。。。
|
||||
|
||||
|
||||
|
||||
如果你对页面的某些细节不满意，可以在内置浏览器中点击「元素选择」按钮，哪里不爽点哪里，然后在 Chat 框里编写提示词就行，比如：
|
||||
|
||||
```
|
||||
改为鱼皮塔罗
|
||||
```
|
||||
|
||||
|
||||
|
||||
Agent 会自动定位到对应的代码并精准修改，改完刷新预览就好。
|
||||
|
||||
|
||||
|
||||
整个过程，从写需求到出成品，也就几分钟。搁以前，我要是自己从零写这么个带动画的占卜网站，怎么着也得搞一下午。
|
||||
|
||||
你还可以继续跟 AI 对话来增加功能，整个过程中一定要注意 **上下文的用量**，如果满了 AI 可能会断片儿失忆，开始乱改。
|
||||
|
||||
|
||||
|
||||
因此，在上下文快满的时候，最好让 AI 把当前项目的信息沉淀为文档。这样之后每次打开新的 AI 对话框时，只要把历史文档交给 AI，就能快速找回记忆。
|
||||
|
||||
|
||||
|
||||
## 项目收获
|
||||
|
||||
通过这个小项目，你可以学到：
|
||||
|
||||
- 如何使用 GitHub Copilot 的 Plan 模式进行需求分析和方案设计
|
||||
- 如何使用 Agent 模式让 AI 自主完成代码开发
|
||||
- 如何调用 DeepSeek 大模型 API
|
||||
- 如何用 CSS 实现翻牌动画和星空背景效果
|
||||
- 如何在 AI 编程中进行人工插手和精细调整
|
||||
- 如何管理上下文用量，避免 AI 断片儿
|
||||
|
||||
这个项目虽然小巧，但完整展示了 Vibe Coding 的核心工作流 —— 用自然语言描述需求，AI 帮你设计方案和编写代码，人工审核和调整细节。掌握了这个流程，你就可以用同样的方式去做更复杂的项目了。
|
||||
@@ -0,0 +1,202 @@
|
||||
# GitHub Copilot - AI 热点监控工具项目实战
|
||||
|
||||
这是一套以 AI 编程实战为核心的项目教程，基于 Express 5 + React 19 + OpenRouter + Socket.io，用 AI 编程的方式从 0 到 1 开发一个《AI 热点监控工具》，带你亲身体验 Vibe Coding 的完整工作流，学会用 AI 快速做出实用的提效工具！
|
||||
|
||||
项目代码免费开源：https://github.com/liyupi/yupi-hot-monitor
|
||||
|
||||
完整视频教程 + 文字教程（预计 2 ~ 5 天学完）：https://www.codefather.cn/course/2026625439052627970
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 项目介绍
|
||||
|
||||
鱼皮作为 AI 编程博主，必须第一时间知道各种大模型更新、行业动态，但人工刷信息太累了，而且经常漏掉重要内容。
|
||||
|
||||
有了这个项目后，只需要输入要监控的关键词（比如 "Claude"、"Vibe Coding"），点击立即扫描，系统就会自动从国内外的 B 站、Bing 等 8 个以上的信息源帮你抓取相关内容。
|
||||
|
||||
抓回来之后，AI 会自动判断信息的真假、分析和关键词的相关性、评估重要程度，还会生成中文摘要，低质量的内容直接过滤掉，只留真正有价值的热点。
|
||||
|
||||
找到新热点的时候，还会通过 WebSocket 实时推送到页面上，重要的热点还会发邮件通知。如果热点太多了也没关系，可以通过筛选和排序快速定位需要的内容。
|
||||
|
||||
更酷的是，整个热点监控能力还被封装成了一个 Agent Skills 技能包，安装后在 Cursor、Claude Code 等各种 AI 编程工具中都能直接用，一句话就能帮你从全网搜索、分析、生成热点报告。
|
||||
|
||||
**让 AI 帮你盯热点，第一时间获取优质信息！**
|
||||
|
||||
|
||||
|
||||
## 项目功能演示
|
||||
|
||||
1）配置监控关键词
|
||||
|
||||
用户输入要监控的关键词，比如 "Vibe Coding"、"Claude" 等，系统会自动开始监控。支持激活 / 暂停单个关键词。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2）AI 自动抓取和分析热点
|
||||
|
||||
系统每 30 分钟自动从 Twitter、Bing、HackerNews、搜狗、B 站、微博等 8+ 个信息源抓取内容，利用 AI 进行查询扩展、真假识别、相关性分析和智能摘要，过滤低质量内容后展示在信息流中。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3）多维度筛选和排序
|
||||
|
||||
支持按信息来源、重要性、时间范围进行筛选，支持按热度综合、相关性、发布时间排序，帮助用户快速定位需要的热点信息。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4）全网搜索
|
||||
|
||||
除了监控关键词的实时热点流外，还可以直接搜索特定的关键词，从全网获取信息：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5）实时通知
|
||||
|
||||
通过 WebSocket 实时推送热点通知，高重要性的热点还会通过邮件通知：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6）Agent Skills 技能包
|
||||
|
||||
将热点监控能力封装为标准的 Agent Skills，安装后在 Cursor、VSCode Copilot、Claude Code 等 AI 编程工具中都能使用：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 项目收获
|
||||
|
||||
本项目选题新颖，紧跟 AI 编程时代，以实用工具开发为导向，区别于增删改查的烂大街项目。你不是在写代码，而是在用 AI 做一个真正有价值的工具。
|
||||
|
||||
项目以 Vibe Coding 为核心，99% 以上的代码都是 AI 写的，主要用的是 VSCode + GitHub Copilot 作为 AI 编程工具，搭配了 Firecrawl MCP 做网页抓取、Context7 MCP 获取最新技术文档，前端页面还用了 UI UX Pro Max 这个 Agent Skills 来美化，配合 Aceternity UI 组件库做出了充满科技感的炫酷界面。
|
||||
|
||||
从这个项目中你可以学到：
|
||||
|
||||
- 如何用 AI 编程从 0 到 1 开发一个完整的工具？
|
||||
- 如何安装和使用 MCP 增强 AI 能力？
|
||||
- 如何安装和使用 Agent Skills 提升 AI 编程质量？
|
||||
- 如何从多个信息源（Twitter、Bing、HN、B 站等）聚合抓取内容？
|
||||
- 如何通过 OpenRouter 接入 AI 大模型，实现智能内容审核？
|
||||
- 如何实现查询扩展（Query Expansion），提高信息检索的召回率？
|
||||
- 如何基于 Socket.io 实现 WebSocket 实时推送？
|
||||
- 如何使用 Aceternity UI 打造炫酷的科技感前端界面？
|
||||
- 如何开发标准化的 Agent Skills 技能包，并在多种 AI 工具中验证？
|
||||
- 如何在 AI 编程中进行人工确认、版本控制和迭代优化？
|
||||
|
||||
|
||||
|
||||
## 功能梳理
|
||||
|
||||
该项目功能丰富，涵盖关键词管理、热点采集和分析、信息展示和筛选、实时通知系统、全网信息源搜索、Agent Skills 六大模块，20+ 功能点，覆盖了从信息采集、AI 智能分析到实时推送通知的完整热点监控闭环。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## AI 编程开发流程
|
||||
|
||||
这个项目遵循最主流的 AI 编程项目开发流程：
|
||||
|
||||
第一步，给 AI 写一段需求描述提示词，让它帮我设计方案。当然，如果你有自己的想法，可以适当发挥一点儿专业性，比如要利用 OpenRouter 来对接 AI 服务。
|
||||
|
||||
第二步，人工确认方案。包括前端、后端、数据存储技术栈，抓取热点数据的范围和方法，发送通知的方法，热点检查频率等，确认没问题后再让 AI 动手写代码。
|
||||
|
||||
第三步，启动开发。AI 会先规划任务列表，一步步完成前后端开发。
|
||||
|
||||
第四步，测试验证。在环境变量文件中配置 API 密钥等信息，然后启动项目点点点~
|
||||
|
||||
跑通核心业务流程之后，就要持续迭代优化。比如先是增加了多个信息来源，能获取到更多国内外的信息。然后发现获取的信息不准确，就设计了多层级过滤机制，并且让 AI 加了查询扩展。前端界面也从千篇一律的蓝紫色优化成了有流星、光影效果的科技感页面。
|
||||
|
||||
建议每做完一个功能就用 Git 提交代码，防止 AI 后面改着改着搞崩了。如果上下文太长了，AI 容易断片儿，就新开一个对话窗口，把需求文档和方案文档丢给 AI，让它重新分析已有代码找回记忆。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 核心业务流程
|
||||
|
||||
整个项目的核心流程：用户配置关键词 → 定时任务触发 → AI 查询扩展 → 多源抓取 → 去重过滤 → AI 分析 → 入库 → 实时推送 / 邮件通知。
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[用户配置监控关键词] --> B[定时任务触发 每30分钟]
|
||||
B --> C[AI 查询扩展 生成关键词变体]
|
||||
C --> D[多数据源并行采集]
|
||||
D --> D1[Twitter API]
|
||||
D --> D2[Bing / Google / DuckDuckGo]
|
||||
D --> D3[HackerNews API]
|
||||
D --> D4[搜狗 / B 站 / 微博]
|
||||
D1 & D2 & D3 & D4 --> E[结果去重 + 7 天新鲜度过滤]
|
||||
E --> F[AI 内容分析]
|
||||
F --> F1{真实性判断}
|
||||
F1 -->|真实| F2{相关性评分}
|
||||
F1 -->|虚假| X[丢弃]
|
||||
F2 -->|>= 50 分| F3[重要性分级 + 摘要生成]
|
||||
F2 -->|< 50 分| X
|
||||
F3 --> G[保存到数据库]
|
||||
G --> H1[WebSocket 实时推送]
|
||||
G --> H2{重要性级别}
|
||||
H2 -->|high / urgent| H3[邮件通知]
|
||||
H2 -->|medium / low| H4[仅站内通知]
|
||||
|
||||
style A fill:#e3f2fd,stroke:#1976d2
|
||||
style F fill:#f3e5f5,stroke:#7b1fa2
|
||||
style G fill:#e8f5e9,stroke:#388e3c
|
||||
style H3 fill:#fff3e0,stroke:#f57c00
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 技术选型
|
||||
|
||||
本项目以 Node.js 全栈 + TypeScript 为核心，前后端分离，涵盖多源爬虫数据采集、AI 大模型内容审核、WebSocket 实时推送、定时任务调度、Aceternity UI 科技感前端、Agent Skills 开发等实用技术。
|
||||
|
||||
|
||||
|
||||
后端：Express 5、TypeScript、Prisma ORM、SQLite、Socket.io、node-cron、Nodemailer
|
||||
|
||||
前端：React 19、Vite 7、Tailwind CSS 4、Framer Motion、Aceternity UI 组件、Socket.io-client
|
||||
|
||||
数据采集：Axios + Cheerio 爬虫、TwitterAPI.io、HackerNews API、B 站公开 API
|
||||
|
||||
AI 相关：OpenRouter API 统一接入多种大模型、AI 内容审核、Query Expansion 查询扩展
|
||||
|
||||
AI 编程工具：VSCode + GitHub Copilot、MCP 插件（Firecrawl + Context7）、Agent Skills（UI UX Pro Max + Skill Creator）
|
||||
|
||||
|
||||
|
||||
## 架构设计
|
||||
|
||||
本项目采用前后端分离架构，前端使用 React + Vite，后端使用 Express + Prisma，通过 REST API 和 WebSocket 通信。通过定时任务引擎来驱动多数据源采集和 AI 分析，Agent Skills 作为独立模块可在多种 AI 编程工具中复用。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
完整视频教程 + 文字教程（预计 2 ~ 5 天学完）：https://www.codefather.cn/course/2026625439052627970
|
||||
|
||||
|
||||
|
||||
## 推荐资源
|
||||
|
||||
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||
|
||||
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||
|
||||
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||
|
||||
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||
|
||||
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||
Reference in New Issue
Block a user