本文介绍如何使用Codex AI工具在3小时内完成一个热点聚合网站的开发与部署，涵盖Supabase数据库、Vercel托管、GSAP动效及红狐数据API接入。总成本低于一杯奶茶，无需服务器和域名，适合零基础开发者。包含用户登录、兑换码商业化系统及每日三时段自动更新数据。注意：网站部署在Vercel平台，部分网络环境下可能需要科学访问。
Tags:
这是我的第 340 篇原创，一直致力于从实战维度去分享工具、Agent、技巧、资讯
大家好！我是唐舰长
我用 Codex 3 小时构建一个应用，专门采集热点和公众号热点文章的
登入、兑换码、服务器、数据库、网站上线，即便是我这样一个开发小白也能全部搞定
网址：https://hotspot-intelligence.vercel.app/
打不开需要开工具，因为我是部署在vercel上的；后续还会继续优化这个网站；跑通链路之后就抓紧给各位水手分享整个链路。
其实用 Codex 做网页开发很简单，生成一个 html 网页，可能只需要一句话就行，难的是 html 是一个文件无法快速传播和控制，上传到服务器中还要搞定域名、服务器等等
本次这次问题都能得到解决，以及如何让 AI 生成的网站没有那么AI 味，UI 效果较好；没有做过开发也能快速学习、理解、复刻
01｜做什么
很多小伙伴其实都会卡在做什么，有时间、有Codex，但是不知道做什么
我给大家分享一个思路，你做的那些 skill（技能）或者别人的优质 skill，除了能自己使用，还能不能商业化呢？
就比如一个简单生成图片 skill、生成自媒体平台数据的 skill、创作类的 skill
这些 skill 对于能用上的小伙伴不算什么，简单。那如果想要分享给其他人使用呢，很难，除非把 skill 的整个文件发过去，然后再让别人安装到自己的 Agent 上
对于有基础的人来说还行，若是没有基础就没办法了。所以就可以基于这些 skill 去做一个网站做一个平台，让别人进行使用。
02｜开发前准备
能不能用 Skill 转网站的这个思路来实现，这个问题也是作为一个小白，要思考的问题
所以需要先验证
一样，还是直接问 Codex 的可行性，发现确实可以做，因为可以抽出 skill 中的一些脚本，一些接口的调用逻辑
数据库用什么
做网站只要涉及到需要登入账号、数据缓存、对话码这些，就需要用到数据库（SQLite/MySQL）
提到数据库很多人就会放弃了，包括我以前也是，因为压根没有专业学习
但是在 Codex 中开发能完全不用担心这个问题，点击插件搜索「Supabase」
Supabase 是什么、能干什么：
一句话：Supabase 是「开源版 Firebase」，基于 PostgreSQL 的托管后端平台（BaaS），让你不用写服务器代码，直接用数据库、登录、文件存储、实时推送、AI 向量检索。
免费版本500MB，基本够用
好处就是在 Codex 中 Codex 可以直接操作，不需要我们去授权、连接
把搜索到的插件安装到你的 Codex 中就可以，如果你的插件里面没有这个，说明你还没有登入一个官方的免费账号，教程在此：【如何开启 Codex 全部功能，解决 Codex 登入问题】
网站托管用什么
网站的托管重要性不多说，没有托管上线的只能叫 html 文件，无法分享。除非自己去搞定服务器和域名，那样也不是一个小白能轻松解决的事情
所以我们用「vercel 」在这个平台中就能将的网站托管上，不需要搞定服务器域名，这个平台自带。而且免费版足够使用。
插件中搜「vercel 」，然后点击添加之后再 需要注册账号+手机验证（国内即可）没有这一步的就是安装失败多试几次
前端 UI 怎么设计的更好看
很多 AI 去设计前端都太差了，就比如我一开始的页面是下面这个：
这效果太差了，很明显的 AI 味。而通过专业 UI 设计后，就是我一开始展现的效果，无论是 UI 还是动态都高级很多，这也不是什么秘密。也是一个开源的 skills
是 GSAP 官方推出的 skill，功能十分好用
安装方法：
帮我安装这个 skill：https://github.com/greensock/gsap-skills
SKills 用什么
除非你自己已经开发了很多实用的 skill，不然完全可以用已经有的一些 skill 去做，比如我这次要做一个热点聚合的网站，我用的就是「红狐数据」平台上 skill（https://redfox.hk/）
这是一个自媒体API 平台，你想要的几大自媒体平台他都有 API 接口，同时还有一堆 Skill 可以用，价格非常低。可以说自媒体用这个平台就够了
而我这次用的就是
https://redfox.hk/skills/no/KJq7uXHY
https://redfox.hk/skills/no/8dAG7qks
这两个 skill，一个是热点聚合、一个是公众号热门文章查询。也是我现在网站上有的功能；还有其他的实用 skill，大家可以自行尝试一下。
安装方法：
先帮我安装这个 skill，看看需要我配置什么信息进来。https://github.com/redfox-data/redfox-community/tree/main/skills/trending-hub
把 skill 的 github 地址复制给 Codex，然后输入内容。因为这个平台是收费的需要给 Codex 提供一个 API，为了防止他不提醒我们，单独加一句「看看需要我配置什么信息进来」
然后就提示我们需要给 API，这个时候去平台上获取一下即可然后发给 codex
API 只需要给一次，其他 Skill 安装的时候就不需要给了，把你想要在你的网站上实现的功能的相关 skill 安装到你的 Codex 中
03｜正式开发
开发项目要有一个习惯，就是在 Codex 中创建一个项目文件夹，这样后面项目管理起来比较方便
有了项目文件夹后，就把上面的自媒体平台的一些 skill 进行安装，方便后续开发的时候用得上
写产品 PRD
我现在想要基于这个热点的 skill 获取，做一个网站，公众号的也嵌套在这个网站里面。也就是说两个页面，一个页面是热点的获取，一个页面是公众号的内容的获取。我需要按照我们刚刚上面所说的，按照 8 点、16 点、24 点，进行加载。加载完之后，将数据保存到我们的数据库里面。前端就一直显示 8 点、16 点、24 点这三个时间段的数据，让每个用户都看同样的内容。
这个热点获取，它里面分很多的榜对吧，很多的榜，你需要把这些榜都做成一个框啊，每一个榜都要做成一个框出来，能让我立马看到抖音的是什么热点，公众号什么热点，小红书是什么热点啊，这样去做。公众号的获取页面则是使用一个按钮操控，通过关键词进行搜索。具体流程如下：
1. 用户搜索一个关键词，点击搜索；
2. 选择搜索条件；
3. 将搜索到的信息全部提取出来。
这是目前我需要做到的效果，最后请帮我放到这个Vercel网站上，登录的话，就用邮箱进行账号登录，不需要验证，只需要注册邮箱+密码的方式。不登录也是可以看热点信息的，但是想要使用公众号的信息收取，就必须要登录。前端生成使用这个gsap-skills技能，效果也要好啊，我不能马马虎虎的。数据库、网站部署、前端这些都有插件和 skill，都可以基于这些插件和 skill 帮助你一起去做。整个网站是基于热点收集和公众号文章搜索，作为底层原理去做。还需要制作一个兑换码页面和管理这兑换码生成页面出来。
你先帮我做一个 PRD 文档
上面是我发给 Codex 的信息，也就是一些基本项目和路径告诉他，生成一个 PRD 文档，然后在让 Codex 基于这个 PRD 文档去开发网站，效果会比较稳定。
但需要注意顺序，要求中提到一些基于 skill 去做网站，起码你需要先把这些 skill 安装到你的 Codex 中，Vercel插件和Supabase插件也需要提前安装好。
等 PRD 生成好后，文件咱就不看了，看一下他的简要概述能符合你的要求就行，不符合或者理解错了，在多说几次
点击 Codex 对话中的分支
为什么要分支呢？其实是为了防止上下文过长，最近 Codex 也经常出现什么 URL 调用使用失败，重试 5 次之类的内容。手动分出来可以提高稳定性。
然后就是审查了，因为在开发时会遇到很多他不敢做的事情，需要你自己确定比较烦，可以开成自动审查
这样基本上在他开发的时候我们去做一些别的事情，让它自己干活就行
基于 prd 帮我开始构建项目，最终实现部署到「Vercel插件」上，「Supabase插件」数据库插件也给你安排上。直接开始做，需要什么，遇到什么卡点先自己解决。
在这里，需要自己将这两个插件添加到对话中（放到文字信息框中），然后再发给Codex
跑了 20 几分钟就完成了项目的开发，但是告诉我们账号登入和数据库还没有做好
在运行的过程中可能会打开「Supabase数据库」的网站，需要你手动点击授权，一般在运行过程中Codex 是不会等你授权完成的，那在他这次的任务完成之后还需要让告诉他你已经授权过
一般情况我们用 codex 接的是中转的 GPT5.5 的模型，到这基本上已经完成了项目开发，它会给你一个网址，在浏览器中打开就可以体验
因为模型能力问题，用 5.5 基本上不会有太多的 BUG，做出来就能用：
04｜成本与数据
很多人看到"3 小时做一个网站"会觉得不真实，所以我把整个项目的成本全部摊开来给大家看：
时间成本：
前期准备：我差不多找平台和 skill 花了 1 个小时
PRD 文档生成 + 确认：约 15 分钟
Codex 自动开发（包含数据库、前端、部署）：1 个半小时
其中大部分时间其实是在等它跑、看它做、确认效果。真正需要我动手的操作非常少，基本就是点授权、看效果、提修改意见。
花费成本：
没有服务器费用、没有域名费用、没有运维成本。一个能注册登录、能查数据、能定时更新的完整网站，总成本不到一杯奶茶钱。这就是现在做独立项目的门槛
05｜写在最后
很多人学了 Codex、学了 AI 工具，最后都停在了"会用"这个阶段。会聊天、会问问题、会生成代码片段，但始终没有一个完整的作品出来。
差的不是能力，差的是"做完一个项目"的决心，为什么我建议每个人都去做项目？
对自己的好处：
做项目的过程会逼着你把散装的知识串成链路。数据库怎么连、前端怎么渲染、部署怎么配、定时任务怎么跑——这些东西只看教程永远是碎片，只有做过一个完整项目才能真正理解它们之间的关系。
做完一个，第二个就快了。第三个就更快。到后面你会发现，任何一个想法从概念到上线，你都能在一天之内搞定
对别人的好处：
你做的东西能解决别人的问题。就像这个热点聚合网站，对我来说是一个练手项目，但对需要每天追热点的自媒体人来说，它是一个实实在在的工具。
能解决问题的东西就有价值，有价值就能商业化。哪怕只是加一个兑换码系统收个 9.9，那也是从 0 到 1 的商业闭环。
对简历的好处：
这个才是很多人忽略的重点。
你用 Codex 做出来的项目，写到简历上不是写"我会用 AI 工具"，而是这样写：
独立开发项目：热点情报聚合平台1.独立完成产品设计、全栈开发与部署上线，覆盖需求分析、架构设计、前后端开发、数据库设计、自动化运维全流程2.基于 Next.js + Supabase + Vercel 构建，实现用户认证体系、定时数据采集、多平台热点聚合、公众号文章检索等核心功能3.接入第三方数据 API，设计定时任务实现每日三时段自动数据更新与持久化存储4.前端采用 GSAP 动效框架，实现高质量交互体验与响应式布局5.设计兑换码权限管理系统，支持付费功能的分级访问控制
看到没有？这就是一个完整的独立开发者的项目经历。有产品思维、有技术选型、有落地能力、有商业化设计
面试官不会问你"这个是不是 AI 写的"，他只会看到：这个人能独立把一个想法从概念变成线上产品
这就是"独立开发"四个字的含金量，未来是紫领人才的世界，一个合格的紫领就是要有自己想法，还能有自己的能力
哪怕第一个项目很粗糙，它也比你收藏夹里的 100 篇教程有用
我们下期见，说实话 Codex 的插件是真好用，我把所有插件做了一个盘点变成 excel，大家可以参照找看，还有没有插件能够帮助你
领取方式：在文章下面评论 “0610“”，并添加下方微信领取
关注公众号并添加舰长微信，领取智能体学习资料，并参与智能体技术直播讲解
另外非常欢迎大家加入[唐舰长AI落地智能体交流群]，主要交流群每周都会进行公益直播教大家搭建AI智能体工作流
没有评论:
发表评论