用途：为博客文章生成 Neo-Brutalism 风格的静态插图（PNG）。流程为 HTML → 浏览器 → PNG，产出 1440×810 布局的 retina 2x（deviceScaleFactor 2）截图，保存为 2880×1620 PNG，面向移动端 25% 缩放下仍可辨识的设计目标。该技能提供 30 种模式，覆盖流程、对比、架构、数据可视化、图表、信息图、概念等。
主要能力：从博客 MDX/MD 或用户描述中提取核心概念并生成 Content Brief（核心消息、关键词、结构、强调点），并通过结构化提问确认要可视化的场景，遵循 One Idea Per Figure。可从 30 种模式中推荐 4 个最贴合的模式供选择，包含 ASCII art 预览。提供设计令牌（1440×810、retina 2x、Noto Sans KR weight 900、AGENTIC v1.2 调色板）与设计规则。
使用方式：读取内容上下文 → 生成 Content Brief → 建议模式 → 编写独立 HTML（链接 assets/figure.css）→ 用 scripts/validate_figure.py 自检并修复所有 ERROR → 浏览器截图 → 保存 PNG 到项目目录 → 如提供 .md/.mdx 则插入图片标签 → 生成 25% 缩略图验证移动端可读性。自检命令：python3 {SKILL_DIR}/scripts/validate_figure.py /tmp/blog-figure-{name}.html --pattern {PatternName}。验证缩略图示例：sips -Z 360 {saved}.png --out /tmp/blog-figure-verify-{name}.png 或 magick {saved}.png -resize 360x /tmp/blog-figure-verify-{name}.png。截图工具优先级为 Chrome DevTools MCP → Chrome CLI（retina 2x）→ Playwright（1x 最终手段）。
适用场景：博客文章配图，包括流程、对比、时间线、架构、数据图表、信息图、概念关系等多样化可视化需求。
限制：设计令牌仅限博客专用，不应参考旧一代以 PPT 为目标的 neo-brutalism 文档（1920×1080、Black Han Sans、image-design-system.md）。自检存在小字号（20px 以下）、硬编码 hex、渐变/模糊阴影等 ERROR 时必须修复后再截图。运行时若无结构化提问工具，需改用编号列表文本；无 preview 字段的运行时可用 ASCII 预览。旧图修改时优先查找旁边的 {filename}.src.html。