xiaohongshu-creator — 小红书图片创作工具

一款纯前端的小红书风格图片生成器，在浏览器中输入文字、选择风格，即可生成精美的小红书配图。无需安装依赖，无需后端服务，打开即用。

HTML5 CSS3 JavaScript License

功能特性

单图创作

• 12 种背景风格 — 暖阳落日、深海蔚蓝、薄荷清新、奶油纸张、樱花粉、星空夜、水墨丹青等
• 5 种中文字体 — 默认黑体、宋体、快乐体、马善政楷、小薇体（均来自 Google Fonts）
• 16 种文字颜色 — 覆盖黑白灰、红粉、蓝绿、金橙、紫罗兰等色系
• 4 种画幅比例 — 3:4、1:1、4:3、9:16，适配不同场景
• 6 种装饰元素 — 引号、边框、圆点、横线、星星、树叶
• 实时预览 — 修改任意参数后 150ms 内自动刷新预览
• 一键下载 — 导出高清 PNG 图片（宽度 1080px）

轮播图创作

• 支持封面页、推荐卡片、总结页三种幻灯片类型
• 自由添加/删除推荐卡片，总结页自动汇总所有推荐内容
• 前后翻页预览，一键批量下载全部幻灯片
• 自动生成配套文案与话题标签，支持一键复制

内容排期

• 内置 4 周 × 每周 3 篇的内容日历模板
• 每篇包含标题、钩子文案、内容格式、话题标签
• 可折叠的周视图，快速浏览创作计划

快速开始

方式一：直接打开

# 克隆项目
git clone https://github.com/your-username/xiaohongshu-creator.git

# 用浏览器打开 index.html 即可
open index.html

方式二：本地服务器（推荐）

使用本地服务器可避免部分浏览器对 file:// 协议的限制：

# 使用 Python
python3 -m http.server 8080

# 或使用 Node.js
npx serve .

然后访问 http://localhost:8080。

提示：文案复制功能依赖 Clipboard API，需要在 HTTPS 或 localhost 环境下使用。

项目结构

xiaohongshu-creator/
├── index.html      # 页面结构
├── style.css       # 样式表
├── app.js          # 全部业务逻辑（数据、Canvas 绘制、事件处理）
├── .gitignore
└── README.md

技术方案

• 纯静态实现 — 零依赖，无框架，无构建步骤
• Canvas 2D — 所有图片均通过 HTML5 Canvas API 在浏览器端实时绘制
• Google Fonts — 中文字体通过 CDN 加载，首次访问需联网
• 响应式布局 — CSS Grid + Flexbox，适配桌面与移动端

浏览器兼容性

推荐使用以下浏览器的最新版本：

• Chrome / Edge
• Firefox
• Safari

贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本项目
2. 创建你的特性分支 (git checkout -b feature/amazing-feature)
3. 提交你的修改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 提交 Pull Request

开源许可

本项目基于 MIT License 开源。