Editorial Card Designer

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: