Info Card Designer - 自动生成杂志质感信息卡，适配X/Twitter、小红书分享，支持内容密度分析与超长分割

info-card-designer by joeseesun/info-card-designer

137 周安装量

25 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/joeseesun/info-card-designer --skill info-card-designer

内容创作自动化设计

🇨🇳中文介绍

Info Card Designer

将任意内容转化为杂志质感信息卡，自动截图 + 超长分割，适配 X/Twitter、小红书分享。

工作流

Step 1：分析内容密度

低密度 （1 个核心观点）→ 大字符主义布局
中密度 （2-4 要点）→ 标准单栏布局
高密度 （5+ 要点）→ 多栏网格布局

Step 2：生成 HTML

读取 references/design-spec.md 获取完整规范。

硬性约束 ：

卡片宽度：默认 600px ，可指定 480 / 600 / 900（用户说"480宽"/"900宽"时生效）
<meta name="viewport" content="width=[指定宽度]"> 防缩放
背景色 #f5f3ed
截图时 resize_page width 设为指定宽度

字号用 vw 单位，随宽度自动缩放 ：

主标题：font-size: clamp(40px, 13vw, 130px) — 480px→62px / 600px→78px / 900px→117px

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

Step 3：截图（必须执行）

优先用 Chrome DevTools MCP ，按卡片宽度选择对应 devicePixelRatio（确保输出 PNG 落在 1200-1800px 甜区）：

卡片宽度	devicePixelRatio	输出 PNG 宽度
480px	3x	1440px
600px	2x	1200px
900px	2x	1800px

navigate_page → file:///tmp/info-card-xxx.html
emulate → viewport=[宽度]x900x[倍率]（e.g. 480px 卡片用 480x900x3，600px 用 600x900x2）
resize_page → width=[宽度], height=900
take_screenshot → fullPage=true, filePath=[初始路径]

为什么不统一 3x ：900px × 3x = 2700px，文件过大且社交平台会压缩，收益递减；480px 因 CSS 宽度小，3x 才能保证 1440px 输出不虚糊。

Step 4：超长分割

截图后检查图片高度。若高度 > 1200px，执行分割：

python3 ~/.claude/skills/info-card-designer/scripts/split_card.py [图片路径] 1200

分割后输出 card-1.png, card-2.png ... 等文件。

Step 5：整理并输出

保存路径规则 ：

~/乔木新知识库/60-69 素材/65 附件库/info-cards/
  └── [YYYYMMDD]-[来源]-[主题关键词]/
        ├── card.png          # 未分割时
        ├── card-1.png        # 分割时
        └── card-2.png

示例：info-cards/20260316-wisereads-134/card-1.png

文件夹名格式：日期-来源-主题，一目了然

告知用户：图片路径 + 共几张

完整规范见 references/design-spec.md。

场景	布局	主标题字号	正文字号
低密度	大字符主义	72-120px	20px
中密度	标准单栏	48-56px	18px
高密度	2-3 栏网格	36-44px	16px

字体：标题 Noto Serif SC；正文 Inter / Noto Sans SC

配色：靛蓝 #1a3a6b（知识）/ 深红 #c0392b（警示）/ 墨绿 #1a4a3a（生活）/ 深金 #8b6914（财经）

shadcn/ui 框架：React 组件库与 UI 设计系统，Tailwind CSS 最佳实践

61,800 周安装