# Geo Collage

> 「小耳几何风」——硬边几何一体化内容产线，一套色板贯穿三种介质：①横向翻页网页 PPT（单 HTML，20 种模块网格版式，7 套现代平面设计流派配色 + 内置换肤面板，零图片零 API，可导 PPTX 双模式）；②小红书 3:4 卡片（同一套原子库，批量出 PNG）；③公众号排版（深底满宽主题 7 套 + 11 个几何组件，零图片资产）。视觉特征 = 模块网格咬合、圆/三角/条纹平涂色块、零渐变零阴影零圆角、出血切断。当用户说「几何风 PPT」「包豪斯风格 PPT」「瑞士风格排版」「色块 PPT」「模块网格」「几何拼贴」「geo collage」「几何风小红书」「几何风公众号」「硬边几何」时使用。与小耳剪纸风（温暖手工）互为冷暖两极。

- Skill: `jane-xiaoer/geo-collage` (Agent Skill, multi-file: 15 files)
- Install (CLI): `npx skillmds@latest add jane-xiaoer/geo-collage`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jane-xiaoer/geo-collage/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jane-xiaoer (https://skillmd.com/u/jane-xiaoer)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jane-xiaoer/geo-collage

---


# 小耳几何风 · Xiaoer Geo Collage

把内容切成格子，每一格只做一件事。画面被切成不等分模块，每格独占一个几何动作，格与格严丝合缝 —— **网格本身承担信息层级**，而不是靠字号大小。

**血统**：Bauhaus 的模块化网格、Swiss International Typographic Style 的排版秩序、俄国构成主义的色块对撞。
**工程内核**：从一份真实演讲 deck（23 页，实际上台跑过）提炼，色板、几何原子库、duotone 照片系统全部继承下来。

---

## 🎯 这套东西为什么存在

**目的只有一个：美学，和不一样。**

市面上的物料有两个坑，这套风格系统就是为了绕开它们：

1. **普通 PPT 的模板味** —— 圆角卡片、渐变按钮、阴影层叠、图标堆砌。谁做都长一个样。
2. **「AI 味」** —— 一眼看出是 AI 生的：糊掉的文字、诡异的透视、无意义的光效、到处都是的紫蓝渐变。

**破法是：风格从一个真实存在的设计流派里长出来**，而不是让模型「设计一个好看的 PPT」。包豪斯的网格、瑞士的排版秩序、构成主义的色块对撞 —— 这些是几十年被验证过的视觉语言，有明确的铁律可以判定对错。**风格有出处、有铁律、可判定 —— 这是它和「AI 随便生一个」的根本区别。**

> 🔴 **永远不要在这套系统里做「看起来很高级」的自由发挥。** 每加一条视觉决策，都要能回答「这是哪个流派的做法 / 违反了哪条铁律」。答不上来就是在往里掺 AI 味。

## 何时用 / 不用

**合适**：主题演讲、品牌/产品发布、数据汇报、展览与活动物料、招生宣讲、方法论讲解 —— 任何要「冷静、有秩序、有气场」的场合。
**不合适**：手作/生活方式/情感向内容（走小耳剪纸风）、需要大量真实照片堆砌的相册型内容、严肃学术论文排版。

---

## 工作流 A · 网页 PPT

### Step 1 · 对齐（动手前最多 3 问）
给了完整大纲/文章 → 直接 Step 2。只给主题 → 最多问：①讲给谁、什么场合？②时长（10 分钟≈8-10 页，20 分钟≈12-16 页）？③有无现成素材/硬约束？其余自己做合理假设并说明。

### Step 2 · 大纲 + 底色节奏
按叙事弧搭骨架（钩子→定调→主体→转折→收束），**同时列出每页底色**（浅 / 深 / 满版彩）。
🔴 **无连续 3 页同底色**，每 3-4 页一个深底或满版彩呼吸页。大纲 + 节奏表先给用户确认再写 HTML。

### Step 3 · 定初始配色
读 `references/themes.md`，按内容气质推荐**初始主题**，把 `<body class="tN">` 换成对应编号。
7 套变量和左下角「◼ 小耳几何风 · STYLE」换肤面板都内置在模板里，**观众/用户随时一键切**（localStorage 记住）。
**不接受自定义 hex、不许混搭**。用户给参考图 → 按图逐要素提色加成 t8+（方法在 themes.md 开头）。

### Step 4 · 拷模板 + 填版式
```bash
mkdir -p "项目/XXX/ppt"
cp styles/geo-collage/demo.html "项目/XXX/ppt/index.html"
```
模板完整可运行，内置 **20 个示例页 = 20 种版式全菜单**。然后：
1. 立刻替换 `<title>` 等 `[必填]` 占位
2. 打开 `references/grid-layouts.md`，按大纲从 **20 种骨架**里挑，**整段粘贴改文案** —— 不要从零写页，不要发明新类名
3. 遵守下方「硬边五铁律」和 `references/geo-primitives.md`
4. 微调只改 inline style（px 单位，画布固定 1600×900）

### Step 5 · 自检
```bash
python3 styles/geo-collage/scripts/shot.py index.html /tmp/check --size 1600x900 --pages 1-20
```
逐张人眼过一遍，重点看：留白够不够、有没有格子留缝、每页是不是只讲一件事。

### Step 6 · 交付
`open index.html` 直接帮用户打开（不要给路径让用户自己找）。操作：**滚轮 / 键盘 ←→↑↓ / 空格翻页**，点左侧 28% 回退，URL 带 `#页号` 直达。

**要 PPTX？** 两个模式，按「交给谁」选：

```bash
# 可编辑：色块→原生形状，文字→真文本框。给别人继续改用这个
python3 styles/geo-collage/scripts/export-pptx.py index.html --mode editable -o 分享.pptx

# 保真：整页截图铺满。只是要在别人电脑上放映用这个
python3 styles/geo-collage/scripts/export-pptx.py index.html --mode fidelity -o 分享.pptx

# 可选：--theme t3 指定配色 · --pages 1-10 只导部分 · --stripes pattern 条纹改成可编辑图案
```

实测（20 页模板）：editable **0.1MB**，186 个原生形状 + 243 个真文本框 + 31 张精确条纹图，17 秒；fidelity 2.3MB。**两种模式都会把每页的 `n:` 演讲备注写进 PPT 备注栏**（可编辑、可打印备注页）。

**editable 模式的已知边界**（实测，不是推测）：

| 元素 | 结果 | 原因 |
|---|---|---|
| 矩形 / 圆 / 三角（7 向） | ✅ 原生形状，可选中拖动换色 | 本来就是 PPTX 原生形状 |
| 文字 | ✅ 真文本框，双击就改 | —— |
| 条纹 | 📷 精确图片（默认） | PPTX 内置图案密度固定，和 CSS 的 8px 间距对不上，大面积会糊成灰面。`--stripes pattern` 可换回可编辑图案，但密度是近似的 |
| **拱 `.arch` / 四分圆 `.q**`** | 📷 精确图片 | CSS 的 `border-radius:100%` 是「整块变 1/4 圆」，而 **PPTX 圆角上限是短边一半**（adj 调到 1.5 也被 clamp，实测过），做不出来 |
| 照片位 `.ph` | ❌ 不导出 | 无图源时会是个空洞 |
| 标题字重 | ⚠️ 比网页略细 | CSS 的 `-webkit-text-stroke` 描边 PPTX 没有对应能力，靠 bold 补 |

> 🔴 **别用 LibreOffice 预览判断字体效果** —— 它没有 Futura / PingFang SC，会替换字体导致数字和标题字形全变。真实效果以 PowerPoint / Keynote 为准。

---

## 工作流 B · 小红书卡片

画板 1080×1440（3:4），复用同一套色板和几何原子，**字号体系放大**（手机上看）。

```bash
cp styles/geo-collage/xhs-template.html "项目/XXX/xhs.html"
# 改完先体检，再出图（2 倍图）
python3 styles/geo-collage/scripts/check-overlap.py xhs.html
python3 styles/geo-collage/scripts/shot.py xhs.html ./out --size 1080x1440 --pages 1-8 --scale 2
```

**两组现成模板**（16 种卡型，直接改文案）：
- `xhs-template.html` —— 封面 / 痛点三连 / 大数字四宫 / 五铁律清单 / 四步骤 / 上下对比 / 金句 / 尾卡
- `xhs-colors.html` —— 色板封面 / 配色方案卡 ×3 / 九宫格合集 / Q&A / 纠错卡 / 时间线尾卡

🔴 **小红书铁律：每张卡必须单独成立** —— 用户可能只滑到第 4 张，所以每张都要有自己的小标题，不能写「承上启下」的话。
🔴 **配色展示类的卡必须写死 hex，不能用 `var(--xxx)`** —— 那些卡展示的就是「那套配色本身」，跟着换肤走就全乱了。
🔴 **改完文案一定要跑 `check-overlap.py`** —— 卡片是绝对定位的，文案变长不会自动撑开，只会被后面的色块盖住，肉眼逐张扫容易漏。

---

## 工作流 C · 公众号排版

**最大优势：零图片资产** —— 剪纸风的纸片必须是真纸 PNG 传 CDN，几何风全是纯色块，主题 JSON 可直接分发。

1. **选主题**：14 套在 `assets/wechat-themes/geo-collage*.json`（`geo-collage-tN` 浅底 / `geo-collage-dark-tN` 深底满宽，深底是这套风格的主推）
2. **本地预览**：`python3 styles/geo-collage/scripts/preview-wechat.py 文章.md --theme geo-collage-dark-t3`
3. **嵌组件**：按 `references/wechat-components.md` 在关键位置嵌 raw HTML（11 个组件）
4. **配图**（可选）：按 `references/image-prompts.md` 生成；**先拍板配色再生成图**（图的色板是烤死的，不跟换肤走）
5. **传图**：`python3 scripts/upload-body-images.py 文章.md`
6. **推草稿**：接自己的公众号发布管线，**只到草稿箱，发布永远由用户在后台手动点**

配色改动 → 改 `demo.html` 的 `body.tN` → 重新生成，别手改 JSON：
```bash
python3 styles/geo-collage/scripts/gen-wechat-themes.py --all
```

🔴 **微信管线三条硬约束**（踩过才知道的）：
- 要显示背景的那一层必须是 `<section>`，`<div>` 上的 `background-image` 会被微信正文渲染器清掉
- 禁 `position:absolute` / `float`；横向分栏用 `inline-block` + 父容器 `font-size:0`
- `blockquote` 底色必须够深 —— pandoc 会往里塞 `<p>`，`<p>` 被注入主题正文样式，会同时盖掉 blockquote 的字号和颜色

> 🔴 **「本地 Chrome 渲得出来」≠「微信渲得出来」。** 涉及背景图 / 新组件的改动，一律推草稿到手机真看一眼再收工。

---

## 🔴 硬边五铁律

和剪纸风的「手工感五铁律」**方向完全相反** —— 剪纸风靠「不完美」取胜，几何风靠「绝对干净」取胜。

1. **零阴影、零渐变、零圆角** —— 除圆形本身之外，任何一处圆角都会让整页塌回普通 PPT
2. **格子严丝合缝咬合** —— 禁 gap、禁 margin，缝隙是这风格的头号杀手
   > 边界：「咬合」约束的是**画面构成的分割**。并列的独立单元（卡片网格、色板样本这类列表项）之间留间距是对的，那不是一个被切开的画面。
3. **米白呼吸格 ≥ 12%，且必须成块** —— 专治「成坨没呼吸感」。碎成四周边距的留白等于没有留白
4. **每页几何族 ≤ 4 类** —— 圆族 / 三角族 / 条纹族 / 矩形，**族内变体不限**（一页上有圆和半圆不杂），跨族堆到第五类就开始乱
5. **至少一处出血切断** —— 图形被画面边缘切掉，暗示画外还在继续。全部图形缩在安全区里，画面立刻小家子气

**可判定**：上面五条都能写成检查脚本（族计数、留白占比、出血检测、圆角/阴影扫描）。

---

## 资源导览

```text
styles/geo-collage/
├── SKILL.md                       ← 你在读
├── README.md                      ← 风格定位 / 视觉语言 / 使用说明
├── demo.html                      ← PPT 模板（20 示例页 = 20 版式全菜单）
├── xhs-template.html              ← 小红书第一组（8 卡型）
├── xhs-colors.html                ← 小红书第二组（8 卡型，配色主题）
├── scripts/
│   ├── export-pptx.py             ← PPTX 双模式导出（editable 形状+文本框 / fidelity 保真）
│   ├── shot.py                    ← 批量出 PNG（playwright；🔴 别改回 headless Chrome）
│   ├── check-overlap.py           ← 逐页体检：文字出画布 / 被后续色块盖住
│   ├── preview-wechat.py          ← 公众号本地预览（样式直接读主题 JSON）
│   └── gen-wechat-themes.py       ← 从 PPT 色板生成公众号主题（含对比度自动纠正）
└── references/
    ├── themes.md                  ← 7 套流派配色总表 + 换肤机制 + 提色加新套的方法
    ├── grid-layouts.md            ← 20 种网格版式骨架 + 底色节奏 + 按内容型选版式
    ├── geo-primitives.md          ← 23 个几何原子 + PPTX 形状映射 + 导出等级
    ├── wechat-components.md       ← 公众号 11 组件 + 微信管线硬约束 + 字号色板
    └── image-prompts.md           ← 几何风配图七段配方 + 隐喻词典（先判断「该不该生成」）
```

**加载顺序**：SKILL.md →（Step 2 后）themes.md → grid-layouts.md → 动手写页 → 自检。
geo-primitives.md 在需要微调样式或加组件时查。

依赖：`shot.py` / `check-overlap.py` 需要 playwright（`pip install playwright && playwright install chromium`），`export-pptx.py` 需要 python-pptx。模板本身零依赖。

---

## 设计哲学

1. **一页一件事** —— 每页一个论点、一个视觉动作；贪多就拆页
2. **网格即层级** —— 哪格大、哪格是米白、哪格出血，眼睛就按这个顺序走。排版不是「排得好看」，是**把结构画出来**
3. **文字也是色块** —— 超大数字、竖排标题、全大写拉丁，排版本身是构成的一部分
4. **零成本是副产品，不是目的** —— 纯 CSS 的真正好处不是省 API 费，是改一个字就是改一个字，以及导出 PPTX 时能落成原生形状
5. **工艺正确只是及格，美感层才是分数** —— 留白、主次、色的克制，每页都要过美感自检（这条从剪纸风继承）

---

## ⚠️ 未完成（如实记录）

| # | 缺口 | 影响 | 下一步 |
|---|---|---|---|
| 1 | 公众号主题未过微信实机 | 组件可能被微信重排 / 剥除 | 拿一篇真文章推草稿 → 手机看 → 按组件库末尾的兜底方案改 |
| 2 | 7 套配色只有 t1 在真实演讲验证过 | 其余 6 套只过了对比度计算（56 组前景/背景全部 ≥4.5） | 用一次就补一次实战记录 |
| 3 | PPTX 未在真 PowerPoint 里开过 | QC 走的 LibreOffice，字体会被替换 | 导出后在 Keynote / PowerPoint 里开一次确认 |

