小红书海报编辑器

一个面向黑客松、活动招募和人物海报场景的单模板编辑器。
左侧改文案、改高亮、传人物图，右侧实时生成最终海报，并可直接导出 PNG。

在线体验

这个项目能做什么

• 实时替换账号名、标题、正文
• 支持 1-4 行正文布局切换
• 支持选择高亮行，并切换预设 / 自定义高亮颜色
• 上传人物图片后立即预览，可微调缩放、左右、上下偏移
• 直接导出成品 PNG
• 纯前端静态站点，可直接部署到 Vercel 等静态托管平台

在线地址

• 演示站：https://xhs-hackathon-poster.vercel.app

本地启动

这个项目就是一个纯静态站点，直接启动任意静态文件服务即可：

python3 -m http.server 4174

然后访问：

http://127.0.0.1:4174/

素材说明

这个仓库默认是“可运行演示版”开源方案：

• 仓库包含的是 demo 运行素材和截图资源
• 不默认公开原始 PSD 和私有测试图
• 如果你拥有对应素材的分发权，可以在本地自行放回这些文件

额外说明：

• 仓库当前已包含 2.ttf，页面和 Vercel 线上版都会直接使用这套字体
• 如果你后续换成自己的模板字体，只需要替换根目录的字体文件和样式引用
• 如果你要替换成自己的模板，主要修改 assets/ 和 app.js 里的槽位常量

项目结构

.
├── index.html / styles.css / app.js   # 前端编辑器
├── assets/                            # 运行时模板素材
├── 2.ttf                              # 模板字体
├── .github/assets/                    # README / Social Preview 图片
└── vercel.json                        # Vercel 静态部署配置

适合谁用

• 黑客松或活动运营，希望快速批量换文案和人物图
• 设计给出单模板后，需要前端做轻量自助编辑器
• 需要一个“高保真但不做完整设计工具”的海报模板系统参考实现

不包含什么

• 不包含完整设计系统
• 不包含多模板管理后台
• 不包含用户登录、云存储、任务队列
• 不默认包含可公开分发的原始 PSD

License

本仓库默认使用 MIT License。

免责声明

这个项目是一个开源的海报编辑器示例，不代表与小红书官方存在合作或背书关系。
如果你要公开分发模板素材、品牌元素、字体或人物图，请先确认你拥有相应权限。