Use when converting any content (text, article, data, notes) into a visual image card. Triggers: turn content into image, make a card image, create visual card, generate cover image, content to image, make shareable card, article card, social media image, WeChat cover, info card, visual summary card.
Convert any content (text, articles, data, notes) into a beautiful exportable image card — for article illustrations, cover images, or social sharing.
Design decisions must follow these structural principles, not intuition or decorative instinct.
| Principle | Requirement | Design Action |
|---|---|---|
| Information Compression | Compress complex content into one clear claim | Single focus, remove redundancy, extract core message |
| Attention First | Capture attention in the first 3 seconds | Oversized title/number as visual anchor, de-emphasize secondary info |
| Emotional Trigger | Virality relies on emotion, not aesthetic complexity | Use contrast colors, motion, and tension to create emotional impact |
| Principle | Requirement | Design Action |
|---|
| Clear Hierarchy | Reading path requires no thinking | 3+ font size levels (64px → 24px → 14px), clear primary/secondary |
| Contrast-Driven | Create hierarchy through difference | Pull apart size, color, position, weight simultaneously |
| Whitespace & Restraint | Control element count, preserve breathing room | 16-28px spacing between elements, avoid filling every corner |
| Principle | Requirement | Design Action |
|---|---|---|
| System Consistency | Follow a unified visual system | Fixed color palette, font stack, spacing system — no one-off creativity |
| Replicable | Modular, templated, scalable | Consistent component structure, variable colors/text, batch-generatable |
| Thumbnail Legible | Core info readable at tiny size | Title/key data occupies 40%+ of area, avoid detail-dependency |
| Principle | Requirement | Design Action |
|---|---|---|
| Cognitive Load Reduction | Reduce mental cost of reading, judging, understanding | One block = one message, avoid competing tasks |
Priority order: Information Compression > Clear Hierarchy > Attention First > Others
1.1 Check user input
IF user input is empty THEN
Output: "Please provide content text, or tell me where to read it (URL, file path, or paste text)"
Wait for user input
ELSE
Proceed to 1.2 Content Analysis
END IF
1.2 Content Analysis
Analyze user content and identify these dimensions:
| Attribute | Evaluation Points | Example |
|---|---|---|
| Content Type | Data report / Opinion piece / Product intro / News / Personal brand | "Q3 revenue +30%" → Data report |
| Emotional Tone | Serious/professional / Lighthearted / Tech-future / Classic/retro / Rebel/avant-garde | "Disrupting the industry" → Rebel |
| Information Density | High (many data points) / Low (single focus) | 5 points + 3 data → High density |
| Target Audience | Business / Youth / Tech community / General public / Industry experts | "Series B funding" → Business/investors |
| Distribution Channel | Social media / Newsletter / Industry report / Brand / Portfolio | "Xiaohongshu share" → Social media |
1.3 Recommend Design Style
Based on content attributes, recommend the 4 best-matching styles from these 8 classic digital media styles:
| Style | Visual Traits | Best For | Color Tendency |
|---|---|---|---|
| Bauhaus Modernism | Geometric composition, functionalism, no decoration | Structured content, tech topics, education | Primary red/yellow/blue + B&W |
| Swiss International | Grid system, sans-serif, strong order | Data reports, academic content, professional news | B&W dominant + single accent |
| Memphis | High-contrast colors, decorative shapes, visual tension | Youth audience, creative content, events | Vibrant clashing colors |
| Apple Minimal Tech | Large whitespace, bold visuals, restrained typography | Product intro, brand identity, premium positioning | Black/white/gray + brand accent |
| Wired Digital Futurism | Experimental typography, tech composition, info-dense | Tech news, cutting-edge topics, data viz | Dark background + neon accents |
| MTV Visual Collage | Rebellious, image overlay, dynamic symbols | Pop culture, youth topics, entertainment | High saturation, strong contrast |
| NYT Classic Press | Rigorous layout, strong structure, authoritative | Long-form reporting, analysis, professional commentary | B&W + newsprint/red accents |
| Monocle Contemporary | Restrained palette, balanced text/image, ordered | Lifestyle, brand stories, profiles | Low saturation, warm tones |
Matching rules:
Content Attribute → Recommended Styles (priority order)
──────────────────────────────────────────────────────────────────
Serious/professional + data → Swiss / NYT / Bauhaus / Apple
Tech-future + cutting-edge → Wired / Apple / Swiss / Bauhaus
Youth + lively → Memphis / MTV / Apple / Monocle
Brand + premium → Apple / Monocle / Swiss / Bauhaus
Rebel + creative → MTV / Memphis / Wired / Bauhaus
Classic + in-depth → NYT / Monocle / Swiss / Apple
Lifestyle + restrained → Monocle / Apple / Swiss / Bauhaus
1.4 Parameter Selection
Ask user to confirm 4 dimensions:
| Dimension | Options | Default | Recommendation |
|---|---|---|---|
| Aspect Ratio | 9:16 / 3:4 / 1:1 / 4:3 / 16:9 / 2.35:1 | 9:16 | Based on target platform |
| Design Style | Choose from 4 recommended in 1.3 | First recommendation | Matched to content attributes |
| Content Mode | Full / Condensed | Full | Condensed for high-density content |
| Add-ons | Screenshot tool / Noise texture / None | Screenshot tool | Based on needs |
Aspect ratio guidance:
1.5 Clarification
Before proceeding to Step 2, confirm with user if any of the following are unclear:
Generate a complete HTML file following the specs below. File must be written to the system temp directory:
/tmp/visual-card-<timestamp>.html%TEMP%\visual-card-<timestamp>.html/* Container must use fixed pixel dimensions, all content must fit without scrolling */
.card-wrapper {
width: {width}px;
height: {height}px;
overflow: hidden; /* required */
position: relative;
}
All content must fit within the fixed container without scrolling. Estimate content volume before generating, then adjust font size and spacing by item count:
Space utilization (CRITICAL): Content must fill the container. No large empty areas.
Rules to prevent whitespace:
flex: 0 1 auto not flex: 1 on content areas
/* GOOD */
.content-area { flex: 0 1 auto; }
/* BAD */
.content-area { flex: 1; }
flex: 1 inside cards; let content decide height
/* GOOD */
.section-card { padding: 20px 28px; }
/* BAD */
.section-card { flex: 1; display: flex; flex-direction: column; }
grid-template-rows and grid-template-columns with 1fr to fill remaining spacejustify-content: space-between for even vertical spacingCore rule: Large bold primary text + small uppercase English accents = strong visual contrast.
.hero-title { font-size: 64-80px; font-weight: 800; }
.hero-number { font-size: 48-72px; font-weight: 900; }
.en-subtitle { font-size: 14-18px; letter-spacing: 2-4px; text-transform: uppercase; opacity: 0.6; }
.body-text { font-size: 18-24px; line-height: 1.5-1.6; }
Font stack:
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Noto Sans SC", sans-serif;
Load a professional icon library via CDN. Never use emoji as primary icons.
<!-- Choose one -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- or -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
Use icons for: category labels, data metrics, list prefixes, decorative elements.
Accent color rule: use each accent color independently with opacity gradients. Never blend different accent colors in a single gradient.
/* GOOD: single-color opacity gradient */