图片/视频+流程图+WebSocket+AI工作流能做什么？

  漫画和动画能不能做成可分支，读者可干预，可交互的呢？这是我四个月之前在想的一个问题。我认为在AI大模型崛起的时代，这个问题在现在，或者不远的未来能够得到一个肯定的结论。   如何完成这个功能呢？传统的漫画和动画都是线性的，需要通过技术手段将线性流程转变为非线性。非线性流程就可以通过定义流程图的方式来实现。B站虽然有互动视频这个功能，不过做互动视频的UP也比较少，然后也只能走选项去做跳转，也不支持多人模式。   **我的想法是，画一个流程图，在关键的剧情位置定义一个可选择的节点；或者完成一个交互游戏，通过结果来确定走向；再或者通过一个概率节点，通过抽卡机制确定下一步。进一步的话，可以叫上几个人，通过投票机制、多人协作或者随机选择来决定下一步的流程。这就是我最近在开发项目的核心业务。**    拿上面这个图举例，看过芙莉莲的应该都知道抽宝箱这个梗。我就想，如果把这个选择权交给用户，大家会选搏一搏，单车变摩托，还是跑路。要是5个人一起选，结果3个人选开箱，2个选跑路，会是个什么场景。   **更进一步，也可以把流程的选择权交给AI，比如在播放动漫时告诉AI，我想看某个角色的好/坏结局，AI就可以理解剧本并自动做出选择。**   我们也可以跳出漫画或者动画这个小范围。玩网游想体验重氪抽卡，或者想体验一下赛博钓鱼，做视频想列个大纲，做PPT想先看个效果，这些我认为都可以通过上述的功能来实现。  ## 项目进展以及面临的问题   这个项目的重点在C端，交互应当是比较强的。于是我在定好网站核心功能之后，开发了登陆注册、基础查询、点赞、评论、收藏夹、浏览历史、用户动态、用户关注和粉丝、剧本创作、流程图编辑、基础播放功能以及站内信等功能。目前开发进度大概已经在70%左右。还没开发好的功能，比如说设计一个AI工作流，通过用户需求来生成剧本和流程图以及对应的图像或者视频，还有多人交互模块。目前也面临一些问题。 ### 当下的AI能否生成高质量内容，很大程度上取决于使用者   我在日常中也是经常使用AI帮我写前端、做一些UI交互方面的设计、生成一些图片等等。近期我也在B站经常看到有使用最新的视频生成模型创作的一些动漫短视频，可以说目前的效果已经相当可以了。但另一方面，我也注意到，目前AI的生成结果好不好，仍然取决于用户的输入需求是否清晰合理。比如说我写个代码，可能少提了一句组件化，少提了一句哪里需要扩展，AI按照我的提示词输出的代码就让我感觉质量比较差。在B站刷那些动漫短视频也可以看出来，有的UP生成的结果就是没什么AI味，有的UP上传的内容AI味道就比较明显。如果我这个功能做出来，按照目前的情况，可能大量的内容仍需要用户自己创作，或者想好每一个细节，再或者反复尝试生成。我还是想尽可能轻量化用户创作。 ### 项目本身优化、维护和运营成本偏重，相关经验有所欠缺   我先说一下我自己的情况。哥们2025年统招硕士毕业，今年30，专升本，一年半外包。目前还是一个没入场，或者说没上桌的状态。近期的重心还是以找工作为主。我做这个项目最主要还是完成一个心愿单。我很早就想按自己想法做个开源项目，不过因为各种原因一直没实现。我认为一个偏重AI创作网站做C端就不要想着收费了，免费，好玩，实用才是硬道理，这就正好做开源。   我自己评估，目前这个项目主要的难点就在于播放一个内容的时候应该如何表现比较好。交互游戏可以做几个简单的拼图（上面的Demo可以用图片的碎片拼出个魔法阵，拼对了就打赢了，拼错了就打输了）、找不同，不过在表现上也需要打磨。除此之外也还有很多细节需要打磨，比如打磨AI生成的稳定性，尽量避免生成几页漫画结果主角都不一样、打磨UI界面，不然网站AI味道浓厚等等。这些剩余内容可能会花费更多的时间。感觉做的好的情况下，可能这个网站在较长的时间内保持几百或者几千用户。能不能火起来，还是看能打磨成什么样。我准备后续慢慢打磨，打磨的差不多了再正式发布出来。 ### 轻量化有点小问题   我之前还想到一个功能，就是用户做完流程图之后，能不能做一个导出功能，创作者自己走一个路径，之后可以按这个路径直接导出一个视频，或者一个漫画集合，或者PPT等等。这种功能可以方便用户多试几种可能性，能够宏观视角观察自己的作品。导出内容也能够发布到B站等平台。进一步，那用户要是不想用我搭建的这个网站怎么办呢？可不可以开源一个轻量化的版本，用户下载个EXE，安装完打开就是一个本地的流程编辑器，设置一个AI大模型就可以调用自己的AI去做东西，然后导出。不过我是Java后端，做个桌面应用目前来看，多少还是有点难为我了。不过这个问题也没有那么大，只要时间充足，AI写一写，我学一学，改一改就行了。 ## 意见征集   感谢你看到这里。目前这个项目我目前已经做了四个月，基本上算是自己闭门造车，中间也偶尔怀疑过这个项目的业务是能够迎合需求，还是只是我在自己创造需求。有没有哪些东西是欠缺的，或者是没必要做的。如果你对我开发中的这个项目有什么建议、看法、想法或者经验，欢迎在评论区或者私信告诉我。

Agent Skills 傻瓜式教程，26 年最火 AI 技术就这？

你是小阿巴，正在用 AI 开发网站。 为了让 AI 生成的效果更好，你告诉 AI： - 界面不要使用蓝紫渐变色 - 不要生成一大堆没用的文档 - 你要遵循公司的代码规范 阿巴阿巴，洋洋洒洒几百字。  之后每次开发网站时，你都要写这么一段又臭又长的提示词，太麻烦了！ 于是聪明的你开始想办法。 先把常用的提示词保存到单独的文件（比如 `prompts.md`），每次手动投喂给 AI。  然后创建了资源文件夹，把公司的代码规范、设计素材都塞进去，告诉 AI 参考这些写。  接着你还写了一些脚本，让 AI 生成代码后自动执行格式化、运行测试、提交代码到 Git。  最后我再写个 `AGENTS.md` 文件，把所有规范和工作流程都写进去，让 AI 自动读取。 你沾沾自喜：嘿嘿，俺这套工作流，堪称完美！  但很快，你发现了问题，随着规范越写越多，文档越来越臃肿，每次对话都要占用很多 AI 上下文空间，浪费 tokens。  于是你找到号称 “没有人比他更不懂 AI” 的鱼皮求助：阿巴阿巴，俺还能咋办啊…… 鱼皮：不是有 Agent Skills 么？为啥不直接用？ 你一脸懵：啥玩意儿？ 鱼皮：这可是最近 AI 圈儿爆火的技术，下面我来带你玩转 Agent Skills，让你知道它是什么、怎么用、有什么魔力、怎么自己开发。 点个收藏，我们开始~  ⭐️ 推荐观看视频动画版，更通俗易懂：[https://bilibili.com/video/BV1T7zzBQEaA](https://www.bilibili.com/video/BV1T7zzBQEaA/) ## 什么是 Agent Skills？ Agent Skills 是 Anthropic 推出的 [一套开放标准](https://platform.claude.com/docs/zh-CN/agents-and-tools/agent-skills/overview)，目的是让 AI 能够学习使用各种专业技能，而不用每次都重复输入提示词。  简单来说，它就是给 AI 装备的 **技能包**。技能包里有精心设计的提示词、代码脚本、还有各种资源文件。  把 AI 想象成一个职场小白，给他装上 `文档处理技能`，它就立刻知道怎么生成 PPT、处理 Excel 表格；装上 `代码规范技能`，它就知道怎么按照公司标准写代码。  你挠挠头：等等…… 这不就是俺在做的事吗？把教 AI 做事的文档和 AI 要用到的文件打包成文件夹？  鱼皮：差不多，但 Anthropic 把它做成了一个通用标准，而且在实现原理上有一些新花样…… 你捶胸顿足：可恶啊，俺差点就改变世界了！这能有什么新花样？  鱼皮：我先来带你用一下 Agent Skills，再跟你说说其中的奥秘。 ## Agent Skills 入门实战 目前对 Agent Skills 支持最完善的工具是 Anthropic 官方的 [Claude Code](https://claude.com/product/claude-code)，我们就以此为例，安装并使用 Skills。  ### 1、安装 Skills 技能 先打开 Claude Code 并输入命令，添加官方技能市场： ```plain /plugin marketplace add anthropics/skills ```  这就像是在你的 AI 助手里开通了一个技能商店，接下来你就可以从商店中获取技能了。  在 Claude Code 中输入命令，安装官方提供的技能包： ```plain /plugin install example-skills@anthropic-agent-skills ```  这个 example-skills 包含了一堆官方示例技能，包括前端设计、网页测试、动图制作等等。  装完之后，你就可以直接让 AI 使用这些技能了。 ### 2、前端设计技能 比如你要做一个网站，以前没装技能的时候，AI 生成的代码又是那个熟悉的蓝紫渐变色，千篇一律的 AI 审美。  现在安装了 frontend-design 这个 **教 AI 生成专业设计感网站** 的技能后，你输入：“帮我开发个人作品集网站”。 AI 会主动问你：我发现你安装了前端设计技能，需要用它来生成更具设计感的页面吗？  确认之后，AI 会利用技能生成代码，告别蓝紫渐变，生成独特风格的精美页面。  我们不用每次都给 AI 输入一大堆相同的提示词，装一次技能就行了。 ### 3、文档处理技能 除了代码相关的技能，官方还提供了文档处理技能包。  同样在 Claude Code 中输入一行命令安装： ```plain /plugin install document-skills@anthropic-agent-skills ```  这个技能包里有 PPT 制作、Word 文档生成、Excel 数据分析、PDF 解析等技能。  接下来如果你让 AI 做个 PPT，它会自动调用 PPT 制作技能，直接生成排版好的 PPT 文件，帮你节省几个小时。   ## 揭秘 Agent Skills 内部原理 你好奇道：咦，为什么 Skills 能做到安装即用？技能包里面到底有啥？AI 又是怎么知道该用哪个技能的？ 鱼皮：好问题。[技能](https://agentskills.io/what-are-skills) 其实就是一个包含 `SKILL.md` 技能说明文件的文件夹，还可以包含可执行脚本、资源和参考文档。 ```markdown my-skill/ ├── SKILL.md # 必需：指令和元数据 ├── scripts/ # 可选：可执行脚本 ├── references/ # 可选：参考文档 └── assets/ # 可选：模板和资源 ```  由于每个技能的复杂度不同，结构也会存在区别。我们可以在本地目录中找到已安装的技能文件夹。  以官方的 PPT 制作技能为例，它的结构是这样的： ```plain skills/pptx/ ├── SKILL.md # 技能说明书（必需） ├── ooxml/ # OOXML 相关资源 ├── scripts/ # 处理脚本 ├── html2pptx.md # HTML 转 PPT 说明 ├── ooxml.md # OOXML 格式说明 └── LICENSE.txt # 许可证 ``` 包含一个核心的技能说明文档 `SKILL.md`，还有脚本、参考文档和各种资源文件。  而 frontend-design 前端设计技能只有一个 `SKILL.md` 文件。  `SKILL.md` 文件是每个技能的核心，它包含两个关键部分。 第一部分是 **元数据**，用 YAML 格式写在文件开头： ```yaml --- name: frontend-design description: 生成具有专业设计感的前端代码，避免千篇一律的 AI 审美 --- ``` 其中 `name` 是技能的名字。`description` 是技能的描述，告诉 AI 什么时候应该使用这个技能。描述写得越清晰，AI 就越容易在合适的时机调用它。  第二部分是 **指令内容**，就是一套经过精心设计的提示词，指导 AI 具体怎么做。 以 [frontend-design](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md) 技能为例，它的指令内容包括： - 设计思考：在写代码前，先分析产品目的、用户群体、技术约束，然后选择一个大胆的美学方向（极简、复古未来、工业风、有机自然、奢华精致等） - 前端美学指南：包括字体选择（避免 Arial、Inter 等烂大街字体，选择有个性的组合）、配色主题（主色调配鲜明点缀色）、动效设计、空间构成、背景和视觉细节 - 避坑指南：明确禁止紫色渐变、系统字体、千篇一律的布局等 AI 审美陷阱  你挠了挠头：如果有多个 SKills，AI 怎么知道该用哪个技能呢？如果把每个技能说明文档都塞给 AI，不是很占用上下文么？ 鱼皮：这就要说到 **渐进式披露（Progressive Disclosure）** 这个核心机制了。 当你让 AI 执行任务时，它会先扫描技能目录，但不会把所有内容都加载到上下文中。而是只读取每个技能的元数据（名字和描述），发现描述和任务相关，就知道该用这个技能了。  然后才把完整的技能说明文档读进来，按照里面的指令执行：  并根据需要加载技能包中的其他资源：  **用到哪个查哪个**，既精准匹配又节省上下文，这就是渐进式披露的精髓。 所以 Agent Skills 的本质就是 **把专业知识打包成一个文件夹，让 AI 按需读取并使用**。  ## 跨工具的 Agent Skills 你问：除了 Claude Code 之外，其他 AI 工具支持 Agent Skills 么？俺平时用 Cursor 比较多…… 鱼皮：当然能！[Agent Skills](https://agentskills.io/) 已经成为通用标准，Cursor、VS Code、Codex 等工具都支持。  Skills 的社区也非常活跃，你可以在 [Claude Skills Hub 市场](https://www.claudeskill.site/zh/skills)、开源的 [Awesome Claude Skills](https://github.com/ComposioHQ/awesome-claude-skills) 等地方找到很多现成的技能。  比如有个叫 [UI UX Pro MAX](https://ui-ux-pro-max-skill.nextlevelbuilder.io/) 的技能特别火，专门用于提升 AI 的设计能力。  用法很简单，首先按照 [开源仓库文档](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) 的指引，安装官方提供的命令行工具： ```bash npm install -g uipro-cli ```  然后进入到你的项目目录下，根据使用的 AI 工具执行对应的命令。比如我这里用 Cursor： ```bash uipro init --ai cursor ```  它会自动把技能安装到 Cursor 的配置目录里。  安装完成后，可以看到它的文件结构：  接下来，当你让 AI 开发一个网站时，可以使用斜杠命令手动触发技能，或者让 AI 自动识别技能。  1）AI 会根据你的需求识别出产品类型和需要的页面类型  2）然后调用 `search.py` 搜索脚本，在 data 目录里进行多维度搜索，找到适合的配色、字体、布局风格  3）综合搜索结果，生成完整的设计方案（主色调、字体组合、间距规范等）  4）最后，再按照设计方案生成代码  这样一来，生成的界面既专业又有设计感。  AI 不需要把所有规则都背下来，而是用到哪个查哪个，这就是 Agent Skills 的精髓。 ## 创建自己的 Agent Skills 用了很多别人的技能后，你产生了一个大胆的想法：俺能不能把公司的周报格式封装成一个技能？以后推荐给新来的同事，还能卖个几块钱，嘿嘿嘿~ 鱼皮笑道：有点儿东西，你打算怎么做呢？ 你会心一笑：当然是发挥程序员最擅长的事情 —— 复制粘贴！  俺先复制一个官方的技能包，修改目录名称为自己的。 然后修改技能说明文档 `SKILL.md` 的元数据、指令内容这些关键部分。  示例 `SKILL.md` 文件： ```markdown --- name: company-weekly-report description: 生成符合公司规范的项目周报，包含进度汇总、问题跟踪和下周计划 --- # 公司周报生成技能 当用户要求生成周报时，请按以下步骤执行： ## 1. 收集信息 - 询问本周完成的主要工作 - 询问遇到的问题和解决方案 - 询问下周计划 ## 2. 格式规范 - 使用公司蓝色主题 - 标题使用微软雅黑加粗 - 每个模块不超过 5 个要点 ## 3. 输出格式 - 默认输出 Markdown - 如需 PPT，调用 pptx 技能 ``` 最后，把公司的 Logo、PPT 模板、报告样例放在子文件夹里就行了。妈妈再也不用担心我的周报了~  鱼皮：不错不错，但其实有更简单规范的方法。 在前面安装的 example-skills 官方示例技能包里，有一个叫 `Skill Creator` 的技能，专门用来帮你创建新技能。  你只需要跟 AI 说：“帮我创建一个专门生成公司周报的技能” 接下来 AI 会问你几个问题，一步一步回答就好： - 你希望周报包含哪些主要部分？ - 你希望周报以什么格式输出? - 你通常会如何使用这个周报技能? - 希望周报的语言风格是什么?  很快，一个完整的技能包就生成了，你会看到一个 `.skill` 为后缀的文件，本质上是一个 zip 压缩包。  你可以把它解压到你的个人技能目录（`~/.claude/skills/`）下，你的所有项目都能用。   如果你想让这个技能只在某个项目生效，可以把它放到项目的 `.claude/skills/` 目录下，并且利用 Git 同步给项目组其他成员。   测试没问题后，你还可以把它开源到 GitHub，或者上传到 [Claude Skills Hub](https://www.claudeskill.site/zh/skills) 这样的社区平台，让所有用户都能用。  ## Skills / MCP / 斜杠命令的区别 你开心极了：原来开发一个 Skills 这么简单！但是，这玩意儿跟之前火爆的 MCP 和斜杠命令有啥区别？ 鱼皮：好问题！ **MCP 就像给 AI 装上了 “手和眼睛”**，让 AI 能够连接外部工具和数据源，比如搜索网页、读取代码仓库、查询数据库。适合需要获取数据或操作外部系统的场景。  **而 Agent Skills 更像是给 AI 发了一本 “工作手册”**，把专业知识和工作流程打包起来，教 AI 在特定领域该怎么做。  至于斜杠命令，它就像是快捷键，是需要你手动输入 `/command` 命令来触发的固定操作；而 Skills 的特点是 AI 可以自动识别该用什么技能，不需要你显式调用。  对了，其实 MCP 和 Skills 是可以结合起来的。 举个例子，如果你想让 AI 帮你发周报： - MCP 负责获取数据：从任务管理数据库拉取这周的任务列表 - Skills 负责加工数据：把获取到的原始数据整理成老板爱看的格式 一个提供食材，一个提供配方。  ## Agent Skills 凭什么大火？ 你看着技能文件夹的结构，突然怪叫一声：等等，俺突然意识到一个问题…… 这不就是我们程序员玩烂的 “封装、复用、模块化、懒加载” 那一套吗？  写几个代码文件、打个包、发到网上，让其他程序员下载下来用，不是一回事儿么？  为什么 Agent Skills 能突然让整个 AI 圈为之疯狂？ 鱼皮：好问题，从技术的角度来看，它并没有发明什么惊天动地的算法。 在我看来，它能火主要是 2 个原因。 第一，它是开放标准，封装一次技能包后就能在各种 AI 工具里复用，还能通过社区共享。  更重要的是，Skills 能立刻让 AI 的工作更专业可靠，让普通人 “无感” 地享受技术带来的价值。以前想让 AI 变聪明，你得学提示词工程、配置各种工具链。现在只需要像装 APP 一样安装技能包，AI 就立刻变专业了。一项技术的成功，不在于它有多复杂，而在于它能让普通用户不关注技术细节的情况下，感受到技术的价值。  ## 结尾 你点点头：学会了学废了！降低门槛，才是技术走向大众的钥匙。 鱼皮：没错，Agent Skills 不仅仅是个技术概念，更是一种新的工作方式。你可以把它融入到自己的日常工作中，比如把重复的任务封装成技能、把团队的最佳实践固化成技能，让 AI 真正成为你的得力助手。 在这个 Vibe Coding 盛行的年代，技术的门槛正在崩塌，而想象力的边界正在无限扩张。你可以在我免费开源的[《AI 编程零基础入门教程》](https://github.com/liyupi/ai-guide)中学到更多 AI 编程技巧，也欢迎关注我的账号，学习更多 AI 和编程的技巧。 > 开源指路：https://github.com/liyupi/ai-guide  那么问题来了，你最想让 AI 学会什么技能呢？ ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)

20 个神级 AI 编程扩展，爽爆了！

大家好，我是程序员鱼皮。给大家分享一些我自己在用的 AI 编程扩展，帮你大幅提高 AI 编程效率和代码质量。 **万字长文 + 100 多张图**，绝对干货！点个收藏，让我们开始吧~ > 本文已收录到 [鱼皮 AI 导航的《免费 Vibe Coding 教程》](https://ai.codefather.cn) 中，可以在这里免费获取更多 AI 资源。 ## 一、MCP 服务器类 MCP 的全称是 Model Context Protocol 模型上下文协议。简单来说，就是让 AI 大模型能够连接外部工具和数据源的一个开放标准。 打个比方，MCP 就像是 AI 的 USB-C 接口，原本 AI 只能根据训练数据来回答问题、生成代码，但有了这个统一接口，它就能连接各种外部工具，比如打开浏览器看网站、搜索并抓取网页内容、部署项目到云端、访问数据库等等，能力一下子就丰富起来了。  ### ⭐️ Firecrawl MCP 网页内容抓取 首先要介绍的是 [Firecrawl MCP](https://www.firecrawl.dev/)，让 AI 能够自动抓取和理解网页内容。 我在开发项目时经常需要从网上获取参考资料、阅读官方文档和技术博客，或者分析竞品的功能实现。如果人工来做这件事，需要先打开网站、再手动复制粘贴内容，或者自己写个爬虫脚本，麻烦得一批。 有了 Firecrawl MCP，这事儿就简单多了。我直接在 AI 编程工具中跟 AI 说： - 帮我获取这个网站的内容 - 帮我读一下这个文档 - 帮我从网上搜索 XX 相关的信息 它就能自动把网页的内容、结构、甚至是动态加载的数据都给我抓下来。  **如何使用？** 首先你需要在 [Firecrawl 官网](https://www.firecrawl.dev/app/api-keys) 注册账号，并创建一个调用服务的 API Key。  然后进入到 AI 编程工具中配置一下 MCP 服务器。这里我以 Cursor 为例，其他 AI 编程工具对接 MCP 的方法可以看各自的官方文档，比如 [Claude Code 接入 MCP 文档](https://docs.anthropic.com/en/docs/claude-code/mcp)。 打开 Cursor 设置，找到 Tools & MCP，点击 `+ New MCP Server`。  本质上就是修改 MCP 配置文件，添加这样的配置： ```json { "mcpServers": { "firecrawl-mcp": { "command": "npx", "args": ["-y", "firecrawl-mcp"], "env": { "FIRECRAWL_API_KEY": "你的API密钥" } } } } ```  这段配置的意思是：通过 npx 命令来运行 firecrawl-mcp 这个工具，并且把你的 API 密钥传给它。如果你电脑上还没有安装 npx，需要先 [到官网安装 Node.js](https://nodejs.org/zh-cn)，npx 会随着 Node.js 一起安装。 配置好之后，看到绿色的成功点点，表示能够正常使用了。  除了基础的网页抓取，Firecrawl MCP 还支持批量抓取整站内容、递归抓取网站的多层链接、失败自动重试等高级功能。 ### Brave Search MCP 隐私搜索 接下来是 [Brave Search MCP](https://github.com/brave/brave-search-mcp-server)，让 AI 能够进行注重隐私保护的网络搜索。 在开发过程中，我经常需要让 AI 帮我搜索最新的技术资料、查找某个库的使用示例、或者了解某个技术问题的解决方案。传统的做法是自己去搜索引擎查，然后把结果复制给 AI，比较麻烦。 有了 Brave Search MCP，我直接跟 AI 说： - 帮我搜索一下 React 19 的新特性 - 查一下这个错误怎么解决 它就能通过 Brave 搜索引擎去找答案。而且 Brave 搜索不会追踪你的搜索记录，隐私保护做得很好。  **如何使用？** 首先去 [Brave Search API](https://brave.com/search/api/) 注册账号，然后进入 API Key 管理页面，首先要选择一个订阅计划。必须选择免费版啊！每月有 2000 次查询额度，对于个人开发来说够用了。  但这里比较坑的一点是，即使订阅免费版，也要填写付款方式，没有海外银行卡的朋友可以撤了。 订阅成功后，创建 API Key：  拿到 API Key 后，在 Cursor 的 MCP 配置中添加： ```json { "mcpServers": { "brave-search": { "command": "npx", "args": ["-y", "brave-search-mcp"], "env": { "BRAVE_API_KEY": "你的API密钥" } } } } ``` 配置好后，AI 就能随时帮你搜索最新信息了。 支持网页、图片、视频、新闻等多种类型的内容搜索，甚至能搜索本地商家信息（比如附近的咖啡店）。  它还带有 AI 摘要功能，能把搜索结果自动总结成简洁的答案。 ### ⭐️ Context7 获取最新文档 [Context7](https://context7.com/) 能帮 AI 获取到最新的技术文档。 我们都知道，AI 的训练数据是有截止时间的，比如 GPT-4 的知识可能只更新到 2023 年。这就导致一个问题，当你问 AI 关于某个框架最新版本的用法时，它给出的答案可能是过时的。 Context7 就是来解决这个问题的。它会自动从官方文档网站抓取最新的、特定版本的文档内容，然后提供给 AI。  这样一来，AI 给出的代码示例和建议就是基于最新文档的，不会去用已经废弃的写法，大大提高了项目能正常运行的概率。 **如何使用？** 访问 [Context7 Dashboard](https://context7.com/dashboard) 注册账号并获取 API Key，个人使用是免费的。  然后在 MCP 配置中添加： ```json { "mcpServers": { "context7": { "url": "https://mcp.context7.com/mcp", "headers": { "CONTEXT7_API_KEY": "你的API密钥" } } } } ``` 之后你在 AI 编程工具中跟 AI 对话时，只要跟技术文档相关，或者主动提一嘴 "use context7"，它就会自动去获取最新文档来回复你。  ### Web to MCP 复刻网页组件 [Web to MCP](https://web-to-mcp.com/) 是一个 Chrome 扩展，搭配 MCP 使用，能把网页上的任何 UI 组件直接发送给 AI，让 AI 生成对应的代码，用最快的速度抄作业！  很多时候，我在浏览网站时看到一个不错的 UI 组件，想让 AI 帮我实现类似的效果。以前的做法是截图，然后跟 AI 描述：“帮我做一个类似这样的按钮，圆角、渐变色、带阴影……” 既费时又不准确。 有了 Web to MCP，我只需要在网页上点击某个想复刻的元素：  它就会自动捕获组件的 DOM 结构、CSS 样式、甚至是交互效果，并且给你一个让 AI 复刻组件的提示词。 你只需要把提示词发送给 AI，AI 会调用 MCP 拿到完整的组件信息，并生成代码来复刻组件。  相比于直接给 AI 模糊的截图，生成的代码更准确了。  **如何使用？** 1）通过官网或者在 Chrome 应用商店搜索 Web to MCP 来安装扩展  2）用 Google 账号登录，获取你的 MCP 配置：  3）在 AI 编程工具的 MCP 配置中添加： ```json { "mcpServers": { "web-to-mcp": { "url": "https://web-to-mcp.com/mcp/你的唯一ID" } } } ``` 之后浏览网页时，点击扩展图标，选中你想要的组件，就能直接在 AI 编程工具里引用它，并且快速生成风格一致的代码了。 ### Chrome DevTools MCP 浏览器调试 [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) 是 Chrome 官方团队开发的 MCP 服务器，让 AI 能够直接控制 Chrome 浏览器进行操作和调试。 在做前端开发时，我经常需要调试页面、查看网络请求、分析性能问题。以前这些都得手动在浏览器的开发者工具里操作，现在有了这个工具，我可以直接让 AI 帮我做这些事。 比如我跟 AI 说：“帮我分析当前这个网站加载慢的原因”，它就能打开 Chrome DevTools，分析网络请求、查看资源加载时间，然后告诉我哪里有问题。  或者我说：“帮我测试一下这个表单提交功能”，它就能自动填写表单、点击提交按钮、查看请求响应。 **如何使用？** 在 MCP 配置中添加： ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } } ``` 配置好后，AI 就能帮你自动化测试、调试页面了。工具会自动连接到你正在运行的 Chrome 浏览器，无需额外设置。 这个工具还支持元素定位、网络请求监控、性能分析、页面截图等功能，非常适合前端开发和测试。 ### EdgeOne Pages MCP 一键部署 [EdgeOne Pages MCP](https://github.com/TencentEdgeOne/edgeone-pages-mcp) 是腾讯云团队开发的部署工具，能把你的项目一键部署到腾讯云的加速网络，让别人能访问你的网站，并且给你的网站提速。 开发完项目后，你一定会想让别人访问你的网站。传统的部署流程很繁琐，需要人工打包代码、上传代码到服务器、配置域名、设置 HTTPS 安全证书，一套流程下来得花不少时间。  有了 EdgeOne Pages MCP，我直接在 AI 编程工具里跟 AI 说：“帮我部署这个项目”，它就能自动完成打包、上传、部署的全过程，最后给我一个可以直接访问的 URL。而且部署到全球加速网络，各地访问速度都很快。  **如何使用？** 首先到 [EdgeOne 控制台](https://console.cloud.tencent.com/edgeone/pages) 开通 Pages 服务：  然后获取 API Token，作为调用服务的凭证：  在 MCP 配置中添加： ```json { "mcpServers": { "edgeone-pages-mcp-server": { "command": "npx", "args": ["edgeone-pages-mcp"], "env": { "EDGEONE_PAGES_API_TOKEN": "你的API Token" } } } } ``` 配置好后，就能让 AI 帮你一键部署项目了。部署是免费的，支持静态网站、全栈项目、自动配置 HTTPS 和 CDN 加速等功能，非常适合个人项目和小型应用。  ### COS MCP 对象存储 [COS MCP](https://github.com/Tencent/cos-mcp) 能让 AI 直接操作腾讯云对象存储。 对象存储就是云端的文件存储服务，可以理解为云盘。  在团队协作开发中，我们经常需要让 AI 参考一些项目规范文档、或者引用一些图片。以前的做法是把这些文件放在本地，然后手动上传给 AI，既不方便，也不利于团队维护、修改和共享。 有了 COS MCP，我可以说一句话把这些需要共享的文件存到云端，然后让 AI 直接去读取。  比如我跟 AI 说：“按照我们团队 COS 共享的项目规范文档来写这个功能”，它就能自动从 COS 里读取规范文档，然后按照规范来写代码。  **如何使用？** 1）首先需要开通腾讯云 COS 对象存储服务。访问 [腾讯云 COS 控制台](https://console.cloud.tencent.com/cos)，创建一个存储桶（Bucket）：  2）然后在 "访问管理" > "API 密钥管理" 中获取 SecretId 和 SecretKey，注意一定不要泄露这些信息！  3）在 MCP 配置中添加： ```json { "mcpServers": { "cos-mcp": { "command": "npx", "args": [ "cos-mcp", "--Region=你的地域", "--Bucket=你的存储桶", "--SecretId=你的SecretId", "--SecretKey=你的SecretKey" ] } } } ```  配置好后，AI 就能读取和管理你云端的文件了，相当于给了 AI 一个网盘。 此外，这个工具还支持图片搜索、图片处理、文档转换、视频封面生成等功能。  ### GitHub MCP 代码仓库管理 [GitHub MCP](https://github.com/github/github-mcp-server) 是 GitHub 官方开发的 MCP 服务器，让 AI 能够直接操作 GitHub 代码仓库。 程序员朋友们对 GitHub 肯定不陌生，这是全球最大的代码托管平台，可以用它来存储代码、团队协作开发。  在日常开发中，我可能需要搜索 GitHub 代码仓库、创建 Issue 问题反馈、提交 PR 代码合并请求、查看代码变更、分析提交历史等等。以前这些操作都得在 GitHub 网站上手动完成，现在我可以直接让 AI 帮我做。 比如我跟 AI 说：“我最近在 GitHub 上开源了哪些项目？star 数如何？”  它就能快速给我在 GitHub 上的项目生成一份数据报告：  或者我说：“帮我看看最近一周的代码变更”，它就能分析 Git 提交记录，告诉我都改了什么。  **如何使用？** 首先需要在 GitHub 获取到你的 [Access Token](https://github.com/settings/tokens)，作为访问你 GitHub 资源的凭证：  然后在 MCP 配置中添加： ```json { "mcpServers": { "github": { "url": "https://api.githubcopilot.com/mcp/", "headers": { "Authorization": "Bearer 你的GitHub凭证" } } } } ``` 这个工具还支持代码分析、CI/CD 监控、安全扫描等功能，基本上你在 GitHub 中能做的事，AI 都能帮你做。  ## 二、IDE 扩展插件类 MCP 服务器讲完了，接下来聊聊 IDE 扩展插件。 IDE 就是集成开发环境，简单理解就是写代码的软件，比如 VS Code、JetBrains IDEA 这些，可以通过安装插件来增强编辑器的能力，让你的开发体验更上一层楼。 值得一提的是，现在很多有图形界面的 AI 编程工具（比如 Cursor）都是基于 VS Code 开发的，自然也支持 VS Code 的插件，所以下面我也主要分享 VS Code 插件，装上就能用。  ### Claude Code 官方扩展 Claude Code 是 Anthropic 推出的 AI 编程助手，原本是独立的命令行工具。而 [Claude Code VS Code 扩展](https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously) 能让你在代码编辑器中直接使用 Claude Code，不用额外打开终端。 在 VS Code 或 Cursor 的扩展商店搜索 "Claude Code" 即可安装：  这个扩展的优点是提供了图形界面，你可以通过侧边栏面板和 Claude 对话，能够灵活输入文字。  当 AI 修改代码时，你能在编辑器里实时看到变化，并且自动显示 diff 对比，让你清楚地知道 AI 改了哪些地方。  我经常用它来重构代码、修复 Bug、添加新功能。它还支持多会话并行，也就是说你可以同时让多个 Claude 代理处理不同的任务，比如一个负责前端，一个负责后端，大大提高开发效率。  顺带一提，类似的插件还有 Cline、GitHub Copilot 等，功能都差不多，大家可以根据自己的喜好选择。 ### GitLens Git 可视化 [GitLens](https://www.gitkraken.com/gitlens) 能让你更直观地查看 Git 代码的修改历史。  Git 是程序员用来管理代码版本的工具，简单理解就是能记录代码的每一次修改，包括谁改的、什么时候改的、为什么改。 有了这些记录，出了 Bug 时我就能快速找到 “凶手” 追责。  但 Git 只是个命令行工具，想查看历史记录还需要手敲命令，看起来也不太舒服。  当我通过编辑器的扩展商店安装了 GitLens 后，把鼠标放到任意代码行上，GitLens 就会自动显示这行代码的作者、相关的 PR 合并请求等等。  进入 Git 管理面板，整个项目的提交记录一目了然。  此外，它还支持 AI 功能，能自动生成提交信息、解释代码变更、生成变更日志、用 AI 解释某次改动的目的。  ### ⭐️ Office Viewer 文档预览 [Office Viewer](https://github.com/cweijan/vscode-office) 能帮你在编辑器里直接预览和编辑各种文档。  我们知道，AI 输出的文档内容以 Markdown 格式为主，默认的编辑器中打开 Markdown 文件只能看到原始的标记语法，不够直观。  看长文的时候，我还要用 Typora 等专业的 Markdown 编辑器打开文档，比较麻烦。 在扩展商店搜索 "Office Viewer" 并安装后，可以直接在编辑器中使用所见即所得的 Markdown 编辑器，看文档、写文档都很方便，不用来回切换窗口。  此外，这个插件支持 Excel 表格、Word 文档、PDF 文档、SVG、字体文件、压缩包等多种格式，堪称编辑器里的万能文档查看器。 ### ⭐️ ESLint 代码质量检查 [ESLint](https://eslint.org/) 是前端 JavaScript / TypeScript 项目必备的代码检查工具。  虽然编辑器本身也能检查一些基本的语法错误，但对于代码规范、潜在的逻辑漏洞等问题，就需要专业的代码检查工具来把关了。 现在很多 AI 生成的项目代码都会自带 ESLint 配置文件（比如 `.eslintrc.js` 或者 `eslint.config.js`），定义好团队统一的代码检查规则。  在扩展商店搜索 "ESLint" 并安装后，插件会自动检测项目中的规则配置文件，然后实时检查代码中的问题，并给出修复建议。  这样一来，AI 写的代码如果有不规范的地方，你立刻就能发现并让 AI 修正，避免埋下隐患。 ### ⭐️ Prettier 代码格式化 [Prettier](https://prettier.io/) 是一个代码格式化工具，能自动统一代码风格。  团队协作时，每个人的编码习惯不同，有的代码缩进 4 格、有的缩进 2 格；有的用单引号、有的用双引号。大家的代码风格五花八门，看着就很乱，代码审查时也容易出现 Beef。 这时就需要统一的格式化规范了。现在很多 AI 生成的项目代码都会自带 Prettier 配置文件（比如 `.prettierrc`），定义好统一的格式化规则。  在扩展商店搜索 "Prettier" 并安装后，就可以用快捷键一键格式化代码。  还可以在 VS Code 的设置里搜索 "Format On Save" 并开启，这样每次保存代码时就会自动格式化，保证整个项目的代码风格一致。  ### Error Lens 错误实时显示 [Error Lens](https://github.com/usernamehw/vscode-error-lens) 能让你一眼看到代码中的错误。  一般情况下，如果代码中有错误，你得把鼠标移到红色波浪线上才能看到错误提示，不够直观。  在扩展商店搜索 "Error Lens" 并安装后，错误信息会直接高亮显示在代码行尾，你一眼就能看到哪里有问题。  ### Console Ninja 控制台日志显示 [Console Ninja](https://github.com/wallabyjs/console-ninja) 能让你在编辑器里直接看到代码的运行结果。  在调试前端代码时，我经常需要看 `console.log` 打印出来的日志输出。要先切换到浏览器，再按 F12 打开开发者工具来查看控制台，比较麻烦。  在扩展商店搜索 "Console Ninja" 并安装后，直接在编辑器里就能看到输出结果，看到每个日志是从哪个文件哪一行输出的，还能显示网络请求和错误堆栈。  有了它，不用频繁切换窗口了，调试效率大大提升。 ## 三、跨编辑器通用工具 前面介绍的工具都是对编辑器能力的增强，接下来聊聊跨编辑器通用的工具。这些工具不依赖特定的编辑器，适用于 Cursor、VS Code、Claude Code、GitHub Copilot 等几乎所有主流的 AI 编程工具。 ### Spec-kit 规范驱动开发 [Spec-kit](https://speckit.org/) 是 GitHub 推出的规范驱动开发（SDD）框架。 什么是 SDD 呢？ 传统开发流程是：想到什么写什么，边写边改，最后再补文档。这样容易导致需求不清晰、代码和文档对不上。 而规范驱动开发的思路正好相反：先把需求写成规范文档，并且把规范文档当作代码的 **唯一真相来源**。你可以把规范文档理解为 **法律条文**，它包含了详细的需求描述、系统设计和接口定义。AI 必须严格遵守这些条文来生成代码，确保产出完全符合预期。  听起来有些抽象，我们可以跟着 [Spec-kit GitHub 仓库](https://github.com/github/spec-kit) 的官方文档来实战一下。 首先打开终端，利用 uvx 命令直接安装运行 Specify 工具，并初始化一个项目： ```bash uvx --from git+https://github.com/github/spec-kit.git specify init my-project ```  选择你使用的 AI 编程工具，Spec-kit 支持 Claude Code、GitHub Copilot 等几乎所有主流编程工具。这里我选 Claude Code：  根据操作系统选择脚本类型，Windows 选下面的，其他选上面的：  执行完这个命令后，会在当前目录下创建一个 `my-project` 文件夹：  文件夹里面包含了这些核心文件： - `.specify/memory/constitution.md`：项目的基本准则和约定 - `.specify/scripts/`：一些可执行脚本 - `.specify/templates/`：模板文件 - `.claude/commands/`：定义了一套内置的斜杠命令，让你在 AI 编程工具中可以直接调用  初始化程序还给了我们一些指引，告诉我们接下来如何运用这些命令来开发项目。  用 Claude Code 打开这个项目文件夹，就可以在对话中使用定义好的命令了。  接下来就是标准化的开发流程，参考 [官方文档](https://github.com/github/spec-kit)，主要分为 7 个步骤： 1）Constitution 制定项目准则 运行 `/speckit.constitution` 命令，定义项目的基本原则、代码规范、性能标准等。这是项目的 “宪法”，后续所有开发都要遵守。 比如： ```markdown /speckit.constitution 禁止使用蓝紫渐变色风格的 UI ``` 💡 如果你要做中文项目，最好在制定项目准则时就明确告诉 AI “整个网站使用中文”。  AI 更新了项目准则文档：  建议每一步我们都用 Git 提交一个版本，这样出了问题后能及时回滚，也便于我们看到每一步改动的文件。  2）Specify 编写功能规范 运行 `/speckit.specify` 命令，描述要做什么功能、为什么做、用户需求是什么。比如： ```markdown /speckit.specify 我想做个【自动提醒我喝水的网站】 ```  AI 为这次的需求创建了一个新的 Git 分支，防止污染现有项目。在这个分支下创建了一个需求规格文档（spec.md） + 一个需求检查文档（requirements.md）。  需求规格文档非常详细，还包含了边缘测试用例，针对用户各种可能的操作进行处理。  需求检查文档中记录了 AI 对于需求的理解，打钩表示 AI 理解并确认了：  3）Clarify 澄清不明确的地方（可选） 如果你发现需求检查文档中有的条目没有打钩，那你需要通过 Clarify 命令来让 AI 引导你进一步明确需求，直到所有的条目都打上勾。 运行 `/speckit.clarify` 命令，AI 会提出结构化的问题，让你来回答。从而帮你填补需求中的空白，比如边界情况、错误处理等。  我运气不错，不需要这一步 AI 就已经理解了所有条目，接下来可以进入制定技术方案阶段。  4）Plan 制定技术方案 运行 `/speckit.plan` 命令，让 AI 决定用什么技术栈、系统架构、数据模型、API 接口等。  制定技术方案完成，这次生成了一大堆文档，简单了解一下： - CLAUDE.md 项目开发指南，记录技术栈和项目结构，用于指导 Claude Code 接下来如何开发 - quickstart.md 快速入门指南，包含 6 个实施阶段和部署方案 - plan.md 实施方案，定义了纯客户端架构、存储策略、宪法合规性检查等 - data-model.md 数据模型设计，定义了 4 个核心实体（提醒设置、水量日志、每日进度、历史记录）和存储结构 - research.md 技术研究文档，记录了 8 项关键技术决策 - contracts/api-contract.md API 接口文档  接下来，我们就可以准备开发实现了。  5）Tasks 拆解任务 运行 `/speckit.tasks` 命令，把计划拆解成可执行的任务列表，并标注依赖关系和优先级。  生成了一个任务列表文档，每一步要做什么都非常清晰：  6）Analyze 分析检查（可选） 运行 `/speckit.analyze` 命令，检查规范、计划、任务是否完整一致，提前发现设计缺陷。  可以看到，AI 没有检查出问题，还让我自信地进行下一步，真爽死了！ 7）Implement 执行实现 最后，运行 `/speckit.implement` 命令，让 AI 按照任务列表生成代码。  大功告成，看一下效果~  因为我这里始终没有提到使用中文输出，所以网站内容都是英文的，不过我感觉效果还可以。 到这里，我们已经学会了如何用 Spec-kit 开发完整项目，再复习一下完整流程：  即使不用 Spec-kit，我们开发完整项目时也可以人工遵循这些步骤。 这种模式最大的好处是 **对齐**。所有人都基于同一份清晰的规范文档工作，大家对需求的理解高度一致，既减少了沟通中的误解，又能确保代码质量。 不过缺点也很明显，对于小项目，本来直接写代码几分钟就能搞定了，上面这套流程走下来差不多要半个小时！ 所以这套流程比较适合团队从 0 开始做完整的新项目，虽然流程比直接写代码慢一些，但能大大降低返工的风险，长远来看反而更高效。 ### OpenSpec 轻量规范框架 [OpenSpec](https://openspec.dev/) 是一个轻量的规范驱动开发框架，比 Spec-kit 更简单易用。 它的核心理念是把规范文档作为代码库的一部分，每次改功能都 **先写变更提案** => 确认后再实现 => 实现完再把变更归档到规范文档中，让文档和代码始终保持同步。  访问 [OpenSpec 官方仓库](https://github.com/Fission-AI/OpenSpec/) 查看文档。 首先确保你的电脑安装了符合要求的 Node.js 版本（比如我这里要求 Node.js >= 20.19.0），然后全局安装 OpenSpec CLI： ```bash npm install -g @fission-ai/openspec@latest ``` 进入你的项目目录，运行初始化命令： ```bash openspec init ``` 初始化过程中会让你选择要集成的 AI 工具（比如 Claude Code、Cursor 等），我这里选择 Cursor。  运行命令后，OpenSpec 会自动在你的项目中生成一个 `openspec/` 目录，里面包含： - `openspec/specs/`：存放主规范文档，记录了项目的完整现状 - `openspec/changes/`：存放变更提案，记录了每次修改的计划 - ⭐️ `openspec/AGENTS.md`：让 AI 编程助手使用 OpenSpec 进行规范驱动开发的操作指南，包含了如何创建变更提案、编写需求规范、验证和归档变更的完整工作流程。 - `openspec/project.md`：当前项目的上下文说明（用来记录项目的信息）  此外，还会根据你选择的 AI 编程工具，生成对应的命令文件，比如 Cursor 的：  有了这些文件，我们就可以开始规范化的开发流程了。参考 [官方文档](https://github.com/Fission-AI/OpenSpec/)，主要分为 5 个步骤： 1）Draft 起草变更提案 直接在 AI 编程工具中跟 AI 说，让它创建变更提案。比如我想添加用户搜索功能： ```markdown 创建一个 OpenSpec 的 change，添加功能：根据名称和邮箱搜索用户 ``` 也可以用 AI 编程工具（比如 Claude Code、Cursor）的斜杠命令： ```markdown /openspec:proposal 添加功能：根据名称和邮箱搜索用户 ```  AI 会给这个功能创建一个独立的目录 `openspec/changes/add-user-search/`，目录下创建一系列文档： - `proposal.md`：描述要改什么、为什么改 - `tasks.md`：实施步骤的任务分解 - `specs/…/spec.md`：需求变更的具体内容  2）Verify & Review 验证和审查 可以运行下列命令，查看 AI 创建的变更提案是否正确： ```bash openspec list # 查看所有变更 openspec validate add-user-search # 验证格式是否正确 openspec show add-user-search # 查看详细内容 ```  3）和团队一起审查提案 如果需要完善，可以继续跟 AI 对话，比如： ```markdown 你能帮我添加更多搜索条件和限制么？ ``` AI 会更新规范和任务列表，直到大家达成一致。 4）Implement 实现变更 规范确认后，让 AI 开始实现： ```markdown 规范已经很完美了，开始生成代码吧 ``` 也可以用斜杠命令： ```markdown /openspec:apply add-user-search ``` AI 会按照 `tasks.md` 中的任务列表逐一实现，并标记完成状态。  很快生成完成，AI 的输出非常整齐，所有改动一目了然：  5）Archive 归档变更 所有任务完成后，让 AI 归档这次变更： ```markdown 请归档这次变更 ``` 也可以用斜杠命令： ```markdown /openspec:archive add-user-search ``` 或者在终端运行： ```bash openspec archive add-user-search --yes ```  这个命令会： - 将变更文件夹移动到 `openspec/changes/archive/` 归档区 - 将需求变更自动合并到 `openspec/specs/` 主规范中 - 保持文档和代码的同步  这样一来，通过 `openspec/changes/` 的历史记录，你可以随时追溯每次变更的来龙去脉。 此外，整个开发过程中，建议大家定期运行 `openspec validate` 验证命令， 确保规范的完整性。 --- 到这里，相信大家也能感受到 OpenSpec 和 Spec-kit 的区别了。 - Spec-kit 需要完整的 7 步流程：制定准则 → 写需求 → 澄清疑问 → 定方案 → 拆任务 → 检查 → 写代码），适合从 0 开始做大型新项目 - OpenSpec 的流程更简化：起草提案 → 审查 → 实现 → 归档 → 验证，上手更快，适合在现有项目上迭代功能。 ### ⭐️ Agent Skills 通用 AI 技能库 [Agent Skills](https://claude.com/blog/skills) 是 Anthropic 新推出的 AI 技能系统。 它定义了一种 **封装 AI 工作流** 的标准：开发者可以把复杂的任务指令、脚本和资源打包成一个 **技能（Skill）**；作为用户，你只需要安装这些技能，AI 就能立刻学会这项本事，不用重复造轮子。  让我们来实战一下，利用 [frontend-design](https://www.claudeskill.site/en/skills/anthropic-agent-skills:frontend-design) 这个 Agent Skills 来优化生成网站的界面。 1）安装 Agent Skills 首先打开 Claude Code，输入一行命令，把官方提供的 Skills 注册为插件市场： ```markdown /plugin marketplace add anthropics/skills ```  然后输入 `/plugin`，通过 Tab 键切换到 Marketplaces 界面，批量安装官方提供的 Skills。包括： - document-skills：文档技能包，可以处理 Excel、Word、PPT、PDF 等文档。 - example-skills：示例技能包 ，可以处理技能创建、构建 MCP、视觉设计、算法艺术、网页测试、动图制作、主题样式等。  安装好之后，输入 `/skills` 命令，就能看到所有已经安装完成的技能了，我们要的 `frontend-design` 也在其中。  可以在本地找到 Skills 的安装位置，你会发现，SKills 的本质就是一组封装好的提示词文档 + 脚本文件等：  还有另外一种安装方式，也可以在 Claude Code 中输入一行命令来安装 [frontend-design](https://www.claudeskill.site/en/skills/anthropic-agent-skills:frontend-design) 技能。 ```markdown skill install anthropic-agent-skills:frontend-design ``` 2）安装完 SKills 后，你只需要和之前一样跟 AI 对话，程序会自动根据你的任务选择使用什么 Skills。 比如我让 AI 开发一个精美的狼人杀网页游戏，它会询问我是否要使用 `frontend-design` 技能。  使用这个技能后，AI 会选择独特的设计风格，生成的界面既有个性又专业，告别千篇一律的蓝紫渐变色。而且不需要你每次都重复输入一堆设计要求，非常方便！  不用技能是这样的，对比一下：  目前 [Anthropic 官方技能仓库](https://github.com/anthropics/skills) 已经提供了丰富的技能集合，涵盖编程相关的数据库优化、API 安全、测试策略、代码审查、文档生成，还有办公相关的 PPT 制作、Excel 处理、Word 文档、PDF 生成等各个方面。 如果官方提供的技能不够用，你还可以上传自定义技能，或者访问 [Claude Skills Hub](https://www.claudeskill.site/) 下载社区贡献的技能。  值得一提的是，Agent Skills 现已成为 [通用标准](https://agentskills.io)。除了 Claude，[Cursor](https://cursor.com/docs/context/skills) 等主流 AI 编程工具也会陆续提供支持。也就是说，你在一个工具里用的技能，在另一个工具里也能复用。 ### Superpowers 核心技能库 [Superpowers](https://github.com/obra/superpowers) 是一套让 AI 编程助手变得更专业的 **软件开发流程**。它不仅为 Claude Code 提供了一套可组合的 **编程技能包**，还提供了规范和指令，确保 AI 能够正确使用这些技能。 传统的 AI 编程，你一说需求它就开始噼里啪啦地写，结果可能并不是你想要的。而装了 Superpowers 之后，AI 会先问清楚你到底想做什么，然后出设计方案让你确认，接着制定详细的执行计划，最后才分步骤去实现，每一步还会自我检查。 就像给一个刚进公司啥都不懂的 AI 加上了超能力，瞬间让它有了专业程序员的开发习惯。  **如何使用？** 参考 [Superpowers 官方文档](https://github.com/obra/superpowers)，在 Claude Code 中运行以下命令安装。 先注册市场： ```bash /plugin marketplace add obra/superpowers-marketplace ```  再从市场安装插件： ```bash /plugin install superpowers@superpowers-marketplace ```  安装后运行 `/help` 查看可用命令，你会看到这 3 个命令 - `/superpowers:brainstorm` 通过和用户交互来不断改进设计 - `/superpowers:write-plan` 创建实现方案 - `/superpowers:execute-plan` 批量执行方案  下面以开发一个 “用户注册模块” 为例，演示 Superpowers 官方的标准工作流程。 首先，在终端中运行 `claude` 命令来启动 Claude Code，然后按照下面的 7 个步骤操作： 1）Brainstorming 头脑风暴 => 对齐需求 选择 `/superpowers:brainstorm` 命令并输入需求：  Superpowers 不会急着写代码，而是先通过多轮问答和你对齐需求，比如： - 用户注册模块的主要场景是什么？ - 希望支持哪些注册方式？  通过交互问答，AI 会探索不同方案、不断改进设计。  当需求和方案确认无误后，它会自动将详细的设计文档保存到 `docs/plans/` 目录。  2）Using Git Worktrees 创建独立工作空间（可选） 设计方案通过后，Superpowers 会帮你创建一个 Git 工作树（worktree），在新分支上建立隔离的工作空间，运行项目初始化，并验证测试基线是否干净。这样可以避免污染主分支。 这一步是可选的，我这里直接让 AI 继续执行，看看会发生什么：  3）Writing Plans 制定实施计划 运行 `/superpowers:write-plan` 命令，让 Superpowers 生成一份详细的实施计划，把开发任务拆解成多个原子级步骤（每个任务控制在 2 ~ 5 分钟）。 我这里 AI 直接自动执行了，省了一步命令~  查看 AI 生成的实施计划文档，每个任务都包含： - 精确的文件路径 - 完整的代码内容 - 验证步骤  好家伙，这哪里是实施计划文档啊，感觉大多数代码都写出来了！  4）执行任务 运行 `/superpowers:execute-plan` 命令，Superpowers 会采用以下方式之一执行： - 子代理驱动开发（Subagent-Driven Development）：为每个任务分配一个全新的子代理，经过两阶段审查（规范合规性检查 + 代码质量检查） - 批量执行（Executing Plans）：分批执行任务，在关键节点暂停让人工检查 我这里 AI 直接问我想要哪种方式：  我盲选一手 Subagent-Driven 方式，AI 自动选择了对应的开发技能：  然后 AI 就开始干活了：  5）Test-Driven Development 测试驱动开发 在实现过程中，Superpowers 会强制执行 `红-绿-重构` 流程： - 先写失败的测试 - 运行测试，确认失败 - 写最小化的代码让测试通过 - 运行测试，确认通过 - 提交代码  如果发现有代码是在测试之前写的，Superpowers 会删除它，强制你先写测试。 6）Code Review 代码审查 每完成一批任务后，Superpowers 会自动触发代码审查，对照计划检查代码，按严重程度报告问题。如果发现严重问题（Critical），会阻止继续进行。  7）完成开发 所有任务完成后，Superpowers 会验证所有测试是否通过：  然后 AI 可能会提供几个选项，比如合并到主分支 / 创建 PR / 保留分支 / 丢弃更改。 如果你确定功能没有问题，可以利用 Superpowers 内置的技能来完成开发分支的清理工作。  --- 这套 “先设计后编码” 的规范流程走下来，代码质量会更有保障，不过代价就是速度确实比让 AI 直接生成代码会慢很多。真的是慢很多！就这么个需求我搞了半个多小时！！！  如果你正在开发大型项目，需要团队协作，那么可以试试 Superpowers，前期多花的时间会在后期省回来。但是如果你只是想写个简单的脚本或者快速验证一个想法，用它就有点儿牛刀杀鸡了，真没必要。 ### AIChat 命令行增强工具 [AIChat](https://github.com/sigoden/aichat) 是一个功能完善的 AI 命令行助手，集成了 20+ 主流大模型。 现在主流的 AI 编程工具（Cursor、VS Code 等）都内置了终端，有时我们需要敲命令来执行任务，但是命令记不住怎么办？ 用了 AIChat 后，你只需要在终端中说人话，它的 **Shell 助手** 能力就会把你的自然语言自动转换成准确可执行的命令。 使用方法非常简单。打开终端，通过包管理器一行命令就能安装： ```bash # macOS/Linux brew install aichat # Windows scoop install aichat ``` 安装完成后，运行 `aichat` 命令，首次执行会引导你创建配置，选择你要用的大模型并填写 API Key：  然后就可以愉快地跟 AI 对话了：  但是我个人主要用它的 Shell 助手能力（给命令添加 `-e` 选项），而不是 AI 对话能力。  比如我想批量重命名文件，但不记得命令怎么写，在终端里执行下列命令： ```markdown aichat -e 帮我把当前目录下所有 .txt 文件改成 .md ``` 它就会生成对应的 shell 命令，我确认后它就自动执行了。  还可以通过快捷键来智能补全命令：  除了 Shell 助手，AIChat 还有一些进阶功能。比如支持 RAG 检索增强生成，可以让 AI 基于你的本地文档回答问题；支持创建 AI 代理，把指令、工具和文档组合成自动化工作流。  此外，如果你想对比不同模型的效果，运行 `aichat --serve` 可以启动本地网页界面，同时对比多个模型的回答。  ## 最后 OK，以上就是我推荐的 AI 编程扩展，其中标星 ⭐️ 的是我强烈建议安装的，其他的你可以按需选择安装。 后续我会深入介绍其中部分扩展的高级用法和实战技巧。如果本期内容对你有帮助，记得点赞收藏三连，欢迎关注鱼皮，不错过更多 AI 编程干货。 这篇文章的文字版我同步到了 [鱼皮的 AI 导航网站](https://ai.codefather.cn)，在这里你还可以获取到更多免费的 AI 学习资源、全面的 AI 工具、最新 AI 资讯等等。 也欢迎在评论区分享你在用的 AI 编程工具，一起进步吧！ ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)

你的 IP 归属地，是咋被挖出来的？

你是小阿巴，正在家里偷偷欣赏一部很精彩的内容。 你：嗯，真不错啊~  一时兴起，你留下了一条评论：作者牛掰！ 结果刚发出去，你就发现评论下面竟然显示：`北京` 你大惊失色：啊，俺被定位了！这网站在监控俺！俺要举报它！  这时，程序员鱼皮突然出现在你身后，擦着鼻血说：淡定，很多平台都会显示用户 IP 归属地的，这很正常。 你吓了一跳：额，你谁啊？ 鱼皮：我是古希腊掌管编程的神……精，下面我来科普一下 —— 你的 IP 归属地，是怎么被获取到的？  ⭐️ 本文对应视频版：[https://bilibili.com/video/BV1xCi9BJEx1](https://www.bilibili.com/video/BV1xCi9BJEx1/) ## 怎么获取你的 IP 归属地？ 鱼皮：你上网的时候，你的电脑要跟服务器通信来获取网页和数据。 就像寄快递一样，快递员要把包裹送到你家，得知道你家的地址。这个地址就是 **IP 地址**，可以理解为你的网络门牌号。  你：但平台是怎么通过 IP 地址知道俺在 “北京” 的呢？ 鱼皮：这就涉及到互联网的组织形式了。 为了方便管理和路由，全球互联网被划分为许多个巨大的网络领地，我们把每个领地叫做 **自治系统**（Autonomous System），简称 AS。  这些 AS 一般由电信、联通这样的运营商（ISP），或者大型互联网公司运营。  每个 AS 负责管理一大批 IP 地址，并规划数据包的传输路线。 运营商在拿到这些 IP 后，会根据自己的机房部署，把不同的 IP 地址段划分给不同城市的网络设备。  为了方便管理，每个 AS 都有一个全球唯一的编号，叫 **ASN**（Autonomous System Number）自治系统编号。  比如 AS4808 是中国联通北京省网络，联通会把其中一段 IP（比如 123.xx.xx.0 到 123.xx.xx.255）分配给他们在北京的接入机房。  你：所以想查俺 IP 的位置，关键就是找到 ASN？ 鱼皮：有更简单的方法。全球有很多专业的机构（如 MaxMind、IP2Location）专门收集并汇总了这些 AS 内部 **IP 段和城市的映射关系**，做成了 **IP 地理位置数据库**。  数据库里会记录：这个 IP 段属于 AS4808（中国联通），且目前分配给了北京市的某个接入节点。就知道你大概所属的位置了。  我们打开 [这个网站](https://ip.sb) 查一下，就能看到你家 IP 的完整信息： - Address：123.xx.xx.xx（你的 IP 地址） - ISP：China Unicom（网络服务提供商，中国联通） - ASN：AS4808（自治系统编号） - ASN Organization：China Unicom（ASN 所属的运营商） - Location：北京 中国（地理位置）  你激动了：哇，一目了然啊！ ## 能定位多精确？ 你紧张起来：等等，那平台管理员岂不是能顺着网线找到俺家门牌号？俺这就把网线拔了！  鱼皮：别慌，通过 IP 地址定位的精确度，取决于数据来源。 像刚才我们用的查询工具，还有微博、抖音这些社交平台，它们都是基于 ASN 和运营商数据来定位的，通常只能定位到市级或者区级，比如广东深圳、上海浦东这种。  你：反正不会显示到 “某栋某室” 对吧？那俺在新闻里看到有人说 “顺着网线抓人” 是怎么回事？ 鱼皮：想要找到你的 **精确定位**，可以查询运营商那边详细的分配记录，记录着哪个 IP 在什么时间分配给了哪个用户，甚至有具体的安装地址。  但是，这些数据有严格的隐私保护，只有执法部门依法调查的时候才能查询。普通人和普通平台是查不到的，所以别担心。不做亏心事，不怕鬼敲门。  你若有所思：看来在网络上也不能乱说话呀…… 鱼皮：不过，还有其他精确定位的方法。比如你给 APP 开了 **GPS 权限**，APP 就能直接读取你手机里的 **经纬度坐标**，精度可以达到 10 米以内。  哪怕你关了 GPS，只要你开了 **WiFi 或蓝牙扫描权限**，APP 照样能定位。它们会扫描你附近几个 WiFi 的特征 ID（BSSID），然后去云端数据库一比对，发现你周围这几个 WiFi 都在某栋写字楼里，就能反推出你也在那里。  你心有余悸：还好我的手机权限没有乱开…… 但是鱼皮，平台为什么要显示 IP 归属地呢？会不会侵犯用户的隐私啊？ ## 会不会侵犯隐私？ 鱼皮：其实这个功能是有依据的。2022 年 6 月，国家网信办发布了《互联网用户账号信息管理规定》，要求平台展示 **合理范围内** 的 IP 归属地信息，目的是便于公众监督，减少网络上的不实信息传播。  而且你看，正规平台只显示大致地区，并不涉及你的具体个人身份信息，也不会暴露你是谁、住在哪里。 你：原来如此！但如果俺是个大明星，粉丝不就知道俺大概在哪里了？万一人多力量大，不小心把俺逮到了怎么办？  对了，俺能不能修改自己的 IP 归属地呢？ ## 怎么修改 IP 归属地？ 鱼皮坏笑：这太简单了，你只需要买一张高铁票，从北京到天津，半个小时就搞定了~ 你一拍脑袋：妙啊！  鱼皮：哼哼，不过还有更简单的方式 —— 通过代理服务器。 代理服务器就像网络中转站。 正常情况下，你的请求是直接发给目标网站的。 但如果用了代理服务器，你的请求会先发到代理服务器，再由它转发给目标网站。 这样一来，目标网站看到的就是代理服务器的 IP，而不是你的真实 IP。  你恍然大悟：俺懂了，就像俺让朋友帮忙寄快递，寄件地址显示的是朋友家，而不是俺家。  鱼皮：来，我给你演示一下。比如我在北京有台服务器，可以用一个叫 Nginx 的高性能 Web 服务器软件来配置代理。 首先，我在服务器上安装 Nginx（这里利用了宝塔 Linux 面板极速安装）：  然后编辑配置文件 `nginx.conf`，配置一个简单的正向代理，也就是让你的请求通过代理服务器转发出去。 ```nginx # 简易正向代理（注意：仅支持 HTTP 流量，不支持 HTTPS） server { listen 8080; location / { # 必须配置 DNS 解析器 resolver 8.8.8.8; # 设置代理目标 proxy_pass http://$http_host$request_uri; # 隐藏真实 IP，防止泄露给目标网站 proxy_set_header X-Real-IP ""; proxy_set_header X-Forwarded-For ""; proxy_set_header Via ""; } } ```  配置好之后，重启 Nginx（或者重载配置）：  接下来，当你通过这台服务器的 8080 端口访问 HTTP 网站时，网站看到的就是这台北京服务器的 IP 了。  不过这个简易配置只能代理 HTTP 网站，如果要代理 HTTPS，需要更复杂的配置或者使用专门的代理软件。不过思路是一样的，都是通过中转服务器来隐藏真实 IP。  你兴奋地手舞足蹈：阿巴阿巴，俺也要这样做！ 鱼皮：技术虽然不难，但你要注意合理使用技术。 如果是正常的技术学习、企业应用，完全没问题，很多公司都会用代理服务器来管理网络流量。 但千万不要用来逃避平台规则或者做违规的事情。而且现在很多平台都有检测机制，能识别出你是不是用了代理访问。 你好奇道：它们是怎么检测出来的？ 鱼皮：常见的方法有这几种 1. 检查 HTTP 请求头，代理访问时会有一些特殊的请求头信息，比如 X-Forwarded-For 2. 检查 IP 地址库，有些服务会维护已知的代理服务器 IP 黑名单 3. 分析访问行为，比如同一个 IP 短时间内有大量不同用户的请求，就很可能是代理 4. WebRTC 泄露检测。浏览器在实现视频通话时会尝试建立点对点连接，这个过程中可能暴露你的真实 IP 地址，即使你用了代理也没用  你：看来想完全隐藏 IP，还有点儿难啊…… 鱼皮：所以最好还是合规使用网络，不做违规的事情哦。 小阿巴：明白了明白了！俺要在你的内容下评论，看看自己的归属地~  ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)

我的免费 Vibe Coding 教程，爆了！

📌 鱼皮的《AI 编程零基础入门教程》，完全免费开源！ 如今 Vibe Coding 已经火遍全网，不仅是程序员，连设计师、产品运营、甚至完全不懂技术的人都开始用 Vibe Coding 实现自己的想法，用 AI 做出了自己的产品并盈利变现。 为了帮大家紧跟时代，我一人爆肝，创作了一套 [《Vibe Coding 零基础入门教程》](https://ai.codefather.cn/vibe)，完全免费开源！ 上千张图、几十万字，结合了我两年半的 AI 编程经验 + 项目开发经验 + 产品变现经验，我的目标只有一个：**帮助任何人快速掌握 Vibe Coding，哪怕零基础，也能快速开发上线自己的产品并盈利。**  臭不要脸一下，我敢说这套免费教程吊打 90% 的付费 Vibe Coding 内容，毕竟我投入了足够多的时间。 - 教程文档开源地址：https://github.com/liyupi/ai-guide - 教程在线阅读地址：https://ai.codefather.cn/vibe 欢迎大家 Star 收藏、分享给身边的朋友！  ## 什么是 Vibe Coding？ 简单来说，**Vibe Coding 就是用人话和 AI 聊天，让 AI 帮你写代码**。你不需要记住任何语法，只需要把需求讲清楚，比如说 “帮我做一个记账页面”，AI 就能帮你生成。编程变得像聊天一样自然，这就是 Vibe Coding 的魅力。 ## 为什么要学 Vibe Coding？ 以前学编程要花几个月，现在用 Vibe Coding 几天就能上手。今天想到一个点子，今天就能做出来，生产力提升数十倍！ 学了 Vibe Coding 后，你可以快速做出提升办公效率的小工具、可以开发解决生活问题的应用、可以把脑海中的创意变成真实的产品并盈利。 ## 这套教程有什么？ 网上虽然有很多 AI 编程教程，但要么太碎片化、要么只讲工具不讲方法、要么缺少实战案例。 这就导致大家只能东拼西凑、搜到一个学一招，很难系统地掌握 Vibe Coding。 **因此，我出手了！** 这套教程涵盖了 Vibe Coding 的方方面面。从零基础入门 => 10 分钟做出第一个项目 => 学会多种 AI 编程工具 => 实战各类 AI 项目 => 掌握 AI 编程核心技巧 => 跑通产品变现全流程，再搭配 AI 编程学习资源、AI 知识百科、常见问题解决手册，能够帮你玩转 Vibe Coding，应对各种需求。  我精心梳理了内容结构，让你能够一条龙学习，或者快速找到适合自己阅读的内容。 - 基础必读：帮你快速理解 Vibe Coding 并上手实践，10 分钟做出第一个作品 - 编程工具：帮你选择适合自己的 AI 编程工具，包括 AI 模型选择、AI 零代码平台、AI 智能体平台、AI 代码编辑器、AI 命令行工具、IDE 插件等 - 项目实战：手把手带你从 0 到 1 做出真实可用的产品，覆盖个人工具、AI 应用、全栈应用、小程序等多种类型 - 经验技巧：帮你提升 Vibe Coding 效率和质量，包括核心心法、对话工程、上下文管理、幻觉处理、代码质量保障等 - 产品变现：教你如何让产品产生价值，涵盖需求分析、技术选型、架构设计、盈利模式、SEO 优化、自媒体运营等 - 编程学习：为想深入学习编程的同学准备的进阶内容，包括学习路线、知识百科、资源大全、MCP 开发、面试刷题等 - 资源宝库：汇集各种实用资源，包括工具大全、提示词模板、AI 概念大全、Vibe Coding 常见问题等  这套教程不是枯燥的理论堆砌，而是以实战为核心。配有丰富的项目案例和大量截图示例，手把手带你边学边做，真正掌握 Vibe Coding。  ## 适合哪些同学？ **1）适合任何想用 AI 提升效率的人** 如果你曾经想学编程，但被复杂的语法、难懂的概念劝退过；或者你有不错的创意，想要快速开发上线自己的产品；又或者你只是想用 AI 提升日常办公效率、做个小工具解决工作中的重复劳动。用 Vibe Coding，几天就能上手，像聊天一样编程。 **2）适合想提升效率的程序员** 如果你是一个传统程序员，每天被重复的代码折磨得想摔键盘。用 Vibe Coding，生产力提升数十倍不是梦。教程中的经验技巧和项目实战，能帮你快速进阶成为 Vibe Coding 高手。 **3）适合想产品变现的创业者** 如果你想把想法变成产品并盈利，这套教程不仅教你怎么做产品，还教你怎么让产品产生价值。从需求分析到盈利模式，从 SEO 优化到自媒体运营，我会把自己做过 10+ 自研产品、从 0 到 200 万粉的经验都分享给你。  ## 从哪开始学习？ **零基础新手** - 第 1 天：读完基础必读，理解 Vibe Coding 并做出第一个作品 - 第 1 ~ 2 周：学习 AI 编程工具 + 做几个简单项目 - 之后：按需学习经验技巧和产品变现 **有编程基础** - 第 1 天：快速过完基础内容，完成快速上手教程 - 第 1 周：学习主流 AI 编程工具，尝试重构之前的项目 - 之后：重点学习进阶技巧，提升对话和上下文管理能力 实战是最好的老师，无论你是什么背景，都要在学习过程中多 Vibe 一些项目，在实战中遇到问题并解决，这才是最有效的学习方式。  ## 写在最后 我一直相信，知识分享是互利共赢的。 这套教程完全免费开源，希望能帮更多人打开 Vibe Coding 的大门。 但毕竟是一个人编写的，会有不足的地方，我会持续更新和完善内容。 **如果这套教程对你有帮助的话，希望能点赞或者 Star ⭐️ 支持一下！** 别犹豫，现在就 [打开教程](https://github.com/liyupi/ai-guide)，10 分钟后你就能做出第一个作品，跟着鱼皮一起开启 Vibe Coding 之旅吧！🛫 ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)

基于用户画像和多模态需求驱动的多智能体推荐系统 - 技术文档

# 多维 AI 智能推荐 Agent 系统技术文档 **版本号**: v4.2 **开发人**: 尘小风 **当前状态**: 本地开发已完成 ## 0.写在前面的话 记录第一个 100% 纯原创项目开发完成（借助Gemini辅助开发）。 **First Question：为什么会想到做这样一个项目？** 实际是纯粹是某天凌晨失眠睡不着，胡思乱想，突然冒出来的想法。 当前的推荐算法主要借助协同过滤与简单的用户标签，有些会结合一些图算法，但是总体而言，缺乏灵动的动态更新、自我迭代的能力。 而大模型本身就以深度语义理解为主，能够非常好的捕捉用户的深层需求，如果可以再加上用户的一些个性、行为特征，是不是能够实现更好的推荐效果呢？ **Second Question：项目的核心定位** 一句话概括就是：是一个可以根据用户的动态画像，结合多模态的输入，综合分析用户的深层需求，从而为用户推荐最适合的 商品/视频 的智能推荐系统。 **Third Question：最初的实现构想** 最初构想的实现其实很简单，总体的逻辑就是：先让用户回答设计好的问卷问题，然后通过调用大模型，来根据用户答案建立起他的用户画像；之后将用户画像和用户的需求一同输入给另一个Agent，作用是根据需求，提取用户画像中相关的关键词，共同构建用于商品/视频检索的关键词，然后通过一个编写好的爬虫工具，根据关键词去对应的平台进行信息检索，把最前面的几条结果进行返回。 **Last Question：系统最终的核心模块** 随着项目不断迭代（一共经过四次大版本的迭代，和中间N次小版本的优化），不断的在系统中加入了新的角色和功能： 1. 用户画像Agent，用不同的Prompt和参数配置去调用不同的模型去生成A/B两版画像和关键词标签（带权重），并允许用户对生成的画像进行反馈和再生成，最终实现最符合用户的“数字孪生”； 2. 可同时接收文本和图像双模态输入，具有自动的需求冲突检测功能、并允许用户进一步澄清需求的核心关键词提取Agent； 3. 具有对爬虫检索结果进行多重漏斗筛选的FilterAgent（用户需求中的硬性要求剔除 -> 根据检索结果与用户需求的相关性进行粗筛的embedding模型 -> 对粗筛结果进行进一步细排的LLM），同时还具有多重重试/兜底机制，确保筛选可靠性； 4. 接受用户对推荐结果反馈的自优化Agent，根据不同反馈情况去分别执行：用户画像关键词权重调节、用户画像关键词替换、画像重生成逻辑。 5. 多节点统一调度管理的中心编排器。 ## 1. 项目概览 ### 1.1 项目定位 本项目是一个基于 **Multi-Agent（多智能体）架构** 的工业级智能推荐系统。它突破了传统推荐系统仅依赖协同过滤或简单标签匹配的限制，通过构建用户的“数字孪生”画像，结合大语言模型（LLM）的深度语义理解与多模态（视觉+文本）分析能力，实现了跨平台（电商+视频）的实时精准检索与推荐。 **项目概述图**：  ### 1.2 现状与痛点  ### 1.3 核心建设目标 1. **构建深度用户认知模型**：通过多轮问卷与 A/B Test 机制，生成具备心理洞察力的动态用户画像。 2. **实现复杂意图理解**：解决“用户描述模糊”与“视觉/文本意图冲突”的搜索难题。 3. **全链路闭环优化**：建立“推荐-反馈-修正”的自动化闭环，系统能随用户交互产生自我进化。  ### 1.4 适用业务场景 + **智能导购**：根据用户审美、预算、消费观进行全网电商（如苏宁）商品比价与推荐。 + **内容分发**：基于用户兴趣图谱与当前情绪，推荐长/短视频（如 Bilibili）。 + **多模态检索**：支持“拍图搜同款”或“拍图搜教程”，并自动纠正视觉与文本的冲突。 ## 2. 核心功能 ### 2.1 动态数字画像构建 + **业务价值**：将静态的用户标签转化为具备权重的动态语义网络。 + **操作流程**：用户注册 -> 完成 23 题心理问卷 -> 后端双模型 (DeepSeek/Qwen) 并行生成 A/B 两个画像版本 -> 用户选择激活 -> 生成 `UserProfile`。 + **核心支撑**： - 后端: 使用 `CompletableFuture` 并行调用不同 Prompt (`gen-a.st`, `gen-b.st`) 生成候选画像。 - 前端 : 展示 Deep Insight 与 Key Factors，支持多轮次迭代与用户澄清。 ### 2.2 多模态智能检索 + **业务价值**：支持“图文混排”输入，解决单一文本搜索的局限性。 + **核心支撑**： - `VisualAgent`: 调用 Qwen-VL 模型解析图片主体与风格。 - `KeywordAgent`: 执行“文本意图识别”与“视觉冲突检测”，融合生成最终搜索词。 ### 2.3 实时跨平台爬虫与精排 + **业务价值**：获取全网最新实时数据，而非依赖滞后的离线库。 + **核心代码支撑**： - `SuningCommodityTool` / `BilibiliVideoTool`: 基于 Selenium 的无头浏览器实时抓取。 - `FilterAgent`: 实现“硬性规则剔除” + “余弦相似度初筛” + “LLM 语义精排”的三阶段漏斗过滤。 ### 2.4 负反馈自我修正机制 + **业务价值**：系统能够理解用户的“不喜欢”，并自动调整画像权重。 + **核心代码支撑**： - `OptimizationAgent`: 监听 `feedback.task.queue`，对负样本进行统计。 - `ProfileAgent`: 当负样本达到阈值或某个关键词标签低于阈值时，自动触发 Prompt 修改画像关键词。 ## 3. 项目亮点 ### 3.1 架构设计：Agent Orchestration 编排模式 不同于松散的 Agent 交互，本项目采用了集中式的编排器模式。`AgentOrchestratorService` 作为“大脑”，严格控制任务流转（Keyword -> Filter -> Feedback），并集成了 **异常熔断** 与 **自动重试** 机制。 + **佐证代码**: 完整的 try-catch-recovery 链路，包含从正常流程降级到 Keyword Regenerate 再降级到 Force Fallback 的三级防护。  ### 3.2 业务创新：多模态冲突检测与融合 系统不仅是简单的图文拼接，还引入了“冲突检测”机制。当用户文本意图（如“洗面奶”）与图片内容（如“手机”）发生逻辑冲突时，Agent 会自动判定并触发澄清流程或按规则融合。 + **佐证代码**: `KeywordAgent` 中的 `checkConflict` 方法，调用 `conflict-check.st` Prompt 进行逻辑判定。 ### 3.3 性能优化：Embedding 向量缓存与延时双删 + **向量缓存**: `EmbeddingService` 使用 Redis 缓存文本的向量结果 (`CACHE:VECTOR:{MD5}`)，且支持批量切片调用 API，大幅降低 Token 消耗与延迟。 + **数据一致性**: `UserProfileService` 实现了“数据库写 -> 缓存删 -> 延时 -> 缓存再删”的延时双删策略，确保高并发下画像更新的一致性。 ### 3.4 交互体验：全异步任务轮询 前端采用长轮询（Polling）机制配合后端的 RabbitMQ 异步任务处理，彻底解决了大模型生成耗时长导致的 HTTP 超时问题，同时支持实时进度反馈。 + **佐证代码**: 前端 `App.jsx` 中的 `startTaskPolling` 与后端 `TaskService` 的状态管理。 ## 4. Agent 深度解析  ### 4.1 单个 Agent 解析  #### (1) ProfileAgent (画像构建智能体) + **核心职责**: 负责用户数字孪生模型的创建、迭代与维护。 + **关键功能**: - **A/B 差异化生成**: 通过 `generateCandidates` 方法并行调用 DeepSeek (Prompt A: 激进/心理侧写) 和 Qwen (Prompt B: 保守/事实标签)，生成两种风格迥异的画像供用户选择，解决单一模型偏差问题。 - **画像激活**: 处理用户选择 (`activateProfile`)，将候选画像 (`ProfileCandidate`) 转化为正式的用户配置 (`UserProfile`)。 - **负样本修正**: 提供 `refineByNegative` 能力。当收到优化指令时，利用 `refine.st` Prompt 分析负面关键词（如“性价比”），推测用户真实意图（如“可能偏向高品质”），并生成替代词。 + **输入输出**: 输入问卷答案或负面词；输出结构化的 `ProfileCandidate` 对象或更新后的权重 Map。  #### (2) KeywordAgent (搜索意图智能体) + **核心职责**: 作为搜索入口，负责理解用户“想搜什么”，并结合“用户是谁”进行查询重写。 + **关键功能**: - **多模态融合**: `process` 方法首先并行调用文本分析 (`analyzeText`) 和视觉分析 (`VisualAgent`)。 - **冲突检测**: 在融合阶段，调用 `conflict-check.st` 判定文本与图片是否存在逻辑冲突（如文搜“洗面奶”图是“手机”）。若冲突，抛出 `CLARIFICATION_NEEDED` 异常，中断流程并请求用户澄清。 - **画像混合 (Profile Mixing)**: 根据 `mixing.st`，将用户画像中的高权重标签（如“极简风”、“极客”）按照配置比例 (`profileMixRatio`) 注入到搜索关键词中，实现个性化搜索。 - **自我反思**: 提供 `regenerate` 方法。当搜索无结果时，Agent 会反思关键词是否过于生僻或具体，并重新生成更通用的关键词。 + **依赖**: 强依赖 `VisualAgent` 进行图片解析，依赖 `UserProfileService` 获取画像数据。  #### (3) FilterAgent (过滤与精排智能体) + **核心职责**: 执行实际的数据获取与清洗，充当“漏斗”角色。 + **关键功能**: - **工具调度**: 根据搜索类型 (`COMMODITY`/`VIDEO`) 动态选择 `SuningCommodityTool` 或 `BilibiliVideoTool` 进行爬虫检索。 - **约束过滤**: 如果 `KeywordAgent` 提取了显性约束（如价格千元以内），优先执行硬性过滤 (`processWithConstraints`)。 - **向量初筛**: 调用 `CosineSimilarityTool` （内部借助embedding模型）计算 Query 向量与 Title 向量的相似度，从 Top 30 中筛选出 Top 12。 - **LLM 语义精排**: 调用 `rank.st`，让大模型扮演选品专家，综合考虑性价比、风格、评论氛围等非结构化因素，输出最终 Top 6。 - **“漏斗式”兜底机制：** * Level 1 (常规)：全量关键词检索 -> LLM 精排。若失败（LLM 认为均不相关），在 `FilterAgent` 内部进行“减词重试”。 * Level 2 (认知重构)：若 Level 1 仍未返回规定数量的结果，`Orchestrator` 调度 `KeywordAgent` 进行“反思与重生成”，使用新关键词再次检索。 * Level 3 (强制兜底)：若 Level 2 仍失败，`Orchestrator` 强制命令 `FilterAgent` 放弃 LLM 过滤，直接降级为纯数学逻辑（余弦相似度）返回 Top 6，确保系统高可用。  #### (4) OptimizationAgent (反馈闭环智能体) + **核心职责**: 系统的“进化引擎”，基于用户行为调整画像权重。 + **关键功能**: - **权重自适应**: `processFeedback` 方法接收用户的点赞/点踩数据。命中画像关键词时，动态调整权重（步长 ±0.05）。 - **负样本累积**: 维护一个计数器。当某个关键词（如“复古”）在短时间内被点踩超过阈值（默认 3 次）时，判定该标签与用户认知不符。 - **触发修正**: 主动调用 `ProfileAgent.refineByNegative()` 发起画像重构，形成“反馈->修正”的闭环。  #### (5) VisualAgent (视觉感知智能体) + **核心职责**: 系统的“眼睛”，负责将非结构化的图片转化为结构化的文本描述。 + **关键功能**: - **场景化解析**: 针对电商场景，提取“品类+品牌+核心卖点”；针对视频场景，提取“主体+氛围风格”。 - **模型支撑**: 底层对接阿里云 Qwen-VL 多模态大模型。 ### 4.2 多 Agent 协同解析 系统采用 **集中式编排 (Orchestration)** 模式，由 `AgentOrchestratorService` 统一调度，而非 Agent 之间直接点对点调用。   **协同流程详解：** 1. **任务启动**: Controller 接收请求 -> 生成 TaskID -> 推送 MQ。 2. **Orchestrator 接管**: Listener 消费消息，唤醒 Orchestrator。 3. **阶段一：意图理解**: - Orchestrator 调用 `KeywordAgent`。 - `KeywordAgent` 内部同步调用 `VisualAgent` 解析图片。 - `KeywordAgent` 拉取 `UserProfile` 进行关键词混合。 - _异常分支_: 若发现冲突，Orchestrator 捕获 `CLARIFICATION_NEEDED`，直接终止并通知前端。 4. **阶段二：执行与过滤**: - Orchestrator 将混合后的关键词传给 `FilterAgent`。 - `FilterAgent` 调起爬虫工具 -> 向量服务 -> LLM 精排。 - _重试分支_: 若 `FilterAgent` 返回空，Orchestrator 指挥 `KeywordAgent` 执行 `regenerate`（自我反思），获取新词后再次调用 `FilterAgent`。 - _兜底分支_: 若重试仍为空，Orchestrator 指挥 `FilterAgent` 执行 `executeForceFallback`。  1. **阶段三：反馈进化 (异步)**: - 用户前端操作反馈 -> 推送 MQ。 - `FeedbackTaskListener` 唤醒 `OptimizationAgent`。 - `OptimizationAgent` 更新权重 -> 若达阈值，调用 `ProfileAgent` 修正画像。  **场景举例：用户上传一张复古台灯图片，并输入“想要这个，但要便宜点”** 1. **触发阶段**: `AgentController` 接收请求，生成 `taskId`，通过 `TaskService` 将任务推入 RabbitMQ `search.queue`。 2. **调度阶段**: `SearchTaskListener` 消费消息，唤醒 `AgentOrchestratorService`。 3. **协同执行流**: - **Step 1 (意图识别)**: `Orchestrator` 调用 `KeywordAgent`。 * `VisualAgent` 识别图片为“复古 绿色 玻璃 台灯”。 * `KeywordAgent` 识别文本约束“便宜点” -> 提取 `constraint_price` (低价策略)。 * `KeywordAgent` 融合画像（假设用户画像有“极简”），生成关键词列表：`["复古台灯", "绿色玻璃", "平价", "极简"]`。 - **Step 2 (执行检索)**: `Orchestrator` 调用 `FilterAgent`。 * `FilterAgent` 调用 `SuningTool` 爬取数据。 * 应用 `constraint_price` 过滤掉高价商品。 * 利用 Embedding + LLM 选出最符合“复古且平价”的商品。 - **Step 3 (异常容错)**: * 如果 `FilterAgent` 返回结果为空，`Orchestrator` 捕获异常，调用 `KeywordAgent.regenerate()` 尝试生成更宽泛的关键词（如去掉“绿色”），再次调用 `FilterAgent`。 4. **结果交付**: 结果写入 MySQL `search_histories`，前端轮询到 `COMPLETED` 状态展示结果。     ## 5. 技术架构  ### 5.1 后端架构 (Spring Boot) + **分层设计**: - **Controller Layer**: `AgentController` (V3 API), `AuthController` (V2 API)。 - **Service Layer**: `AgentOrchestratorService` (核心调度), `UserProfileService` (画像管理), `TaskService` (任务状态)。 - **Agent Layer**: 封装具体智能体逻辑 (`com.example.recommendagents.agent.*`)。 - **Tool Layer**: 封装基础设施 (`Selenium`, `Embedding`, `Redis`)。 + **数据存储**: - **MySQL**: 存储用户 (`users`)、画像 (`user_profiles`)、历史记录 (`search_histories`)、日志 (`agent_action_logs`)。 - **Redis**: 缓存画像 (`CACHE:PROFILE:*`)、向量 (`CACHE:VECTOR:*`)、搜索结果。 + **中间件**: RabbitMQ (解耦耗时任务), Spring Security + JWT (无状态认证)。 ### 5.2 前端架构 (React + Vite) + **工程结构**: - `views/`: 页面级组件 (Dashboard, Recommend, Profile)。 - `components/`: 通用组件 (LoadingOverlay)。 - `api/`: API 统一配置与拦截。 + **状态管理**: 使用 React Hooks (`useState`, `useEffect`) 结合 `localStorage` 进行轻量级状态管理。 + **交互逻辑**: 采用 **Framer Motion** 实现流畅的转场动画，利用 **Polling (setInterval)** 实现对后端异步任务的准实时响应。 ### 5.3 基础设施与数据持久化 本系统强依赖 Redis、MySQL 和 RabbitMQ 构成了稳健的工业级底座，具体作用如下： #### (1) Redis (高性能缓存与临时状态) + **画像缓存 (**`CACHE:PROFILE:{UserId}`**)**: - **作用**: `UserProfileService` 使用 Redis 缓存用户的活跃画像。 - **策略**: 采用 **Cache-Aside** 模式配合 **延时双删 (Delayed Double Deletion)** 策略。当画像更新时，先删缓存 -> 写库 -> 延时500ms -> 再删缓存，确保高并发下的数据一致性。 + **向量缓存 (**`CACHE:VECTOR:{MD5}`**)**: - **作用**: `EmbeddingService` 缓存文本 Embedding 结果（有效期 7 天）。 - **价值**: 避免对相同文本（如高频关键词）重复调用收费的 Embedding API，显著降低成本并提升检索速度。 + **搜索结果缓存 (**`CACHE:SEARCH:{Type}:{QueryHash}`**)**: - **作用**: 缓存特定 Query 的最终搜索结果（有效期 30 分钟）。 - **价值**: 应对短时间内的重复搜索请求，直接返回热数据，减轻爬虫压力。 + **上下文暂存**: `KeywordAgent` 将提取的搜索约束（如价格区间）暂存 Redis，供后续 Agent 读取，实现跨 Agent 状态共享。 #### (2) MySQL (核心数据持久化) 系统使用 MySQL 存储所有关键业务数据，主要包含以下表结构 (`DomainModels.java`)： + `users`: 存储用户基础认证信息（账号、密码）。 + `user_profiles`: 存储用户当前激活的画像（JSON 格式权重的关键词）。 + `profile_candidates`: 存储历史生成的 A/B 测试画像候选集，用于回溯和切换。 + `search_histories`: 完整记录用户的每一次搜索请求、AI 提取的关键词及最终结果 JSON。这是“未读消息”功能和 Dashboard 历史记录的数据源。 + `agent_action_logs`: 系统监控表。记录每个 Agent 的执行耗时、Token 消耗、输入输出快照，用于全链路追踪与成本核算。 #### (3) RabbitMQ (异步解耦与削峰填谷) + **搜索任务队列 (**`search.task.queue`**)**: - **作用**: 前端提交搜索请求后，Controller 仅生成 TaskID 并将负载推入此队列，立即返回。 - **价值**: 将耗时极长（爬虫+多轮LLM推理，可能超过30秒）的搜索任务从 HTTP 主线程剥离，防止网关超时，同时支持通过增加消费者实例实现水平扩展。 + **反馈任务队列 (**`feedback.task.queue`**)**: - **作用**: 用户的点赞/点踩操作推入此队列。 - **价值**: 确保用户的交互操作（高频）不会因为后端的复杂优化计算（低频、耗资源）而感到卡顿，实现“由于反馈”的非阻塞处理。  ## 6. 前端功能展示 ### 6.1 身份认证页 **定位**: 进入系统的第一道门户，营造极具科技感的“数字身份”创建氛围。 + **视觉设计**: - **背景**: 采用深色玻璃拟态风格，配合动态光影。 - **动效**: 表单区域加载时带有 `opacity` 和 `y` 轴位移的淡入动画。 + **核心功能**: 1. **双模切换**: 支持“登录”与“注册”模式一键切换。 2. **即时反馈**: 按钮内置 `Loader2` 旋转动画，防止重复提交。 3. **键盘交互**: 密码框支持回车键 (`Enter`) 直接触发提交。 + **代码映射**: `src/views/AuthView.jsx` + **页面展示**： **注册与登录**：   ### 6.2 系统欢迎页 **定位**: 系统的 Landing Page，引导用户开启画像构建之旅。 + **布局结构**: - **中心区**: 巨大的 Slogan "多维 AI 智能推荐"，配合 CPU 核心图标。 - **操作区**: 提供“开启画像评测”主按钮（带流光特效）和“返回推荐中心”次级按钮。 + **逻辑细节**: - **智能判断**: 根据 `hasProfile` 属性动态改变按钮文案（“开启画像评测” vs “重新建立画像”）。 - **状态保留**: 如果用户已有画像，会额外显示“返回推荐中心”入口，避免老用户重复评测。 + **代码映射**: `src/views/WelcomeView.jsx` + **页面展示**： **新用户**：  **老用户**：  ### 6.3 沉浸式心理评测页 **定位**: 采集用户数据的核心场景，设计上追求极简与专注。 + **功能模块**: 1. **动态进度条**: 顶部实时渲染当前进度（如 `Rank 1/23`），采用渐变色填充。 2. **问题展示**: * 显示问题分类（如 `Basic`, `Consumption`）与具体题干。 * 选项卡片化设计，支持 Hover 态高亮与箭头显现。 3. **自动化流转**: 用户点击选项后，**自动跳转**下一题，无需二次确认，提升填报效率。 4. **导航控制**: 底部提供“上一题”撤回功能（第一题禁用）和“退出”按钮。 + **代码映射**: `src/views/QuestionnaireView.jsx` (依赖 `src/data/questions.js`) + **页面展示**： **沉浸式测评页面**：  ### 6.4 认知对齐与画像确认页 **定位**: A/B Test 结果展示场，让用户参与到 AI 决策过程中（Human-in-the-loop）。 + **双模型对比展示**: - **Model A (DeepSeek)**: 蓝色系卡片，侧重深层心理洞察 (Deep Insight)。 - **Model B (Qwen)**: 紫色系卡片，侧重客观事实标签 (Key Factors)。 + **交互逻辑**: 1. **多轮次导航**: 顶部显示 `Round X / Total`，支持通过左右箭头查看历史生成轮次。 2. **一键激活**: 点击卡片底部的“确认选择此画像”，将临时 Candidate 转化为正式 Profile。 3. **反思与重生成 (Refine)**: * 提供“都不满意”按钮。 * 展开输入框，允许用户输入自然语言（如“太激进了，我比较保守”）。 * 触发后端 `ProfileAgent` 的修正逻辑，生成下一轮 Candidate。 + **代码映射**: `src/views/profileCandidateView.jsx` + **页面展示**： **生成等待页面**：  **双画像选择页面**： **无满意结果时**：  ### 6.5 数字孪生画像详情页 **定位**: 用户数字身份的完整展示，是推荐系统的“元数据”。 + **可视化呈现**: - **状态标签**: 顶部显示 `Profile Active` (当前使用) 或 `Historical Profile` (历史记录)。 - **核心描述卡片**: 左侧大面积展示 AI 生成的 Summary，背景带有动态呼吸光晕。 - **权重分布图**: 右侧列出 `weightedKeywords`，并通过可视化的**进度条**展示每个关键词的权重值 (0.0 - 1.0)。 + **操作区**: - **当前画像**: 显示醒目的“进入推荐中心”按钮。 - **历史画像**: 显示“切换至此画像”按钮，支持一键回滚历史版本。 + **代码映射**: `src/views/ProfileView.jsx` + **页面展示**： **用户画像详情页面**：  ### 6.6 多模态智能推荐中心 **定位**: 用户进行搜索与获取推荐的主战场，集成了图文输入与结果反馈。 + **输入区域 (Input Bar)**: - **类型切换**: 胶囊式按钮切换 `电商` / `视频` 模式，切换时带有缩放动画。 - **多模态输入**: * 文本框支持自然语言输入。 * **图片上传**: 点击图标上传图片，并在输入框下方显示**图片预览缩略图**（带删除按钮）。 - **智能提示**: 输入框 Placeholder 根据选择的类型动态变化（如“想买什么？” vs “想看什么？”）。 + **结果展示区 (Result Feed)**: - **瀑布流卡片**: 采用 Grid 布局，每张卡片包含标题、描述、价格/时长、来源标签。 - **来源标识**: 显式标注 `Suning` 或 `Bilibili`。 - **新消息提示**: 当轮询检测到新结果时，顶部弹出 `AI 已为您找到新的推荐结果` Toast 提示。 + **反馈交互 (Feedback Loop)**: - **点赞/点踩**: 每个卡片底部提供 ThumbsUp/ThumbsDown 按钮。点击后按钮变色，并异步发送反馈至后端 MQ。 + **AI 澄清机制 (Clarification)**: - 当后端检测到意图冲突时，前端会渲染一个**橙色警示卡片**，显示 AI 的提问，并提供独立的输入框供用户回复补充说明。 + **代码映射**: `src/views/RecommendView.jsx` + **页面展示**： **推荐中心首页**：  **多模态需求检索**：  **意图矛盾时的二次确认（比如上传手机图片，文本需求却是买衣服）**：  **结果推荐页面**：  **不满意结果反馈**：  **反馈后画像权重参数自动调整**：  ### 6.7 个人数字档案 **定位**: 系统的个人中心，查看历史轨迹。 + **数据概览**: - **Tab 切换**: 在“推荐历史”与“画像记录”之间切换。 - **红点消除**: 当切换到“推荐历史” Tab 时，自动调用 API 消除未读消息红点。 + **列表渲染**: - **画像列表**: 复用卡片样式，展示历史生成的 Summary 和 Round 信息。 - **搜索历史**: 展示查询词、搜索时间、AI 提取的策略关键词 (`aiKeywords`) 以及简略的搜索结果预览。 + **代码映射**: `src/views/DashboardView.jsx` + **页面展示**： **个人数字档案 - 推荐历史**：  **个人数字档案 - 画像记录（包含切换画像功能）**：  ## 7. 部署与配置 ### 7.1 部署前置条件 + **JDK**: Java17+ + **Node.js**: v22+ (用于前端构建) + **Database**: MySQL 5.7+ + **Cache**: Redis 6.0+ + **Message Queue**: RabbitMQ 3.8+ + **Browser**: Google Chrome (对应版本的 ChromeDriver，用于 Selenium) ### 7.2 核心配置文件说明 (`application.yml`) + `ai.openai.api-key: DeepSeek API 密钥，用于核心逻辑推理。 + `app.vision.api-key: 阿里云密钥，用于 Text、Qwen-VL 和 Embedding。 + `agent.config.filter.crawler`: 配置爬虫抓取的最大条数。 + `task.queue`: 定义 RabbitMQ 的队列名称。 ### 7.3 常见问题排查 + **爬虫失败**: 检查服务器是否安装了 Chrome 浏览器，或是否被目标网站反爬（考虑接入代理 IP 池）。 + **WebSocket/Polling 跨域**: 检查 `WebConfig.java` 中的 `addCorsMappings` 配置。 + **任务一直 PROCESSING**: 检查 RabbitMQ 消费者监听器是否正常启动 (`@RabbitListener`)。 ## 8. 后续优化方向  ### 8.1 架构微服务化 + **背景**: 当前所有 Agent 跑在同一个 Spring Boot 进程中，爬虫任务易阻塞 CPU。 + **方案**: 将 `FilterAgent` (爬虫) 和 `VisualAgent` (GPU 密集型) 拆分为独立的微服务，通过 Feign 或 Dubbo 调用。 + **收益**: 提升系统吞吐量，故障隔离。 ### 8.2 引入向量数据库 + **背景**: 当前使用 Redis 存储向量，无法进行高效的 ANN (近似最近邻) 搜索，只能遍历计算 Cosine。 + **方案**: 引入 **Milvus** 或 **Pinecone** 替代 Redis 存储向量。 + **收益**: 支持百万级数据的毫秒级相似度检索，支持更复杂的语义召回。 ### 8.3 增加数据源 + **背景**: 目前仅支持苏宁和 B 站。 + **方案**: 扩展 `Tool` 接口，增加 `DouyinTool` (抖音)、`XiaohongshuTool` (小红书) 实现。 + **收益**: 覆盖更多生活场景，增强推荐丰富度。

家里科研实验愉快指南

## ## 家里科研实验愉快指南 背景：为了让大伙能够在家里能够愉快的科研实验，通过SSH反向隧道，从而达到校外变校内，在家也能够轻松连接校内服务器。 必要配置：一台公网服务器。 ### 反向隧道建立流程 #### 公网服务器配置 1、在自己购买的服务器上（注意：必须是公网服务器）。编辑ssh的配置文件。 ``` #自己租的云服务器上 vim /etc/ssh/sshd_config ``` 2、往sshd_config文件添加以下内容 ``` GatewayPorts yes AllowTcpForwarding yes TCPKeepAlive yes ``` 3、重启SSH服务： ``` #自己租的云服务上 systemctl restart sshd ``` #### 学校服务器配置 1、配置密钥和免密登录 ``` #密钥生成 ssh-keygen -t rsa #将密钥拷贝到公网服务器 ，6.123.123.164是公网的ip 例如：ssh-copy-id root@6.123.123.164 ssh-copy-id [公网服务器用户名]@[公网服务器IP] ``` 2、在学校服务器建立隧道 在学校服务器上执行以下命命令 ``` #root 是自己公网服务器上的用户名，别的用户名也可以，只要在公网服务器存在即可 ssh -fN -R 22222:localhost:22 [公网服务器用户名]@[公网服务器IP] ``` - `-f`: 后台运行。 - `-N`: 不执行远程命令（仅用于转发端口）。 - `-R`: 反向隧道关键参数。格式为 `[公网端口]:[本地IP]:[本地端口]`。 - `22222`: 流量将经过公网服务器的这个端口（自己定义即可）。 - `localhost:22`: 流量最终转发到学校服务器本机的 22 端口（SSH）。 #### 注意事项： ​ 这里配置的端口，记得也要在公共服务器的安全配置策略中开放该端口，否则也无法访问。 #### 如何测试访问： 方式一：打开windows的powershell，按下回车键后，输入学校服务器的密码即可。 ``` ssh -p 22222 [校内服务器上用户名]@[公网IP] ``` 方式二：vscdoe配置。在C:\Users\YourName\.ssh\config 文件中添加以下内容（一般是该路径） ``` Host school-server HostName [公网IP] Port 22222 User [校内服务器上用户名] ``` #### 一些自动化操作 为了解服务每次重启之后都需要手动开启SSH反向隧道的问题。我把该指定的执行，注册成了一个系统服务，每次开关机后都可以自动执行了。（但是，如果毕业后不是当前公共服务器了，则需要手动建立新的映射）。 目前该自定义系统服务存在于： ``` /home/edu/Service/ssh-tunnel.service ``` 服务内容为： ```shell [Unit] Description=Reverse SSH Tunnel to Public Server After=network-online.target Wants=network-online.target [Service] User=[校内服务器上用户名] ExecStart=/usr/bin/ssh -N -o "ExitOnForwardFailure=yes" -o "ServerAliveInterval=60" -R 0.0.0.0:22222:localhost:22 [公网服务器用户名]@[公网IP] Restart=always RestartSec=10 [Install] WantedBy=multi-user.target ``` 该自定义服务是通过软连接注册到系统服务中。 软连接建立指令和服务启动指令如下（执行顺序不能乱）： ``` # 在学校服务器执行 sudo ln -s /home/edu/Service/ssh-tunnel.service /etc/systemd/system/ssh-tunnel.service # 重新加载服务 sudo systemctl daemon-reload # 设置开机自启 sudo systemctl enable ssh-tunnel # 立即启动服务 sudo systemctl start ssh-tunnel ``` 以下指令是查看服务运行状态： ``` sudo systemctl status ssh-tunnel ```

MyBatis Flex Active Record 模式下公共字段抽离与自动填充的一种实践

最近在使用`Mybatis Flex`开发自己的新项目，其中基础功能的`Active Record`模式我十分喜欢。使用这个模式我们保存数据就可以这样子做 ```java Account.create() .setUserName("张三") .setAge(18) .setBirthday(new Date()) .save(); ``` 简单来说，就是你可以直接在实体类调用方法去操控数据库。也就是对于一些简单的CRUD，你可以不用去引入service和mapper。就可以直接对数据进行操作。 实现方式就是让Entity去继承`Model`即可 1. `@Table` 标记了实体类对应的数据表。 2. `@Data` 为我们生成了 setter/getter、toString、equals、hashCode 等方法， 其中 `staticConstructor = "create"` 为我们创建了一个 `create()` 静态方法用于链式调用。 3. `@Accessors(chain = true)` 为我们开启了 `return this;` 这样既可以被序列化，又可以链式调用。 ```java @Table("tb_account") @Accessors(chain = true) @Data(staticConstructor = "create") public class Account extends Model<Account> { @Id(keyType = KeyType.Auto) private Long id; private String userName; private Integer age; private Date birthday; } ``` 但是有一个问题啊，大部分实体类都有createTime、updateTime之类的公共字段，有时候为了方便管理。需要建立一个BaseEntity让所有的实体类去继承这个类。继承了`Model`还怎么继承BaseEntity。 如果只是属性无法继承还好，而`Mybatis Flex`的公共字段填充是非常依赖这些实体类要有一个公共的实体父类的。不然要多写非常多的代码，就比如配置全局自动填充的时候： 官方示例代码： ```java MyInsertListener insertListener = new MyInsertListener(); MyUpdateListener updateListener = new MyUpdateListener(); MySetListener setListener = new MySetListener(); FlexGlobalConfig config = FlexGlobalConfig.getDefaultConfig(); //为 Entity1 和 Entity2 注册 insertListner config.registerInsertListener(insertListener, Entity1.class, Entity2.class); //为 Entity1 和 Entity2 注册 updateListener config.registerUpdateListener(updateListener, Entity1.class, Entity2.class); //为 Entity1 和 Entity2 注册 setListener config.registerSetListener(setListener, Entity1.class, Entity2.class); ``` 如果有公共的父类只要传一个类就可以了。没有只能每建一个实体加一个，太麻烦了。 解决方案 ---- 因为Java不能多继承，那改造为单继承不就好了。让BaseEntity去继承Model 代码如下 ```java import com.mybatisflex.annotation.Column; import com.mybatisflex.annotation.Id; import com.mybatisflex.annotation.KeyType; import com.mybatisflex.core.activerecord.Model; import com.mybatisflex.core.keygen.KeyGenerators; import lombok.Data; import lombok.EqualsAndHashCode; import lombok.experimental.Accessors; import java.io.Serial; import java.io.Serializable; import java.time.LocalDateTime; /** * 自定义基础Model（继承MyBatis Flex原生Model + 封装公共属性） * @author 八月-千 * @param <T> 业务实体类型，保持和原生Model一致的泛型约束 */ @Data @Accessors(chain = true) @EqualsAndHashCode(callSuper = false) public class BaseModel<T extends Model<T>> extends Model<T> implements Serializable { @Serial private static final long serialVersionUID = 1L; /** * 主键ID（雪花算法） */ @Id(keyType = KeyType.Generator, value = KeyGenerators.snowFlakeId) private Long id; /** * 创建时间 */ private LocalDateTime createTime; /** * 创建人 */ private Long createBy; /** * 更新时间 */ private LocalDateTime updateTime; /** * 修改人 */ private Long updateBy; /** * 逻辑删除标识（1=删除，0=未删除） */ @Column(isLogicDelete = true) private Integer isDelete; // ========== 手动重写setter，返回子类类型 T 避免链式调用问题 ========== public T setId(Long id) { this.id = id; // 强制转换为子类类型（因为T是BaseModel的子类） return (T) this; } public T setCreateTime(LocalDateTime createTime) { this.createTime = createTime; return (T) this; } public T setCreateBy(Long createBy) { this.createBy = createBy; return (T) this; } public T setUpdateTime(LocalDateTime updateTime) { this.updateTime = updateTime; return (T) this; } public T setUpdateBy(Long updateBy) { this.updateBy = updateBy; return (T) this; } public T setIsDelete(Integer isDelete) { this.isDelete = isDelete; return (T) this; } } ``` 此时，实体类只需要这样继承即可： ```java import com.mybatisflex.annotation.Table; import lombok.Data; import lombok.EqualsAndHashCode; import lombok.experimental.Accessors; import top.yoojia.aiscriptgenerate.model.entity.base.BaseModel; import java.time.LocalDateTime; /** * 用户 实体类。 * * @author 八月-千 */ @Accessors(chain = true) @Data(staticConstructor = "create") @EqualsAndHashCode(callSuper = true) @Table("user") public class User extends BaseModel<User> { /** * 账号 */ private String account; /** * 密码 */ private String password; /** * 用户昵称 */ private String name; /** * 用户头像 */ private String avatar; /** * 用户简介 */ private String profile; /** * 用户角色：user/admin */ private String role; /** * 编辑时间 */ private LocalDateTime editTime; } ``` 全局填充配置就可以这样写 ```java @Configuration public class MybatisFlexConfig extends FlexGlobalConfig { @PostConstruct public void initFlexGlobalConfig() { FlexGlobalConfig defaultConfig = FlexGlobalConfig.getDefaultConfig(); MybatisInsertListener mybatisInsertListener = new MybatisInsertListener(); MybatisUpdateListener mybatisUpdateListener = new MybatisUpdateListener(); defaultConfig.registerInsertListener(mybatisInsertListener, BaseModel.class); defaultConfig.registerUpdateListener(mybatisUpdateListener, BaseModel.class); } } ``` ### 为什么要重写set方法？ 因为使用链式调用的情况下，set方法会返回类自己，如果实体类调用了父类的set方法，就会返回父类，之后你就无法调用实体类的其他方法了，比如：  ### 总结 不过我还是觉得这个解决方案不够优雅，如果有更好的欢迎交流。 相关官方文档地址： Active Record模式：[https://mybatis-flex.com/zh/base/active-record.html](https://mybatis-flex.com/zh/base/active-record.html) 数据自动填充：[https://mybatis-flex.com/zh/core/table.html#oninsert](https://mybatis-flex.com/zh/core/table.html#oninsert) 代码生成器（需要把EntityConfig的setWithActiveRecord以及GlobalConfig的enableTableDef配置为true）：[https://mybatis-flex.com/zh/others/codegen.html#entity-%E7%94%9F%E6%88%90%E9%85%8D%E7%BD%AE-entityconfig](https://mybatis-flex.com/zh/others/codegen.html#entity-%E7%94%9F%E6%88%90%E9%85%8D%E7%BD%AE-entityconfig)

从夯到拉，锐评 39 个前端技术！

大家好，我是程序员鱼皮。从夯到拉，锐评 39 个前端技术，一口气说完！  之前我做了后端技术的从夯到拉排名，很多同学留言说想看前端版。说实话，刚开始我是拒绝的，因为前端技术实在是太多了、而且更新速度非常快，之前有个学弟还跟我吐槽什么前端娱乐圈之类的，咱也不懂好吧。 但是！既然大家想看，那我就来一期。而且这期我还会评选出唯一的 **前端技术之王**（frontend king），大家可以先猜一猜，会是哪个？我敢说不超过 1% 的同学能猜对。 正式开始前先郑重声明，由于每个前端技术都有自己的应用场景，很多时候没办法完全公平地去比较，所以接下来的排行会带有一定的主观性。本期鱼皮只是希望帮大家学到知识、认识更多的技术。 大家可以在评论区打出自己的评价，看看跟我想的是否一样。 - 视频版 - 前端排行：https://bilibili.com/video/BV11yigBfEkL - 视频版 - 后端排行：https://bilibili.com/video/BV1HiqQBgEoN ## 评价维度 接下来我将从 5 个维度来评价这些前端技术： 1. 实用性：能解决多少实际问题、是否为项目必备 2. 生态成熟度：包括社区活跃度、文档完善度、第三方库丰富度 3. 学习成本：上手难度和学习曲线 4. 开发效率：开发速度和体验 5. 稳定性：版本迭代是否破坏兼容性、出现安全漏洞的频率 作为开发者，我个人最看重的是 **实用性和生态成熟度**。 实用性就不多说了，毕竟技术是用来解决问题或者找工作赚米的。 生态好不仅意味着遇到问题能快速找到解决方案，更重要的是，因为训练数据多、社区案例丰富，AI 生成的代码质量会更高。 **所以再次声明，下面的排名并不代表技术本身的优劣，会具有一定的主观性。** ## 前端技术从夯到拉排行榜 先说说跟样式相关的前端技术。 ### 1、Sass【人上人】 CSS 预处理器，让你用编程的方式写样式。写过原生 CSS 的都知道，一堆重复的颜色值、一层套一层的选择器，维护起来非常头疼。Sass 支持变量、嵌套、混合、继承等高级特性，可以解决这些问题。 Sass 的优点是功能强大、社区成熟，缺点是需要编译，而且现在 CSS 原生也支持变量和嵌套了。考虑到它仍然是很多大型项目的标配，给到 **人上人**。  ### 2、Bootstrap【拉】 Twitter 开源的 UI 框架，提供现成的样式和组件，让你不用从零写 CSS。曾经是前端开发的标配，一套栅格系统打天下. 但是 2025 年了，还在用 Bootstrap 的项目基本都是遗留系统。组件样式过时、定制困难、体积臃肿，React、Vue 当道，谁还用这种全局样式污染的方案？给到 **拉**。  ### 3、Tailwind CSS【夯】 原子化 CSS 框架的代表，快速写样式的神器。它的理念是：不写 CSS 文件，直接在 HTML 里用 class 拼样式。比如 `flex justify-center items-center`，一行搞定居中。 有朋友刚开始可能会觉得这玩意儿丑，class 名字一大串，觉得不就是把 CSS 写到 HTML 里了吗？但是用习惯后真香，能明显提升开发效率；再配合组件化开发，完全不用担心样式冲突。 还有一个加分项，现在很多 AI 工具生成的前端代码，默认都用 Tailwind！像很多朋友好奇为什么 AI 生成的很多界面是蓝紫色？因为 AI 训练时吃了太多使用 Tailwind UI 的网站，而 Tailwind UI 的默认配色就是蓝紫色。 考虑到它对开发效率的巨大提升和 AI 生成界面的巨大贡献，给到 **夯**！  ### 4、Element Plus【人上人】 Vue 框架的主流 UI 组件库，由饿了么团队开发。如果你用 Vue 做中后台系统，那 Element 基本是标配。 优点是组件丰富、文档清晰、国内社区活跃。 缺点是样式偏传统，不太适合 C 端项目，而且有些组件不够灵活。但考虑到国内 Vue 生态的主流地位，Element 是很多前端新人的启蒙组件库，给到 **人上人**。  ### 5、Ant Design【人上人】 蚂蚁金服出品的企业级 UI 组件库，在开发 B 端中后台管理系统方面一手遮天。它不仅组件质量高、设计规范完善，而且生态非常丰富，推出了 Ant Design Pro 脚手架、ProComponents 高级组件、AntV 数据可视化方案，以及最近很火的 Ant Design X AI 组件库。而且同时有 React 和 Vue 版本，我个人非常喜欢用它。 但缺点也很明显，体积大、样式定制麻烦，没有那么适合 C 端系统。考虑到国内 B 端的统治地位，给到 **人上人**。  ### 6、LayUI【NPC】 老牌轻量级 UI 框架，情怀之作。采用原生 JavaScript，不依赖 Vue/React。适合那些不想学现代前端框架、只想快速搭个后台的同学，我大学刚开始学前端的时候就在用。 但是它在组件化时代显得格格不入，整体生态和社区活跃度比不上主流方案，AI 生成代码也不会选择这个 UI 吧，只能给到 **NPC**。  ### 7、Shadcn/UI【人上人】 可能是 2025 年最火的 UI 方案。注意，它不是一个组件库，而是一套 **可复制粘贴的代码集合**。不需要使用 npm 来安装依赖，而是直接把组件代码复制到你的项目里。 好处是极度灵活，代码在你手里，想怎么改就怎么改；缺点是需要自己维护组件代码，版本升级比较麻烦。给到 **人上人**。  接下来聊聊构建工具。 ### 8、Webpack【NPC】 前端工程化的奠基者，模块打包的开山鼻祖。 构建工具的作用是把你写的代码打包、压缩、转换成浏览器能运行的文件。很多年前做前端，Webpack 配置是必修课，什么 loader、plugin、code splitting，面试必问。 虽然它生态成熟、功能强大。但问题是配置文件动辄几百行，你如果学会了 Webpack 配置，就能去应聘配置工程师了。而且热更新慢到怀疑人生，改个代码等半天才生效。开发体验被 Vite 降维打击，正在逐渐被时代淘汰，只能给到 **NPC**。  ### 9、Vite【夯】 新一代构建工具，Webpack 终结者。它用原生 ES Module 实现毫秒级热更新，冷启动速度吊打 Webpack。配置简单、开箱即用，开发体验好到飞起。而且支持各种主流前端框架，已经成为现代前端项目的标配，必须给到 **夯**！  ### 10、Grunt/Gulp【拉】 上古时代的任务运行器，比 Webpack 还老的构建方案。通过配置任务来处理文件压缩、代码编译、合并等操作。 但是现代构建工具早就内置了这些功能，还在用这俩的项目，估计都是几代员工的祖传代码了，给到 **拉中拉**！  接下来聊聊包管理工具。 ### 11、npm【顶级】 前端包管理的祖师爷，帮你安装和管理项目依赖的工具。由于安装 Node.js 就自带 npm，所以 npm 生态特别成熟，几乎所有的 JS 包都会发布到 npm。 但缺点是安装速度慢、node_modules 文件夹动辄几个 G（宇宙中最重的物体）、还有幽灵依赖问题。不过考虑到它是前端开发的核心工具，生态无可替代，给到 **顶级**。  ### 12、pnpm【夯】 性能更高的 npm，目前最高效的包管理工具。它用硬链接和符号链接的方式共享依赖，一个包只存一份，多个项目共用，从而节省空间、安装更快。因此越来越多的项目都在迁移到 pnpm，给到 **夯**！  ### 13、Yarn【NPC】 为了解决 npm 的速度和一致性问题而生，曾经风流一时的包管理工具。像 lock 文件、离线缓存、并行安装，这些概念都是 Yarn 先提出来的。 但是 npm 后来也跟进了这些特性，而 pnpm 在性能上又超越了 Yarn。所以导致现在的 Yarn 处于一个非常尴尬的位置，给到 **NPC**。  ### 14、Bower【拉】 上古时代的前端包管理器，老前辈了。但自从 npm 支持前端包管理、Webpack 统一了模块化方案之后，Bower 就彻底退出历史舞台了。官方都宣布不再维护，给到 **拉**！  接下来聊聊前端工程化相关的技术。 ### 15、TypeScript【夯】 全体起立！ TypeScript 是 JavaScript 的超集，前端大项目的救世主。以前写 JS，变量类型全靠猜，运行时才知道哪里报错。TypeScript 给 JS 加上了类型系统，通过类型安全、IDE 智能提示、编译时检查，解决了 JS 的类型混乱问题。大型项目没有 TypeScript 简直寸步难行。 2025 年 8 月，TypeScript 超越 Python 和 JavaScript，成为 GitHub 上最广泛使用的语言！现在连 AI 生成代码都优先生成 TS。 要说不足之处，就是有一定的学习成本，什么 “类型体操” 对于前端新人来说还是挺头疼的吧，一不留神就变成 AnyScript。作为现代前端的标配，必须给到 **夯**！  ### 16、Prettier【人上人】 代码格式化工具，团队协作神器。它能自动把你的代码按统一规则格式化，保存时自动整理缩进、换行、引号等。不管你喜欢单引号还是双引号，Prettier 说了算，同一个项目的代码就是要整整齐齐。但考虑到不是刚需，给到 **人上人**。  ### 17、ESLint【顶级】 代码规范检查工具，团队协作必备。它能帮你发现潜在的 Bug、统一代码风格、强制使用最佳实践。比如什么未使用的变量、可能的空指针、不规范的写法，ESLint 都能帮你揪出来。 现代前端项目几乎都会配置 ESLint，配合 TypeScript 和 Prettier 使用，能大大提升代码质量，给到 **顶级**。  ### 18、Turborepo【顶级】 现代前端大厂的 Monorepo（巨型仓库）管理神器。 Monorepo 就是把多个项目放在一个代码仓库里统一管理。比如你有官网、管理后台、移动端 App，传统做法是建 3 个仓库，但 Monorepo 就把它们放在一起，共享代码、统一构建。 Turborepo（还有 Nx）能帮你管理这种复杂的项目结构，提供增量构建、智能缓存、任务编排等功能。改了一个包，只重新构建受影响的部分，构建速度甚至可以提升几十倍。 注意，Monorepo 不是必要的，更多的是大厂在采用，给到 **顶级**。  ### 19、qiankun【顶级】 蚂蚁金服开源的微前端框架的扛把子。 微前端就是把一个大型前端应用拆分成多个独立的小应用，每个小应用可以独立开发、独立部署、独立运行，最后由一个主应用把它们整合在一起。 qiankun 提供了应用加载、沙箱隔离、应用通信等核心能力，可以让不同技术栈的项目共存，比如主应用用 React，子应用可以用 Vue、Angular，互不干扰。 适用于大型企业应用、多团队协作和遗留系统改造。缺点是架构复杂度高，调试麻烦，而且性能开销比单体应用大，不是所有项目都需要微前端，给到 **顶级**。  下面重点来了，我们来聊聊前端开发框架。 ### 20、Angular【NPC】 Google 出品的企业级前端框架，大而全的重量级选手。路由、表单、HTTP、状态管理通通内置，开箱即用。原生支持 TypeScript，采用依赖注入、模块化设计，写起来很有 Java 的 Spring 那味儿。 缺点是概念太多、学习成本高、项目启动慢。学 Angular 的时间，都够学完 Vue 和 React 了。 虽然 Angular 的全球市场还行，但在国内的存在感越来越弱了，基本只有外企在用。给到 **NPC**。  ### 21、jQuery【拉】 前端活化石，DOM 操作的老祖宗。每当我看到 `$('.class').click()` 这种写法，都忍不住落下两滴晶莹剔透的小泪珠，满满的回忆杀。 如今随着 React、Vue 这些组件化框架的崛起，以及浏览器原生 API 的完善，jQuery 的优势荡然无存，已经被干成时代的眼泪了。现在除了维护老项目外，基本上没有理由用 jQuery 了。给到 **拉**！  ### 22、Svelte【NPC】 编译型前端框架，性能怪兽。它在编译时把组件转成原生 JavaScript，运行时没有框架开销，包体积小、速度快。 我在 20 年用 Svelte 写过一些 Demo，开发体验还是挺不错的，响应式变量的声明很简洁。但是生态比 React 和 Vue 差了不少，尤其是国内用的更少，想快点儿找前端工作就先别学它了。暂时给到 **NPC**。  ### 23、Vue 3【夯】 接下来终于到了大家期待的 Vue 了，国内最受欢迎的前端框架。它采用 **渐进式设计**，你可以只用它做页面的一小部分，也可以用它搭建完整的单页应用，非常灵活。它的单文件组件和模板语法简单直观；而且生态完善，像 Vite、Pinia、VueUse 这些配套工具支持都很好，官方文档写的也清晰易懂，上手难度比 React 低不少。 在国内找前端工作，不会 Vue 等于少了一半机会，考虑到面向薪资编程，给到 **夯**！  ### 24、React【顶级】 如果说 Vue 是国内老大，那 React 就是全球前端霸主。像组件化思想、虚拟 DOM、单向数据流这些概念都是 React 带火的。 虽然学习难度略大一些（JSX 语法），但我个人更喜欢 React，我们团队的产品也基本都是基于 React 开发。一方面 React 的 Hooks 用起来很爽；另一方面，跟 Vue 比起来，React 全球范围的生态更强。 按理说应该给到 “夯”，但是最近 React 服务端组件曝出了一个严重的远程代码执行漏洞，我们团队好几个项目都中招了，服务器沦为矿机、让我们被迫加班。 考虑到这种全栈化带来的安全风险，我这次只能把 React 降到 **顶级**，不是说 React 不行啊，纯个人情绪好吧。  ### 25、Next.js【顶级】 目前最火的 React 全栈框架，支持服务端渲染（SSR）、静态站点生成（SSG）、API 路由等功能，让前端也能写后端接口。 和它类似的还有 Nuxt.js，这是 Vue 生态的 SSR 首选，国内用的很多。如果你要做 SEO 友好的网站，或者想用前端技术栈搞定整个项目，优先选这两者，给到 **顶级**。  接下来聊聊前端开发的一些工具和库。 ### 26、VitePress【NPC】 Vue 官方出品的文档站生成器，VuePress 的继任者。如果你要搭建技术文档网站，用 Markdown 来写文档，那么 VitePress 的体验很好，主题定制也灵活。Vue 3 和 Vite 的官方文档都在用它。 但使用场景比较窄，主要就是做文档网站，实用性相对有限，给到 **NPC**。  ### 27、Astro【顶级】 最近增长最快的静态站点生成器，它的核心理念是群岛架构：页面默认是静态 HTML，只有需要交互的部分才加载 JS，所以页面加载飞快。 而且 Astro 很灵活，可以同时使用 React、Vue、Svelte 组件，不挑框架。如果你要做博客、文档站、营销页这些内容型网站，Astro 非常合适，像我们团队的剪切助手官网就是用 Astro 生成的。给到 **顶级**。  ### 28、Pinia【人上人】 Vue 3 官方推荐的状态管理库，用来管理组件间共享的数据。相比 Vuex，Pinia 的语法更简洁，TypeScript 支持更好，没有那些 mutations、actions 的繁琐概念，用起来更舒服。 现在 Vue 3 项目标配都是 Pinia，Vuex 基本退休了。给到 **人上人**。  ### 29、Axios【夯】 HTTP 请求库的标配，前后端数据交互必备工具。虽然浏览器有原生的 fetch，但 Axios 的 API 设计更友好，而且支持自动转换 JSON、请求拦截、响应拦截这些功能都帮你封装好了，用起来很方便。 优点是国内外项目都在用，生态成熟，文档完善。缺点是包体积略大，但 5G 时代无伤大雅，再加上请求库本身的重要性，给到 **夯**！  ### 30、ky【NPC】 轻量级 HTTP 请求库（不是骂人的那个 ky）。基于 Fetch API 封装，体积只有 2KB！如果你追求极致的包体积，ky 是个不错的选择。 但知名度和使用率远不如 Axios，国内用的更少，生态也差一些。给到 **NPC**。  ### 31、Lodash【NPC】 JS 工具函数库的老大哥，类似 Java 的 Hutool，帮你封装了像数组操作、对象处理、函数节流防抖等等的常用功能，拿来就用。 听起来很强大对吧？ 但问题是，Lodash 沉寂了整整 5 年，直到最近才更新了一个小版本。而且现在 ES6+ 已经原生支持了很多功能，像 `Array.find`、`Object.assign`、展开运算符等，新项目越来越少主动引入 Lodash 了。属于 “还在用但可以不用，并且不推荐新项目用” 的状态，给到 **NPC**。  接下来聊聊跨端开发框架。 ### 32、Uni-app【顶级】 基于 Vue 的跨端框架，国内小程序开发的神器。它最大的优势是一套代码可以发布到各个平台，像微信小程序、H5、App 全都支持，省了大量重复开发的工作。 优点是应用广泛；缺点是性能不如原生开发，不过这也是跨端开发框架的通病了。给到 **顶级**！  ### 33、Taro【人上人】 京东开源的跨端解决方案，React 技术栈的小程序开发首选。跟 Uni-app 类似，也是一套代码多端运行。 如果你的团队习惯 React，就选 Taro；习惯 Vue，就选 Uni-app。相比 Uni-app，Taro 的市场占有率稍低一些，所以给到 **人上人**。  ### 34、React Native【人上人】 跨平台移动开发的主流选择，跟 Flutter 并称跨平台双雄。用 React 语法写原生 App，一套代码 iOS、Android 都能跑。而且支持热更新，调试很方便，生态也很成熟。 缺点是性能不如纯原生开发，某些复杂动画需要写原生代码。给到 **人上人**。  ### 35、Electron【人上人】 跨平台桌面应用框架。如果你会前端，用 Electron 就能开发桌面应用，一套代码 Windows、Mac、Linux 上都能跑。VS Code、QQ、还有我们的剪切助手软件都是用 Electron 写的。 优点是开发效率高，直接复用前端技术栈，能快速把网页变成桌面应用。缺点是内存占用大、包体积大，一个简单应用动辄上百 M。考虑到它的成熟度，虽然有 Tauri 这些新框架，还是给到 **人上人**。  最后再聊一些有点儿特殊的前端技术。 ### 36、Three.js【人上人】 Web 3D 领域的绝对王者，高薪的敲门砖。让你用 JavaScript 在浏览器里渲染 3D 场景，像元宇宙、数字孪生、可视化大屏这些高大上的项目，基本都离不开 Three.js。 缺点是学习难度很大，需要一定的图形学知识。不过现在有 AI 了，可以直接让 AI 帮你生成复杂的 3D 场景代码，学习成本大大降低。给到 **人上人**。  ### 37、WebAssembly【顶级】 Web 性能的天花板，处理重型计算的幕后英雄。 WebAssembly 是一种可以在浏览器里运行的二进制指令格式，性能接近原生代码。你可以用 C/C++、Rust 等语言写高性能模块，编译成 Wasm，然后在浏览器里跑。它最大的优势就是 **快**，像视频剪辑、图像处理、3D 渲染、游戏引擎这些计算密集型任务，用 Wasm 能提升几十倍性能。 缺点是开发门槛高，而且调试比较麻烦。但随着工具链的完善和 AI 生成代码能力的增强，Wasm 的应用场景会越来越广，给到 **顶级**。  ### 38、CoffeeScript【拉】 等等，这不是 Java 么？ 这是曾经风流一秒的 JavaScript 替代方案，它的理念是用更简洁优雅的语法写代码，然后编译成 JavaScript。但 ES6 出来之后，JS 自己支持了箭头函数、类、模板字符串这些特性，CoffeeScript 瞬间没了存在价值，被 TypeScript 完全取代，给到 **拉**！  ### 39、Vibe Coding【夯爆了】 最后的最后，揭晓我们的前端技术之王、唯一真夯 —— Vibe Coding！ 你猜对了么？ 什么是 Vibe Coding？就是用 AI 辅助编程，你描述需求说人话，AI 帮你写代码。 它不是某个特定的框架或库，而是一种全新的编程范式。它改变的不是某个技术环节，而是整个开发流程。这是近年来前端开发最革命性的变化，没有之一。 虽然 Vibe Coding 不算是前端技术，但是我就问一句：现在哪个前端不用 AI 来写代码？！ 像我现在写代码基本离不开 Cursor 了，开发效率提升 10 倍以上不是吹的。必须 **夯爆了**！  ## 最终排行榜  ## 最后 OK 就分享到这里，如果你们还想看哪些技术的排名，或者你觉得哪个技术的排名不合理，都可以在评论区告诉我哦。我是鱼皮，关注我，带你解锁更多编程和 AI 知识~ ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)

每天至少千万级别的数据存储，主要存储设备的工作日志，可在后台查询设备工作信息，如何设计以及实现查询达到毫秒级别