jane-xiaoer 小耳几何风 · Xiaoer Geo Collage
把内容切成格子，每一格只做一件事。画面被切成不等分模块，每格独占一个几何动作，格与格严丝合缝 —— 网格本身承担信息层级，而不是靠字号大小。
血统：Bauhaus 的模块化网格、Swiss International Typographic Style 的排版秩序、俄国构成主义的色块对撞。 工程内核：从一份真实演讲 deck（23 页，实际上台跑过）提炼，色板、几何原子库、duotone 照片系统全部继承下来。
🎯 这套东西为什么存在
目的只有一个：美学，和不一样。
市面上的物料有两个坑，这套风格系统就是为了绕开它们：
- 普通 PPT 的模板味 —— 圆角卡片、渐变按钮、阴影层叠、图标堆砌。谁做都长一个样。
- 「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 · 拷模板 + 填版式
mkdir -p "项目/XXX/ppt"
cp styles/geo-collage/demo.html "项目/XXX/ppt/index.html"
模板完整可运行，内置 20 个示例页 = 20 种版式全菜单。然后：
- 立刻替换
<title>等[必填]占位 - 打开
references/grid-layouts.md，按大纲从 20 种骨架里挑，整段粘贴改文案 —— 不要从零写页，不要发明新类名 - 遵守下方「硬边五铁律」和
references/geo-primitives.md - 微调只改 inline style（px 单位，画布固定 1600×900）
Step 5 · 自检
python3 styles/geo-collage/scripts/shot.py index.html /tmp/check --size 1600x900 --pages 1-20
逐张人眼过一遍，重点看：留白够不够、有没有格子留缝、每页是不是只讲一件事。
Step 6 · 交付
open index.html 直接帮用户打开（不要给路径让用户自己找）。操作：滚轮 / 键盘 ←→↑↓ / 空格翻页，点左侧 28% 回退，URL 带 #页号 直达。
要 PPTX？ 两个模式，按「交给谁」选：
# 可编辑：色块→原生形状，文字→真文本框。给别人继续改用这个
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），复用同一套色板和几何原子，字号体系放大（手机上看）。
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 可直接分发。
- 选主题：14 套在
assets/wechat-themes/geo-collage*.json（geo-collage-tN浅底 /geo-collage-dark-tN深底满宽，深底是这套风格的主推） - 本地预览：
python3 styles/geo-collage/scripts/preview-wechat.py 文章.md --theme geo-collage-dark-t3 - 嵌组件：按
references/wechat-components.md在关键位置嵌 raw HTML（11 个组件） - 配图（可选）：按
references/image-prompts.md生成；先拍板配色再生成图（图的色板是烤死的，不跟换肤走） - 传图：
python3 scripts/upload-body-images.py 文章.md - 推草稿：接自己的公众号发布管线，只到草稿箱，发布永远由用户在后台手动点
配色改动 → 改 demo.html 的 body.tN → 重新生成，别手改 JSON：
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 渲得出来」≠「微信渲得出来」。 涉及背景图 / 新组件的改动，一律推草稿到手机真看一眼再收工。
🔴 硬边五铁律
和剪纸风的「手工感五铁律」方向完全相反 —— 剪纸风靠「不完美」取胜，几何风靠「绝对干净」取胜。
- 零阴影、零渐变、零圆角 —— 除圆形本身之外，任何一处圆角都会让整页塌回普通 PPT
- 格子严丝合缝咬合 —— 禁 gap、禁 margin，缝隙是这风格的头号杀手
边界：「咬合」约束的是画面构成的分割。并列的独立单元（卡片网格、色板样本这类列表项）之间留间距是对的，那不是一个被切开的画面。
- 米白呼吸格 ≥ 12%，且必须成块 —— 专治「成坨没呼吸感」。碎成四周边距的留白等于没有留白
- 每页几何族 ≤ 4 类 —— 圆族 / 三角族 / 条纹族 / 矩形，族内变体不限（一页上有圆和半圆不杂），跨族堆到第五类就开始乱
- 至少一处出血切断 —— 图形被画面边缘切掉，暗示画外还在继续。全部图形缩在安全区里，画面立刻小家子气
可判定：上面五条都能写成检查脚本（族计数、留白占比、出血检测、圆角/阴影扫描）。
资源导览
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。模板本身零依赖。
设计哲学
- 一页一件事 —— 每页一个论点、一个视觉动作；贪多就拆页
- 网格即层级 —— 哪格大、哪格是米白、哪格出血，眼睛就按这个顺序走。排版不是「排得好看」，是把结构画出来
- 文字也是色块 —— 超大数字、竖排标题、全大写拉丁，排版本身是构成的一部分
- 零成本是副产品，不是目的 —— 纯 CSS 的真正好处不是省 API 费，是改一个字就是改一个字，以及导出 PPTX 时能落成原生形状
- 工艺正确只是及格，美感层才是分数 —— 留白、主次、色的克制，每页都要过美感自检（这条从剪纸风继承）
⚠️ 未完成（如实记录）
| # | 缺口 | 影响 | 下一步 |
|---|---|---|---|
| 1 | 公众号主题未过微信实机 | 组件可能被微信重排 / 剥除 | 拿一篇真文章推草稿 → 手机看 → 按组件库末尾的兜底方案改 |
| 2 | 7 套配色只有 t1 在真实演讲验证过 | 其余 6 套只过了对比度计算（56 组前景/背景全部 ≥4.5） | 用一次就补一次实战记录 |
| 3 | PPTX 未在真 PowerPoint 里开过 | QC 走的 LibreOffice，字体会被替换 | 导出后在 Keynote / PowerPoint 里开一次确认 |