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.

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#

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

Use these defaults unless the user overrides them:

• Import Google Fonts: html

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

• Keep meta/tag text at 13px minimum.

• Use compact spacing: container padding 40px to 50px, component gaps 30px to 40px, line-height 1.5 to 1.6.

• Add visual weight with 4px to 6px accent rules, subtle gray planes, and 4% noise overlays.

• Favor #f5f3ed or similar warm-paper backgrounds unless the user supplies another palette.

• Preserve breathing room. Do not shrink outer margins so much that the card loses composure.

• For title zones, prefer larger line-height and clearer separation from subtitle / summary blocks.

• In dense right-side modules, reduce font weight slightly so the page stays clear without feeling heavy.

• Use stronger internal structure inside blocks: subheads, bullets, numbered lines, compare rows, or secondary labels.

• Avoid equal-weight boxes when the card is dense. At least one module should feel visually heavier than the others.

3. Choose the Right Layout Skeleton#

Pick ratio-specific structure before writing final copy.

4:3

• Best for full analytical spread or ranked lists.
• Prefer: hero + summary band + dense two-column list + stronger footer.
• Use one main judgment block before the list so the page does not become a flat wall of 10 equal items.

3:4

• Keep the same information ambition, but change the reading path.
• Prefer: title band + insight row + mixed large/small body modules.
• Use mixed scales: one heavy primary block, one or two medium blocks, and smaller support blocks.
• Do not let the whole portrait card collapse into a long single column.

1:1

• Best for ability map, grouped comparison, or balanced editorial overview.
• Prefer: strong hero + one heavier quadrant + three supporting quadrants + dense footer strip.
• Square layouts should feel centered and modular, not evenly tiled.

Wide covers ( 3:1, 5:2, 2.35:1)

• Reduce paragraph length aggressively.
• Use fewer but larger blocks, stronger headlines, and short support lines.

4. Build HTML for Rendering#

When HTML will be screenshotted, design the page as a fixed-size canvas instead of a responsive webpage:

• Match the exact pixel dimensions of the selected ratio preset from references/ratios.md.

• Treat the card as a design board with explicit width and height, not as a fluid 100vw / 100vh layout.

• Remove browser-default margins with html, body { margin: 0; }.

• Make the card itself fill the screenshot viewport exactly.

• Avoid interactions, sticky headers, or long scrolling sections.

• Use fixed pixel wrappers, for example: css

  .frame {
    width: 2000px;
    height: 1500px;
  }
  
  .card {
    width: 100%;
    height: 100%;
    padding: 48px;
    background: #f5f3ed;
  }
  
  

Do not rely on 100vw, 100vh, or responsive container widths as the primary design size for screenshot output.

If the user asks only for HTML, still make the layout screenshot-ready.

Use these structural heuristics when composing the card:

• Fill the proportion intentionally. Rebalance layout according to width / height instead of scaling one static template.
• In 4:3 landscape, asymmetric left-right layouts often work best for dense analytical content.
• In 3:4 portrait, use portrait-friendly mixed grids rather than a single narrow column.
• Keep title, subtitle, summary, and modules separated by explicit rows or bands so they do not collide.
• If using numbered modules, keep numbers visually weak enough that they never collide with titles.
• If a section becomes visually monotonous, introduce contrast through hierarchy changes rather than decorative clutter.
• Let big modules carry richer copy than small modules. Do not give every block the same amount of text.

5. Capture the Screenshot#

Use the bundled shell script when the user wants a PNG output:

bash

./scripts/capture_card.sh input.html output.png 3:4

Supported ratios and render sizes live in references/ratios.md.

The rendering helper requires a local Chrome or Chromium binary. It first respects CHROME_BIN when set, then falls back to common binary names and a macOS Chrome app path.

Before running the script:

• Save the generated HTML to a local file.
• Ensure the page is self-contained except for fonts.
• If you keep the default font imports, rendering will request Google Fonts over the network.
• Ensure the HTML uses a fixed-size design canvas that matches the chosen ratio preset.
• Ensure the viewport composition already matches the requested ratio.

6. Ratio Policy#

Accept only these ratio presets:

• 3:4
• 4:3
• 1:1
• 16:9
• 9:16
• 2.35:1
• 3:1
• 5:2

If the user gives a ratio outside this set, ask them to map it to the nearest supported preset rather than inventing a new one.

Output Contract#

When responding to a card-generation request:

• Start with exactly one sentence describing information density.
• Then output complete HTML in one code block.
• If the user also requested an image, state the ratio used and the screenshot command after the HTML.
• Keep prose short; the HTML is the deliverable.

Resources#

references/ratios.md#

Open this when you need the exact preset names or capture dimensions.

references/editorial-card-prompt.md#

Use this as the canonical prompt spec when the user wants the latest validated editorial-card behavior.

scripts/capture_card.sh#

Run this to capture a PNG from a local HTML file using a supported ratio preset. It requires a local Chrome or Chromium binary or an explicit CHROME_BIN override.

assets/card-template.html#

Use this as a starting shell when you want a minimal ratio-ready HTML canvas before filling in real content.

Failure Checks#

Before finalizing HTML or PNG, explicitly reject the result if any of these happen:

• The title overlaps, visually collides with, or blocks summary/body content.
• The title becomes a narrow vertical strip when more horizontal width is available.
• Dense cards are split into too many equal-weight boxes.
• Large blocks contain too little copy and read like empty containers.
• The canvas shows large areas of dead space that could be filled by stronger hierarchy, richer block content, or a heavier main module.
• The PNG feels meaningfully emptier than the HTML layout intent.