Article-cover-image-generator

文章封面图生成器

一个基于 Next.js 的文章封面图生成工具，支持多平台模板、自动排版、多尺寸导出、批量方案生成与 PNG 导出。

当前能力

• 多平台模板
  • 公众号风
  • 小红书风
  • 知乎风
  • 视频封面风
• 每个平台多套子模板
• 不同尺寸自动排版
  • 横版
  • 方版
  • 竖版
• 多尺寸导出
  • X / Twitter 封面
  • 公众号首图
  • 公众号竖版封面
  • 小红书封面
  • 知乎封面
  • 视频封面
  • 方形图卡
  • 竖版海报
• 元素开关
  • 顶部英文标签
  • 引导句
  • 高亮效果
  • 背景水印字
  • 底部署名
  • 背景花纹
  • 内层面板/边框
• 样式控制
  • 字体
  • 配色
  • 背景花纹
  • 尺寸
  • 主字号
• 批量方案生成
  • 4 张配色方案
  • 4 张模板方案
  • 4 张高亮方案
• 批量方案一键全部导出
• 模板中心与导出记录页

技术栈

• Next.js 15
• React 18
• App Router
• 纯前端 SVG 渲染 + Canvas PNG 导出

本地启动

npm install
npm run dev

打开：

http://127.0.0.1:3000

构建

npm run build

生产启动

npm run start

项目结构

• app/layout.jsx
• app/page.jsx
• app/account/page.jsx
• app/orders/[id]/page.jsx
• app/globals.css
• lib/cover-tool-data.js

适合场景

• 公众号文章封面
• 小红书图文封面
• 知乎内容封面
• 视频封面图
• AI 内容运营配图

后续可扩展

• 一键导出 ZIP
• 勾选式批量导出
• 更多平台模板
• AI 标题生成
• 标题长度建议
• 自定义模板保存