提炼文章/知识资料,两键转换成小红书图片
myzbx 2025-05-03 15:40 24 浏览
现在AI的功能已经越来越强大了,通过AI可以提高我们不少工作效率。刚好前几天做了一个几乎“一气呵成”,把长文章转成小红书卡片的流程 Demo,分享给大家。
之前发过两篇利用 AI 把长文章转成小红书图片笔记的教程,好多小伙伴用完后反馈“确实好用,但还不够快”。
第一个需要第三方付费 API,另一个还需要导出 CSV 外加第三方工具。
前几天为给行动营同学演示工作流工具,做了一个几乎“一气呵成”,把长文章转成小红书卡片的流程 Demo,分享给大家。
一、效果展示
整体工作流如下:长文章/知识类文档发给 AI —> AI 按要求把文章提炼成结构化信息 —> 把结构化信息转成小红书卡片。
考虑到 AI 提炼的信息,我们肯定要改一改,所以这个工作流被拆成两步:1)先让 AI 提炼总结,人工对 AI 提炼的内容进行修正;2)把结构化的信息转成小红书图片。
下面是把结构化信息转成小红书卡片的 Demo(样式可以根据自己审美调整)
下面分步骤分享一下具体的实现过程。
二、实现过程
整个实现过程全程在 AI 的协助下完成,你可以使用 Kimi、海螺或者跃问复现。
如果实在懒得自己一步一步操作,可以在文末获取直接体验 Demo 的方式。
# 第一步:把文章转成结构化信息
要确保后面转成小红书图片的过程更可控,我们必须要求 AI 在帮我们提炼长文章或者知识资料时按照既定的格式输出,所以要在提示词中跟 AI 描述清楚。
我下一步要做的小红书卡片结构是「封面包含标题和摘要」、「第二章图是标题和知识概要」、「第三~N张详细内容的图是标题和 3~5 个关键知识点」
大概如下:
小红书图片结构
下面是我让 Kimi 帮我总结文章的要求,为了确保 AI 严格遵循指令,我用了 JSON 格式:
你可以根据自己期望的图片结构和样式,要求 AI 输出对应的结构,调整提示词中的结构即可。
第二步:把 AI 提炼的内容转成小红书卡片
有个结构化内容,把它们编排成为图片很简单。
都是早就很成熟的技术了,我知道的至少就有两种:1)做成网页然后转成图片;2)把文字直接写入到图片的指定位置。
之前这篇文章分享的工具用的就是方法 2),今天咱们用方法 1)来实现。
让 AI 写个网页来帮我们实现就好了:
- 页面里有一个输入框,下面是按钮,点击以后把 AI 帮我们总结的内容转成网页
- 按钮下面是一个预览区域,显示转化后的样式,预览没毛病把网页转成图片保存就好了
- 告诉 AI,你提供文本的每部分放在页面的什么位置
- 感兴趣再让 AI 帮你美化美化页面样式
下面这个是 AI 第一版帮我写的网页,虽然简陋但竟然一步到位完美实现了。
初始页面样式
然后让 AI 帮我使用 Tailwind 做了一些美化,样式看起来稍微高级一些了。
美化后的操作页面
具体要求 AI 写这个工具的提示词超级长,不在发在这里了,领取方式在文末。
把网页转成图片,我用了一个叫 html2canvas 的开源项目,直接把这个工具使用的示例代码发给 AI 它就会写。
告诉 AI 如何使用 html2canvas
第三步:美化 AI 生成的卡片或升级
针对生成图片的样式美化,这个就因人而异了,不再赘述。
如果你对自己写的提示词足够自信,可以把第一步让 AI 提炼文章或者知识资料为结构化的过程调用 API 接口实现,将返回的内容直接和第二步合并。
合并之后大概如下:
三、来学AI 吧
前面的实现过程,我只需要提供想法,剩下都是 AI 实现的。
并且调整过程中遇到的所有问题,都可以问 AI 帮你解决。
问 AI 怎么加下划线
AI 真的已经强大到几乎可以实现你的所有想法了!
给大家提供三个助你学好、用好 AI 的渠道:
1)AI学习行动圈
包含:
- 全年 365 天的知识星球,每天分享 AI 报告、资讯、实战应用和 AI 工具;
- 2400+人的交流圈子,在 AI 一线实战、创业的行业大咖交流群;
- AIGC 提效知识库,沉淀了几十个常用 AI 工具、提示词框架、深度研报和实战文章;
2)AI实战系列直播公开课
多场景、多业务、多岗位、多种工具的实战演示直播,周一到周四每晚 19:30-21:30。
3)AI 重塑职场竞争力行动营
包含:
- 8 章 56 节录播课程,体系化的掌握职场必备技能、用 AI 重塑竞争力
- 全年 44 场直播课程,每周五更新,同步最新 AI 动态,确保你总能学到最新的 AI 知识;
- “卷”到哭的校友群,高强度学习交流、应用实战分享、成果“返图”打气,保证你能学好、学完;
- 500+实战提示词支持文档,覆盖几乎所有办公场景和业务需求的实战提示词,直播课程逐字稿
四、直接体验包
我把文章开头演示的 Demo 页面源代码放在 AI 学习行动圈知识星球了,在星球里搜索「文章转卡片」下载。
相关推荐
- 路痴的福音 谷歌地图AR实景导航Live View正式上线
-
2月份起,谷歌地图开始测试一项新功能,即是在行人导航功能中加入AR实景导航。用户可以通过设备屏幕,在实际的街道中见到路线指示,使导航功能不只在地图上,而是更融合在真实环境中。谷歌地图AR实景导航(图源...
- Google地图怎么设置中文 谷歌地图app设置语言为中文
-
Google地图是一款知名的地图导航客户端,这是一款很好用的地图软件,Google地图怎么设置中文呢,不少人可能不是很清楚,下面就和小编一起来看看吧!Google地图怎么设置中文方法1、点击打开谷歌地...
- 谷歌地图说这里能过
-
来源:日本沙雕日常谷歌地图说这里能过#微博新鲜事#
- 谷歌地图已可离线导航 仅安卓机可用
-
谷歌已经在今年的谷歌IO大会上确认了地图离线导航功能,如今该功能已经可以在安卓机上使用了。这对网络资源较为贫瘠且相对昂贵的国家来说可谓提供了便利。用户需要提前下载所需旅程的部分地图,虽然不能获得实时路...
- 谷歌地图测试速度更快的AR实时视图
-
上个月谷歌为了庆祝谷歌地图成立15周年,为谷歌地图推出了新的图标,并且重新设计了移动应用程序。谷歌还预览了一些即将推出的功能,现在正在测试地图导航之外更快的实时视图(LiveView)访问。谷歌之...
- 谷歌地图新功能 离线地图可导航和搜索
-
【中关村在线软件资讯】5月29日消息:在今天凌晨召开的GoogleI/O开发者大会上,谷歌公布了一些关于地图的新功能。谷歌地图离线模式新版谷歌地图有更好用的离线地图,可以在无网络的情况下搜索地点、查...
- 谷歌地图变这样,谁还花钱去旅游?
-
足不出户,在手机上能身临其境的游览世界各地。文章来源:创下一个新ID:cxygx1作者:创新君编辑:卝生话说在前天的GoogleI/O2022开发人员活动中,谷歌推出了一种全新的地图模式,可以...
- 新版谷歌地图将添新功能:知道你想去哪儿
-
据外媒TheVerge报道,谷歌即将为安卓版谷歌地图增加一些新的功能,从而使之变得更加智能,比如可以推算出用户的目的地等。新版谷歌地图将添新功能(图片来自TheVerge)报道称,升级后的谷歌地图将会...
- 谷歌地图安卓版获效率改进,11.136.x更新引入“表单风格”卡片
-
IT之家7月16日消息,谷歌在今年2月宣布将对自家地图应用进行大修,目前相关更新已经实装入谷歌地图11.136.x版本中,主要围绕UI进行效率改进。谷歌提到,现在用户在查找地址时,...
- 谷歌地图安卓/iOS版界面大修,超漂亮
-
IT之家(www.ithome.com):谷歌地图安卓/iOS版界面大修,超漂亮IT之家报道,Android5.0已经正式到来,谷歌旗下的应用为了迎接安卓5.0都采用了全新的MaterialDes...
- 谷歌地图在美国启用“美国湾”称呼
-
参考消息网2月11日报道据法新社2月11日报道,美国总统特朗普10日对谷歌地图将墨西哥湾更名为“美国湾”表示欢迎,这符合他在1月底重返白宫后签署的法令之一。这一占超主导地位的地图服务现在为位于美国的用...
- 外交部回应谷歌地图涉南海标注:南海一直是国际社会公认通用地名,被广泛接受
-
【环球时报-环球网报道记者李萌】在4月15日外交部例行记者会上,有记者提问称,据报道,谷歌地图显示了“西菲律宾海”的名称,此前这里显示的是南海。有人称这有助于保护菲律宾的主权,请问中方对此有何评论?...
- 谷歌地图首曝数据:覆盖全球98%居住区,已拍千万英里街景
-
12月13日,谷歌透露了其街景车(StreetViewcar)等设备为绘制世界地图所做的工作。目前,谷歌已经捕获了超过1000万英里的街景图像,这个距离相当于绕地球400圈。旗下航空地图服务谷歌地...
- 美媒:谷歌称,当联邦地图作出更改时,谷歌地图将使用“迪纳利峰”及“墨西哥湾”新名称
-
来源:环球网【环球网报道】据美国全国广播公司(NBC)等媒体报道,美国谷歌公司27日称,当联邦地图作出更改时,谷歌地图将使用“迪纳利峰”和“墨西哥湾”的新名称,即“麦金利山”和“美国湾”。本月20日...
- 谷歌地图迎来15周年重大更新 界面重新设计 新增贴心功能
-
昨日,恰逢谷歌地图15周年生日,谷歌地图便迎来重大更新。不仅仅界面重新设计,还添加了许多贴心功能。名为“TransitAttributes”的新功能会根据过去用户共享的详细信息,向人们提供有关公共场...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)