【程序员副业指南】KwaiKAT AI制作小红薯[特殊字符]卡片MCP

【程序员副业指南】KwaiKAT AI制作小红薯[特殊字符]卡片MCP

【程序员副业指南】KwaiKAT AI制作小红薯卡片MCP

在这里插入图片描述

【程序员副业指南】KwaiKAT AI制作小红薯📕卡片MCP

背景

每个程序员都熟悉计算机,是最适合写技术博客以及做分享的人。最近发现了一个Markdown转知识卡片,值得注意的是,可以利用这个快速制作小红薯📕卡片,但是有点小贵,对于我这样的白嫖党,那肯定是负担不起的,于是决定利用KAT-Coder-Pro V1复刻一个小红薯📕卡片MCP。

效果展示

本项目已开源:https://github.com/lfrbmw/Little-Red-Book-Card-MCP

有朋友问这个有什么用,最近来看效果,你的到一个可以直接发的小红📕卡片,示例如下,直接输出一张可发布小红书的笔记,还提供多个样式。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关介绍

为什么选择 KAT-Coder-Pro V1?

🔥 高性能,高性价比
  • SWE-Bench Verified 解决率达 73.4%,媲美全球顶尖闭源模型
  • 256K 超长上下文,轻松处理项目级代码与复杂任务
  • 支持 自然语言驱动全链路开发:需求分析 → 架构设计 → 编码 → 调试 → 部署
  • 阶梯式按上下文计费,大幅降低使用门槛
🛠️ 深度适配主流 AI 编程工具

完美兼容4大平台:

  • Claude Code
  • Cline(VS Code 插件)
  • Kilo Code
  • Roo Code

只需 1 分钟配置 API,即可在熟悉环境中调用 Pro 级 AI 能力。

🎁 超强福利
  • KAT-Coder-Pro V1:新用户注册即赠2000万Tokens!
  • KAT-Coder-Air V1:API 永久免费,拥抱每一位开发者
在这里插入图片描述

什么是 MCP?

MCP(Model Context Protocol)是一种开放标准,用于让大模型安全、高效地调用外部工具与数据。

  • MCP Server:管理工具接口,执行具体操作(如生成图片)
  • MCP Client:嵌入 LLM 环境,发起工具调用
  • MCP Host:集成平台(如 Cursor、CodeBuddy、Trae)

优势:

  • 标准化接口,降低集成复杂度
  • 集中管控,提升安全性与可维护性
  • 支持动态数据获取与执行,让 AI 真正“能做事”
在这里插入图片描述

零代码开发小红薯📕卡片MCP

前置准备-接入KAT-Coder-Pro V1

这里就不过多的描述,可以参考,KAT-Coder-Pro V1 开发工具接入指南:https://www.streamlake.com/document/WANQING/me6ymdjrqv8lp4iq0o9

推荐使用Cline,1分钟就配置好了。

在这里插入图片描述

在cline配置好的效果。

在这里插入图片描述

准备提示词

开发一个小红书卡片MCP 功能: 1.将 Markdown 文档转换为精美的知识卡片,支持多种风格 2.支持 多 种主题样式:苹果备忘录 波普艺术 艺术装饰 玻璃拟态 温暖柔和 简约高级灰 梦幻渐变 清新自然 紫色小红书 笔记本 暗黑科技 复古打字机 水彩艺术 中国传统 儿童童话 商务简报 日本杂志 极简黑白 赛博朋克 3.如果长文就自动拆分 4.支持直接读取 Markdown 文件(可选择) 5.支持通过 type 参数直接指定卡片类型/尺寸(可选择) # 注意 1. 注意符合mcp开发 2. 注意中文编码问题 # 任务 根据 用户故事 和提供的 功能 生成小红书卡片MCP,以及相关注意点,将本项目上传至 MCP,并确保像 CodeBuddy 和 Cursor 这类工具也能让其他人正常使用这个 MCP 项目。 当前项目的 GitHub 地址已配置好,为 https://github.com/lfrbmw/Little-Red-Book-Card-MCP.git。后续要完成将项目上传至 GitHub 并发布到 NPM 的操作 

创建一个空文件夹就可以开始让AI干活了。

在这里插入图片描述

仅仅一次,就完成了从设计到成品,再到测试,可以看到在测试中遇到的问题它都会去处理,只有通过测试,它才会发布到npm。

遇到错误,分分钟就处理好了。

在这里插入图片描述

在测试完后,会自己主动的删除删除文件。

在这里插入图片描述

直接就在npm部署成功。

在这里插入图片描述

接下来就是在trae中配置这个MCP,进行实际的测试。

在这里插入图片描述

可以看到成功的制作并部署了一个小红书卡片mcp。其中有2个功能:

将Markdown内容转换为知识卡片 列出所有可用的主题样式 

对它说:列出所有可用的主题样式,可以看到,成功的列出了我们初始化时给出的19个主题。

在这里插入图片描述

修修补补项目

在测试过程中,它没有实际的实现目标,我们只需要对他说出我们的目的,他会自行的优化。

测试过程实际使用mcp过程中,交互如下, { "content": "# 高效学习的五个技巧\n\n- 设定具体目标:明确今天要完成的任务。\n- 番茄工作法:25分钟专注,5分钟休息。\n- 主动回忆与间隔重复:用检索而非重读。\n- 输出驱动:用讲解或写作检验理解。\n- 及时复盘:记录问题与改进点。\n\n> 学习不是时间的堆砌,而是效率的提升。\n\n## 快速行动清单\n- 今天的目标写下来\n- 安排2个番茄钟\n- 用问题自测一次\n- 输出一段总结\n- 晚上做5分钟复盘\n", "theme": "清新自然", "type": "standard" } 响应 { "html": "\n <!DOCTYPE html>\n <html lang=\"zh-CN\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n \n .card {\n background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);\n border: 1px solid #81c784;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(129, 199, 132, 0.3);\n font-family: 'Open Sans', sans-serif;\n color: #2e7d32;\n }\n \n .card-content {\n margin: 0;\n padding: 0;\n }\n </style>\n </head>\n <body>\n <div class=\"card\">\n <div class=\"card-content\"><h1>高效学习的五个技巧</h1>\n<ul>\n<li>设定具体目标:明确今天要完成的任务。</li>\n<li>番茄工作法:25分钟专注,5分钟休息。</li>\n<li>主动回忆与间隔重复:用检索而非重读。</li>\n<li>输出驱动:用讲解或写作检验理解。</li>\n<li>及时复盘:记录问题与改进点。</li>\n</ul>\n<blockquote>\n<p>学习不是时间的堆砌,而是效率的提升。</p>\n</blockquote>\n<h2>快速行动清单</h2>\n<ul>\n<li>今天的目标写下来</li>\n<li>安排2个番茄钟</li>\n<li>用问题自测一次</li>\n<li>输出一段总结</li>\n<li>晚上做5分钟复盘</li>\n</ul>\n</div>\n </div>\n </body>\n </html>\n ", "css": "\n .card {\n background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);\n border: 1px solid #81c784;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(129, 199, 132, 0.3);\n font-family: 'Open Sans', sans-serif;\n color: #2e7d32;\n }\n ", "metadata": { "theme": "清新自然", "type": "standard", "wordCount": 26, "charCount": 197 } } 没有实际的输出转换为知识卡片例如一张图片png格式等,保存在当前文件夹,我要的时实际的实现,而不是一个架子 
在这里插入图片描述


在这里插入图片描述

最终版本

本项目已开源:https://github.com/lfrbmw/Little-Red-Book-Card-MCP

MCP具有的功能:

在这里插入图片描述

对MCP的实际调用(生成了一张不错的图片,我们可以直接发布小红书了):

在这里插入图片描述

KAT-Coder-Pro V1的调用监控

使用KAT-Coder-Pro V1还有一个好处,我们可以实时的看到调用监控,通过调用监控及时的分享有问题的地方,小插曲,我第一次用是出了一点小问题,重试了也不行,于是看监控,发现它这个重试的错误,可以看到我只调用了214次就成功实现了这个小红薯📕的实现,实际就是AI对话了3或4次而已。

在这里插入图片描述

总结

  • 无需写代码:用自然语言描述需求,AI 自动生成完整项目
  • 端到端交付:从设计 → 开发 → 测试 → NPM 发布,全自动完成
  • 真正可用:支持图片输出、多主题、多尺寸,满足小红书发布需求
  • 低成本高效率:借助 KAT-Coder-Pro V1 的强大能力与免费额度,零成本实现创意
程序员的终极生产力:不是写代码,而是让AI帮你写代码。

🌟 项目地址:https://github.com/lfrbmw/Little-Red-Book-Card-MCP

📦 NPM 包:little-red-book-card-mcp

🚀 快来试试,让你的 Markdown 一键变身小红书爆款笔记!


我是LucianaiB,一个找不到工作而失业的倒霉蛋,寻找第二曲线、探索更多人生可能,聚焦AI编程、AI智能体、RPA方向。

如果你想加入我的免费AI编程交流群/活动运营群,直接扫码下方左边二维码、备注【AI编程及活动】,还可以领取一份见面礼🎁

如果你想关注并跟随AI的最新动态,可以扫下方中间二维码关注公众号【LucianaiB】、不再错过最新AI资讯和实用干货内容📚

Read more

Qwen3-VL-WEBUI内容推荐:图文匹配度计算部署教程

Qwen3-VL-WEBUI内容推荐:图文匹配度计算部署教程 1. 引言 随着多模态大模型的快速发展,视觉-语言理解能力已成为AI应用的核心竞争力之一。阿里云推出的 Qwen3-VL 系列模型,作为迄今为止Qwen系列中最强大的视觉-语言模型,不仅在文本生成与理解方面表现卓越,更在图像识别、空间感知、视频分析和跨模态推理上实现了全面突破。 本文将聚焦于 Qwen3-VL-WEBUI 的本地化部署实践,重点讲解如何基于该Web界面工具实现“图文匹配度计算”功能的快速落地。我们将以开源项目为基础,结合内置的 Qwen3-VL-4B-Instruct 模型,手把手带你完成从环境准备到实际调用的全流程操作,适合希望快速验证多模态能力的技术人员和开发者。 2. 技术背景与核心价值 2.1 什么是Qwen3-VL? Qwen3-VL 是通义千问团队发布的第三代视觉-语言大模型,具备以下关键特性: * 更强的图文融合能力:通过深度对齐机制实现无损的文本-图像语义映射。 * 超长上下文支持:原生支持 256K tokens 上下文,可扩展至 1M,适用于整本书籍或数小时视频的理解

前端实战:手把手教你实现浏览器通知功能

前端实战:手把手教你实现浏览器通知功能

前端入门:浏览器通知功能从0到1实现指南 作为前端学习者,你可能见过这样的场景:打开网页版聊天工具,就算把浏览器最小化,桌面也会弹出“新消息”提醒;或者某些网站的活动通知,会直接显示在电脑/手机桌面上。这种功能就是「浏览器桌面通知」,今天我们就从零开始,搞懂它、学会用它。 一、先搞懂3个基础问题 1. 什么是浏览器桌面通知? 简单说,就是网页能在浏览器窗口外面(比如电脑桌面、手机屏幕)给你发提醒。哪怕浏览器最小化、甚至页面切到后台,只要权限允许,都能收到通知,不用一直盯着网页。 2. 什么时候会用到它? 常见场景很贴近日常: * 网页版微信/QQ的新消息提醒; * 工作系统的审批提醒、任务到期通知; * 电商网站的订单状态更新(比如“你的快递已发货”); * 新闻/小说网站的订阅内容更新提醒。 3. 用起来难吗?有什么限制? 不难!核心就2步:先让用户同意开启通知(申请权限)

Go语言中的未来:从泛型到WebAssembly

Go语言中的未来:从泛型到WebAssembly 前言 作为一个在小厂挣扎的Go后端老兵,我对Go语言未来的理解就一句话:能进化的绝不固步自封。 想当年刚接触Go语言时,它还没有泛型,没有模块系统,甚至连错误处理都被人诟病。现在的Go语言已经今非昔比,泛型来了,模块系统完善了,错误处理也有了更多选择。 今天就聊聊Go语言的未来发展,从泛型到WebAssembly,给大家一个能直接抄作业的方案。 为什么需要关注Go语言的未来? 我见过不少小团队,只关注当前的技术,不关心语言的发展趋势,结果技术栈逐渐落后。关注Go语言的未来能带来很多好处: * 提前准备:了解未来的特性,提前调整代码结构 * 技术选型:根据未来趋势,做出更合理的技术选型 * 职业发展:掌握最新技术,提升个人竞争力 * 项目规划:根据语言发展,制定更合理的项目规划 泛型 泛型是Go 1.18引入的重要特性,它能让我们编写更加通用的代码。 基本用法 // 定义泛型函数 func Map[T, U any](s []T, f

Open-WebUI—开箱即用的AI对话可视化神器

Open-WebUI—开箱即用的AI对话可视化神器

你是否曾兴奋地在本地部署了Ollama,却很快被冰冷的命令行和繁琐的指令劝退?是否羡慕ChatGPT那样优雅的聊天界面,却又希望数据能牢牢掌握在自己手中?OpenWebUI。这个在GitHub上狂揽 110,000 Stars 的明星项目,完美地解决了所有痛点 github地址: https://github.com/open-webui/open-webui 1.什么是Open WebUI? Open WebUI 是一款专为大型语言模型(LLM)设计的 开源可视化交互框架,它通过简洁的Web界面,让用户无需编写代码即可与本地部署的AI模型/各大服务商提供大模型API(如DeepSeek、Llama、ChatGLM等)进行自然对话。其核心使命是 “让LLM私有化部署像打开浏览器一样简单” ,尤其适合需要快速搭建企业级AI平台或追求数据隐私的开发者。 2. 核心价值 * 开箱即用:无需复杂的前端开发,快速搭建 AI 交互界面。完全开源,可自由部署、修改和二次开发,无商业使用限制。 * 多模型支持:兼容 Ollama、