Vibe Coding实现信源监控系统

AI 太火了，我一个搞前端的能怎么办啊~~~~

鱼皮老师的AI热点监控项目我已经学了两节课了，光学不练那肯定是不行的，于是：

作为一个在新闻媒体行业摸爬滚打五六年的小前端，所以我就用 codex 根据鱼老师的项目自己实现了一个信源监控系统。给大家看看第一个版本的样子：（不要笑话我）

大体的功能就是：

1. 用户输入要监控的关键词，系统就会监控网络中相关的信息。
2. 相关信息返回之后，通过 AI 大模型来判断信息的可靠程度，过滤掉可能的虚假信息。
3. 拿到信息之后，编辑点击去编辑可以直接跳转我们的文稿后台管理系统，编辑完成之后发布。

这个小工具，全程 codex 分析 + 实现，我没有参与一行代码。我写这个的目的不是为了介绍这个系统，而是为了记录一下我在做这个系统的时候，学到的一些关于 AI 的相关知识，万一我后面要从事全栈或者AI的工作呢？

第一个版本（基本功能完善版本）

这个版本是在看完了鱼老师AI热点监控项目前两节课之后，完成的，完善了基本功能，让项目的整体流程能够跑通。

MCP服务

MCP（Model Context Protocol）是一种开放标准，可以让 AI 链接到各种外部工具和数据源。

用通俗的话来讲，就是给 AI 装了各种各样的“外挂”，AI可以通过这些“外挂”来完成各种各样的功能。

例如：我这个项目中装了 Context7 这个MCP服务，就是用来让获取到最新的技术文档，防止 AI 用了老旧的技术代码导致出现各种问题。

我在用 codex 实现该项目的时候就出现了这个问题：

项目中用到了阿里云百炼平台，结果在AI分析信息来源可信度的时候报错了：401 invalid_api_key，我仔细对比了一下，发现 base_url 和api_key配置的都没有问题，所以我就直接这么告诉 AI

结果他确实查到了，是因为模型名称写错了：

更改模型名称之后，AI检验部分就跑通了。

补充一下codex安装MCP服务的方法

我是这么安装的：

找到codex的配置文件一般在 C:\Users\用户名\.codex\config.toml

增加一条配置项：

▼
toml
复制代码
[mcp_servers.context7]
command = "npx"
args = ["-y", "@upstash/context7-mcp", "--api-key", "context7的api-key"]
startup_timeout_sec = 20

我按照上面的方法配置之后，就可以使用了。

第二个版本（页面优化版本）

第一个版本做的时候，没有对 AI 要求页面的美观，他就根据自己的想法来了。身为一个稍微有点审美的前端来说，那怎么能接受的了啊，于是：第二个版本让 AI 来美化美化前端页面吧。

先直接展示了一下 AI 美化的效果，是不是比第一个版本强多了，虽然还有一些小细节需要调整，但整体这么一看还是很不错的。 我没有用鱼皮老师课上讲的那三种方案来美化，我没有什么美化的要求，也没有什么情绪可以喂给AI，我就直接让AI使用 UI UX Pro Max 技能自己实现的，我感觉美化之后的效果还是可以的。

Agent Skills

Agent Skills 也是一套 AI 开放标准，目的是为了让 AI 能够学习各种专业技能，而不是每次都要重复的输入提示词。

我们开发者可以将复杂的任务指令、脚本和资源打包成一个技能Skill。作为用户，只需要安装这个技能，AI就能够学会这项技能来实现对应的功能，而不需要重复造轮子。

补充一下codex安装Agent Skill的方法

我只以我自己当前的项目为例来做介绍，我从 Skills这个网站 查找需要的Skill。

全局安装find-skills技能：

▼
bash
复制代码
npx skills add https://github.com/vercel-labs/skills --skill find-skills

由于我的项目的前端页面太丑了，我就在该项目下安装了一个 UI UX Pro Max 的Skill用来美化我的页面。

控制台直接切换到该项目下之后，执行下面的命令：

▼
bash
复制代码
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

后面的内容就是不断的让 AI 完善我的项目功能，就纯粹的我个人在跟AI聊天，我看着没啥可记录的了，那这篇文章就到这里了...