作为开发者,我经常需要做一些轻量的视觉内容:博客封面、社群日签、活动海报。每次打开设计软件都太重,在线工具又要登录/付费/水印。
直到我在 CodeFlicker 里装了这个 skill:quote-poster-generator。直接在 IDE 内完成「文案 → 排版 → 出图」全流程。
效果预览
输入:
txt
标题:不要假装努力,结果不会陪你演戏
副标题:职场人的自我修养
作者:职场生存指南
输出:职场清醒海报.png(1080×1920,竖屏可直接发小红书)

工具准备
1. 下载 CodeFlicker
arduino
bash
https://codeflicker.ai/
2. 安装海报生成 skill
csharp
bash
npx skills add https://github.com/lucifer-yf/quote-poster-generator
完整使用流程
Step 1:让 skill 给方案
在 CodeFlicker 里输入:
"给我想几个吸引人的海报方案,包含标题、副标题、作者"
它会返回多个方向:
- 职场清醒:不要假装努力...
- AI时代:AI不会取代你...
- 程序员幽默:代码不会骗人...
Step 2:选定主题生成
我选择 "职场清醒" ,然后直接生成 PNG。
skill 自动完成:
-
文案结构化:提取主标题/副标题/作者
-
副标题约束:强制 15 字以内(阅读友好)
-
视觉设计:
- 深色背景(#0D0D0D)
- 关键词高亮(亮黄绿 #CCFF00)
- 字号层级:主标题 90px / 副标题 48px / 作者 36px
-
居中排版:计算文字宽度,自动居中
Step 3:导出文件
生成的 职场清醒海报.png 直接保存在项目目录,拿去就能用。
核心设计规则
这个 skill 最值得借鉴的是它的约束设计:
| 规则 | 说明 |
|---|---|
| 副标题 ≤ 15 字 | 强制简洁,避免信息过载 |
| 高亮 1-2 个关键词 | 视觉锚点,增强记忆 |
| 深色背景 + 亮色文字 | 高对比,移动端阅读友好 |
| 分层字号 | 主标题抓眼球,副标题补充,作者署名 |
这些规则让生成的海报不需要二次调整就能直接用。
扩展玩法
批量生成:一次输入 10 条金句,循环调用 skill 生成 10 张 PNG。
风格模板化:修改 skill 源码中的配色变量,固定品牌色。
CI 集成:结合 GitHub Actions,提交文案自动出图。
总结
quote-poster-generator 把「设计决策」封装成了 skill 规则,让开发者可以用结构化输入 替代反复调整设计软件。
对于需要频繁产出轻量视觉内容的场景(技术博客封面、社群运营、课程海报),这是一个值得尝试的效率工具。
相关链接
- CodeFlicker:codeflicker.ai/
- skill 仓库:github.com/lucifer-yf/...