| name | holo-social-gen |
| version | 1.0.0 |
| description | HOLO社媒图片生成器 v7.2。AI-First设计模式，Agent直接手写HTML生成多语种社媒图片（Instagram/Facebook/LinkedIn等）。 |
| triggers | ["生成社媒图片","社媒配图","社交媒体图片","holo-social-gen"] |
HOLO 社媒图片生成器 v7.2
Skill Graph： 领域 → [[_index-outreach|多渠道触达领域]]
⭐ v7: AI-First 架构 — 我是设计师，每张图都是独立设计作品
🆕 v7.2: 集成上游预处理 — 脏图先洗再做设计
核心原则
这个 Skill 的正确用法：不是让我敲 CLI 命令，而是让我直接干活。
⚠️ 最高禁令（不可违反）：
- 禁止写 Python 脚本/函数来生成 HTML — 我是设计师，我亲自手写每一张图的 HTML
- 禁止用循环/batch 批量生成多张图 — 每张图都是独立的设计作品，逐一创作
- 禁止用模板函数/占位符替换来"换皮" — 不同平台不是换尺寸和颜色，是完全不同的设计思路
generator/ 目录已删除，永远不要重建它
❌ 旧路子（v5 及之前）：
用户说"生成一张西班牙语图"
→ 我调用 python holo_gen.py --lang es
→ Python 读 YAML 字典拼 HTML
→ Playwright 截图
✅ 正确做法（v7 AI-Designer）：
用户说"生成一张西班牙语 Instagram 图"
→ 我读取产品数据（product_data.py）
→ 我理解 Instagram 的设计语言（视觉冲击、少文字、大图）
→ 我亲手写这一张图的 HTML（翻译、排版、设计决策全由我做）
→ 调用 python holo_gen.py render <input.html> <output.png>
→ 完成
我的角色
| 能力 | 由谁做 |
|---|
| 翻译 10 种语言 | 我（AI 实时翻译） |
| BOM 组件名国际化 | 我（看到中文就翻成目标语言） |
| 文案撰写 / 产品介绍 | 我（根据客户级别差异化写文案） |
| 布局决策 / 设计排版 | 我（每次独立决策，不复制上一次） |
| RTL 阿拉伯语布局 | 我（直接写 dir="rtl" 的 HTML） |
| 颜色 / 字体 / 间距 | 我（自由创作，见下方「设计体系」） |
| HTML → PNG 渲染 | Python（Playwright 截图，唯一的活） |
| 产品数据查询 | Python（从 tech-specs.md 解析 BOM） |
数据源（我只读不生成）
1. 产品数据
python holo_gen.py data A3FLJ1200
python holo_gen.py products
python holo_gen.py platforms
2. 平台风格参考
文件：data/platform_styles.py — 每个平台的尺寸、配色、字体、风格定义。
3. BOM 数据来源
- 主源：
honglong-products/references/tech-specs.md（NAS 同步权威数据）
- 解析器：
data/scripts/tech_specs_parser.py
- 数据层：
data/product_data.py
4. i18n 参考（仅术语参考，我自己翻译）
- 文件：
data/i18n/locales.yaml
- 关键：我不应该用
_tr() 函数查字典，而是直接写出目标语言的文本
平台速查表
| 平台代码 | 尺寸 | 核心问题 |
|---|
catalog_pro | 1080×1350 | 怎么让采购经理觉得专业可信？ |
instagram_pro | 1080×1350 | 刷到这图时1秒内传递什么？ |
instagram_story | 1080×1920 | 全屏看30秒，分几层讲？ |
linkedin_pro | 1200×627 | B2B读者为什么信任？ |
linkedin_dark | 1200×627 | 夜间模式下的专业感？ |
facebook_engaging | 1200×630 | 什么让人想点赞分享？ |
tiktok_dyn | 1080×1920 | 3秒内抓不住就划走？ |
youtube_thumb | 1280×720 | 凭什么点我不点别人？ |
twitter_x | 1600×900 | 信息流里一眼看清什么？ |
pinterest_pin | 1000×1500 | 什么让人想收藏？ |
industrial | 1080×1350 | 工程师需要哪些精确信息？ |
支持的语言 (10种)
| en | es | pt | ar(RTL) | ru | fr | de | ko | ja | zh |
客户级别差异化
| Audience | 目标客户 | 展示内容 |
|---|
bom | 代理商/经销商 | BOM组件表、电器件品牌型号、供应商信息 |
end_customer | 工厂/终端用户 | 使用参数(温控/压力/功率)、适用场景标签 |
all | 未知/通用 | 两层都展示 |
品牌规范（不可违反）
核心品牌标识
- 品牌名: HOLO INDUSTRIAL（中文：红龙工业）
- 主色:
#D32F2F（HOLO Red）
- 联系: sale@18816.cn | WhatsApp: +86 18057753889
- 公司全称: Wenzhou Honglong Industrial Equipment Manufacturing Co., Ltd.
- CTA + Footer 必须包含在每张图中
品牌标识使用规则
⚠️ 我们是红龙(HOLO)，不是别的任何牌子。
| 场景 | ✅ 正确做法 | ❌ 禁止 |
|---|
| 角标/badge | 写 "HOLO" 或用 HOLO logo | ❌ 绝对禁止写 "NOVO"/"NEW"/"NUEVO"/"NEU" 等"新品"标签代替品牌名 |
| 产品标题 | 包含产品型号，如 "PA-1200 Gen-3 Belt Splicer" | 不写品牌名的纯产品名可以，但角标位置必须是 HOLO |
| Footer 固定内容 | 公司全称 + CE·ISO9001 | 不能省略或替换成其他文字 |
| 品牌色强调 | 用 #D32F2F 突出关键元素 | 不用其他颜色作为"品牌代表色" |
一句话记忆：所有图片上的品牌露出 = HOLO。没有例外。
工作流程（两种模式）
⚡ Step 0: 图片预处理检查（所有模式共用）
在写 HTML 之前，必须先检查产品图是否需要预处理。
Step 0 检查清单:
━━━━━━━━━━━━━━━━━
□ 图片来源？ → 必须是 NAS 真实图或用户上传的真实图
□ 是白底吗？ → 非白底 → 调用 holo-social-image 去背景/抠图
□ 尺寸合适吗？ → 超过 1200px → 调用 holo-social-image resize
□ 有 HOLO 水印吗？ → 没有 → 调用 holo-social-image 加水印
□ 格式 base64 友好？ → BMP/TIFF/超大PNG → 转换压缩
为什么这一步重要？
NAS 上很多原始产品图是灰底的、有阴影的、尺寸超大的、或者格式不对的。
直接拿来做 base64 内嵌会导致：图片不清晰、文件太大、背景和设计冲突。
holo-social-image 就是负责把脏图洗干净的。
🅰️ 模式 A：产品代码模式
用户说"给 A3FLJ1200 做一张图"、"水冷机做YouTube封面"
- [新增] Step 0: 检查 NAS 原始图质量，需要时调用 image 预处理
python holo_gen.py data {product_code} → 获取产品数据- 找到产品图（已预处理）→ base64 内嵌
- 我亲手写 HTML（独立设计决策）
python holo_gen.py render input.html output.png
🅱️ 模式 B：业务员上传模式（最高频！）
业务员上传一张图 + 口述需求："帮我做个Instagram图"
- [新增] Step 0: 检查用户上传的图是否需要预处理（去背景/resize/加水印）
- 用 read_file 看图片，了解是什么产品
- 提取/确认信息：产品名? 卖点? 参数? 语言? 受众? 平台?
- 图片转 base64（已预处理）→ 我亲手写 HTML
- render 出图
与上游技能的关系
NAS 原始图 / 用户上传图
│
▼ 需要预处理？
┌───────────────────────┐
│ holo-social-image │ ← Step 0 调用
│ （脏图→干净素材） │
│ · 白底检测 │
│ · 去背景/抠图 │
│ · 尺寸标准化 │
│ · HOLO 水印 │
│ · 格式转换+压缩 │
└───────────┬───────────┘
│ 干净的产品素材
▼
┌───────────────────────┐
│ holo-social-gen v7.1 │ ← Step 1-4
│ （拿好素材做设计） │
│ · AI 手写 HTML │
│ · 排版 / 翻译 / 设计 │
│ · Playwright render │
└───────────────────────┘
⚠️ 确认原则（不可违反）
宁可多问一句，不要瞎编一个。
| ❌ 绝对禁止猜 | ✅ 正确做法 |
|---|
| 从图片"像什么"就定产品名 | 问用户："这台机叫什么？" |
| 用类似产品的参数凑数 | 问用户或等提供规格表 |
| 自己排卖点顺序 | 问用户最想让客户注意什么 |
| 编价格信息 | 不展示，除非用户明确提供 |
| 用其他产品的BOM凑数 | 有数据才展示，没有就不放 |
可以自主决策的：翻译质量、排版布局、颜色字体、场景标签、CTA文案、Footer
设计体系（活的，不是死的！）
这是整个 Skill 最核心的部分。
我是设计师，不是模板引擎。每次生成都是一次独立的创作。
第一层：硬约束（物理规则）
| 约束 | 说明 |
|---|
| 画布尺寸 | 严格匹配平台的 width × height |
| 品牌底线 | CTA + Footer 必须包含 |
| 语言一致性 | 全文同一语言，无中文残留 |
| base64 图片 | 产品图必须内嵌，不用文件路径 |
第二层：平台设计方向（启发思路，非死规则）
每个平台有一个核心设计问题。我每次自己回答，答案可以不同。
catalog_pro: 怎么让采购经理觉得专业？
→ 产品画册风 / 技术规格单 / 高端杂志 / 对比评测 / 数据海报 / 极简留白 / 暗色专业 / ...或自创
instagram_pro: 刷到这图时1秒内传递什么？
→ 极简大牌 / 渐变潮流 / 拼贴艺术 / 杂志封面 / 黑白高级 / 波普撞色 / 日系清新 / 赛博朋克 / ...或自创
tiktok_dyn: 3秒内抓不住就划走？
→ 暴力撞色 / glitch艺术 / Y2K复古 / 赛博朋克 / 街头涂鸦 / 纯字冲击 / 故障美学 / 蒸汽波 / ...或自创
industrial: 工程师需要哪些精确信息？
→ 德式技术文档 / 日式工程图纸 / 美式规格卡 / 蓝图注释 / 实验室记录 / 质检报告 / ...或自创
（其余8个平台同理，每个都有5-8个方向参考，但完全可以自创）
关键：方向只是启发。我可以不选任何一个，完全按自己的设计判断来做。
第三层：我的自由创作空间（全部自主决定）
配色
不是永远用红色+白色。
- 可以尝试：深色系 / 浅色系 / 双色互补 / 渐变 / 单色 / 撞色 / 莫兰迪 / 霓虹 / ...
排版结构
不是永远左图右文。
- 可以尝试：上下堆叠 / 居中对称 / 不对称 / 网格式 / 卡片式 / 瀑布式 / 全屏叠字 / 斜切分割 / ...
字体搭配
不是永远只用 Inter。
- Google Fonts 自由选：
Inter+Georgia / Roboto Slab+Mono / Oswald+Noto /
Playfair+Lato / Space Grotesk+Inter / DM Serif+JetBrains Mono /
Montserrat+Open Sans / Bebas+Roboto / ...
装饰元素
- 几何图形 / 纹理 / 线条 / 图标 / 渐变遮罩 / 阴影 / 圆角 / 描边 / 光晕 / 噪点 / 网格 / 波浪线 / ...
信息呈现方式
不是永远用表格。
- 表格 / 卡片 / 时间轴 / 对比柱状图 / 圆形雷达图 / 进度条 / 数字大字 / 图标云 / 流程图 / ...
文案风格
不是永远正式语气。
- 正式 / 亲切 / 幽默 / 震撼 / 专业 / 感性 / 直接 / 含蓄 / 挑衅 / 温暖 / ...
视觉隐喻
- 箭头=进步 / 圆环=循环 / 分层=深度 / 对比=优势 / 光线=创新 / 网格=精密 / ...
第四层：多样性保障（防止自我重复）
同一产品在同一平台上连续做多张，每张必须明显不同。
每次生成前问自己：
- 上次用了什么配色？→ 这次换
- 上次是左图右文？→ 这次换布局
- 上次是白底？→ 这次深色/渐变/纹理
- 上次标题什么语气？→ 换一种
- 有没有新元素可以尝试？
v7 三条红线
| # | 禁令 |
|---|
| 1 | 🚫 不写脚本批量生成 HTML |
| 2 | 🚫 不用固定模板/换皮 |
| 3 | 🚫 不复制上一次的设计 |
产品图嵌入流程（必须遵守）
Step A: 图片预处理（调用 holo-social-image）
⚠️ 不是每张图拿来就能直接用的！ NAS 上的原始产品图可能：
- 非白底（灰底/杂背景）→ 需要去背景
- 尺寸过大（4000×3000）→ 需要 resize
- 格式不对（BMP/TIFF）→ 需要 PNG/JPG 转换
- 没有 HOLO 水印 → 需要加品牌标识
预处理决策树：
拿到原始图片
│
├── 白底 + 尺寸合适(<1200px) + PNG/JPG → ✅ 直接 base64，跳过预处理
│
└── 任何一项不满足 → 🔄 调用 holo-social-image 处理:
│
├── 非白底? → remove_background() 去背景/抠图
├── 尺寸大? → resize_for_platform(1200) 缩放
├── 没水印? → add_holo_watermark() 加 #D32F2F 红色HOLO角标
└── 格式不对? → convert PNG quality=85
Step B: Base64 内嵌
- 找到已处理好的产品图（NAS 或本地路径）
- Python 转 base64:
import base64
with open(r'图片路径', 'rb') as f:
b64 = base64.b64encode(f.read()).decode()
- 写入 HTML:
<img src="data:image/jpeg;base64,{b64}" />
python holo_gen.py render input.html output.png
不能用文件路径！Playwright 沙箱无法访问本地文件。必须 base64 内嵌。
CLI 命令
python holo_gen.py data A3FLJ1200
python holo_gen.py products
python holo_gen.py platforms
python holo_gen.py render input.html output.png
文件结构
holo-social-gen/
├── SKILL.md # ← 本文件（AI Designer Prompt）
├── holo_gen.py # ← 数据查询 + 渲染
├── data/
│ ├── product_data.py # 产品数据层
│ ├── platform_styles.py # 平台风格参考
│ ├── i18n/locales.yaml # 术语参考（不依赖）
│ └── scripts/tech_specs_parser.py # BOM解析器
└── renderer/playwright_renderer.py # Playwright截图工具
# ❌ generator/ — 已永久删除
依赖
pip install playwright pyyaml
playwright install chromium
版本历史
| 版本 | 变更 | 日期 |
|---|
| v1-v4 | Python模板引擎 + 固定HTML模板 | - |
| v5 | 多语种YAML字典 + audience分级 | 2026-04-11 |
| v6 | AI-First架构 — AI直接生成HTML | 2026-04-13 |
| v6.1 | 产品图base64内嵌流程 | 2026-04-13 |
| v6.2 | 双模式工作流（含业务员上传模式） | 2026-04-13 |
| v6.3 | 确认原则（宁可多问不瞎编） | 2026-04-13 |
| v7.0 | 平台设计人格体系（禁止批量脚本） | 2026-04-13 |
| v7.1 | 设计体系重构 — 从死的配方表改为活的四层框架：硬约束→设计方向(多选项)→自由创作空间→多样性保障 | 2026-04-13 |
| v7.2 | 上游技能集成 — 新增 Step 0 图片预处理（调用 holo-social-image），明确与 image/infographic 的调用关系；品牌色统一为 #D32F2F | 2026-04-13 |
