` directly in the HTML
```bash
# Quick base64 inline pattern
python3 -c "
from PIL import Image
import base64
img = Image.open('source.png').convert('RGB')
img.thumbnail((640, 640))
img.save('out.jpg', 'JPEG', quality=88, optimize=True)
data = base64.b64encode(open('out.jpg','rb').read()).decode()
print(f'data:image/jpeg;base64,{data}')
"
```
A 640x640 JPEG @88% typically produces a ~50KB PNG → ~65KB base64 string. Negligible HTML
bloat, total reliability for PNG capture and offline viewing.
### Card dimensions
Each card: `width: 1080px; height: 1350px` (4:5 ratio for Instagram/Threads).
### CRITICAL: Card layout and spacing
Content must fill the full 1080x1350 canvas. Do NOT let text cluster in one corner
with the rest of the card empty. This is the #1 visual quality issue.
**Card container CSS:**
```css
.card {
width: 1080px;
height: 1350px;
padding: 80px 72px;
display: flex;
flex-direction: column;
justify-content: center; /* vertically center content */
box-sizing: border-box;
}
```
**Font size minimums (카드뉴스는 모바일에서 보는 콘텐츠이므로 글씨가 커야 함):**
- Card title / heading: `42px` ~ `56px`, font-weight 800
- Subheading: `32px` ~ `38px`, font-weight 700
- Body text / descriptions: `26px` ~ `30px`, font-weight 400-500
- Number callouts (statistics): `64px` ~ `96px`, font-weight 900
- Footer: `20px` ~ `22px`
- List item text: `26px` ~ `30px`
These are MINIMUM sizes. If the card has less content, scale UP the font sizes
to fill the space rather than leaving empty areas.
**Spacing rules:**
- Use generous `gap` or `margin` between content blocks (at least `32px`)
- Numbered lists should have `48px+` spacing between items
- Stat blocks (e.g., "59% - 더 많은 문서") should be large and spread out,
not compressed into a small area
- If a card has only 3-4 bullet points, increase line-height to `1.8`+
and font-size to fill the vertical space
### CRITICAL: Use `safe center` for vertical centering
`justify-content: center` on a flex column lets content overflow **upward** when it's
taller than the container. Result: hero text bleeds OVER the eyebrow label at the top
of the card. Use the CSS `safe` keyword to fall back to start when content overflows:
```css
.center-y { display: flex; flex-direction: column; justify-content: safe center; }
```
`safe center` centers when content fits, falls back to `flex-start` when it would cause
overflow. Browser support: Chrome 93+, Firefox 71+, Safari 16+. Use it as the default.
### CRITICAL: The `align-items: center` flex pitfall
**The bug:** When you set `align-items: center` on a flex column container, child block
elements (like ``) get sized to their `max-content` width — but the browser computes
that based on the LONGEST WORD, not the longest line. A headline like:
```html
Steal it.
Free.
```
inside an `align-items: center` flex parent gets sized to ~330px (width of "Free." italic),
which then forces "Steal it." to wrap awkwardly into "Steal" / "it." even though the parent
container is 904px wide. This wastes hours of debugging if you don't know the cause.
**The fix:** Don't use `align-items: center` for centering wide hero content. Instead:
```html
Steal it.
Free.
Steal it.
Free.
...lead text...
```
For child elements that need horizontal centering, use `margin: 0 auto` with an explicit
`max-width` instead of relying on `align-items: center`.
### CRITICAL: Hero/lead vertical overlap
Serif display fonts (Instrument Serif, DM Serif Display) at large sizes have descenders
that extend BELOW the CSS line box when `line-height` is set tight (< 1.05). Combined with
a small `margin-top` on the next element, this causes the lead paragraph to visually
overlap the bottom of the hero.
**Mandatory minimums:**
- Hero `line-height: 1.05` minimum (1.08-1.12 for serif)
- Lead `margin-top: 56px` minimum after a multi-line hero (64-80px for safety)
- Use flex `gap: 56px` on the parent instead of per-child margins for predictability
### CRITICAL: Footer wordmark and meta wrapping
Inside a flex `.foot` with `justify-content: space-between`, both the wordmark and meta
text can shrink and wrap when the container has any layout pressure. A wordmark like
"Sundayable." breaking to "Sundaya / ble." is a classic visual disaster.
**Always apply** to wordmark + foot-meta + section eyebrow elements:
```css
.wordmark, .foot-meta, .meta {
white-space: nowrap;
flex-shrink: 0;
}
```
### CRITICAL: Italic emphasis text width
Italic display fonts (DM Serif Display Italic, etc.) are typically 10-15% wider than
their upright counterparts. A phrase like "whole skill" in italic at 132px can grow to
~880px and barely fit (or overflow) a 904px container.
**Mandatory rule: italic emphasis MUST stay on a single line.** When italic emphasis
wraps mid-phrase ("who ever / lived"), it loses brand voice impact. Apply globally:
```css
em.emph {
font-family: var(--font-display);
font-style: italic;
color: var(--burgundy);
font-weight: 400;
white-space: nowrap; /* mandatory */
}
```
The autofit script will shrink the hero font as needed to make the nowrap-italic fit.
This trades font size (which still reads big) for visual integrity (the italic stays
together as one phrase). Always preferable to a broken italic.
Additional guidelines:
1. Plan italic emphasis on SHORT phrases (1-3 words). "Law of 250" works. "who ever
lived" works (3 words). Whole clauses don't.
2. If a long italic phrase forces hero below ~80px, rewrite the headline shorter.
### CRITICAL: iMessage chat mockup conventions
When showing a conversation in a card (e.g., "Live example"), the user/viewer is the
character the audience identifies with. Follow iOS convention strictly:
- **User / viewer / customer**: RIGHT side, blue iMessage bubble (`#007AFF`),
`border-bottom-right-radius: 6px`
- **Other party** (coach, AI, support, brand): LEFT side, gray (`#E9E9EB`) or dark bubble,
`border-bottom-left-radius: 6px`
Inverting this confuses the reader — they expect to see "themselves" on the right.
**Anti-pattern (DO NOT):**
- Small text clustered in top-left with 60%+ of card empty
- Body text under 24px
- Stat numbers under 48px
- List items squeezed together with minimal spacing
### Color palette
Use the selected brand's color palette (see Brand Templates section).
Apply the brand's primary color for headings/dark backgrounds, accent for highlights/CTAs,
and background color for card backgrounds. Do NOT use pure white (#FFFFFF) as card background
unless the brand explicitly specifies it -- a warm off-white gives a softer, more premium feel.
### Footer
Every card gets a `.card-footer` with the selected brand's footer text. Same text on every card,
no variations, no omissions.
### Year references
Always use the current year. Never hardcode a specific year -- check the current date and use that.
---
## Step 6: Download Button
Add a download section at the bottom of the HTML (after all cards, before ``).
### What it does
1. Renders each card as individual PNG (1080x1350)
2. Bundles them into a ZIP file
3. Downloads with one click
### Libraries to use (EXACT CDN URLs -- copy these exactly)
Use these EXACT script tags. Do NOT change the version numbers. These have been verified to work.
```html
```
CRITICAL version notes:
- dom-to-image-more: Use `@3.1.6` ONLY. Other versions (e.g., 4.x) do NOT exist on jsdelivr and will 404.
- The global variable is `domtoimage` (all lowercase). NOT `domToImageMore`.
- Why not html2canvas: it breaks neumorphism shadows and SVG rendering.
### File naming
- Individual: `{topic}-cardnews-01.png`, `{topic}-cardnews-02.png`, ...
- ZIP: `{topic}-cardnews.zip`
### Font handling for PNG capture
Do NOT try to inline fonts via fetch(). The HTML is opened from file:// protocol where
fetch() is blocked by CORS. The Pretendard font is already loaded and rendered in the browser
via the CSS `` tag -- dom-to-image-more will capture the rendered text as-is.
Simply skip font inlining entirely. No `inlineFontsForCapture()` function needed.
### Download button: complete JS reference
Copy this pattern EXACTLY. Do not modify the library calls or add font inlining.
The key technique: before capturing each card, temporarily set it to `position: fixed`
at top-left with explicit 1080x1350 dimensions. This ensures the card renders at FULL SIZE
regardless of the browser viewport width.
**MANDATORY: include the autofit safety net.** Long copy or inline images can overflow
the 1350px box, pushing footer content off the card. The autofit script defines
`window.autofitCard(card)` and the download loop calls it AT 1080x1350 right before each
PNG capture. This eliminates the timing race where users click download before page-load
autofit finishes, AND guarantees fit at the exact capture dimensions.
**Add this `
```
**Then the download handler MUST call autofitCard per card at the capture size:**
```js
document.getElementById('downloadBtn').addEventListener('click', async function() {
const btn = this;
const status = document.getElementById('downloadStatus');
btn.disabled = true;
status.textContent = '준비 중...';
try {
const cards = document.querySelectorAll('.card');
const zip = new JSZip();
for (let i = 0; i < cards.length; i++) {
status.textContent = `카드 처리 중: ${i + 1}/${cards.length}`;
const card = cards[i];
// Save original inline style
const originalStyle = card.getAttribute('style') || '';
// Force full-size rendering (prevents viewport clipping)
card.style.position = 'fixed';
card.style.left = '0';
card.style.top = '0';
card.style.width = '1080px';
card.style.height = '1350px';
card.style.zIndex = '99999';
card.style.overflow = 'hidden';
card.style.margin = '0';
// Wait for browser reflow at the new size
await new Promise(r => setTimeout(r, 200));
// CRITICAL: re-run autofit at exact 1080x1350 before capture
if (window.autofitCard) await window.autofitCard(card);
await new Promise(r => setTimeout(r, 100));
try {
const png = await domtoimage.toPng(card, {
width: 1080,
height: 1350
});
zip.file(`cardnews-${String(i+1).padStart(2,'0')}.png`, png.split(',')[1], {base64: true});
} catch (cardErr) {
console.warn(`Card ${i+1} failed, retrying...`, cardErr);
await new Promise(r => setTimeout(r, 500));
const png = await domtoimage.toPng(card, { width: 1080, height: 1350 });
zip.file(`cardnews-${String(i+1).padStart(2,'0')}.png`, png.split(',')[1], {base64: true});
}
// Restore original style
if (originalStyle) {
card.setAttribute('style', originalStyle);
} else {
card.removeAttribute('style');
}
}
status.textContent = 'ZIP 생성 중...';
const blob = await zip.generateAsync({type: 'blob'});
saveAs(blob, 'cardnews.zip');
status.textContent = '✓ Download complete!';
status.style.color = 'var(--color-primary, #1A2A4F)';
} catch (error) {
console.error('Download failed:', error);
status.textContent = 'Error: ' + error.message;
status.style.color = 'var(--color-accent, #D77A61)';
} finally {
btn.disabled = false;
}
});
```
---
## Step 7: Quality Check
Before delivering, verify:
### Content
- Is everything based on current data?
- Are numbers, ratios, and comparisons accurate?
- Are the first 2 cards strong enough to stop a scroll?
- Does the card flow feel natural?
- Does the CTA match the original purpose?
### Design
- Is the visual tone consistent across cards?
- Is text density comfortable (not wall-of-text)?
- Are accent colors used sparingly, not overwhelming?
- Are charts easy to read at a glance?
- Will anything get cut off on mobile?
### Technical
- Does the HTML render without errors?
- Does the download button work?
- Does ZIP generation complete?
- Are there zero external image dependencies?
- Is every card exactly 1080x1350?
---
## Plain Language Guide
When writing for general/beginner audiences, simplify jargon:
- "Funnel optimization" -> "Making sure people don't drop off halfway through"
- "Workflow automation" -> "Setting up tasks to run automatically"
- "Onboarding" -> "The process of getting started smoothly"
For expert-level topics: define the term once in simple language, then use the short version after.
---
## Common Mistakes to Avoid
### Content
1. **Skipping research** -- pretty cards with shallow content don't get saved
2. **Multiple messages per card** -- one card = one point
3. **Weak cover card** -- it needs to stop thumbs, not just look nice
4. **Repetitive chart types** -- mix at least 3 different visualization styles
5. **Too much text** -- card news is scanned, not read like a document
6. **No brand presence** -- every card needs the footer; otherwise it looks generic
### Layout & technical
7. **Using `align-items: center` on the hero parent** -- causes word-level wrap bug.
Use `text-align: center` + `width: 100%` on the h1 instead.
8. **Tight `line-height` on serif heroes (< 1.05)** -- descenders bleed into the next
element. Minimum 1.05, prefer 1.08-1.12.
9. **Skinny `margin-top` between hero and lead (< 56px)** -- visual overlap on serif
fonts. Use 64-80px or use flex `gap` on the parent.
10. **Letting wordmark/eyebrow/foot-meta wrap** -- always `white-space: nowrap` +
`flex-shrink: 0`.
11. **External image references (relative path or URL)** -- breaks PNG capture.
Always inline images as base64 data URIs (resize to ~640px first).
12. **Italic emphasis on long phrases without `nowrap`** -- DM Serif Display Italic
is 10-15% wider than upright. Add `white-space: nowrap` and reduce hero font 5-10%.
13. **iMessage chat with user on the LEFT** -- inverts iOS convention. The viewer
expects to see "themselves" on the right (blue), other party on the left (gray).
14. **Inline `style="margin-top: 32px"` after a multi-line hero** -- not enough.
Use 56-80px or convert to flex `gap` on parent.
---
## Self-review before delivery (mandatory)
Run `python render_cards.py cards.html _review/` (script below) and Read 2-3 of the
rendered PNGs yourself before showing the user anything. Check: line breaks and orphans,
wordmark/foot-meta wrapping, italic emphasis staying on one line, chart legibility,
footer present on every card, mobile legibility (body ≥24px at 1080 source). Fix,
re-render, then deliver.
## Delivery
Save the final HTML into the client's project folder (never WARP root), then auto-open
the file (`start "" `) and its folder in Explorer.
The user can open it in a browser, preview all cards, and click the download button to get PNGs.
### Recommended (Windows): Local Python renderer — bypasses MOTW entirely
**The browser download path always triggers Windows MOTW.** PNGs from a browser-downloaded
ZIP get tagged with Zone.Identifier and Windows blocks them on extraction. The PERMANENT
fix is to skip the browser download entirely: render PNGs locally via Playwright + Chromium.
Files written by Python have no MOTW because they never enter the internet zone.
**Always offer this script alongside the HTML deck.** Save as `render_cards.py` next to
the HTML file:
```python
#!/usr/bin/env python
"""Local PNG renderer. Bypasses browser/MOTW. Usage:
python render_cards.py cards.html out/
"""
import sys, os, pathlib
from playwright.sync_api import sync_playwright
def render(html_path, out_dir, width=1080, height=1350):
html_path = os.path.abspath(html_path)
os.makedirs(out_dir, exist_ok=True)
file_url = pathlib.Path(html_path).as_uri()
base = os.path.splitext(os.path.basename(html_path))[0]
with sync_playwright() as p:
browser = p.chromium.launch()
ctx = browser.new_context(
viewport={"width": width + 80, "height": height + 100},
device_scale_factor=2, # retina 2x for IG sharpness
)
page = ctx.new_page()
page.goto(file_url, wait_until="networkidle")
page.wait_for_timeout(1500)
cards = page.locator(".card")
count = cards.count()
for i in range(count):
page.evaluate(
"""async (idx) => {
const card = document.querySelectorAll('.card')[idx];
card.style.position='fixed'; card.style.left='0'; card.style.top='0';
card.style.width='1080px'; card.style.height='1350px';
card.style.zIndex='99999'; card.style.overflow='hidden'; card.style.margin='0';
await new Promise(r => setTimeout(r, 250));
if (window.autofitCard) await window.autofitCard(card);
await new Promise(r => setTimeout(r, 100));
}""",
i,
)
out_path = os.path.join(out_dir, f"{base}-{i+1:02d}.png")
cards.nth(i).screenshot(path=out_path)
print(f" -> {out_path}")
page.evaluate(
"(idx) => document.querySelectorAll('.card')[idx].removeAttribute('style')",
i,
)
browser.close()
if __name__ == "__main__":
render(sys.argv[1], sys.argv[2])
```
**One-time Windows setup (~3 min):**
```powershell
pip install playwright
python -m playwright install chromium
```
**Then for any card deck:**
```powershell
python render_cards.py cards.html out/
```
PNGs land directly in `out/` with zero MOTW friction. Reads the same `window.autofitCard()`
the browser uses, so output matches preview exactly. Ships at retina 2x (2160x2700 actual
pixel) which IG/LinkedIn accept and downscale crisply.
The browser download button stays as a fallback for non-Windows users or quick previews.
### Fallback: Windows browser download (Mark of the Web cleanup)
When the user downloads the ZIP via the browser button, Windows tags the ZIP with
"Zone.Identifier" (Mark of the Web). On extraction, every PNG inherits the mark and
Windows blocks them with `Windows found that this file is potentially harmful.`
**Tell the Windows user to do this BEFORE extracting:**
```powershell
# Unblock the ZIP, then extract — extracted files inherit no MOTW
$zip = "$HOME\Downloads\cardnews.zip"
Unblock-File $zip
Expand-Archive $zip -DestinationPath "$HOME\Downloads\cardnews" -Force
```
**Or after extracting (if already unzipped with the warning):**
```powershell
Get-ChildItem -Path "$HOME\Downloads\cardnews" -Recurse | Unblock-File
```
The PNGs themselves are safe — Windows is just being cautious about files from the
internet zone. Either command above clears the mark in one shot.
Free.
Steal it.
Free.
Steal it.
Free.
...lead text...