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 · 拷模板 + 填版式

bashCopy code
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 · 自检

bashCopy code
python3 styles/geo-collage/scripts/shot.py index.html /tmp/check --size 1600x900 --pages 1-20

逐张人眼过一遍，重点看：留白够不够、有没有格子留缝、每页是不是只讲一件事。

Step 6 · 交付

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

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

bashCopy code
# 可编辑：色块→原生形状，文字→真文本框。给别人继续改用这个
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 模式的已知边界（实测，不是推测）：

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

工作流 B · 小红书卡片

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

bashCopy code
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：

bashCopy code
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. 至少一处出血切断 —— 图形被画面边缘切掉，暗示画外还在继续。全部图形缩在安全区里，画面立刻小家子气

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

资源导览

textCopy code
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. 工艺正确只是及格，美感层才是分数 —— 留白、主次、色的克制，每页都要过美感自检（这条从剪纸风继承）

⚠️ 未完成（如实记录）