Gemini3 做小红书封面生成器，效率暴增 1000% ，实现爆款封面自由！

哈喽，大家好

我是阿星👋

昨天朋友发我下面这个 Gemini3 做的卡片（图 1），我只是感慨 Gemini3 的牛叉。但我没想到它那么牛叉。

直接举一反三给我做了小红书卡片生成器。（图 2）

不用打开 PS，网页上输入文字，就能实时生成各种风格的爆款图片，还能一键打包下载。

在@三石AI说和@AI山脚学长和@Gemini3老师的帮助下，直接一把成。极简版提示词见文末。

看到 Gemin3 做的这些成品，我算是能确认了。用扭扭歪歪 html 做小红书卡片的日子过去了。

这不都一把成了吗？全是可定制的啊😱

一、效果展示

先来集中看下效果：

一开始的 gemini 只会这样的👇简单（因为我只给了文章开头的参考图，所以耽误 gemini 发挥），

但衬线颜色字号都可以随便调。都是在第一次就完美完成了，0bug！

然后我让它偷师了稿定设计的经典封面👇

直接就会了放飞了👇给我贡献了这么多风格

其中就有科技靛蓝风（这是在玩儿梗吗）。在 Gemini3 的眼里靛蓝色还是科技风的代表。

文艺风、手帐风、直接给你配好黄油字体。大部分账号的风格都能驾驭。

背景颜色随便换你，这个排版其实用啥颜色都不会太丑。

衬线字体突出咱们的高贵感。

科技风小方格走起，还兼顾贵气的百万杂志风，感觉自己瞬间有点 prada 女魔头那味儿了👇

二、怎么实现的？

极简版提示词

我们首先发送项目提示词给对方，让对方扮演前端视觉克隆工程师的角色👇 

精确简化版提示词（保留核心技术栈）# 角色：视觉克隆工程师## 核心流程分析参考图样式 + 处理文本内容 → 生成单文件HTML应用## 核心技术要求视觉复刻：CSS必须复刻参考图的色彩、布局、字体、装饰数据驱动：所有内容必须从 defaultData JSON对象读取，禁止硬编码智能分页：内容过长时自动分页，避免文字溢出打包下载：顶部固定工具栏含“下载ZIP”按钮强制技术栈：必须引入Tailwind CSS (样式)html2canvas (页面截图)JSZip + FileSaver.js (打包下载)Lucide Icons (图标)## 默认行为无参考图时，使用预设的现代流式排版风格

然后提供参考图给 Gemini3，他就开干了👇

就是这么简单这么傻瓜，整体技术流程长这个样子👇

最核心的两个技术栈是下面两个👇

项目黑魔法：html2canvas

当你在网页上排版好之后，怎么把它变成一张 png 图片呢？

我们调用了一个经典的开源库：html2canvas。

我们可以把浏览器（Chrome/Edge）想象成一个“超级画家”👩🎨。当你点击“下载图片”的那一瞬间，浏览器并没有“咔嚓”截图，而是做了一次极速写生。

它的工作原理是：

1、遍历 DOM：它会读取你网页上所有的元素（div, span, img...）。

2、解析样式：它会计算每一个元素的颜色、位置、圆角、阴影。

3、然后，画家拿出一张空白的纸（技术上叫 Canvas 画布），按照刚才看到的，一笔一笔重新画了一遍。

画好之后，它把这张画纸直接塞给你，这就是你下载到的那张 PNG 图片。

预计算分页逻辑

无论你粘贴的文章有多长——工具都能自动把它分成 Page 1、Page 2、Page 3……

主要是因为用了预计算分页逻辑是一种【性能优化范式】，同时采用 DOM 离屏渲染（Off-screen Rendering） 技术创建一个隐形的、与页面尺寸相同的 DOM 容器。整个工作流程就像是在“做实验”。

这种方法就像用空盒子提前演练装箱。

你把内容一件件放进一个看不见的盒子里，并随时测量高度，

这样可以确保每个页面都恰好装满而不溢出啦～

快去创建一个自己的小红书封面生成器吧，再也不用手动调试啦～

ok，我是阿星

更多 AI 应用，我们下期再见👋