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