Blog Figure Generator

Generate Neo-Brutalism styled figure images for blog posts: HTML → browser → PNG.

Workflow

1. Understand context: Read blog MDX/MD or user description to decide what to visualize
2. Content Brief: Extract the core concept to visualize and present to user for confirmation (see Content Brief below)
3. Suggest patterns: Based on the confirmed brief, pick the 4 most fitting patterns from 30 available, and present them via AskUserQuestion with ASCII art previews (see Pattern Selection below)
4. Create HTML: Before writing HTML, read references/design-rules.md for all design constraints. Write standalone HTML to /tmp/blog-figure-{name}.html linking assets/figure.css
5. Capture PNG: Open in browser, screenshot at 1440×810, save PNG
6. Save to project: Move PNG to apps/content/src/content/blog/images/{slug}/
7. Insert into document: If user provided a .md or .mdx file, insert the image tag at the contextually correct location (see Document Insertion below)
8. Verify: Read the saved PNG to visually confirm

Content Brief

패턴을 고르기 전에, 블로그에서 시각화할 핵심 개념을 추출하여 사용자에게 확인받는다. Figure의 내용이 블로그와 동떨어지거나 너무 추상적이 되는 것을 방지하는 핵심 단계.