Next.js 实战项目分享：我做了一个小红书封面图生成器 v2.0，模板更丰富了

前言

上个月我分享了一款小红书作图工具站（VisNote 笔记工坊），收到了不少反馈和建议。有用户说模板不够多，有用户希望支持更多尺寸，还有人希望导出更清晰。

这不，v2.0 来了。

本文继续不做源码分享，只讲这一次的迭代思路、新增功能、技术优化，以及我又踩了哪些坑。

一、项目介绍

项目名称：VisNote 笔记工坊 v2.0

定位升级：

• 依然是小红书配图工具
• 新增 封面图生成器 模块
• 支持更多场景：笔记封面、店铺首页、活动海报

在线体验：https://vis-note.netlify.app

核心亮点（v2.0 新增）：

1. 封面图模板库扩充了 5 款
2. 增加了skill能力，能够让AI agent直接生图了

二、技术栈

和之前一致：

• 前端框架：Next.js 14 (App Router)
• 样式方案：Tailwind CSS
• 数据库：MongoDB
• 部署平台：Netlify

没换技术栈，继续深耕。

三、v2.0 新增功能设计思路

1. 封面图生成器

这是本次更新的核心。

做封面图和做笔记配图不太一样——封面更强调视觉冲击力、品牌一致性、点击欲望。

我新增了：

• 标题大字报模板（适合干货类）
• 对比反差模板（适合踩坑类）
• 纯文字极简模板（适合金句类）
• Skill模板（专门用来介绍skill）

每种模板都预设了配色方案，用户改字即用。

3. 导出清晰度优化

这是技术层面的改进。

之前用的 canvas 导出，在某些高分屏上会有模糊。v2.0 改用了更高分辨率的渲染策略，导出图片提升至 2 倍清晰度。

具体实现思路：

• 渲染时先放大 canvas 尺寸
• 再进行内容绘制
• 最后输出高清 PNG

四、开发踩坑 & 经验

1. Tailwind 响应式模板适配

Tailwind 的响应式断点帮了大忙：

/* 一套模板，横竖通用 */
.template-card {
  @apply w-full h-auto aspect-[9/16];
}

@media (min-width: 1024px) {
  .template-card {
    @apply aspect-[16/9];
  }
}

但实际开发中发现，简单的媒体查询不够用——同一套模板在不同比例下，文字大小、元素位置都需要微调。

最终解决方案：

• 选型了多种导出包，终于选定了html-to-image，它是从效果上最与用户网页看到一致的效果

2. Canvas 渲染性能

随着模板复杂度提升，canvas 渲染开始出现卡顿。

排查后发现是：

• 每一帧都在重新绘制所有图层
• 图片预加载没做好

优化方案：

• 使用离屏 canvas 预渲染
• 文字渲染分层处理
• 添加loading 状态避免白屏

3. MongoDB 查询优化

v1.0 的时候，所有模板数据都是静态的，每次用户访问都要从数据库拉一遍。

v2.0 做了缓存：

• 热门模板数据预渲染到静态页面
• MongoDB 只在管理后台更新时写入
• 首页加载速度提升 60%

五、对比 v1.0 的变化

功能	v1.0	v2.0
模板数量	20+	35+
导出清晰度	1x	2x
首次加载	1.2s	0.5s
模板分类	5 类	8 类

六、总结

这次 v2.0 迭代，核心思路是：

1. 听用户反馈——模板不够？尺寸太少？导出模糊？一一解决
2. 技术服务于体验——不做过度优化，只做用户感知得到的提升
3. 保持轻量——功能多了，但工具站的核心依然是打开即用

如果你也在做类似的小工具，我的建议是：

• 先上线一个最小可用版本，快速验证需求
• 根据用户反馈迭代，别自己闷头造轮子
• 技术选型要稳，Next.js + Tailwind 这套组合足够撑很久

体验地址

欢迎体验 v2.0：
https://vis-note.netlify.app

后续还会继续更新，感兴趣的可以收藏关注一波 🚀