# Holo Social Gen

> HOLO社媒图片生成器 v7.2。AI-First设计模式，Agent直接手写HTML生成多语种社媒图片（Instagram/Facebook/LinkedIn等）。

- Skill: `wike-chi/holo-social-gen` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add wike-chi/holo-social-gen`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wike-chi/holo-social-gen/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wike-chi (https://skillmd.com/u/wike-chi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wike-chi/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. 产品数据
```bash
python holo_gen.py data A3FLJ1200    # 单个产品完整 JSON 数据
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封面"

0. **[新增] Step 0: 检查 NAS 原始图质量，需要时调用 image 预处理**
1. `python holo_gen.py data {product_code}` → 获取产品数据
2. 找到产品图（已预处理）→ base64 内嵌
3. 我亲手写 HTML（独立设计决策）
4. `python holo_gen.py render input.html output.png`

### 🅱️ 模式 B：业务员上传模式（最高频！）
业务员上传一张图 + 口述需求："帮我做个Instagram图"

0. **[新增] Step 0: 检查用户上传的图是否需要预处理（去背景/resize/加水印）**
1. 用 read_file 看图片，了解是什么产品
2. 提取/确认信息：产品名? 卖点? 参数? 语言? 受众? 平台?
3. 图片转 base64（已预处理）→ 我亲手写 HTML
4. 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 / ...

#### 装饰元素
- 几何图形 / 纹理 / 线条 / 图标 / 渐变遮罩 / 阴影 / 圆角 / 描边 / 光晕 / 噪点 / 网格 / 波浪线 / ...

#### 信息呈现方式
不是永远用表格。
- 表格 / 卡片 / 时间轴 / 对比柱状图 / 圆形雷达图 / 进度条 / 数字大字 / 图标云 / 流程图 / ...

#### 文案风格
不是永远正式语气。
- 正式 / 亲切 / 幽默 / 震撼 / 专业 / 感性 / 直接 / 含蓄 / 挑衅 / 温暖 / ...

#### 视觉隐喻
- 箭头=进步 / 圆环=循环 / 分层=深度 / 对比=优势 / 光线=创新 / 网格=精密 / ...

### 第四层：多样性保障（防止自我重复）

**同一产品在同一平台上连续做多张，每张必须明显不同。**

每次生成前问自己：
1. 上次用了什么配色？→ 这次换
2. 上次是左图右文？→ 这次换布局
3. 上次是白底？→ 这次深色/渐变/纹理
4. 上次标题什么语气？→ 换一种
5. 有没有新元素可以尝试？

### 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 内嵌

1. 找到**已处理好的**产品图（NAS 或本地路径）
2. Python 转 base64:
   ```python
   import base64
   with open(r'图片路径', 'rb') as f:
       b64 = base64.b64encode(f.read()).decode()
   ```
3. 写入 HTML: `<img src="data:image/jpeg;base64,{b64}" />`
4. `python holo_gen.py render input.html output.png`

**不能用文件路径！Playwright 沙箱无法访问本地文件。必须 base64 内嵌。**

---

## CLI 命令

```bash
# 数据查询（给我看原始数据）
python holo_gen.py data A3FLJ1200
python holo_gen.py products
python holo_gen.py platforms

# 渲染（我已经写好 HTML 后调用）
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/ — 已永久删除
```

## 依赖

```bash
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 |