Brand Kit

SKILL.md

---
name: brand-kit
author: 王教成 Wang Jiaocheng (波动几何)
description: 企业品牌视觉资产端到端生成。能力：①需求分析（BA1）②设计生成（BA2，Logo+形态派生+SVG批量+信息注入+小尺寸优化）③格式转换（BA3，SVG→PNG+ICO+校验）④整合交付（BA4，HTML+完整性+清理）⑤品牌规范与扩展应用（BA5-BA6，可选）。全量87个文件（2 HTML + 33 SVG + 51 PNG + 1 ICO）。33 SVG = 3核心标志 + 18 VI系统 + 3品牌规范 + 9扩展应用。6域25种任务。触发词：生成品牌资产、VI系统、Logo套件、商标稿件、名片信封信纸、favicon全套、brand asset、meta-skill-system。
---

# 品牌视觉资产生成

## 定位

本技能是一个**领域负载物技能**，提供企业品牌视觉资产从需求输入到完整交付的端到端生成能力。

**领域边界**：分两层：①核心管线（BA1-BA4）：需求→设计→转换→交付，生成62个核心品牌资产（1 HTML + 21 SVG + 39 PNG + 1 ICO），任何品牌项目必备 ②扩展层（BA5-BA6）：品牌规范（VI手册、色彩/字体/Logo规范）与扩展应用（环境、产品、多媒体），在核心完成后可选并行执行，共25个扩展文件（1 HTML + 12 SVG + 12 PNG）。全量87个文件（2 HTML + 33 SVG + 51 PNG + 1 ICO）。

**文件数构成**：
- 33 SVG = 3核心标志 + 18 VI系统 + 3品牌规范 + 9扩展应用（另有1辅助简化版在BA4-03阶段清理）
- 62个核心文件 = 3核心标志SVG + 21核心标志PNG + 18 VI系统SVG + 18 VI系统PNG + 1 HTML + 1 ICO
- 51 PNG = 21核心标志PNG（纯图标7：6多尺寸+480展示版 + 横版5：标准+4多尺寸 + 竖版5：标准+4多尺寸 + ICO内嵌4）+ 18 VI系统PNG + 3品牌规范PNG + 9扩展应用PNG

**依赖声明**：本技能依赖通用任务执行能力（三轴执行框架）。Logo SVG由AI直接编写矢量代码生成（SVG是XML格式，无需图像生成技能）；格式转换依赖Edge浏览器（headless渲染）和Pillow库（LANCZOS缩放、ICO构建）。所有可复用的脚本、范本、技术坑解决方案均以负载物形式内嵌。核心脚本`scripts/render_svg_to_png.py --all`支持一键完整渲染（纯图标+横版/竖版多尺寸+批量SVG渲染+ICO）。

## 核心能力

按"需求→设计→转换→交付→规范→扩展"六阶段组织：

### 需求分析能力

将用户输入转化为明确的设计规格：
- 采集公司信息（名称、行业、个人信息、设计偏好）
- 推导色彩方案、风格方向、Logo构成思路
- 规划7类资产文件清单、尺寸规格、目录结构

AI基于设计规格直接编写Logo SVG源代码（矢量图形XML），并派生3种核心标志形态：
- 横版标志（图形+文字左右排列）
- 竖版标志（图形+文字上下排列）
- 纯图标（仅核心图形，用于favicon/小尺寸场景）

### SVG资产生成能力

从Logo派生02~09目录共30个SVG资产：
- 商标注册稿件（黑白/彩色 × 图形/文字/组合，945×945，8cm@300dpi）
- 数字化应用（App图标、社交头像、文档水印、黑白版、反白版）
- 办公文具（名片正反面、C5信封、A4信纸）
- 宣传物料（PPT封面、网站Banner、员工工牌）
- 品牌规范（色彩色板、字体规范、Logo使用规范）
- 环境应用（门头招牌、展会背景板、易拉宝）
- 产品周边（包装盒、礼品袋、笔记本封面）
- 多媒体模板（邮件签名、社交媒体配图、视频封面）

### 格式转换能力

- **一站式渲染**：`render_svg_to_png.py --all` 一键完成全部渲染（纯图标+横版/竖版多尺寸+批量SVG渲染+ICO），无需临时脚本
- **大图缩小策略**：先渲染1024×1024大图，再用Pillow LANCZOS高质量缩小到目标尺寸
- **小尺寸优化**：为16-128px创建简化版SVG，移除不可见细节，增强核心元素
- **横版/竖版多尺寸**：横版5尺寸(2.5:1)、竖版5尺寸(5:6)，每种尺寸明确标注适用场景
- **批量SVG渲染**：遍历30个非核心SVG（02~09目录：商标注册+数字化+办公+宣传+品牌规范+环境+产品+多媒体），按viewBox自动计算尺寸，已存在PNG自动跳过（增量渲染）
- **ICO多尺寸构建**：手动构建ICO二进制结构，绕过PIL单帧限制
- **ICO内嵌PNG提取**：ICO构建完成后，从ICO二进制解析4个内嵌PNG（16×16/32×32/48×48/64×64），作为独立PNG文件存入01_核心标志目录，供HTML展示页展示ICO的多尺寸效果

### 整合交付能力

- 生成双格式对照HTML展示页（SVG+PNG左右对照）
- 文件完整性校验（实际文件 vs HTML引用，0遗漏0悬空）
- 辅助文件清理、去重、交付打包

### 品牌规范能力

生成完整的品牌使用规范体系：
- **VI手册**：全面的品牌视觉识别手册（HTML格式，可打印为PDF）
- **色彩规范**：品牌标准色+辅助色色板（SVG+PNG双格式）
- **字体规范**：中文字体+英文字体标准（SVG+PNG双格式）
- **Logo使用规范**：正确用法+错误用法对照（SVG+PNG双格式）

### 扩展应用能力

从品牌核心向外部场景延伸：
- **环境应用**：门头招牌、展会背景板、易拉宝/海报架
- **产品周边**：产品包装盒、礼品袋、笔记本封面
- **多媒体模板**：邮件签名、社交媒体配图模板、视频封面模板

## 品牌视觉资产生成特有维度

| 维度 | 说明 | 影响 |
|------|------|------|
| **SVG代码生成** | Logo由AI直接编写SVG矢量代码（非图像生成） | 需AI具备代码生成能力 |
| **双格式交付** | SVG矢量源 + PNG位图同时交付 | 渲染环节不可或缺 |
| **多尺寸要求** | 同一图标需16-512px多尺寸 | 需要大图缩小策略 |
| **跨平台兼容** | favicon需兼容浏览器/操作系统/旧设备 | ICO需含4尺寸 |
| **个人信息注入** | 公司信息需批量注入多个SVG | 需要批量替换工作流 |
| **沙盒限制** | 项目目录可能被沙盒限制写入 | 需用系统临时目录中转 |
| **品牌一致性** | 所有衍生资产需保持设计一致性 | 需要严格的色彩/字体/图形规范 |

## 三层结构

```
第一层：清单与依赖拓扑   →  references/brand-kit-catalog.md
第二层：要求清单          →  references/brand-kit-requirements.md
第三层：范本库            →  references/exemplars.md
```

brand-kit-requirements.md 只包含任务要素（必选组件/组装顺序/约束/格式），纯范本内容（完整代码、模板、示例、技术坑）在 exemplars/ 对应域文件中。每个域的范本文件覆盖该域所有任务，技术坑按域归属。

## 使用规则

### 执行流程
1. **首次加载**：读取 `references/brand-kit-catalog.md`，获取域分类、依赖拓扑、元操作映射
2. **按需深入**：确认任务类型后，读取 `references/brand-kit-requirements.md` 获取任务要素（必选组件/组装顺序/约束/格式）
3. **范本查阅**：执行具体任务时，读取 `references/exemplars/` 对应域文件获取完整代码和模板
4. **脚本复用**：`scripts/` 目录下的脚本可直接执行，无需重新编写

### 内容权限
5. **修改权限**：本技能可按需修改以适配特定项目需求
6. **用户填充**：用户可在 `references/exemplars/` 中补充具体品牌资产范本

### 降级模式（只读）
当无法执行生成操作时（如Edge浏览器缺失、Pillow库不可用），降级为只读咨询模式：

| 模式 | 可执行操作 | 不可执行操作 |
|------|----------|------------|
| 完整模式 | Logo生成、SVG批量生成、SVG→PNG渲染、HTML生成、校验交付、品牌规范生成、扩展应用生成 | — |
| 降级模式 | 技术方案咨询、文件清单规划、范本查阅、技术坑解答、校验脚本执行 | Logo SVG生成、SVG→PNG渲染（需Edge）、ICO构建 |

降级触发条件：Edge浏览器不可用 / Pillow库不可用 / 用户仅需咨询不需生成

> **环境变量提示**：Edge浏览器路径可通过 `EDGE` 环境变量覆盖默认路径（如ARM64系统或自定义安装路径），例如：`set EDGE=C:\Path\To\msedge.exe`。详见 `scripts/render_svg_to_png.py` 顶部注释。

### 扩展能力
7. **提示词导出**：可将SKILL.md与references目录合并为单一提示词文件

## 执行框架

本技能作为领域负载物，与三轴执行框架的接口如下。

> **配套依赖**：三轴执行框架（R1-R5评分、P2迭代精炼模式、元操作权重等）由 **Meta Skill System** 技能提供。执行本技能时，建议同时加载 Meta Skill System 以获取完整的框架定义与执行方法论。两者配合使用：brand-kit 提供品牌视觉资产生成的领域知识与资产范本，Meta Skill System 提供通用执行框架与方法论。

### Step 0：三轴判定
- **复杂度**：复杂（8+步，多文件生成、多轮渲染调优）
- **内容类型**：结构化（SVG/PNG/HTML文件，有明确格式规范）
- **创新需求**：需要创新（Logo设计需要创造性，VI系统需要一致性）
- **判定结果**：三轴全开，执行轴用P2迭代精炼模式

### Step 1：领域校准
基于R1-R5评分推导执行参数：
- **R1 信息密度=中**：S和C权重中，需采集公司信息、色彩规范、尺寸规范
- **R2 创造性=高**：A权重高，Logo生成环节C偏发散，需AI代码生成能力
- **R3 交互性=中**：I权重中，Logo确认和信息校准是关键校准点
- **R4 规范性=高**：G权重高，商标稿件需符合商标局要求，favicon需符合规范
- **R5 迭代性=高**：循环多，SVG→PNG渲染需多轮调优，S→C→A链短而频
- **核心术语**：SVG、PNG、ICO、viewBox、preserveAspectRatio、LANCZOS、Favicon、商标注册
- **元操作权重**：A(45%) > C(20%) > S(15%) > G(10%) > O(5%) > I(5%)
- **关键变量**：公司名称、行业、设计偏好、个人信息、色彩方案、尺寸规格
- **守护约束**：文件完整性（0遗漏0悬空）、PNG尺寸标注准确性、商标稿件合规性
- **产出格式**：SVG文件、PNG文件、ICO文件、HTML展示页
- **自治度偏好**：Logo生成半自动（需用户确认），SVG批量生成全自动，渲染全自动
- **创新评估侧重**：可行性基础优先（需可落地交付）

### Step 2：三轴分解
按域分解为元操作单元，激活内容轴（清单法）：
- 内容轴：组件清单（7类资产 × SVG+PNG）、样本法（参考已有品牌资产结构）
- 创新轴：模式直用（Logo设计用基元运用框架创新）

### Step 3：管线编排与执行
按P2迭代精炼模式编排，分核心管线与扩展层：

**核心管线（必备）**：
```
S-01(信息采集) → I-01(方向校准) → A-01(Logo生成)
↻(I-01 → A-01, 用户确认)
→ A-02(形态派生) ⇉ [A-03(SVG批量), A-04(小尺寸版)]
→ A-05(信息注入) → A-06(渲染)
⇉ [A-07(图标多尺寸), A-07A(横版/竖版多尺寸), A-07B(批量SVG渲染)]
→ A-08(ICO) → G-01(渲染校验) ?(通过) → A-09(核心HTML) → G-02(核心完整性) → O-01(核心整理) → O-02(核心交付)
```

**扩展层（可选，核心交付后并行）**：
```
→ ⇉ [A-10(BA5: 品牌规范), A-11(BA6: 扩展应用)]
→ A-12(全量HTML) → G-03(全量验收) → O-03(全面清理) → O-04(最终交付)
```
关键编排模式：A-07(图标多尺寸)、A-07A(横版/竖版多尺寸)、A-07B(批量SVG渲染)三者并行执行，由`render_svg_to_png.py --all`统一调度。A-10(BA5品牌规范)与A-11(BA6扩展应用)在核心资产完成后并行执行。

### Step 4：整合交付
- 执行轴：管线复盘，确认所有文件已生成
- 内容轴：组装HTML展示页，整合所有资产
- 创新轴：Logo设计方案评估
- 呈现：默认展示交付目录和文件清单，用户说"详细"时展开技术细节

## 品牌视觉资产生成域概览

按"**核心管线 + 扩展层**"两层架构组织，共6域25种任务：

### 核心管线（BA1-BA4，必备）

| 域 | 任务数 | 本质职责 | 典型任务 |
|----|--------|---------|---------|
| BA1 需求分析域 | 3 | 将用户输入转化为明确的设计规格 | 信息采集、设计方向校准、资产规格规划 |
| BA2 设计生成域 | 5 | 从Logo到全量SVG资产的源文件生成（02~09目录共30个） | Logo生成、标志形态派生、SVG批量生成、信息注入、小尺寸优化版 |
| BA3 格式转换域 | 6 | SVG矢量源转换为多尺寸PNG位图和ICO | 一站式渲染(--all)、SVG→PNG、横版/竖版多尺寸、批量SVG渲染、ICO构建、渲染校验 |
| BA4 整合交付域 | 4 | 生成展示页、校验完整性、整理交付 | HTML展示页、完整性校验、清理整理、交付打包 |

**核心产出**：1 HTML + 21 SVG + 39 PNG + 1 ICO = **62个核心文件**，完整可用的品牌资产包。

### 扩展层（BA5-BA6，可选）

核心管线完成后可选并行执行，根据项目需求决定是否生成。

| 域 | 任务数 | 本质职责 | 典型任务 |
|----|--------|---------|---------|
| BA5 品牌规范域 | 4 | 品牌使用规范体系（说明核心资产如何用） | VI手册HTML、色彩规范、字体规范、Logo使用规范 |
| BA6 扩展应用域 | 3 | 品牌向外部场景延伸（将核心应用到新场景） | 环境应用、产品周边、多媒体模板 |

**扩展产出**：3 SVG + 3 PNG + 1 HTML（BA5）+ 9 SVG + 9 PNG（BA6）= **25个扩展文件**

**全量交付**：核心62 + 扩展25 = **87个文件**

**域间逻辑流**：BA1→BA2→BA3→BA4（核心管线）→ [BA5(规范) ‖ BA6(扩展)]（可选并行）→ BA4-02（最终完整性）→ BA4-03（清理）→ BA4-04（交付）

完整清单见 `references/brand-kit-catalog.md`。

## 事实纪律

1. 公司信息必须使用用户提供的真实信息，不得编造
2. Logo生成必须基于AI实际编写的SVG代码，不得描述未生成的Logo
3. PNG尺寸标注必须与实际文件像素一致，用PIL读取验证
4. 文件完整性校验必须基于实际文件系统比对，不得凭记忆
5. 技术坑解决方案必须来自实际遇到的问题，不得凭空设想
6. ICO文件结构必须符合ICO格式规范，尺寸字段、偏移量必须正确
7. 范本库中的范本必须脱敏，不包含真实公司信息
8. HTML引用路径必须与实际文件路径完全匹配（区分大小写）
9. 品牌规范中的色彩值必须与Logo设计中的色彩方案完全一致
10. 扩展应用的视觉风格必须与核心标志保持一致
11. **SVG XML特殊字符转义**：`&`→`&amp;`、`<`→`&lt;`、`>`→`&gt;`（详见BA2-01~BA2-03、BA2-05约束）
12. **SVG `<defs>` 完整且单层**：引用渐变的SVG必须包含完整`<defs>`且不得嵌套（详见BA2-01~BA2-03、BA2-05约束）
13. **HTML中SVG显示CSS**：显式`width:100%; height:160px`+`object-fit:contain`+`display:block`，禁止`max-width`+`max-height`组合（详见BA4-01约束）
14. **品牌文案/Emoji/占位符/信息分层**：详见BA2-03、BA2-04、BA3-02B约束
15. **交付完整性**：技能声称87个文件时必须实际产出87个，`verify_assets.py`校验0悬空0遗漏（详见BA4-02、BA4-04约束）
16. **ICO内嵌PNG提取**：ICO构建完成后必须从ICO二进制提取4个内嵌PNG（16×16/32×32/48×48/64×64）存入01_核心标志目录，HTML展示页使用这4个PNG在核心标志区展示ICO多尺寸（详见BA3-03、BA4-01约束）

## 标题层级规范

为确保合并为单一提示词文件时标题层级不冲突，各文件标题层级规范如下：

| 文件类型 | 一级标题 | 二级标题 | 三级标题 | 四级标题 |
|---------|---------|---------|---------|---------|
| SKILL.md | `#` | `##` | `###` | `####` |
| references/brand-kit-catalog.md | `##` | `###` | `####` | `#####` |
| references/brand-kit-requirements.md | `##` | `###` | `####` | `#####` |
| references/exemplars.md | `##` | `###` | `####` | `#####` |
| references/exemplars/*.md | `##` | `###` | `####` | `#####` |