节省时间,封面工具长这样:
支持:
- 公众号(3.35:1)、竖幅(9:16 & 3:4)和横幅(16:9 & 4:3)五种尺寸
- 4 行文字,根据长短自定义布局
- 随机颜色,都很刺眼
- 一键下载所有尺寸图片
项目起源
之前在@归藏师傅那里“捡”了一个写公众号封面的提示词,写出来的效果很不错。
就是每次用都要等 AI 把代码都生成完,实在是头疼:
上面截图的代码,有 250 行、7270 个字符,生成完要 3 分钟左右。
并且有概率会溢出封面区域,再来一次又得几分钟……
于是,发动 Vibe Coding 大法:你,Cursor,给我改成通用模版。
改造
发动 Kimi、DeepSeek、豆包,写了好几个主题,选了一个样式简洁又亮眼的主题,把代码保存到本地cover.html
文件。
连通藏师傅的原始提示词,一并保存后,发动 Cursor。
提示词如下:
项目中的 `cover.html`代码,是基于`design_prompt.md`中的要求设计文章封面的网页,分析学习一下,然后帮我解决下面几个问题:
1)当前代码中的文字溢出画布了(见附件图片),看看样式设计,怎么给调一下确保文字都在画布里。不要改变其他样式内容,只需要确保文字都在画布中完整显示。
2)这个设计中封面中的文字是“写死”的,我想把它变成一个模板式项目,但又不想每次使用提示词重新生成。我希望有一个地方填写封面显示的文字(主图文字+分享图文字),网页会根据输入文字进行大小、颜色和布局的微调,既不会生成千篇一律的设计,又能最小成本的生成页面(不重新生成)。
3)当前只能生成 3.35:1尺寸的图片,我希望再增加 16:9、9:16、3:4和 4:3这四个尺寸,点击下载封面图片时,下载这五张图。新增的四个尺寸不需要“分享区域”,只要封面部分。
4)页面右侧边增加一个`input-panel`固定边栏,用来输入封面文字和分享区域文字,以及下载按钮。
中间调整了两轮尺寸和布局问题,累计消耗 30.5%的上下文长度,收工!
生成的代码都在一个html
中,非常方便“携带”。
老规矩,AI 写的代码都开源。
源码Repo:https://github.com/comeonzhj/cover-img
在线体验:https://comeonzhj.github.io/cover-img/
几个注意事项:
- 在线引入了 Tailwind CSS 和谷歌字体,网络不好可能会有影响
- 如果无法正常访问 Github,可以去知识星球里下载,关键词是「封面五合一」
AI学习行动圈
AI学习行动圈
这是一个我和人人都是产品经理社区共同运营了超过 500 天的 AI 交流圈子。
我的各种 AI 研究心得、发现的好应用、开发的小项目都会在里面分享,目前圈子有核心三个交流学习平台。
7 个微信群,早报和日常交流
微信群里每天一早有 AI 早报,上下午还有“读报时间”,以及我每天不定期刷屏级的各种 AI 工具体验、提示词编排思考、行业新闻解读同步。
以及,你可以在群里讨论任何与 AI 相关的工具、应用问题,几乎都能找到答案。
腾讯文档-圈友空间
用来沉淀体系化、深度的 AI 文章和超长的工程化提示词,不定期更新。
当前包括:Claude code
、Cursor
、Manus
等顶级产品的系统提示词和工具列表,各种深度的 Agent 白皮书和实践指南
知识星球-每日报告、工具和实战经验分享
我在星球里主要维护「实战分享」「工具箱」和「情报局」三个标签
实战分享是可以在日常工作和生活中直接应用的提示词和效率工具。上面截图里的 Step-Back 提示词就非常好用,堪比 o4。在公众号、直播中演示的所有 AI 实战应用的提示词也都在这个标签下。
AI 工具和鲜知道就是好用的、热门的 AI 工具、资讯分享,我把那些太技术、太浮夸的都筛选了,放进这个标签的都是可以直接用来的好玩儿!
星球还有一个“专栏”体系,目前的定位跟标签差不多。
本文的项目源代码已经发布在星球,扫码加入搜索提示词增强系统
即可。