info-card-designer

Info Card Designer

Convert any content into a magazine-quality info card, with automatic screenshot + ultra-long splitting, suitable for sharing on X/Twitter and Xiaohongshu.

Workflow

Step 1: Analyze content density

• Low density(1 core point) → large-characterism layout
• Medium density(2-4 key points) → standard single-column layout
• High density(5+ key points) → multi-column grid layout

Step 2: Generate HTML

Read references/design-spec.md to get the complete specification.

Hard constraints：

• Card width: default 600px, can specify 480 / 600 / 900 (takes effect when the user says "480 wide"/"900 wide")
• <meta name="viewport" content="width=[指定宽度]"> anti-scaling
• Background color #f5f3ed
• When screenshotting, set resize_page width to the specified width

Font sizes use vw units, automatically scaling with width：

• Main title:font-size: clamp(40px, 13vw, 130px) — 480px→62px / 600px→78px / 900px→117px
• Item title:font-size: clamp(16px, 4vw, 40px) — 480px→19px / 600px→24px / 900px→36px
• Body:font-size: clamp(14px, 3.2vw, 24px) — 480px→15px / 600px→19px / 900px→28px
• Auxiliary/tags:font-size: clamp(11px, 2.2vw, 16px)

Content principles (mandatory)：

• Card content must be 100% from the original text/URL/text provided by the user; fabricating or using placeholders is strictly prohibited
• Title, description, source, and key quotes must all be consistent with the original text; Hook rewriting only changes the expression, not the facts

Description style (Hook mode, enabled by default)：

• Rewrite each description as a 10-20 character hook sentence, informative + impactful
• Keep the core facts, use active voice, make readers want to click in and read
• Disabled when the user says "keep the original text" or "don't change the description"

Save path:/tmp/info-card-[关键词].html

Step 3: Screenshot (must be executed)

Prefer Chrome DevTools MCP, choose the corresponding devicePixelRatio based on the card width (ensure the output PNG falls in the 1200-1800px sweet spot):

Card width	devicePixelRatio	Output PNG width
480px	3x	1440px
600px	2x	1200px
900px	2x	1800px

1. navigate_page → file:///tmp/info-card-xxx.html
2. emulate → viewport=[宽度]x900x[倍率](e.g. use 480x900x3for a 480px card, use 600x900x2）
3. resize_page → width=[width], height=900
4. take_screenshot → fullPage=true, filePath=[initial path]

Why not uniformly 3x: 900px × 3x = 2700px, the file is too large and social platforms will compress it, with diminishing returns; because 480px has a small CSS width, 3x is needed to ensure the 1440px output is not blurry.

Step 4: Ultra-long splitting

After screenshotting, check the image height.If the height > 1200px, perform splitting:

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

After splitting, output card-1.png, card-2.png ... and other files.

Step 5: Organize and output

Save path rules：

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

Example:info-cards/20260316-wisereads-134/card-1.png

Folder name format:日期-来源-主题, clear at a glance

Tell the user: image path + total number of images

---

Design quick reference

See the complete specification at references/design-spec.md。

Scenario	Layout	Main title font size	Body font size
Low density	Large characterism	72-120px	20px
Medium density	Standard single column	48-56px	18px
High density	2-3 column grid	36-44px	16px

Font: Heading Noto Serif SC; Body Inter / Noto Sans SC

Color scheme: Indigo #1a3a6b(Knowledge) / Crimson #c0392b(Warning) / Dark green #1a4a3a(Life) / Dark gold #8b6914(Finance)