【程序员副业指南】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

【GitHub Copilot】Figma MCP还原设计稿生成前端代码

【GitHub Copilot】Figma MCP还原设计稿生成前端代码

这里写自定义目录标题 * Step1:让AI给你配置MCP * Step2:替换成自己的Figma密钥 * Step3:如何使用 Cursor+Figma MCP的教程已经很多了,由于我所在的公司采购的是GitHub Copilot,我研究了一下直接在vscode里利用GitHub Copilot接入Figma MCP进行设计稿还原代码,大获成功,这里分享我的步骤,希望能帮到你。 Step1:让AI给你配置MCP 在vscode中打开你的项目(我的例子是一个微信小程序),呼出github copilot对话框,模式选择Agent,模型建议Claude 3.7 Sonnet,提问: https://github.com/GLips/Figma-Context-MCP 如何配置能让你在vscode里使用这个mcp 之后跟着提示狂点下一步即可完成配置,如果有什么需要装的vscode插件它会自动帮你装,甚至自动生成了配置说明文档。 由于不能保证AI每次生成的答案都一致,这里附上我的运行结果作为参考,可以看到它在项目文件夹最外层建了一个.vscode文件夹,在sett

二手车交易系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

二手车交易系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

摘要 随着互联网技术的快速发展和汽车保有量的持续增长,二手车交易市场逐渐成为汽车流通领域的重要组成部分。传统二手车交易模式存在信息不对称、交易效率低下、管理成本高等问题,亟需通过信息化手段优化交易流程。二手车交易系统信息管理系统的开发旨在解决这些问题,通过整合线上交易平台与后台管理功能,实现车辆信息透明化、交易流程标准化以及用户管理高效化。该系统能够为买卖双方提供便捷的交易渠道,同时为管理员提供全面的数据管理支持,从而提升二手车市场的整体运营效率。关键词:二手车交易、信息管理系统、SpringBoot、Vue、MySQL。 该系统基于SpringBoot后端框架和Vue前端框架开发,结合MySQL数据库实现数据的高效存储与管理。后端采用SpringBoot的模块化设计,集成Spring Security实现用户权限控制,并通过RESTful API与前端交互。前端使用Vue.js构建响应式用户界面,结合Element UI组件库提升用户体验。系统功能涵盖用户注册与登录、车辆信息发布与管理、交易订单处理、数据统计分析等模块,支持多角色(买家、卖家、管理员)协同操作。数据库设计遵循规范

前端Canvas:让你的网站更具视觉冲击力

前端Canvas:让你的网站更具视觉冲击力 毒舌时刻 前端Canvas?这不是游戏开发才用的吗? "Canvas性能差,我不用"——结果错过了丰富的视觉效果, "Canvas太复杂了,我学不会"——结果只能用静态图片, "我用CSS就够了,要Canvas干嘛"——结果无法实现复杂的动画效果。 醒醒吧,Canvas不是游戏开发的专利,前端也可以用它来创建丰富的视觉效果! 为什么你需要这个? * 丰富的视觉效果:创建动态图形、动画和游戏 * 高性能:直接操作像素,性能优异 * 交互性:支持鼠标、触摸等交互 * 数据可视化:绘制图表、仪表盘等 * 跨平台:在所有现代浏览器中运行 反面教材 // 反面教材:简单的Canvas绘制 function drawCircle() { const canvas = document.getElementById('canvas'

前端微前端:大型应用的模块化解决方案

前端微前端:大型应用的模块化解决方案 毒舌时刻 前端微前端?这不是过度设计吗? "我的应用不大,不需要微前端"——结果应用越来越大,维护困难, "微前端太复杂了,不如一个大单体"——结果团队协作困难,部署冲突, "我用iframe就够了"——结果性能差,用户体验差。 醒醒吧,微前端不是银弹,但对于大型应用来说,它是一个有效的解决方案! 为什么你需要这个? * 团队协作:不同团队可以独立开发和部署 * 技术栈灵活:不同微前端可以使用不同的技术栈 * 独立部署:单个微前端可以独立部署,不影响其他部分 * 可扩展性:可以轻松添加新的微前端 反面教材 <!-- 反面教材:使用iframe实现微前端 --> <!DOCTYPE html> <html>