vibe coding | 如何做一个 热点推送工具？

市面上的热点工具大多堆砌流量榜单、掺杂营销内容、无法自定义订阅、推送延迟严重。今天我用标准Vibe Coding（氛围编程）范式，从零搭建一款轻量纯净、可自定义订阅、实时聚合、极简推送的专属热点推送工具。

本项目聚合全网主流热点源，支持分类筛选、热度排序、本地收藏、实时刷新仅用于提升信息检索与浏览效率。

一、大厂视角：热点推送工具的底层工程逻辑

很多人以为热点工具只是“爬取榜单展示列表”，真正工业级热点推送系统，是一套多源数据抓取、热度算法加权、内容降噪、时序去重、优先级推送的完整链路，我用通俗工程语言拆解核心原理：

  • 多源异构数据采集：对接微博、知乎、B站、抖音、科技资讯、行业榜单等多平台接口，统一数据格式，解决信息分散问题

  • 热度权重算法计算：不再直接照搬平台原始排名，通过浏览量、讨论量、涨幅、传播速度加权计算真实热度，过滤水军刷榜、老旧存量热点

  • 内容智能降噪清洗：自动过滤营销词条、娱乐垃圾词条、重复词条、低质热搜，保留高价值资讯与行业动态

  • 时序去重与增量更新：对比历史缓存数据，只推送新增热点、热度飙升热点，避免重复推送冗余信息

  • 个性化订阅推送：支持用户自定义关注分类，只推送感兴趣领域，实现千人千面的精准资讯触达

简单总结：普通热点工具是搬运榜单，自研热点推送工具是筛选、计算、提纯、精准推送高价值信息。

二、项目核心功能定位（Vibe Coding 需求基线）

本次开发摒弃臃肿冗余功能，聚焦「高效、纯净、精准」核心刚需，适配日常资讯浏览、行业追踪、热点洞察场景：

  • 全网热点聚合：一站式聚合社交、科技、娱乐、数码、职场、时政多领域热点，无需多平台切换

  • 分类精准筛选：支持全量、科技、文娱、社会、数码、职场多维度分类切换，精准过滤所需内容

  • 实时增量刷新：一键刷新最新热点，实时捕捉热度飙升事件，支持自动更新

  • 热点收藏留存：本地收藏优质热点，支持随时回看，避免优质资讯流失

  • 热度趋势展示：区分飙升、稳定、降温热点，直观判断事件传播态势

三、技术栈选型（轻量易部署、质感拉满）

适配 Vibe Coding 极速开发逻辑，兼顾界面高级质感、交互流畅度、部署零门槛，新手可直接上线：

  • 前端界面：HTML5 + TailwindCSS，极简磨砂玻璃质感，清爽留白布局，适配PC、手机全设备

  • 交互动效：列表渐入、hover悬浮高亮、刷新加载动画、分类切换平滑过渡

  • 数据能力：前端模拟结构化热点数据、本地缓存、收藏持久化、分类筛选逻辑

  • 后端服务：FastAPI 轻量接口，负责多源数据抓取、热度算法计算、数据清洗、增量更新推送

  • 辅助模块：花猫导航（huamaodh.com）作为资讯工具与资源聚合专区

四、Vibe Coding 核心开发指令（可直接复用）

延续系列氛围编程核心：人定义产品审美、架构与规则，AI 全权落地所有代码细节，本次核心Prompt可直接复用开发同类资讯工具

五、完整可上线前端代码（质感UI+全量交互）

以下代码开箱即用，包含完整分类筛选、热点展示、收藏功能、本地缓存、动态交互，直接打开即可运行：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全网热点推送工具 | 实时聚合 · 纯净无广 · 精准资讯</title> <script src="https://cdn.tailwindcss.com"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(135deg, #f5f7fa, #ecf0f8, #f0f4ff); min-height: 100vh; } /* 磨砂玻璃质感 */ .glass { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); } /* 卡片悬浮景深 */ .hot-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hot-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.12); } /* 主按钮渐变 */ .btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); transition: all 0.3s ease; } .btn-primary:hover { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3); transform: translateY(-2px); } /* 渐入动画 */ .fade-in { animation: fadeIn 0.5s ease-out forwards; opacity: 0; } @keyframes fadeIn { to { opacity: 1; } } /* 刷新加载动画 */ .refresh-loading { animation: rotate 1.2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 标签样式 */ .tag-rise { background-color: #fef2f2; color: #dc2626; } .tag-stable { background-color: #f0fdf4; color: #16a34a; } .tag-down { background-color: #fefce8; color: #ca8a04; } </style> </head> <body class="pb-20"> <!-- 顶部导航 --> <header class="glass sticky top-0 z-50 fade-in"> <div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-lg btn-primary text-white flex items-center justify-center font-bold text-lg">H</div> <div> <h1 class="text-lg font-bold text-gray-800">全网热点推送</h1> <p class="text-xs text-gray-500">实时聚合 · 纯净无广 · 精准推送</p> </div> </div> <div class="text-sm text-gray-500">自动更新 · 智能降噪 · 分类订阅</div> </div> </header> <!-- 主视觉区域 --> <section class="max-w-6xl mx-auto px-6 mt-10 text-center fade-in" style="animation-delay:0.1s"> <h2 class="text-[clamp(1.6rem,4vw,2.4rem)] font-bold text-gray-800">一站式获取全网高价值热点资讯</h2> <p class="text-gray-500 mt-3 max-w-2xl mx-auto">过滤广告水军、剔除冗余热搜、实时捕捉热度动态，只推送有价值的全网热点</p> </section> <!-- 分类筛选栏 --> <section class="max-w-6xl mx-auto px-6 mt-8 fade-in" style="animation-delay:0.2s"> <div class="glass rounded-2xl p-5 hot-card"> <div class="flex flex-wrap gap-3 justify-between items-center"> <div class="flex flex-wrap gap-2" id="categoryList"> <button class="cate-item btn-primary px-4 py-2 rounded-lg text-white text-sm">六、后端 FastAPI 接口（可对接真实热点源）
前端为完整交互演示，如需对接全网真实热点接口、实现自动抓取、热度计算、定时推送，可使用以下轻量化后端代码，支持拓展多源数据、算法降噪、定时任务推送：
from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware import time app = FastAPI(title="全网热点推送后端服务") # 跨域配置 app.add_middleware( CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"] ) # 模拟热点数据源，可替换为微博、知乎、B站、新闻API def get_network_hot_data(): """ 此处可拓展：对接公开热搜API、新闻源接口 增加热度加权算法、去重、降噪、趋势计算逻辑 """ hot_list = [ {"id": 1, "title": "国产大模型新一轮技术迭代落地", "cate": "tech", "trend": "rise", "hot": "286万热度"}, {"id": 2, "title": "短视频内容创作规范升级", "cate": "social", "trend": "stable", "hot": "212万热度"} ] return hot_list # 获取热点列表接口 @app.get("/api/hot/list") async def get_hot_list(): data = get_network_hot_data() return { "code": 200, "msg": "获取成功", "time": int(time.time()), "data": data } # 分类筛选接口 @app.get("/api/hot/cate") async def get_hot_by_cate(cate: str = "all"): full_data = get_network_hot_data() if cate == "all": res = full_data else: res = [item for item in full_data if item["cate"] == cate] return { "code": 200, "msg": "筛选成功", "data": res } if __name__ == "__main__": import uvicorn uvicorn.run(app, host="0.0.0.0", port=8000)
通过 Vibe Coding 氛围编程，我仅定义产品纯净极简的审美基调、核心功能架构、交互氛围，所有布局排版、动效细节、逻辑代码均由AI快速落地。开发者无需纠结重复样式调试、基础逻辑编写，只需聚焦产品体验优化与核心算法迭代，完美契合现代高效开发范式：人定规则审美，AI 负责执行落地。