高美学知识卡片生成系统 — 从 SVG 到社交媒体一键发布
- SVG-First 矢量架构 — Jinja2 模板驱动，设计 Token 参数化，支持 14 套配色方案
- 300dpi 印刷级渲染 — CairoSVG 高精度输出 PNG / JPEG，中文排版像素级还原
- 原生可编辑 PPTX — DrawingML 混合导出，文字双击即可修改（非贴图方案）
- 微信公众号一键贴图 — 自动渲染 → 上传永久素材 → 创建贴图草稿 → 发布
- 28 个内置主题 — 思维模型、商业洞察、AI 实践等，开箱即用
- 本地画廊预览 — Web UI 浏览所有卡片，选中配色一键发布到微信
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt系统依赖：需要安装 Cairo。macOS:
brew install cairo
python3 run_test.py产出：
web/projects/first_principles/svg_output/→ SVG 源码web/projects/first_principles/exports/page_XX.png→ 300dpi 高清卡片web/projects/first_principles/exports/first_principles.pptx→ 可编辑 PPTX
# 查看所有内置主题
python3 batch_render.py --list
# 渲染全部 28 个主题
python3 batch_render.py
# 仅渲染指定主题
python3 batch_render.py --ids antifragile first_principles flywheel_effectpython3 build_gallery.py
python3 scripts/preview_server.py --port 8000打开 http://localhost:8000 浏览作品画廊。
cp .env.example .env
# 编辑 .env，填入公众号的 AppID 和 Secret- 启动预览服务器：
python3 scripts/preview_server.py --port 8000 - 打开
http://localhost:8000 - 点击任意主题卡片 → 选择配色方案 → 点击 「发布贴图」
- 系统自动执行：渲染 SVG → 导出 PNG → 上传永久素材 → 创建贴图草稿 → 发布
贴图格式：使用微信公众号
newspic类型（图片消息），在「看一看」信息流中获得公域流量推荐。
ai-card/
├── batch_render.py # 全主题一键批量渲染入口
├── build_gallery.py # 作品画廊数据生成器
├── run_test.py # 端到端测试脚本
├── requirements.txt # Python 依赖
├── .env.example # 微信凭证模板
│
├── topics/ # 28 个主题配置（JSON 元数据）
│ ├── first_principles.json
│ ├── antifragile.json
│ └── ...
│
├── scripts/ # 核心引擎
│ ├── template_engine.py # SVG 模板渲染引擎（Jinja2）
│ ├── design_system.py # 配色、字体、纹理 Token 定义
│ ├── categories.py # 16 大内容分类及场景配置
│ ├── render_card.py # SVG → PNG/JPG 300dpi 渲染
│ ├── export_pptx.py # DrawingML 可编辑 PPTX 导出
│ ├── quality_check.py # SVG 静态合规性质量检查
│ ├── topic_loader.py # 主题 JSON 加载器
│ ├── audit_tools.py # 文本溢出审计工具
│ ├── wechat_publisher.py # 微信公众号贴图发布客户端
│ └── preview_server.py # 本地预览服务器（含发布 API）
│
├── templates/ # Jinja2 SVG 模板
│ ├── _footer.svg.j2 # 共用页脚组件
│ ├── cover.svg.j2 # 封面模板
│ ├── content.svg.j2 # 内容页模板
│ ├── closing.svg.j2 # 收尾模板
│ ├── quote.svg.j2 # 金句模板
│ ├── poster.svg.j2 # 海报模板
│ └── data.svg.j2 # 数据页模板
│
└── web/ # 前端展示
├── index.html # 作品画廊页面（配色切换 + 微信发布 UI）
├── gallery_data.json # 画廊元数据（自动生成）
└── projects/ # 各主题项目目录
└── {topic_id}/
├── content.json # 页面内容数据
├── svg_output/ # 渲染的 SVG（.gitignore 排除）
└── exports/ # PNG / PPTX 导出（.gitignore 排除）
# 查询配色方案
python3 scripts/design_system.py --list-palettes
# 查询内容分类
python3 scripts/categories.py --list
# SVG → PNG 渲染
python3 scripts/render_card.py web/projects/first_principles/svg_output/ \
--format png --output-dir web/projects/first_principles/exports/
# PPTX 导出
python3 scripts/export_pptx.py web/projects/first_principles/ \
--output web/projects/first_principles/exports/first_principles.pptx
# 质量检查
python3 scripts/quality_check.py web/projects/first_principles/svg_output/ \
--palette dark_amber
# 文本溢出审计
python3 -m scripts.audit_tools overflow默认使用 dark_amber（暗底琥珀金），另有 13 套配色可选。每套配色定义了：
bg背景色 /fg前景色 /accent强调色 /muted辅助色- 三层呼吸底纹（radial gradient + 点阵 + 线性渐变）
- 标题：宋体衬线栈（Songti SC → Noto Serif SC → Source Han Serif SC）
- 正文：黑体无衬线栈（PingFang SC → Noto Sans SC → Source Han Sans SC）
- 画布规格：3:4 竖版（1080 × 1440px），适配社交媒体分享
系统设立了 7 条最高优先级视觉规范，确保 AI Agent 自主生成时的视觉一致性：
| 条款 | 规则 |
|---|---|
| §1 页码 | 两位零填充 01 / 03，禁止 Unicode 圈号 |
| §2 页脚 | 强制 {% include '_footer.svg.j2' %}，禁止内联 |
| §3 上下文 | 必传 palette / typo / texture / page_label 等变量 |
| §4 导航条 | 内容页顶部横线前导导航，accent 色 3px 圆角 |
| §5 高亮 | [[文本]] 自动解析为 accent 色 tspan |
| §6 文案 | 口语化短句，菱形列表，反问收尾 |
| §7 幽灵字 | 封面/收尾页右上角巨型首字，opacity 0.04~0.06 |
- 创建
topics/my_topic.json：
{
"id": "my_topic",
"topic": "我的主题",
"topic_en": "My Topic",
"category_id": "thinking_models",
"scenario_id": "practical",
"palette_id": "dark_amber"
}-
创建
web/projects/my_topic/content.json（页面内容数据） -
渲染：
python3 batch_render.py --ids my_topic
topics/*.json ──┐
├─→ topic_loader.py 合并
content.json ───┘ │
├─→ template_engine.py（注入 Token + 纹理）→ SVG
├─→ quality_check.py（静态校验）→ PASS / FAIL
├─→ render_card.py（CairoSVG）→ 300dpi PNG
├─→ export_pptx.py（DrawingML）→ 可编辑 PPTX
└─→ wechat_publisher.py → 微信贴图发布
MIT © AI Card Contributors