Skip to content

Mystic-Stars/Coverly

Repository files navigation

Coverly logo

Coverly

让封面创作更简单

MIT License GitHub stars Next.js 16 React 19


Coverly 是一个适合快速生成博客文章、活动页或社交媒体使用的横向封面的平台。编辑数据默认保存在浏览器本地,无需登录或后端服务。

界面预览

Coverly 封面编辑器
封面编辑器:模板、画布和属性面板

Coverly 项目管理器
项目管理:浏览、归档、导入和导出设计

功能

  • 内置多组渐变模板,也可以将当前配色保存为自定义模板
  • 支持上传背景和素材图片,调整裁切、缩放、位置、模糊、亮度与饱和度
  • 支持文字、字体、字距、透明度及玻璃质感的细致调整
  • 可拖拽、缩放、旋转主素材,并提供吸附参考线、撤销与重做
  • 支持上传自定义字体;图标库可按关键词搜索
  • 项目自动保存到本地,可管理、归档、导入和导出项目 JSON
  • 可导出 PNG、JPG、WebP、PDF、PSD 及 Coverly 项目文件
  • 适配桌面与移动端,并支持浅色 / 深色外观

本地运行

环境要求: Node.js 20.9 或更高版本。

git clone https://github.com/Mystic-Stars/Coverly.git
cd Coverly
npm install
npm run dev

打开 http://localhost:3000 即可开始使用。

常用命令

npm run dev    # 开发模式
npm run lint   # 代码检查
npm run build  # 生产构建
npm run start  # 启动生产服务

使用说明

  1. 从左侧选择模板,或直接修改背景颜色与图片。
  2. 在画布中编辑标题和主素材;右侧面板可调整文字、玻璃、背景和素材参数。
  3. 点击右上角“导出”,选择需要的格式与倍率。

项目与素材库默认存放在当前浏览器的本地存储中。清除浏览器站点数据或使用应用内“清除所有本地数据”后将无法恢复;需要长期保存时,请导出项目 JSON。

技术栈

  • Next.js 16 / React 19 / TypeScript
  • Tailwind CSS 4 / Radix UI / shadcn/ui
  • Canvas 2D、jsPDF、ag-psd
  • Iconify 图标搜索

参与贡献

欢迎通过 Issues 提交问题或建议,也欢迎发起 Pull Request。提交前请确保:

npm run lint
npm run build

致谢

许可证

本项目基于 MIT License 开源。

About

轻巧、优雅的封面设计工具

Topics

Resources

License

Stars

7 stars

Watchers

0 watching

Forks

Contributors