优化SKILL
This commit is contained in:
maomomo
@@ -0,0 +1,107 @@
|
||||
# 图片生成脚本与后端选择
|
||||
|
||||
需要实际生成配图文件、使用 API/CLI fallback、批量生成 assets，或排查图片接口配置时，先读本文件。
|
||||
|
||||
## 后端选择
|
||||
|
||||
优先顺序：
|
||||
|
||||
1. Codex / 当前 agent 的内置图片生成工具。适合大多数配图任务。
|
||||
2. `scripts/maomomo_image_gen.py` API/CLI fallback。适合用户明确要求 API/CLI、内置工具不可用、需要批量 manifest、或希望把生成过程记录到文件时。
|
||||
|
||||
不要因为脚本存在就强制使用脚本。若内置图片工具可用，仍优先使用内置工具生成独立 PNG，再保存到 `assets/`。
|
||||
|
||||
## 配置来源
|
||||
|
||||
脚本按以下顺序读取配置：
|
||||
|
||||
- `MAOMOMO_IMAGE_API_KEY` / `OPENAI_API_KEY`
|
||||
- `MAOMOMO_IMAGE_BASE_URL` / `OPENAI_BASE_URL`
|
||||
- `MAOMOMO_IMAGE_MODEL` / `CODEX_PPT_IMAGE_MODEL`
|
||||
- `~/.codex/config.toml` 中的 `base_url`
|
||||
- `~/.codex/auth.json` 中可识别的 API key
|
||||
|
||||
不要在日志、回答、Markdown 或 manifest 中写入完整 API key。
|
||||
|
||||
## 单张生成
|
||||
|
||||
```bash
|
||||
python3 scripts/maomomo_image_gen.py generate \
|
||||
--out article/assets/hsbc-mastercard-alipay-campaign-01-cover.png \
|
||||
--style warm-fintech-guide \
|
||||
--title "汇丰 Mastercard 支付宝活动" \
|
||||
--image-type "封面图" \
|
||||
--core-text "先看报名、门槛和封顶，避免白刷"
|
||||
```
|
||||
|
||||
先只看 prompt：
|
||||
|
||||
```bash
|
||||
python3 scripts/maomomo_image_gen.py generate \
|
||||
--out article/assets/hsbc-mastercard-alipay-campaign-01-cover.png \
|
||||
--style data-card-dashboard \
|
||||
--title "返现计算图" \
|
||||
--image-type "计算图" \
|
||||
--core-text "HK$190 ÷ 9% ≈ HK$2112，超过部分没有额外收益" \
|
||||
--dry-run
|
||||
```
|
||||
|
||||
## 批量 manifest
|
||||
|
||||
manifest 示例：
|
||||
|
||||
```json
|
||||
{
|
||||
"images": [
|
||||
{
|
||||
"file_name": "assets/hsbc-mastercard-alipay-campaign-01-cover.png",
|
||||
"type": "封面图",
|
||||
"title": "汇丰 Mastercard 支付宝活动",
|
||||
"core_text": "先报名，再看门槛和封顶",
|
||||
"alt_text": "MAOMOMO 汇丰 Mastercard 支付宝返现活动封面图",
|
||||
"style": "warm-fintech-guide",
|
||||
"aspect_ratio": "16:9"
|
||||
},
|
||||
{
|
||||
"file_name": "assets/hsbc-mastercard-alipay-campaign-02-calculation.png",
|
||||
"type": "计算图",
|
||||
"title": "怎么刷到刚刚好",
|
||||
"core_text": "HK$190 ÷ 9% ≈ HK$2112，超过部分没有额外收益",
|
||||
"style": "data-card-dashboard"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
运行：
|
||||
|
||||
```bash
|
||||
python3 scripts/maomomo_image_gen.py batch \
|
||||
--manifest article/image_manifest.json \
|
||||
--base-dir article
|
||||
```
|
||||
|
||||
`file_name` 必须与 Markdown 中的相对路径一致，且最终文件必须真实存在。
|
||||
|
||||
## 内置风格名
|
||||
|
||||
可用：
|
||||
|
||||
- `warm-fintech-guide`
|
||||
- `clean-editorial`
|
||||
- `data-card-dashboard`
|
||||
- `handdrawn-note`
|
||||
- `xiaohongshu-vertical`
|
||||
|
||||
查看完整描述：
|
||||
|
||||
```bash
|
||||
python3 scripts/maomomo_image_gen.py styles
|
||||
```
|
||||
|
||||
## 失败处理
|
||||
|
||||
- API key 缺失：提示用户配置环境变量或检查 Codex 配置，不要编造图片文件。
|
||||
- 接口失败：保留已生成图片，说明失败项，必要时用 `--dry-run` 交付 prompt 清单作为临时排查材料。
|
||||
- 图片文字乱码或金额错误：重新生成该单张图片；不要手工覆盖文字伪装成模型输出。
|
||||
- 图片不符合风格：先更新 manifest 的 `style` / `core_text` / `extra`，再重跑对应项。
|
||||
@@ -0,0 +1,136 @@
|
||||
# MAOMOMO 推荐配图风格
|
||||
|
||||
需要选择、推荐、复用或调整配图风格时，读本文件。风格名要与 `scripts/maomomo_image_gen.py` 的 `--style` 保持一致。
|
||||
|
||||
## 推荐顺序
|
||||
|
||||
默认优先推荐 `warm-fintech-guide`。如果文章明显更偏数字、对比、避坑或小红书，再切换到更合适的风格。
|
||||
|
||||
| 风格名 | 优先使用场景 | 不适合 |
|
||||
|---|---|---|
|
||||
| `warm-fintech-guide` | 常规 MAOMOMO 文章、港卡、银行活动、返现攻略、开户教程 | 数字极密集的计算页、小红书竖版 |
|
||||
| `data-card-dashboard` | 返现计算、费用测算、活动门槛、产品对比、时间线 | 情绪化避坑故事、截图驱动步骤 |
|
||||
| `clean-editorial` | SEO 长文、总结盘点、品牌感封面、解释型文章 | 需要强步骤感或大量数字卡片的图 |
|
||||
| `handdrawn-note` | 避坑经验、保号教程、操作步骤、实测提醒 | 严肃金融报告感、密集表格 |
|
||||
| `xiaohongshu-vertical` | 小红书、4 图看完、手机端竖版内容 | 常规网站横版封面和正文配图 |
|
||||
|
||||
## warm-fintech-guide
|
||||
|
||||
推荐语：
|
||||
|
||||
```text
|
||||
我建议用 warm-fintech-guide，因为它最贴近 MAOMOMO 默认视觉：白底、暖橙、猫咪向导和金融教程卡片，适合大多数港卡、银行活动和返现攻略。
|
||||
```
|
||||
|
||||
视觉要点：
|
||||
|
||||
- 明亮白底，暖橙色强调。
|
||||
- 白橘猫作为向导、提示牌或角落品牌元素。
|
||||
- 信息卡片清晰，数字、日期和步骤不拥挤。
|
||||
- 适合 16:9 横版封面、总览图、流程图。
|
||||
|
||||
提示词片段：
|
||||
|
||||
```text
|
||||
MAOMOMO 暖橙金融教程风，明亮白底，暖橙强调色，干净卡片布局，友好的白橘猫作为向导，现代 App 教程质感，中文标题清楚，包含 MAOMOMO 标识。
|
||||
```
|
||||
|
||||
## data-card-dashboard
|
||||
|
||||
推荐语：
|
||||
|
||||
```text
|
||||
我建议用 data-card-dashboard，因为这篇重点是规则、门槛和金额，读者需要一眼看懂数字和限制。
|
||||
```
|
||||
|
||||
视觉要点：
|
||||
|
||||
- 指标卡、对比表、时间线、计算公式。
|
||||
- 数字层级强，适合“封顶”“门槛”“成本”“到账时间”。
|
||||
- 猫咪比例较小，只做提示和品牌识别。
|
||||
- 适合返现计算图、路线对比图、活动总览图。
|
||||
|
||||
提示词片段：
|
||||
|
||||
```text
|
||||
MAOMOMO 数据卡片仪表盘风，白底，暖橙和蓝灰辅助色，使用指标卡、表格、时间线和计算公式展示关键信息，中文数字清晰可读，猫咪作为小型提示元素。
|
||||
```
|
||||
|
||||
## clean-editorial
|
||||
|
||||
推荐语：
|
||||
|
||||
```text
|
||||
我建议用 clean-editorial，因为这篇更像站内解释型长文，需要封面干净、标题有传播感，但不要太像促销海报。
|
||||
```
|
||||
|
||||
视觉要点：
|
||||
|
||||
- 大标题、留白、轻杂志感。
|
||||
- 猫咪放在角落或标题区附近，不抢正文信息。
|
||||
- 更适合封面、文章总结图、观点图。
|
||||
- 画面克制，避免过度卡通。
|
||||
|
||||
提示词片段：
|
||||
|
||||
```text
|
||||
MAOMOMO 清爽编辑部风，白底大标题，轻杂志排版，暖橙点缀，留白充足，白橘猫作为角落品牌元素，适合中文金融经验文章封面。
|
||||
```
|
||||
|
||||
## handdrawn-note
|
||||
|
||||
推荐语：
|
||||
|
||||
```text
|
||||
我建议用 handdrawn-note，因为这篇是避坑 / 步骤教程，手绘箭头、便签和圈注更容易把翻车点讲明白。
|
||||
```
|
||||
|
||||
视觉要点：
|
||||
|
||||
- 手绘箭头、便签、圈注、风险提示贴纸。
|
||||
- 适合“不要这样做”“先做这一步”“最大坑点”。
|
||||
- 信息密度中等，避免塞太多长句。
|
||||
- 猫咪可以举提示牌或指向关键步骤。
|
||||
|
||||
提示词片段：
|
||||
|
||||
```text
|
||||
MAOMOMO 手绘便签风，白底纸感，暖橙便利贴，手绘箭头和圈注，白橘猫举提示牌，中文步骤清楚，适合避坑经验和保姆式教程。
|
||||
```
|
||||
|
||||
## xiaohongshu-vertical
|
||||
|
||||
推荐语：
|
||||
|
||||
```text
|
||||
我建议用 xiaohongshu-vertical，因为用户要发小红书，应该重新做 9:16 竖图，而不是复用站内横版图。
|
||||
```
|
||||
|
||||
视觉要点：
|
||||
|
||||
- 9:16 竖版，手机端可读。
|
||||
- 大字少字，标题钩子强。
|
||||
- 4 图系列统一：封面、核心拆解、操作流程、避坑总结。
|
||||
- 每张图都有 MAOMOMO 标识或猫咪水印。
|
||||
|
||||
提示词片段：
|
||||
|
||||
```text
|
||||
MAOMOMO 小红书竖版攻略风，9:16，手机端可读，大标题，少量关键数字，暖橙白底，白橘猫水印，适合 4 图看完的中文金融攻略。
|
||||
```
|
||||
|
||||
## 风格选择输出格式
|
||||
|
||||
向用户推荐时使用：
|
||||
|
||||
```text
|
||||
我建议用 A，因为【一句话说明与文章类型的匹配】。
|
||||
|
||||
A. warm-fintech-guide（推荐）：【适合原因】
|
||||
B. data-card-dashboard：【适合原因】
|
||||
C. handdrawn-note：【适合原因】
|
||||
|
||||
你选哪个？也可以指定更偏简洁、数据感、手绘感或小红书感。
|
||||
```
|
||||
|
||||
用户选择后，把风格名写入图片清单的 `风格` 字段或 manifest 的 `style` 字段。
|
||||
@@ -11,6 +11,40 @@
|
||||
- 用户提供真实截图时，优先用真实截图，并隐去姓名、账号、余额、地址、手机号、二维码、交易号等个人信息。
|
||||
- 每张图必须包含清晰可见的 `MAOMOMO` 标识。
|
||||
|
||||
## 风格选择
|
||||
|
||||
如果用户没有指定视觉方向，生成图片前先读 `references/recommended-styles.md`，给 2-3 个可选风格，并推荐一个。确认后，整篇文章的配图保持同一套视觉身份：稳定的配色、猫咪造型、标题区、图标语言和信息密度；不同图片可以根据用途变化构图。
|
||||
|
||||
默认推荐逻辑：
|
||||
|
||||
- 活动 / 返现 / 港卡攻略：优先 `warm-fintech-guide`。
|
||||
- 规则、门槛、费用、返现计算和产品对比：优先 `data-card-dashboard`。
|
||||
- SEO 长文、经验整理、品牌感更强的文章：优先 `clean-editorial`。
|
||||
- 保姆式教程、避坑经验和轻量操作步骤：优先 `handdrawn-note`。
|
||||
- 小红书 / 4 图看完：必须用 `xiaohongshu-vertical`，并生成 9:16 竖图。
|
||||
|
||||
可选风格：
|
||||
|
||||
| 风格名 | 适合场景 | 视觉方向 |
|
||||
|---|---|---|
|
||||
| `warm-fintech-guide` | 默认 MAOMOMO 金融攻略、港卡、银行活动 | 白底、暖橙强调色、干净卡片、白橘猫向导 |
|
||||
| `clean-editorial` | SEO 长文、解释型文章、站内封面 | 大标题、留白、轻杂志感、猫咪作为角落品牌元素 |
|
||||
| `data-card-dashboard` | 返现计算、活动对比、费用路径、时间线 | 指标卡、表格感、仪表盘、清晰数字层级 |
|
||||
| `handdrawn-note` | 避坑、步骤教程、保号经验 | 手绘箭头、便签、圈注、猫咪提示牌 |
|
||||
| `xiaohongshu-vertical` | 小红书发布版、4 图看完 | 9:16 竖版、大字少字、强钩子、系列化版式 |
|
||||
|
||||
示例确认话术：
|
||||
|
||||
```text
|
||||
我建议用 A，因为这篇是活动攻略，读者最需要快速看懂门槛、封顶和翻车点。
|
||||
|
||||
A. warm-fintech-guide（推荐）：白底暖橙、猫咪向导、金融教程感，适合 MAOMOMO 常规文章。
|
||||
B. data-card-dashboard：更强调数字卡片和计算表，适合门槛 / 返现 / 费用信息密集的文章。
|
||||
C. handdrawn-note：便签和手绘箭头更明显，适合避坑经验和保姆式步骤。
|
||||
|
||||
你选哪个？也可以指定颜色、猫咪比例或是否更像小红书图。
|
||||
```
|
||||
|
||||
## 常见配图类型
|
||||
|
||||
| 类型 | 用途 |
|
||||
@@ -29,10 +63,10 @@
|
||||
生成图片前先规划清单：
|
||||
|
||||
```markdown
|
||||
| 文件名 | 类型 | 放置位置 | 核心文案 | alt text | 依赖素材 |
|
||||
|---|---|---|---|---|---|
|
||||
| hong-kong-bank-account-01-cover.png | 封面 | 标题下方 | 港卡保号关键点 | MAOMOMO 港卡保号教程封面图 | 无 |
|
||||
| hong-kong-bank-account-02-flow.png | 流程图 | 操作步骤前 | 三步完成账户活跃 | 港卡保号操作流程图 | 用户截图 1 |
|
||||
| 文件名 | 类型 | 放置位置 | 核心文案 | alt text | 风格 | 依赖素材 |
|
||||
|---|---|---|---|---|---|---|
|
||||
| hong-kong-bank-account-01-cover.png | 封面 | 标题下方 | 港卡保号关键点 | MAOMOMO 港卡保号教程封面图 | warm-fintech-guide | 无 |
|
||||
| hong-kong-bank-account-02-flow.png | 流程图 | 操作步骤前 | 三步完成账户活跃 | 港卡保号操作流程图 | handdrawn-note | 用户截图 1 |
|
||||
```
|
||||
|
||||
确认用户不需要先看清单时，可以直接执行，但最终必须让文件名、alt text 和插图位置与正文一致。
|
||||
@@ -117,6 +151,7 @@ MAOMOMO 风格中文金融教程信息图，干净明亮白色背景，暖橙色
|
||||
- 每张图有 MAOMOMO 标识或猫咪水印。
|
||||
- 手机端可读，大字少字。
|
||||
- 默认结构：封面、核心拆解、操作流程、避坑总结。
|
||||
- 风格固定为 `xiaohongshu-vertical`，不直接复用横版文章图。
|
||||
|
||||
## 图片 QA
|
||||
|
||||
|
||||
Reference in New Issue
Block a user