1nfinix-editorial-card-screenshot

Editorial Card Screenshot

Overview

Turn source text into an editorial-style HTML information card, then capture it as a PNG in a supported ratio. The priority is editorial hierarchy plus stable rendering: no clipped Chinese text, no accidental cropping, and no large dead zones in the lower half.

Default deliverables unless the user asks otherwise:

1. One complete HTML file with embedded CSS.
2. One PNG screenshot rendered from that HTML.

Workflow

1. Analyze Content Density

Choose layout strategy from the content itself:

• Use "big-character" composition when content is sparse and a single phrase, number, or hook can carry the page.
• Use a two-column or three-column editorial grid when content is dense and needs stronger hierarchy.
• Use oversized numbers, heavy rules, tinted blocks, and pull-quote scale to avoid dead space.
• Do not force dense content into evenly weighted tiles. Build primary blocks, secondary blocks, and lighter supporting blocks.
• Match structure to content type:
  • Ranking / recommendation content: allow asymmetric hero + structured list.
  • Tutorial / analysis / interpretation content: group into overview, core judgment, interpretation, boundary, and conclusion.

Before compressing content, first change the layout skeleton.

• Ratio changes should primarily change reading path, hierarchy, and module arrangement.
• Do not treat ratio changes as a reason to delete content by default.
• Only compress, group, or summarize when the current ratio cannot hold the content clearly after layout has already been restructured.

2. Apply the Editorial Defaults

Use these defaults unless the user overrides them:

• Import Google Fonts:

  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  

• For Chinese text, always declare local CJK fallbacks before generic serif/sans-serif fallbacks. Prefer:

  font-family: "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-family: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  

• Keep body text around 18px to 20px on a 900px-wide composition.
• Keep meta/tag text at 13px minimum.
• Use compact spacing: outer padding 40px to 50px, module gaps 30px to 40px, line-height 1.5 to 1.6.
• Add visual anchors with 4px to 6px accent rules, subtle gray planes, and a light noise overlay.
• Favor warm-paper backgrounds such as #f5f3ed unless the user specifies another palette.
• For Chinese-heavy cards, shorten dense column line lengths and always add overflow-wrap / word-break guards.
• If the user provides a title, use it as the main headline by default. Expand the layout before rewriting or shortening it.
• Avoid equal-weight boxes on dense cards. At least one module should feel visually heavier than the others.
• Do not hard-code signatures, creator handles, or personal branding unless requested.