Agent Skill · Editorial Design · Swiss / International Typographic Style
Density / High  ·  Ratio / 16:9

awesome-skills · skills/editorial-card-designer

让任意一段文字
秒变杂志级信息卡

一款开源的 Agent Skill：把一段纯文字转成瑞士国际主义风格的高密度编辑卡， 并直接输出像素级对齐的 PNG。大模型写文案、大模型排网格、无头 Chrome 截图 —— 全流程可复现，跳过 Figma / Keynote / Canva 的导出循环。

01 · Workflow

三步从文字到封面

  • 生成 HTML — 基于 card-template.html 的最小骨架，匹配目标画布尺寸与比例。
  • 无头 Chrome 截图 — capture_card.sh your.html out.png 16:9 一键出图。
  • 可选裁底 — trim_card_bottom.sh 按背景色自动裁掉残留留白。
Deliverable · HTML + 像素级 PNG
02 · Guarantees

为什么「看上去就对」

  • 像素级还原：--force-device-scale-factor=1，1920×1080 就是真 1920×1080。
  • 可预测字体栈：Noto Serif/Sans SC + Oswald + Inter，强制本地回退，不塌 Times。
  • 底部留白兜底：Pillow 检测背景色自动裁边，成品永远填满画面。
Reliability · 不用再猜 DPI 与字体
03 · Upgrades vs Upstream

本仓做了哪些加固

  • 重命名：突出「设计 + 截图」双阶段产出。
  • 显式依赖声明：Chrome / Python + Pillow 全列入 metadata。
  • 跨平台：重写 Chrome 解析顺序，脚本改用 #!/usr/bin/env bash。
  • 受众隔离：英文 SKILL.md 与中文 prompt 彻底分离。
Fork Delta · Based on shaom/infocard-skills