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/)

花费一天从开发到上线微信小程序“走了么”！—— 走了么，让消失不再悄无声息

**”走了么“微信小程序** “走了么”为独居人群打造的轻量化安全工具，通过签到监测与紧急联络机制，构建无感化安全防护，让独处生活更安心，扫码体验。  **完全免费** 无需付费，永久免费！ **异常未签到自动通知** 提前设置一位紧急联系人(家人或好友)，若连续2日未在应用内签到，系统将于次日自动发送邮件告知对方，及时传递安全异常信号，为潜在风险争取干预时间  **即开即用无负担** 无需注册登录，首次使用只需填写联系人姓名与邮箱即可完成设置，每日打开应用轻轻一点完成签到，后台自动监测状态，不干扰日常习惯，操作轻便易上手 **严格守护隐私安全** 采用加密技术保护紧急联系人信息与签到记录，拒绝收集位置等无关权限，从源头杜绝隐私泄露风险，确保个人信息安全无忧，让安全守护更放心 **适合所有独居人群** 无论是独自居住的上班族、异地求学的学生，还是选择独居生活的其他人群，“走了么”都能成为您的安全小助手：日常签到报平安，异常情况早通知，让关心您的人多一份安心，自己多一份保障 

🤖 智能多维画像推荐 Agent 系统 - 开发笔记&项目文档 01

**版本**: **V3.0.0** **状态**: **开发中** **开发者**: **尘小风** ## 0 写在前面的话 最近正在学习Agent开发，大半夜突然灵机一动，想做一个智能推荐系统，来给用户去智能的推荐商品/视频/文章等等的Agent系统。 最初的构想是： - **对于B端** 对B端（企业端）来说，可以直接按照我们规定的接口输入格式，进行用户画像信息的输入，然后Agent会自动分析用户画像，结合用户的需求，为他生成合适的商品关键词（电商场景下）/视频关键词（社交场景下） 然后需要一个爬虫工具，能够根据关键词去指定电商平台（当然如果是toB场景，那就直接接入自己的内部平台就完了，都不需要爬虫了）获取商品或者视频网站获取视频链接，最好是带一些关键信息，比如商品/视频的简介，商品的价格，视频的时长等，作为最终的返回数据提供给用户，给用户提供更加精准的推荐服务 - **对于C端** 对于C端来说，是没有办法拿到用户的画像的，所以可以加一个入口，让用户进来先回答预设的问题，从而建立多维度的用户画像，从而完成后续的步骤，最后输出上，不仅可以推荐商品/视频，还可以告诉用户他的用户画像属性（类似什么MBTI性格测试之类的，也有一定的趣味性） 经过了三轮迭代，目前的开发进展如下，欢迎各位大佬给出更多的功能、实现上的建议。 ## 1. 项目概览 **多维画像推荐 Agent 系统** 是一个基于人工智能 Agent 架构的垂直领域推荐平台。该系统不依赖传统的协同过滤算法，而是通过 LLM（大语言模型）深度理解用户的自然语言回答，构建具有“人格化”特征的用户画像。 当用户发起搜索请求时，系统会结合用户画像进行意图分析，利用 RPA 技术实时抓取全网数据（电商/视频平台），并通过多个环节进行筛选、过滤和排序，最终为用户提供高度定制化的消费与娱乐方案。系统还具备“自进化”能力，能根据用户的反馈和搜索结果的质量自动修正用户画像。 ## 2. 核心功能 1. **多维画像构建**：通过生活形态问卷，利用 AI 分析用户的购买力、价格敏感度、审美风格、科技敏感度、性格关键词等深层特征。 2. **智能意图识别**：在搜索时，AI 不是简单匹配关键词，而是结合用户画像将自然语言转化为精准的搜索关键词组合（Intent Analysis）。 3. **全网实时聚合**：集成 Selenium 自动化爬虫，支持 **苏宁易购（商品）** 和 **Bilibili（视频）** 两个维度的实时数据抓取。 4. **智能漏斗筛选**：通过 Filter 模块对海量爬取结果进行“硬性过滤”（价格/时长）和“相关性打分”，只保留最匹配的结果。 5. **画像自进化 (Self-Evolution)**： - **被动进化**：当搜索结果被大量剔除（Filter Failure）时，系统自动反思画像是否过于严苛并进行修正。 - **主动进化**：当用户对推荐结果给予“踩”的反馈时，系统自动推断用户不满的原因并调整画像参数。 6. **异步高性能架构**：采用 RabbitMQ 进行任务解耦，Redis 实现分布式锁与结果缓存，SSE（Server-Sent Events）实现流式结果推送。 ## 3. 项目亮点 + **🧠协同架构**：系统不是单一的 LLM 调用，而是拆分为 Profile、Intent、Filter、Optimization四个独立的节点协同工作。 + **🔄闭环反馈机制**：实现了“感知-决策-行动-反馈”的完整闭环。用户的每一次搜索失败或负面反馈，都会成为系统自我优化的养分。 + **🛡️双重兜底策略**：前端实现了 SSE 流式推送 + 主动轮询（Polling）的双重机制，确保在网络不稳定或 SSE 连接断开时也能获取结果。 + **⚡高并发防护**： - **Redis 分布式锁**：防止对同一关键词的重复爬取，解决缓存击穿问题。 - **Redis 缓存**：热门搜索结果缓存 1 小时，秒级响应。 + **🎨沉浸式前端体验**：基于 Framer Motion 的流畅动画，科技感十足的 UI 设计，支持红点消息通知和历史回溯。 ## 4. Agent 架构与功能详解 系统核心由 `IntelligentAgentService` 驱动，包含以下四个主要部分： ### 4.1. 画像生成 (Profile Generator) + **输入**：用户提交的问卷答案（23道题，涵盖基础、消费、审美、科技、生活、娱乐）。 + **处理**：分析用户回答的字面和隐含意义。 + **输出**：结构化的 JSON 画像，包含 `buyingPower` (购买力), `priceSensitivity` (价格敏感度), `aestheticStyle` (审美), `summary` (人格化总结) 等。 ### 4.2. 意图分析 (Intent Analyzer) + **输入**：用户当前的搜索词（如“想买个手机”） + 用户的完整画像。 + **处理**：判断用户真实意图，结合画像特征（如“喜欢国货”、“参数党”）生成具体的搜索关键词。 + **思维链**：需求分析 -> 相关性过滤 -> 关键词生成（核心词+修饰词）。 + **输出**：`SearchIntent` (关键词列表)。 ### 4.3. 结果筛选 (Filter & Selector) + **输入**：爬虫抓取的原始数据列表 + 用户限制条件 + 搜索关键词。 + **处理**： 1. **硬性过滤**：剔除不符合时长/价格限制的项。 2. **相关性打分**：LLM 对每个候选项打分 (0-100)，剔除低于阈值（默认30分）的项。 3. **数量控制**：截取 Top N 结果。 + **特殊机制**：如果剔除率超过阈值（如50%），会触发 **“Filter Failure Log”**，进而唤醒优化 Agent。 ### 4.4. 反思与修正 (Optimization) + **触发条件**： 1. **搜索失败**：Filter 剔除了绝大多数结果。 2. **负面反馈**：用户对推荐结果点击了“踩”（Dislike >= 2次）。 + **处理**：对比“旧画像”和“失败原因/不喜欢的内容”，逻辑推断画像的偏差并进行修正。 + **输出**：更新数据库中的 User Profile，并记录进化日志。 ## 5. 技术架构 ### 5.1 技术栈 + **前端**：React 18, Vite, Tailwind CSS, Framer Motion, Lucide React (Icons). + **后端**：Spring Boot 3.x, Spring AI (接入 DeepSeek API), Spring Security (JWT). + **数据存储**：MySQL 8.0 (持久化), Redis (缓存/锁). + **消息队列**：RabbitMQ (异步任务解耦). + **工具**：Selenium WebDriver (Headless Chrome 爬虫). ### 5.2 数据流转图  ### 5.3 数据库设计 (DomainModels) + users: 用户基础表 (username, password). + user_profiles: 用户画像表(存储 JSON 结构的画像数据，支持版本回溯). + search_histories: 搜索历史表 (Query, Keywords, ResultJSON, isRead). + agent_action_logs: Agent 行为日志表(记录画像生成、修正、推荐等关键动作). --- ## 6. API 文档 基础路径: http://localhost:8080/api/v2 ### 6.1 认证模块 | **方法** | **路径** | **描述** | **参数** | | -------- | -------------- | -------- | -------------------- | | POST | /auth/register | 用户注册 | {username, password} | | POST | /auth/login | 用户登录 | {username, password} | ### 6.2 问卷与画像 | **方法** | **路径** | **描述** | **参数** | | -------- | --------------------- | ------------------ | ------------------------ | | GET | /questionnaire | 获取问卷题目 | 无 | | POST | /questionnaire/submit | 提交问卷并生成画像 | {userId, answers: [...]} | | GET | /user/profiles | 获取用户画像历史 | ?userId=xxx | ### 6.3 推荐与任务 | **方法** | **路径** | **描述** | **关键参数** | | -------- | ---------------- | ------------------ | ------------------------------------- | | POST | /recommend | 发起推荐请求(异步) | userId, query, type (COMMODITY/VIDEO) | | GET | /stream/{taskId} | SSE 任务进度监听 | taskId | | GET | /user/history | 获取搜索历史 | userId | ### 6.4 反馈与通知 | **方法** | **路径** | **描述** | **参数** | | -------- | ------------------ | ---------------------- | ----------------------- | | POST | /feedback/dislike | 提交负面反馈(触发修正) | userId, [dislikedItems] | | GET | /user/unread-count | 获取未读消息数 | userId | | POST | /user/mark-read | 标记所有消息已读 | userId | --- ## 7. 前端功能描述 ### 7.1 欢迎与认证 (Welcome & Auth) + **功能**：登录/注册页，支持 JWT Token 本地存储。 + **视觉**：动态背景，渐变文字，使用 Framer Motion 实现入场动画。 + **逻辑**：首次登录用户会被自动引导至问卷流程，老用户直接进入主页。   ### 7.2 生活形态评测 (Questionnaire) + **功能**：23 道单选题，涵盖生活方方面面。 + **视觉**：顶部带有动态进度条，题目切换流畅。 + **交互**：点击选项自动跳转下一题，支持“退出重测”。  ### 7.3 全息画像展示 (Profile View) + **功能**：展示 AI 生成的“数字替身”。 + **核心板块**： - **AI 总结**：一句话描述用户特征（如“注重性价比的实用主义者”）。 - **维度标签**：科技感、购买力、价格敏感度、审美风格的可视化标签。 - **交互**：点击“开启智能推荐”进入搜索页。  ### 7.4 智能推荐中心 (Recommend View) + **功能**：核心交互界面。 - **双模式切换**：电商搜索(苏宁) / 视频搜索(B站)。 - **状态反馈**：加载中显示 Loading 动画与实时状态文本（“AI 正在分析意图...”、“Agent 正在筛选...”）。 - **结果卡片**：展示标题、描述、价格/时长、来源。 - **即时反馈**：每张卡片右下角有👍 / 👎 按钮。点击不喜欢会静默触发后台 Agent 修正画像。 + **亮点**：若有新结果推送（SSE/Polling），顶部会弹出 Toast 提示用户查看。   ### 7.5 个人数字档案 (Dashboard) + **功能**：查看历史记录。 - **推荐历史**：查看之前的搜索词、AI 生成的关键词以及当时的推荐结果。未读记录会有红点标记。 - **画像迭代记录**：查看画像随时间变化的轨迹（版本控制），直观感受 AI 对用户认知的不断修正过程。   ## 8 目前构想的后续开发动作 - [ ] **画像生成：分层画像 + 版本管理** - 把用户画像拆分为静态标签（如答题得出的知识水平、领域偏好）和动态标签（如历史检索需求、结果满意度），静态标签稳定更新，动态标签由优化节点实时调整。 - 给画像添加版本号，每次优化后生成新的画像版本，方便回溯：当调整后效果变差时，可快速回滚到上一版有效画像。 - [ ] **关键词提炼：双向反馈 + 多维度关键词生成** - 建立关键词与画像标签的映射关系（如 “知识水平低”→关键词：回复更基础、更具体；“领域偏好强”→关键词：更垂直），让关键词生成更精准。 - 接收筛选节点的反馈：若剔除结果过多，自动扩展关键词的同义词 / 相关词；若结果冗余，收缩关键词范围，减少无效检索。 - [ ] **筛选节点：多维度筛选规则 + 阈值自适应** - 除了结合用户需求和画像，可增加结果相关性评分（如与关键词的匹配度）、结果质量评分（如权威度、时效性）等维度，综合排序筛选，避免单一规则导致的过度剔除。 - 由协调节点根据历史筛选效果，自适应调整 “剔除阈值”：比如某类需求下剔除率过高，自动降低剔除严格度。 - [ ] **自动优化：量化优化目标 + A/B 测试机制** - 避免模糊调整：设定量化指标，如 “筛选结果留存率≥60%”“用户满意度≥80%”，优化节点根据指标偏差调整画像或关键词，而非凭经验调整。 - 引入 A/B 测试：对同一用户，并行生成两个版本的画像 / 关键词，分别推送筛选结果，根据用户反馈选择更优的版本，提升优化的准确性。

各大模型前端生成效果对比

## 起因 今天闲来无事，突然想到之间购买的trae还有一定额度；然后打开trae，看到模型选择界面，又想到各大模型对于同一需求生成效果如何，因此使用trae内置的gtp5.2、gemini3-pro、gemini3-flash、deepseekv3、kiro中的claude-sonnet-4.5、claude-opus-4.5、以及当前curosr内置的Auto模式，glm-4.7-coding-lite套餐，使用gpt生成需求文档，进行个对比 【为了更直观的展示，图片可能会有点多，希望各位老大不要介意 ^_^】 ## 首先登场的是claude-sonnet-4.5 ### PC端：    ### 移动端：    ## 然后登场的是gtp5.2 ### PC端：   ### 移动端：   ## 其后gemini3-pro登场了 ### PC端：    ### 移动端：    ## 接着claude-opus-4.5登场 ### PC端：     ### 移动端：     ## 然后展示corosr内置的普通Auto模式（免费） ### PC端：    ### 移动端：    ## 这时gemini3-flash也不甘示弱 ### PC端：   ### 移动端：    ## 下面登场的是deepseekv3 ### PC端：   ### 移动端：    ## 最后glm-4.7-coding-lite登场了 ### PC端：      ### 移动端：     ## 总结 个人感觉：claude-opus-4.5>claude-sonnet-4.5>gemini3-pro>gtp5.2>内置的Auto模式>deepseekv3>gemini3-flash 评判标准：内容完整性、布局、有无bug、音乐是否正常播放 更新补充：glm-4.7做出的效果很类似claude，PC端页面还是可以的，移动端导航栏有点不适配，但我觉得对于一年花费不到200的模型来说，已经可以了，其次lite套餐确实是有点慢，花费了8分钟才做完  我的建议，对于普通开发者来说，lite已经足够了，无非是多等一会。对于工作的朋友来说，可以体验一下pro套餐，官方表述生成速度快一倍 ## 需求文档 ```请按以下要求编写代码 1. 设计目标 用户体验: 创建一个能够吸引并与用户产生情感共鸣的界面，传达出新年迎接希望与美好的氛围。 响应式设计: 确保设计在各类设备（手机、平板、桌面等）上都能有良好的显示效果。 互动性: 通过动画效果、交互设计等增强用户参与感，让用户感受到跨年的氛围。 性能优化: 考虑页面的加载速度，避免过多的资源加载影响体验。 2. 风格与色调 主色调: 金色、银色、红色和深蓝色等象征着新年的喜庆与庄重。 金色: 用于凸显重要内容，如按钮、卡片背景、装饰元素等，传达新年的富贵、吉祥。 红色: 用于一些激励性或提示性的元素（例如标题、按钮），象征喜庆、热情。 深蓝色: 用于背景或暗色区域，传达跨年夜的静谧和庄重。 辅助色: 灰色、白色、银色，确保整体设计清新、不杂乱。 字体: 主标题：使用大气、流线型的字体（如 Playfair Display、Merriweather），强化节日气氛。 正文：使用简洁、清晰的字体（如 Roboto、Open Sans），确保可读性。 3. UI 组件与布局 首页布局: 顶部导航: 清晰简洁，包含新年倒计时、菜单导航、语言切换等。 倒计时模块: 显示到跨年的倒计时，强调动态效果（例如数字逐渐跳动）。 活动推荐模块: 根据用户偏好推荐跨年活动或促销活动，采用卡片式设计。 动态背景/主题装饰: 可根据用户滚动或交互，动态展示烟花、灯光等节日元素。 活动详情页: 简洁的卡片布局：展示活动的时间、地点、报名信息。 活动倒计时: 活动开始前显示倒计时，确保用户不会错过。 报名/参与按钮: 显眼的按钮，使用亮眼的颜色（如金色或红色）以增强参与感。 跨年夜特别页面: 背景动画: 烟花或灯光效果，随着用户互动生成新的动画。 新年祝福: 用户可以点击生成新年祝福，利用动态文本效果生成个性化祝福。 4. 动画与交互效果 过渡动画: 页面加载时使用渐变式加载效果，平滑过渡到主界面。 悬停效果：按钮、卡片等元素在鼠标悬停时提供轻微的放大或阴影效果，增强交互感。 动态倒计时: 数字每一秒钟跳动一次，使用平滑的动画效果。 倒计时结束时，触发烟花动画，增强节日氛围。 新年倒计时提醒: 提供新年倒计时到最后10秒时的震动效果，增加紧迫感。 烟花与灯光动画: 使用CSS动画和JavaScript动态生成烟花效果，并与页面交互。例如，用户滚动页面时，烟花可以根据位置变化生成新的效果。 背景音效: 可选择播放柔和的背景音乐或跨年倒计时时的倒数声效，增加氛围。 5. 响应式设计 移动端: 页面元素应根据屏幕尺寸自适应调整布局，确保在手机上有较好的浏览体验。 菜单按钮使用汉堡包菜单（Hamburger Menu）形式，节省空间。 倒计时模块应缩放为大字体，便于用户查看。 桌面端: 使用更宽敞的布局，确保页面元素不会过于拥挤。 活动推荐区域可以显示为横向滑动的卡片，以便用户浏览更多内容。 6. 开发细节 HTML5与CSS3: 使用语义化HTML标签和响应式设计技术（如媒体查询、Flexbox、Grid）确保良好的兼容性。 JavaScript: 用于倒计时、动态背景生成、动画效果等交互。 使用Intersection Observer API优化页面性能，避免不必要的重绘。 动画库: 使用 GSAP 或 Lottie 动画库来制作流畅的动画效果。 CSS3 Animation 和 Keyframes 适用于简单的交互动画。 7. 性能优化 资源懒加载: 确保图片和视频内容使用懒加载技术，提升加载速度。 SVG图标与图片: 使用SVG图标代替位图图标，以提高分辨率和加载速度。 压缩与合并: 压缩CSS、JS和图像文件，减少页面加载时间。 8. 无障碍设计 文本对比度: 确保文本与背景的对比度达到AA级标准，以帮助视觉障碍用户阅读。 键盘导航: 确保所有交互元素都能通过键盘进行操作。 语音输入支持: 让用户可以通过语音输入参加活动或浏览页面。 ```

女友怒骂国内不能用Claude Code，于是我给她做了一个

大家好，我是程序员鱼皮。最近女友开始学习 AI 编程了（被我带的），她听说 Claude Code 这个 AI 编程工具很牛掰，结果试了下发现得要国外的 Claude 账号才能登陆。  然后她就骂骂咧咧地跟我吐槽。 展现男友力的时候到了，于是我开玩笑地说：别难过了，要不我给你做一个 Claude Code 算了？  结果，她当真了！ 我 ↓  没办法，只能试一试了，毕竟谁希望圣诞节这两天让自家人难过呢？ 正好这两天国产 AI 大模型 GLM-4.7 发布了，我看网上很多博主都在吹什么 “国内最强的编程模型”、“最强的开源模型”、“Claude 的最佳平替”，甚至说是超过了 GPT-5.2 和 Claude Sonnet 4.5。  你说国产最强也就算了，超过 Claude 这我能信么？ 那正好，我就尝试用 GLM-4.7 来做个自己的 AI 编程工具吧，对标 Claude Code 那种的，看看 GLM-4.7 到底几斤几两。  接下来，就让我们一起 **用 GLM-4.7 + Claude Code** 开发一个 **基于 GLM-4.7 的仿 Claude Code** 的 AI 编程工具。 项目开始前，先起一个响当当的名字，就叫 `Yupi Code` 吧！ 接下来，我们将遵循这套《鱼皮 AI Vibe Coding 开发仿 Claude Code 的 Yupi Code》流程，不写一行代码，一步一步把 “Claude Code” 做出来！ - 环境准备 => 安装工具和配置环境，能够 Vibe Coding - 技术调研 => 确认满足生成需求 - 设计开发 => 包括方案设计、生成代码、修复 Bug，得到 MVP 最小可行产品 - 版本控制 => 防止后续改动出问题 - 优化能力 => 支持更多对标 Claude Code 的功能，比如联网搜索、流式输出、深度思考等  ## 环境准备 智谱的 GLM-4.7 兼容多款编码工具，除 Claude Code 外，还支持 Cursor、Cline 等主流编码工具，灵活适配多种开发场景。 给 Claude Code 接入 GLM 也很简单，1 分钟搞定。 首先打开终端，输入一行命令安装 Claude Code： ```shell npm install -g @anthropic-ai/claude-code ``` 然后执行 `claude` 命令打开程序，默认是需要登录 Claude 账号的，否则无法使用：  不过没关系，让我们把它背后的 AI 大模型换成国内的 GLM-4.7。首先进入 `{用户目录}/.claude` 目录，创建一个 `settings.json` 配置文件：  然后修改配置文件中的内容如下，记得替换成你自己的 API Key：  API Key 直接到智谱开发平台获取即可： 指路：https://bigmodel.cn/  接下来就可以愉快地使用了~  除了这种方式外，官方文档还提供了更简单的方式，直接使用自动化助手，按照指引就能完成环境配置：  ## 技术调研 如果要完全利用 AI 开发项目，有几个难点： 1. 项目需要包含完整前后端，需要大模型有较强的 **编码能力** 2. 需要让后端项目对接 AI 大模型，每个大模型的接入和开发方式不同，需要让 AI **读取文档** 理解最新的开发方式 3. 如果想要优化界面效果，还需要 **图片理解能力**，给 AI 一张图片就能让它还原 在正式开发前，我们要确认 GLM-4.7 和 Claude Code 的配合能够满足这些能力要求。 根据智谱官方介绍，Claude Code 中内置了智谱专属的 MCP 工具，不需要开发者自己安装。包括 **搜索和网页读取** 能力、能够直接解析截图/设计稿/报错图的 **视觉理解能力**。 让我们依次测试一下，首先是网页搜索能力，紧跟时事：  测试网页读取能力，让它来读取我们编程导航网站的信息：  测试图片理解能力，我给 AI 传了一张 “从夯到拉排行榜的背景图”：  AI 的理解还是很准确的，具体文字也读取出来了。 OK，几个能力都满足要求，下面让我们进入方案设计和开发阶段。 ## 设计开发 先创建一个干净的项目目录 `yupi-code`，打开终端并进入该目录：  然后输入提示词： ```markdown 帮我开发一个类似 Claude Code 的终端 AI 编程工具，能够使用 GLM-4.7 模型帮用户回答问题和生成代码 ``` 一般来说，整个项目的第一句提示词是最重要的，如果我要开发一个复杂的商业项目，肯定会好好打磨一下这句提示词，少说写个几百字（之前看过我 [AI 程序员技术练兵场项目](https://mp.weixin.qq.com/s/cd7K9WQiOkP7AJglZ1b1Ng) 的同学应该知道）。  但测试 AI 模型时，我喜欢反其道而行之，站在大多数用户的角度，故意输入一句简单的提示词，看看 AI 能不能引导我来生成满足需求的项目。 果然，AI 判断这是一个复杂的项目，想要进入 **计划模式** —— 先明确需求、设计方案再开发。  然后我们需要通过选择来明确需求，并让 AI 生成方案。 Claude Code 的交互做的还是不错的，先选择编程语言，建议老老实实选 AI 推荐的第一个：  接下来是选择项目要具有的功能。如果是以前，我可能会先让 AI 只开发基础对话功能，跑通流程后再添加其他功能。 但现在我对 AI 有了更多的信心，**咱就把所有功能全都选上，干就完了！**  其他设置就不多说了：  选择完成后，AI 给出了详细的实现计划，一定要仔细阅读：  你可以直接执行，或者给 AI 进一步的指导。比如我让 AI 生成的应用去调用智谱 Coding Plan 套餐的 BASE URL，能节约一些成本，并且给 AI 提供了一个官方的 API 文档，便于 AI 生成准确的代码。  确认后开始执行，AI 会先调用内置的工具来搜索和解析文档：  然后 AI 列出了一个 Todo List，并且一步步生成代码和文档：  这期间如果你发现有严重的问题，比如发现 AI 生成的代码已经完全偏离预期了，那么就尽早暂停或者人工输入提示词来引导 AI。如果发现 AI 只是有一小块代码生成的不对，我的建议是先忍着，反正最后 AI 大概率会自己发现问题并修复。 过了大概十几分钟后，AI 生成完成，还告诉了我使用方法：  可惜我根本懒得看，我直接把 API Key 交给 AI 帮我运行不就好了？ Vibe Coding 开发模式下，我多自己做一件事，都是对 AI 的不尊重。  输入提示词： ```markdown 我的 API key 是 xxxxxxx，请你帮我运行 ``` 然后，翻车了。。。  不慌，直接让 AI 自己检查并修复错误。而且为了使用方便，应该提供一个快速启动脚本，能够让我像运行 Claude Code 一样，一行命令启动 AI 编程工具。 提示词： ```markdown 帮我检查并修复项目中的错误，并创建一个可以像 Claude 一样让用户在命令行输入 "yupicode" 就能启动程序的快捷脚本 ``` 几分钟后，AI 修复完成，并且提供了一个 `yupicode` 脚本：  我打开一个新的终端，然后运行 `yupicode` 脚本，尝试和 AI 对话：  你别说，效果还不错啊！ 还像 Claude Code 一样提供了一些命令，比如清空对话历史、查看帮助之类的：  看到这里，我感觉项目已经基本可用了。建议给项目上个 Git 来版本控制，防止后面的改动出问题。 什么？你不知道 Git 是什么？ 没关系，直接交给 AI 吧： ```markdown 现在项目已经基本可用了，帮我提交一个 git 版本，防止后续改动出问题 ```  测试下来，目前的 Yupi Code 还有一些不足之处，比如不支持搜索：  接下来就让我们优化项目，增加更多 Claude Code 支持的能力。 ## 优化能力 1）先来添加网络搜索能力，直接把智谱的官方文档给它丢进去。提示词如下： ```markdown 现在好像不支持网络搜索，请参考 https://docs.bigmodel.cn/api-reference/%E5%B7%A5%E5%85%B7-api/%E7%BD%91%E7%BB%9C%E6%90%9C%E7%B4%A2 文档，增加网络搜索工具调用能力 ```  很快 AI 就添加了新功能，重新打开 yupicode 来验证下，正常生效了：  2）下面再优化下 AI 回复的效果，目前是卡一会儿然后直接输出完整回答，需要调整为流式输出的打字机效果。 提示词： ```markdown 我希望在等待 AI 回复时，有一个转圈的小图标；并且 AI 的回复可以实时流式输出 ``` AI 很快就搞定了：  3）GLM-4.7 进一步强化了交错式思考能力，引入 **保留式思考** 和 **轮级思考**，让复杂任务执行更稳、更可控。我们也应该让 Yupi Code 输出模型的思考信息、工具调用信息等等，帮助用户了解情况。 输入提示词： ```markdown 帮我输出模型思考的信息、以及工具调用信息，你可以通过官方文档来了解如何开发 ```  测试一下优化后的效果，比如 “介绍一下鱼皮的 AI 导航网站”，能很清晰地看到思考过程：  ## 大功告成 到这里，仿照 Claude Code 开发的 Yupi Code 就已经完成了，让我们用它来开发个小网站试试。 比如来个动画学算法的 Demo，提示词： ```markdown 帮我开发一个学习冒泡排序算法的动画网站，使用 Q 版动漫的风格和吉伊卡哇感觉的配色 ```  效果如图，画风还是不错的，但要是之后大模型能自动生成图片插画并添加到网站中，就更好了。  再来开发个仿真的电子黑板，提示词： ```markdown 帮我开发一个仿真的电子黑板，用户可以在上面画画并导出为图片 ```  圣诞节了，鱼皮给大家画颗圣诞树，还附赠一个小礼物，这怎么能不算是程序员的浪漫呢~  ------ OK，这就是我 **利用国产的 AI 大模型 GLM-4.7 + Claude Code** 开发出一个 **基于 GLM-4.7 的 Yupi Code** 的全过程了。 我自己体验下来，GLM-4.7 相比于之前的国内大模型，在处理复杂任务的稳定性上有进步，即使遇到问题也会自动修复，让最终生成的代码可运行。 而且 GLM-4.7 调用工具的能力也强化了，和 Claude Code 等 AI 编程工具打配合，直接内置了联网搜索、网页读取、解释图片等 AI 编程常用的能力，不需要自己再去找 MCP 来增强了。 不得不说，作为一直关注智谱 AI 的忠实开发者，真的很能感受到他们这几个月来在 AI 编程方向的努力，我相信大家也是有目共睹。 不过毕竟现在的 Yupi Code 是 AI 一把梭的，还有很多能优化完善的地方。如果后面有时间，大家也感兴趣的话，说不定我会好好打磨打磨这个工具把它开源出来。我的终极目标是，让基于 **AI 大模型 GLM-4.7 + Claude Code** 开发的基于 **GLM-4.7 的 Yupi Code** 编程工具，能够开发出一个基于 **GLM-4.7 的** 编程工具，比如 Yupi Son Code。我认为好的 AI 工具就是要能做到无限套娃，疯狂自举！  听懂掌声~ ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](

闲的没事，就用AI 做了一个占卜的小网站

有天晚上刷东西刷到《易经》，本来只是随便看看，结果突然冒出一个很程序员的念头： 如果把“占卜”这事儿当成一个**输入 → 规则 → 输出**的过程，会变成什么样？ 周末闲着没事就真动手试了下，做了个小网站： 👉 [https://i-ching-online-ai.com/](https://i-ching-online-ai.com/) 也没搞什么玄的东西，大概就是： * 起卦流程按规则走 * 卦象这块用 AI 帮忙解释 * 不去讲什么命好命坏，更偏现在这个状态在提醒你什么 一开始完全是当实验项目在玩，没指望有什么用。 但自己这几天偶尔点一卦，发现有时候看完解释，会突然意识到： “哦，原来我是在纠结这个。” 也不敢说准，更不想往算命那边靠。 对我来说，它更像是一个能让人停下来想一想的小工具。 如果你刚好也有点迷糊，或者只是好奇，可以随便玩玩。 给编程导航的朋友留了个兑换码： **兑换码：`codefather.cn`** 兑换地址：[https://i-ching-online-ai.com/settings/credits](https://i-ching-online-ai.com/settings/credits) 当成一个程序员周末瞎折腾出来的东西就行。

有多少小伙伴是用 cursor 开发呢？来分享下你的 cursor 年度报告吧 ！

Crispix Agent（基于genie二次开发的图像智能体）开发完成！！！

## 前言 历时几个月终于算基本是开发完毕了，本来是计划10月或者11月搞定了，但是最后一学期忙着搞其他事情也就耽搁了挺久。很多时候还得慢慢想方案找思路。这里提名两位"得力干将"，Trae和cursor，想方案 分析架构 写代码提供了莫大助力。不然这东西单凭我一个大三学生绝对搞不定。好了介绍一下项目吧 ## React模式的回归 我在之前的贴子说过打算这个项目全部都使用plan and executor模式，但是经过了很多次测试发现这个模式在处理简单任务常常会出现过度规划和调用的毛病，明明一件改图的需求就是要搞好多轮任务，浪费时间和浪费资源。一开始我考虑使用意图识别，让一个中间小模型判断得使用什么模式。如果识别出是复杂任务就使用plan 简单任务就react。但是这种效果经过测试并不稳定，很多时候简单的任务还是会调用plan模式，所以并不是很好的选择，那难道要让用户自主选择吗？答案是对的。有天晚上我跟我妈沟通之前那个spring ai REACT图像智能体的使用情况，她说基本上大部分都够用很多时候比豆包都吊，这样子就挺好的。我意识到普通的react模式就已经适合处理绝大部分场景了，plan很多时候根本就是多此一举，强行加入意图识别反而牺牲用户体验，所以应该保留原本默认的react，plan作为扩展，如果用户需要复杂任务的规划就让他自己选择。唉，好好好搞了一圈又回来了，还是用genie原本的结构 PLAN模式   REACT模式  ## 多模态 提示词调优工具 ### 多模态 多模态图像理解对于我的图像智能体来说多模态算是个很重要的功能了，多模态模型可以让agent在思考阶段就更加理解用户的意图，使得agent在规划任务和调用工具更加准确。相比普通文本模型+视觉理解模型也可以很好的节省任务步骤。genie本身对多模态的编写其实算不是很好的支持，代码部分有很多需要修改，比如不支持多图理解等，还有提示词部分不支持多图，上下文对用户初始上传的图片和后面工具调用生成的图片没有做很好的区分。这部分修改一下系统提示词和上下文提示词。区分用户上传的图片和生成的图片，多模态方面把上传图片String改为List<String>,然后做代码对应修改即可，最后记得模型一定要是多模态模型，不然上传图片传入参数他会报错。这里用的是doubao-1.6-vision。这样子就完成了对多模态的改造。    ### 提示词调优工具 文生图很重要的一个东西就是提示词，一个好的提示词能生成一张效果十分惊艳的图片，所以对于我的图像智能体加入这个工具是必不可少的。那要加入这个工具就需要大量数据，然后让他基于这些数据生成。那要搞这些就不可避免的遇到一个东西--RAG。但是我本身并没有RAG基础，学习RAG对我而言成本太高，所以我选择了更加简单的方式，选择在阿里云百炼平台搞一个智能体应用，然后通过调用api的方式拿到调优后的提示词，这方法简单粗暴，可以简单的反复调试，很好的节省了学习的成本。而且这也算multi-agent吧。ps：如果以后需求的话估计还是得学，到时langgraph工作流是个不错的选择。 ## 历史记录开发 这个功能是我最不愿意面对的，因为设计很多设计对流式消息的处理而且字段也复杂，消息类型也多，在哪存 存哪都是个问题，搞这东西就是项大工程。不过好在有ai的帮助还有我慢慢调试和硬啃之下还是啃下来了。按照下方图片的架构，APP就是项目表，代表这一整个项目，session就是消息段，代表用户发送的这一整段消息，message消息表记录每一条消息的id 类型，但不记录具体内容，要具体内容需要根据id和类型去消息载荷表里面查找，这样子就组成了一个存储历史消息的完整结构了。当然实际开发依旧困难重重，得多轮调试，前端还得根据历史记录再写一套处理逻辑等等等。  ## 前端处理 前端也花了不少功夫,几个页面发送消息创建项目的处理，附件部分的优化，跨页面数据传输，历史消息记录的获取和返回逻辑整合 在开发过程中发现antd和antdx版本更新了也升级整理了一下，这一部分其实能讲的的挺多的，但我写累了，就下次再讲吧。 然后还解决了鱼皮图库项目的一个bug，在调用对象存储url方式上传的时候，图片是打不开的文件的后缀是只有一个小点，缺少了格式，这是皮总的处理方式是将图片转换成jpg格式这样子图片就能显示了。但其实不用这样，只需要让代码拿到文件后缀然后将路径和后缀拼接上就能拿到原图了，代码我就下期放吧，挖个坑，也累了 ### 图片信息 上传 视觉理解能力      ## 之后计划 其实我是一直想开发一个偏正式化的项目，更企业化的前端 更前沿的技术 更有亮点的功能，之前的图库不是很美观，而且很多代码功能写的并不是很好，比如登录 ip校验 限流等，在实际使用中还是容易出现很多的缺陷，我那个登录的redis就一直莫名其妙挂，我排查了好久也排查不出来原因，于是。。。   这个网站还是能给很多人带来帮助的，所以我单挑了里面一些比较常用的功能搞了一个新的网站，图盘本身需求并不是很多所以给我剔除了，保留了智能体部分，之后的话就继续优化这个智能体，完善网站，加上登录注册限流等基础功能。大概在元旦应该可以开发完毕部署上线，到时候希望各位鱼友帮我测试一下。 到这里其实功能主要就是智能体agent，不过嘛。其实也不止这个，我个人还是其他的想法加些新功能的，看能不能在元旦前搞定，继续挖个坑嘿嘿 登录部分这几天做了，技术打算采用jwt+双token机制+限流+限ip+验证码。上次登录做崩了，这次有了cursor相信一定能搞定！！！

全面封禁 Cursor！又一家大厂出手了

# 大家好，我是程序员鱼皮。 最近，有网友爆料称：**快手的研发线发布通知，收紧了对第三方编程软件的使用权限**。 不少同学发现，只要在自己办公电脑上点开 Cursor，就直接闪退，压根儿用不了。  我都能想象到这些同学有多痛苦，本来可能计划好了下午 1 个小时用 AI 把代码生成完，然后摸 5 个小时的鱼。结果午休一觉醒来发现天塌了，先是对着屏幕发了一会儿呆，然后开始上网找代码模板、翻文档查 API，能不能按时完成工作都是未知数。。。 有员工调侃：没 Cursor 的日子，我连 Hello World 都写不顺了！ 毕竟很多人已经深度习惯了 AI 辅助开发，如果真的回到手搓时代，确实很难适应。  但其实这波限制第三方 AI 编程工具的操作，早就不是个例了。 今年 5 月，字节跳动就发布了内部邮件：自 6 月 30 日起，将分批次禁用 Cursor、Windsurf 等第三方 AI 编程软件，转而推广自研的编程助手 Trae。  当时字节给出的理由主要有 2 个： 1. 不少员工通过个人账户采购这些工具，数据沉淀到个人账户，不符合公司数据安全管理规范 2. 部分第三方工具和模型（比如 Claude）尚未在中国区提供正式服务，存在合规风险 结果这个消息在圈内传得沸沸扬扬，尤其是字节的程序员炸锅了。有人觉得毕竟字节要推自己的 Trae 嘛，禁用第三方工具也算是情理之中。但关键是当时 TRAE 和 Cursor 差距较大，所以有厂友吐槽：如果逼着用Trae，那宁可不用AI。天天在那里提示纯属帮倒忙，不仅降低生产力还影响心情。 还有更狠的 DISS：外面的蟠桃不给吃，逼着让吃自家的猪饲料。  后来字节又补充说明，如果第三方工具符合法律法规、支持租户管理和数据管控，通过审核后还是可以申请使用的。只不过大部分人都被引导去用 Trae 了。 除了国内大厂，像亚马逊在今年 11 月要求员工优先使用自研的 AI 编程工具 Kiro，并明确表示将不再支持任何新增的第三方 AI 开发工具。还有今年 9 月，微软全面禁止员工使用 DeepSeek 相关应用，强制推广自家的 GitHub Copilot。  看到这里你可能会想，这些大厂是不是太保守了？AI 编程工具明明能大幅提升效率，为啥要禁？真的只是为了推广自家的产品么？ 我觉得首要原因是 **考虑安全性**。 对于大厂来说，代码不仅仅是代码，更是企业的核心资产、是商业机密。一旦泄露，损失无法估量。 而 Cursor、Copilot 这类 AI 编程工具，默认会将用户输入发送至云端模型进行推理。你写的每一行注释、每一段未提交的草稿，都可能在不经意间离开企业边界。 再仔细想一想，这些工具背后的大模型训练数据来自哪里？会不会用你的代码继续训练？这些问题都是大厂必须考虑的。 能用 AI 开发都已经算是好的了，有些公司对安全的把控更严格，比如位于深圳的 ICT、计算头部企业，一直秉持着 **内部信息不上网** 的原则。任何向外部网络上传文件的行为，都被从底层程序上禁止了。 想象一下，明明外面的世界如此发达，却要把你关在一个禁网的小黑屋里写代码，这才是真的痛苦。  除了数据安全，还有个现实问题：**AI 生成的代码质量参差不齐**。 “如果一个函数你写了 90%，剩下 10% 让 AI 去生成，它能给你把前面 90% 的代码全部改错。”  你可以把这句话当个笑话听，只要它不发生在自己身上。 AI 确实能提效，但如果完全依赖 AI、不审查代码就提交，很容易出现线上事故。**而对于大厂来说，即使效率低一点，也必须保证代码安全。** 关注我的朋友也应该知道，今年互联网出现了多少 P0 级重大故障？很难说背后是不是 AI 的锅。**但 AI 是无法被追责的，给 AI 擦屁股的只有用 AI 的我们自己。**  最后我想说，AI 编程已经成为大趋势。就拿《腾讯 2025 研发大数据报告》中的数据来说，腾讯 **超过 90% 的程序员** 正在使用 AI 编程助手辅助写代码。更夸张的是，2025 年全公司有 **50% 的新增代码** 由 AI 辅助生成。也就是说，每两行代码，就有一行来自 AI。  即使你所在的公司禁用了 Cursor 等 AI 工具和某些大模型，你自己也应该积极学习 AI 编程工具，**而且要用最新的**，这直接关乎你未来的竞争力。就跟打游戏一样，你拿历史版本的 T0 去打这个版本的 T0，不就会被吊着打么？ AI 发展非常迅速，每天都有新东西，可能 1 个月不关注，你用的工具和大模型就落后几个版本了。所以我也做了个 [AI 导航网站](https://ai.codefather.cn/)，帮大家更快获取到最新的 AI 学习资源、工具大全、资讯等等。感兴趣的同学可以免费使用~  ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)

干掉 Draw.io，这个程序员画图神器杀疯了！

这年头谁还人工画图啊？我用 AI 几十秒就搞定了。  我在 [编程导航](https://codefather.cn/) 上看到了这个最近大火的 AI 画图神器，完全免费开源，短短几天就涨了 6k star，值得收藏！ 开源指路：https://github.com/DayuanJiang/next-ai-draw-io  这个项目支持在线体验，你可以完全从 0 开始画图，比如画一个流程图，演示 RAG 的工作原理。 ⭐️ 建议观看视频演示：https://bilibili.com/video/BV18NmnB4EeM AI 会自动生成 Draw.io 绘图代码，很快精美的流程图就搞定了！  然后你可以利用 Draw.io 自身强大的绘图能力手动修改任意元素、或者是改变风格样式。  也可以通过 AI 对话让它帮你修改，比如改成动画连接线，逼格一下子就上来了。  还有程序员工作涉及的架构图： 提示词：绘制电商平台的微服务架构图  UML 类图： 提示词：用 UML 类图展示用户管理模块的设计  ER 图： 提示词：绘制在线教育平台的数据库 ER 图  时序图： 提示词：用时序图展示用户登录的交互过程  知识讲解图： 提示词：用动画演示冒泡排序的执行过程  甚至是沙雕图： 提示词：让程序员鱼皮卑微地求用户点赞  这些通通不在话下，帮你节省大把的时间和毛发~  还有一些使用小技巧，比如配合免费的图标库，让整个绘图元素更丰富。 提示词：使用 AWS 图标生成 CDN 架构图  可以使用原生 SVG 动画标签，给整个绘图增加缩放和路径动画（不过支持的动画很有限）。 提示词：演示 DDOS 攻击，使用 SVG 的 <animateMotion> 和 <animateTransform type="scale"> 增加缩放和路径动画  还可以自己上传一个草图，比如我用文本模型生成的 Mermaid 流程图，让 AI 帮我替换为更美观的样式风格。 提示词：改为彩虹主题的配色、放大字体、使用加粗动画连接线 效果还不错吧！  最后导出为各种图片或文档格式，美滋滋~  注意，官方提供的演示网站可能限量和不稳定，像我连续用了几次就被拒绝了：  所以我建议下载开源代码到本地，按照官方文档的说法 [配置自己的大模型](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/ai-providers.md) 来运行；或者用 Docker 一键启动，想怎么用就怎么用。  最后多说两句，这个项目的实现其实并不复杂。作者通过集成 Vercel AI SDK 轻松对接各种大模型，让 AI 生成 draw.io 能理解的 XML 代码，然后直接使用开源的 draw.io 代码实现了核心的绘图展示和编辑能力，整个过程和 AI 生成网站是类似的。  你学会了吗？ ## 更多 💻 编程学习交流：[编程导航](https://www.codefather.cn/) 📃 简历快速制作：[老鱼简历](https://www.laoyujianli.com) ✏️ 面试刷题神器：[面试鸭](https://www.mianshiya.com) 📖 AI 学习指南：[AI 知识库](https://ai.codefather.cn/)