AI 热点监控平台项目 VibeCoding 学习 -未完成 后续要持续更新
Anson
2026-07-09 23:53
阅读276
需求
作为一名程序员，为了与时俱进，想要第一时间获取一些热点信息，不依赖人工搜索, 而是利用工具自动发现，指定的热点变化，或者最新热点，并且及时给用户发送通知，让我能走在信息获取的第一线
💡由于是一个比较轻量化的小需求(工具类项目)，所以打算采用较为捷敏的开发方式，不用过多的人工介入和工程化
具体功能：
- 用户输入要监控的关键词，当这个关键词内容出现，（注意利用 AI识别假冒的内容），并第一时间发送通知
- 每隔一段时间，自动收集用户输入的指定范围，（比如AI 编程）内的热点，并且能够让用户看到
产品的形式：
- 响应式兼容 web 页面
- 封装成 Agent Skills 技能，能够交给其他 AI agent 来监控和发现热点
环境准备
-
Vscode
-
claude code /codex
-
claude sonnet/gpt5.4 大模型
-
扩展 MCP (mcp 就是让 ai 获取外部的数据，操作外部的系统，增强 ai 的能力 )
-
Firecrawl MCP 网页内容抓取
-
context7 获取最新的文档，防止 AI 使用过时代码
-
需要安装的 skills（skill 就是 给 ai 快速学各种专业技能，各种技能生成包，本质是一份代码脚本和说使用明书）
-
UI UX Pro Max 专门用来美化前端页面的技能，因为我们要开发 web 页面
-
Skills Creator 专门能帮你制作新的技能，也我们要把工具封装成 Agent Skills 技能，所以可以用它来开发规范技能，让各种 AI 工具能识别
-
mcp= 食材 + skills= 配方 ==> 结果
-
在 skill.sh ,找到 find skills 这个技能的安装地址进行安装，安装以后可以用这个 skill 安装其他 skills
-
找不到直接手动安装
-
npx skills add anthropics/skills --skill skill-creator -g -y
-
在 终端里
npx ctx7@latest setup- 跟着一步步往下走，需要先去官网注册
方案设计
由于项目不复杂，不写专业提示词，让 AI 帮我们根据需求设计方案就好，提示词中一定要包含“人工确认”这四个字
▼markdown复制代码你是一位专业的程序员，现在请你根据需求，帮我设计方案，人工确认，分步骤完成开发，执行测试，帮我验收 ## 需求 作为一名程序员，为了与时俱进，想要第一时间获取一些热点信息，不依赖人工搜索, 而是利用工具自动发现，指定的热点变化，或者最新热点，并且及时给用户发送通知，让我能走在信息获取的第一线 💡由于是一个比较轻量化的小需求(工具类项目)，所以打算采用较为捷敏的开发方式，不用过多的人工介入和工程化 具体功能： - 用户输入要监控的关键词，当这个关键词内容出现，（注意利用 AI识别假冒的内容），并第一时间发送通知 - 每隔一段时间，自动收集用户输入的指定范围，（比如AI 编程）内的热点，并且能够让用户看到 产品的形式： - 响应式兼容 web 页面 - 封装成 Agent Skills 技能，能够交给其他 AI agent 来监控和发现热点 ## 注意事项 1. 前端页面足够独特，不要千篇一律 2. 你需要先完成网页版，确保功能正常使用之后，再开发 Agent skills 3. 项目需要利用 AI 来识别热点，请你理由 Openrouter 来对接 AI 服务，帮我快速把 AI 接入到项目中
把需求给了 ai 以后，问了我 4 个问题，我如下回答
▼markdown复制代码Plan阶段共问了 4 个问题（同一组问题触发了 3 次，可能是页面重试）： 1. [通知方式] 你希望使用哪种通知方式？- 浏览器推送通知 / 邮件通知 / 应用内通知 2. [API密钥] 你是否已有 OpenRouter API 密钥？ - 已有密钥 / 需要注册 / 使用其他AI服务 3. [部署] 项目部署方式？ - 本地运行 / 云服务器部署 / 暂不考虑 4. [数据源] 你最关注哪些数据源？ - Hacker News / Reddit / GitHub Trending / RSS订阅
然后在生成文档中，我修改了一下技术方案，要求要用 vue 做前端，以及要用 python 做后端，因为个人比较熟悉，以及告知了，项目热点查询频率为 30 分钟，最后生成了以下方案
▼text复制代码# AI热点监控工具 - 技术方案设计 ## Context 用户希望构建一个轻量级的AI热点监控工具，能够自动跟踪关键词和行业热点，并及时发送通知。这是一个工具类项目，采用敏捷开发方式，需要较少的人工介入。项目分为两个阶段：先开发Web版本验证功能，再封装成Agent Skills供AI agent使用。 ## 技术架构选型 ### 前端技术栈 - **框架**: Vue 3 + Vite（快速启动，轻量级） - **样式**: 原生CSS（手工打造独特视觉风格，符合design_sense中的warm paper风格） - **状态管理**: Vue Composition API（项目简单，无需Pinia） - **UI风格**: - 温暖的纸质背景色调（#F6F1E8） - 琥珀色强调色（#C8853F） - 粗体slab衬线标题 + Inter正文 - 卡片式布局，带柔和阴影 ### 后端技术栈 - **框架**: Python + FastAPI - **数据存储**: SQLite（轻量级，无需额外数据库服务） - **ORM**: SQLAlchemy - **定时任务**: APScheduler - **爬虫**: httpx + beautifulsoup4（或playwright用于复杂页面） - **通知**: - 邮件通知（aiosmtplib）- 首选通知方式 - Web推送通知（pywebpush）- 浏览器实时通知 ### AI服务集成 - **提供商**: OpenRouter（用户已有API密钥） - **用途**: 1. 识别假冒/无关内容（过滤噪音） 2. 提取热点摘要 3. 评估内容相关性 4. 多信息源数据聚合去重 ### 热点数据源 - **网页搜索爬虫**: Google搜索（httpx + beautifulsoup4，控制频率） - **Twitter(X) API**: 通过twitterapi.io接入 - **免费API**: Hacker News, GitHub Trending - **可选**: RSS订阅（技术博客） - **查询频率**: - 关键词监控: 每30分钟执行一次 - 热点收集: 每30分钟执行一次 ## 项目结构 ai_trending_tool/ ├── frontend/ # Vue前端 │ ├── src/ │ │ ├── components/ # 组件 │ │ ├── views/ # 页面视图 │ │ ├── services/ # API调用 │ │ ├── assets/ # 静态资源 │ │ └── styles/ # 样式文件 │ ├── public/ # 公共资源 │ ├── package.json │ └── vite.config.js ├── backend/ # Python FastAPI后端 │ ├── app/ │ │ ├── api/ # API路由 │ │ ├── services/ # 业务逻辑 │ │ │ └── scrapers/ # 数据源爬虫 │ │ ├── jobs/ # 定时任务 │ │ ├── db/ # 数据库模型 │ │ ├── ai/ # AI服务集成 │ │ └── main.py # 应用入口 │ ├── requirements.txt │ └── .env ├── skills/ # Agent Skills（第二阶段） │ └── trending-monitor.json └── README.md ## 核心功能实现 ### 1. 关键词监控 **流程**: 1. 用户在Web界面输入关键词和监控范围 2. 后端定时任务（每30分钟）抓取数据源 3. 使用OpenRouter AI判断内容是否真实相关 4. 匹配成功则存储并触发通知 **AI Prompt示例**:
判断以下内容是否真正与关键词"{keyword}"相关， 排除标题党、假冒、无关内容。 返回JSON: {relevant: boolean, reason: string, confidence: number}
▼text复制代码### 2. 热点收集 **流程**: 1. 用户设置监控领域（如"AI编程"） 2. 定时任务（每30分钟）从多个数据源抓取 3. AI聚合、去重、排序热点 4. 生成热点摘要存入数据库 5. 前端展示热点列表（按时间/热度排序） **AI Prompt示例**:
从以下内容中提取"{domain}"领域的前10个热点， 排除重复、过时、无关内容。 返回JSON数组: [{title, summary, source, score, tags}]
▼text复制代码### 3. 通知系统 - **邮件通知**: aiosmtplib发送即时通知和每日摘要（首选） - **Web推送**: pywebpush + Service Worker（浏览器实时通知） - **应用内通知**: WebSocket实时推送（FastAPI WebSocket） ### 4. 数据持久化 **数据表设计**: - `keywords`: 关键词配置 - `trending_items`: 热点内容 - `notifications`: 通知记录 - `user_settings`: 用户配置 ## 开发步骤 ### 阶段1: Web版本（MVP） 1. **初始化项目结构** - 创建前后端项目 - 配置构建工具 - 设置开发环境 2. **后端核心开发** - 数据库schema设计和初始化 - OpenRouter集成（ai/openrouter.py） - 数据源爬虫（services/scrapers/） - RESTful API（api/routes.py） - 定时任务（jobs/scheduler.py，每30分钟执行） 3. **前端核心开发** - 响应式布局（支持桌面/移动） - 关键词管理页面 - 热点展示页面 - 通知设置页面 - 独特的视觉设计实现 4. **集成与测试** - 前后端联调 - AI识别准确性测试 - 通知功能测试 - 响应式适配测试 ### 阶段2: Agent Skills封装 1. **Skills定义** - 监控关键词技能 - 获取热点技能 - 配置管理技能 2. **Skills实现** - 复用后端API - 定义skill schema - 编写skill prompt - 测试skill调用 ## 技术细节 ### OpenRouter集成 ```python # backend/app/ai/openrouter.py import httpx import os async def analyze_content(prompt: str, content: str) -> str: async with httpx.AsyncClient() as client: response = await client.post( 'https://openrouter.ai/api/v1/chat/completions', json={ 'model': 'anthropic/claude-sonnet-4.6', 'messages': [ {'role': 'system', 'content': prompt}, {'role': 'user', 'content': content} ] }, headers={ 'Authorization': f"Bearer {os.getenv('OPENROUTER_API_KEY')}", 'HTTP-Referer': os.getenv('APP_URL'), 'X-Title': 'AI Trending Monitor' } ) return response.json()['choices'][0]['message']['content'] ### 数据源爬虫示例 **1. Hacker News** ```python # backend/app/services/scrapers/hackernews.py import httpx async def fetch_hn_trending(): async with httpx.AsyncClient() as client: top_stories = await client.get('https://hacker-news.firebaseio.com/v0/topstories.json') ids = top_stories.json()[:30] stories = [] for story_id in ids: story = await client.get(f'https://hacker-news.firebaseio.com/v0/item/{story_id}.json') stories.append(story.json()) return stories
2. Google搜索爬虫
▼python复制代码# backend/app/services/scrapers/google.py import httpx from bs4 import BeautifulSoup from urllib.parse import quote async def search_google(keyword: str): async with httpx.AsyncClient() as client: headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' } url = f'https://www.google.com/search?q={quote(keyword)}&tbm=nws' response = await client.get(url, headers=headers) soup = BeautifulSoup(response.text, 'html.parser') results = [] for item in soup.select('.SoaBEf'): title = item.select_one('.mCBkyc') link = item.select_one('a') snippet = item.select_one('.GI74Re') if title and link: results.append({ 'title': title.get_text(), 'link': link.get('href'), 'snippet': snippet.get_text() if snippet else '' }) return results **3. Twitter(X) API** ```python # backend/app/services/scrapers/twitter.py import httpx import os async def search_twitter(keyword: str, limit: int = 20): async with httpx.AsyncClient() as client: response = await client.get( 'https://api.twitterapi.io/v1/tweets/search', params={'query': keyword, 'max_results': limit}, headers={'Authorization': f"Bearer {os.getenv('TWITTER_API_KEY')}"} ) return response.json().get('data', []) ### 关键词匹配AI判断 ```python import json async def is_relevant_to_keyword(keyword: str, item: dict) -> bool: prompt = f'判断以下内容是否真正与关键词"{keyword}"相关...' result = await analyze_content(prompt, json.dumps(item)) parsed = json.loads(result) return parsed['relevant'] and parsed['confidence'] > 0.7 ## 验证计划 ### 功能测试 1. **关键词监控测试** - 添加关键词"Claude" - 等待30分钟触发监控任务 - 验证AI能正确识别相关内容 - 验证通知是否送达 2. **热点收集测试** - 配置"AI编程"领域 - 手动触发热点收集 - 验证AI提取的热点质量 - 验证前端展示效果 3. **响应式测试** - 桌面浏览器（1920x1080） - 平板（768x1024） - 手机（375x667） ### 性能测试 - 爬虫任务执行时间 - AI响应时间 - 前端加载速度 ## 环境变量 ```env # OpenRouter（用户已有） OPENROUTER_API_KEY=your_openrouter_key # Twitter API (twitterapi.io) TWITTER_API_KEY=your_twitter_api_key # 邮件通知（必需） SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=your_email@gmail.com SMTP_PASS=your_app_password NOTIFICATION_EMAIL=your_notification_email@gmail.com # Web Push（可选） VAPID_PUBLIC_KEY= VAPID_PRIVATE_KEY= VAPID_SUBJECT=mailto:your_email@example.com # 应用配置 APP_URL=http://localhost:5173 BACKEND_PORT=8000 FRONTEND_PORT=5173 # 定时任务配置 MONITOR_INTERVAL_MINUTES=30 ## 关键文件清单 ### 需要创建的核心文件 1. `backend/app/ai/openrouter.py` - OpenRouter集成 2. `backend/app/services/scrapers/google.py` - Google搜索爬虫 3. `backend/app/services/scrapers/twitter.py` - Twitter API集成 4. `backend/app/services/scrapers/hackernews.py` - Hacker News爬虫 5. `backend/app/services/scrapers/__init__.py` - 数据源聚合器 6. `backend/app/services/notifier.py` - 通知服务（邮件+Web Push） 7. `backend/app/jobs/scheduler.py` - 定时监控任务（每30分钟） 8. `backend/app/db/models.py` - 数据库模型 9. `backend/app/db/database.py` - 数据库连接 10. `backend/app/main.py` - FastAPI应用入口 11. `frontend/src/views/Dashboard.vue` - 主仪表盘 12. `frontend/src/views/Keywords.vue` - 关键词管理 13. `frontend/src/components/TrendingCard.vue` - 热点卡片组件 14. `frontend/src/styles/theme.css` - 独特视觉风格（warm paper主题） ## 风险与挑战 1. **AI识别准确性**: 需要调优prompt，可能需要多轮测试 2. **数据源限流**: - Google搜索爬虫易被检测，需要添加延迟和User-Agent伪装 - Twitter API有rate limit，需要实现请求队列 3. **通知可靠性**: - Web Push需要用户授权 - 邮件可能进垃圾箱，需要配置SPF/DKIM 4. **成本控制**: - OpenRouter API调用需要监控用量 - twitterapi.io收费（需确认套餐） 5. **多信息源聚合**: 需要AI有效去重和排序 ## 下一步行动 待用户确认方案后，按以下顺序执行： 1. 初始化项目结构和依赖 2. 实现后端核心功能 3. 实现前端界面 4. 集成测试 5. 部署并收集反馈 6. 开发Agent Skills（第二阶段）
我开了，全自动模式，不要求 ai 每次编辑都询问，但在每次做完一个 task，都要询问我是否继续，我会手动的压缩一下上下文，/compact 去节约 token 用量，中途有些比较需要权限的 bash 任务 AI 也会顺问我，完成以后 我给 AI 提出了，
最后 ai 完成了，我让他写一个启动和对那些东西进行配置的文档，语句如下，
“我想知道该如何启动项目，以及我哪些需要配置，写在一个 markdown 文档里”
▼markdown复制代码# 启动指南 ## 环境要求 - Python 3.10+ - Node.js 18+ - pip / npm --- ## 1. 配置环境变量 编辑 `backend/.env`，填入以下配置： env # ✅ 必填 —— 没有这个 AI 分析和摘要功能无法运行 OPENROUTER_API_KEY=sk-or-... # ⚙️ 必填（如果启用邮件通知） SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=your_email@gmail.com # Gmail 账号 SMTP_PASS=xxxx xxxx xxxx xxxx # Gmail 应用专用密码（不是登录密码） NOTIFICATION_EMAIL=you@example.com # 接收通知的邮箱 # 🐦 可选 —— Twitter 数据源（当前已停用，保留字段兼容旧配置） TWITTER_API_KEY= # 🔔 可选 —— Web Push 浏览器推送（不填则禁用） VAPID_PUBLIC_KEY= VAPID_PRIVATE_KEY= VAPID_SUBJECT=mailto:you@example.com # 🔧 通常不需要改 APP_URL=http://127.0.0.1:5173 BACKEND_PORT=8000 MONITOR_INTERVAL_MINUTES=30 建议本地开发时前后端统一使用同一种主机名，推荐全部使用 `127.0.0.1`，避免 `localhost` / `127.0.0.1` 混用导致代理或 CORS 判断不一致。 ### Gmail 应用专用密码获取方式 1. 打开 Google 账号 → 安全性 → 两步验证（需先开启） 2. 搜索"应用专用密码" → 选择"邮件" → 生成 3. 将生成的 16 位密码填入 `SMTP_PASS` --- ## 2. 启动后端 ```bash cd backend # 首次运行：安装依赖（建议在虚拟环境中） pip install -r requirements.txt # 启动服务（默认端口 8000） uvicorn app.main:app --reload --port 8000
启动成功后会看到：
▼text复制代码INFO: Uvicorn running on http://0.0.0.0:8000 INFO: Scheduler started 数据库文件 `trending_monitor.db` 会自动创建。 --- ## 3. 启动前端 新开一个终端窗口： ```bash cd frontend # 首次运行：安装依赖 npm install # 启动开发服务器（默认端口 5173） npm run dev 打开浏览器访问：**http://127.0.0.1:5173** --- ## 4. 功能验收 | 页面 | 验证项 | |------|--------| | 热点页 | 空列表正常显示，"触发监控"按钮可点击 | | 关键词页 | 添加 / 暂停 / 删除关键词 | | 设置页 | 保存邮箱配置，发送测试邮件 | 添加关键词后，点击"触发监控"可立即测试（无需等待 30 分钟定时任务）。 --- ## 5. 功能开关说明 | 功能 | 依赖配置 | 未配置时的行为 | |------|---------|--------------| | AI 内容分析 | `OPENROUTER_API_KEY` | 监控任务报错，内容不会被分析 | | 邮件通知 | `SMTP_*` + 设置页开启 | 发送静默失败，不影响其他功能 | | Twitter 数据源 | `TWITTER_API_KEY` | 当前已停用，不参与采集 | | Web Push | `VAPID_*` | 禁用，不影响邮件和应用内通知 | | Hacker News | 无需配置 | 始终可用 | | Bing 新闻 | 无需配置 | 始终可用（注意频率限制） | --- ## 6. 常见问题 **后端启动报 `ModuleNotFoundError`** → 确认已激活虚拟环境，或重新执行 `pip install -r requirements.txt` **前端访问报 `502 Bad Gateway` / API 请求失败** → 确认后端已在 8000 端口运行 **测试邮件发送失败** → 检查 `SMTP_PASS` 是否为应用专用密码（非 Gmail 登录密码）；确认 Gmail 已开启两步验证 **`OPENROUTER_API_KEY` 未填时触发监控** → 后端日志会显示 API 错误，热点列表保持空，属于正常降级行为 **Bing 新闻抓不到内容** → 先确认关键词本身有相关新闻；如果页面结构变动，日志里会看到 Bing 解析错误，后端会返回空列表
#展示初步完成效果
前端美化
==== 从这里开始我换了模型 用 codex gpt5.4 写的，因为 claude 太贵了
Ai 设计前端千篇一律，使用前端美化技能，并人工指定UI风格，让界面更新颖
- 前端美化技能UI UX pro max
- 人工提示词，指定风格
- Aceternity UI 组件库，做酷炫效果，
因为大模型训练时，看到大量 自然背景，圆角卡片，通用图标，所以形成了一种默认审美，要消除核心思路是约束
- 指定色彩方案
- 指定 UI 库
- 注入情感和场景，告诉 AI 产品调性，如科技感，极客风
- 使用前端美化技能：让AI 参考专业的 UI/UX 设计规范
写给 AI 的提示词
▼plain复制代码目前的界面风格过于死板(米白配色+传统布局)，请在保证功能易用的前提下，帮我优化前端页面。 你需要利用前端美化技能(ui ux pro max)进行设计开发，并且必须采用 Aceternity UI 组件库（通过 Context7 插件来获取最新的用法），来增强网站的科技感，但注意不要过于花里胡哨，影响了页面的正常加载或使用 我自己是一位 AI 编程程序员，最求简介高效，直观酷炫，充满科技感的页面，我急切地想要发现热点，想要第一时间给大家分享有价值的内容，你需要感受我的情绪，让前端页面体现出来
如果ai卡住了，报错了，可能是重构的代码量较多，可能会出现网络中断的情况，如果一直中断，最好换个模型，或者让 ai 拆分一下任务再继续执行
项目地址
评论
问答助学
相关内容
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
