哈喽，大家好
我是阿星👋
昨天朋友发我下面这个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应用，我们下期再见👋
