Editorial Card Screenshot

Editorial Card Screenshot

Overview

Turn source text into a compact, high-contrast HTML information card that follows the user's editorial prompt, then render a screenshot in one of the supported aspect ratios. The goal is not just density but editorial quality: clear hierarchy, strong visual anchors, and screenshot-stable rendering without accidental cropping or dead space.

Always preserve three output stages unless the user explicitly asks to skip one:

1. Write one sentence judging the information density as high, medium, or low.
2. Output the complete HTML with embedded CSS.
3. Self-check that body text remains readable on mobile.

Workflow

1. Analyze Content Density

Read references/content-fit.md. Inventory semantic units, estimate density, and choose layout strategy from both density and ratio:

• 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.
• Write a short space-allocation plan before final HTML. Assign approximate area to hero, primary module, support area, and footer.
• Do not use the starter template's current arrangement as evidence that it is the right skeleton.

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 Stored Editorial Rules

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">
  

• Keep body text at 18px to 20px on a 900px-wide composition.