How does it insert images into my blog posts?

The skill identifies the most relevant section in your .md or .mdx file and automatically inserts a tag or standard Markdown image syntax after the related paragraph.

Which browser tools are required for image generation?

The skill can utilize Chrome DevTools MCP, Playwright MCP, or CLI-based capture tools to render HTML templates into high-quality 1440x810 PNG images.

Can I preview the layout before the image is generated?

Yes, the skill provides ASCII art previews of the top four suggested patterns within the terminal, allowing you to choose the best layout for your specific context.

Does it support data visualization?

Yes, it includes specialized patterns for data viz, funnels, waffle charts, heatmaps, and trend summaries to represent complex data accurately.

What design style does this skill use?

The skill uses a high-contrast Neo-Brutalism style characterized by bold borders, vibrant accents, and clean typography, making it ideal for modern technical blogs.

Blog Figure Generator

Name: Blog Figure Generator
Author: october-academy

byoctober-academy

0•

内容管理

Generates distinctive Neo-Brutalism styled diagrams and figures for blog posts through an automated HTML-to-PNG workflow.

The Blog Figure Generator is a specialized Claude Code skill that streamlines the creation of high-impact visuals for technical blogs and documentation. By analyzing your written content, it extracts core concepts and suggests the most effective visual representations from a library of 30 Neo-Brutalism patterns—including architecture diagrams, flowcharts, and data visualizations. The skill automates the entire production pipeline: generating standalone HTML, rendering it via browser automation (Playwright/Chrome), capturing high-resolution PNGs, and automatically inserting the final assets into your MDX or Markdown files with correct pathing and syntax.

主要功能

010 GitHub stars

02Library of 30 Neo-Brutalism patterns including flows, matrices, and isometric diagrams.

03Intelligent 'Content Brief' extraction to ensure visuals align with blog messaging.

04Interactive pattern selection with ASCII art previews for quick decision-making.

05Automated HTML-to-PNG rendering using high-resolution browser screenshots.

06Seamless MDX/Markdown integration with automatic image tag placement and path management.

使用场景

01Creating high-impact comparison charts and data visualizations for technical tutorials.

02Visualizing complex technical architectures or system flows within engineering blog posts.

03Fixing missing image references in MDX documentation by generating context-aware figures.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add october-academy/agent-plugins blog-figure

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Library of 30 Neo-Brutalism patterns including flows, matrices, and isometric diagrams.

03Intelligent 'Content Brief' extraction to ensure visuals align with blog messaging.

04Interactive pattern selection with ASCII art previews for quick decision-making.

05Automated HTML-to-PNG rendering using high-resolution browser screenshots.

06Seamless MDX/Markdown integration with automatic image tag placement and path management.

使用场景

01Creating high-impact comparison charts and data visualizations for technical tutorials.

02Visualizing complex technical architectures or system flows within engineering blog posts.

03Fixing missing image references in MDX documentation by generating context-aware figures.