visual-gen

v1.0.0

Generate blog cover images, architecture diagrams, and process infographics as PNG files using HTML+CSS rendered via Chrome headless.

Claude Code3 Skills

By widnyanaLicense: WTFPL7 GitHub starsUpdated 15 hours ago

Directory evidence

Runtimes: Claude Code
Parsed components: 3 skill or MCP entries
Source updated: Sep 2, 2026
Manifest status: Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install visual-gen for Claude Code

Installs for the current user

claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install visual-gen@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually

$ git clone https://github.com/widnyana/eyay-toolkits

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/visual-gen/.

Plugin files

plugins/visual-gen/

├── .claude-plugin/plugin.json
├── skills/architecture-diagram/SKILL.md
├── skills/cover-image/SKILL.md
└── skills/process-infographic/SKILL.md

Included Skills3

architecture-diagramskills/architecture-diagram/SKILL.md

This skill should be used when the user asks to "create a diagram", "make an architecture diagram", "design a system diagram", "draw an architecture", "create a technical diagram", "make a deployment diagram", "visualize infrastructure", "create a data flow diagram", "draw system components", "make a network diagram", "diagram a cloud architecture", "draw an AWS diagram", "create a Kubernetes diagram", or mentions architecture, system design, infrastructure diagrams, component relationships, or data flow. Do NOT trigger for cover images, step-by-step process flows, or infographics.

cover-imageskills/cover-image/SKILL.md

This skill should be used when the user asks to "create a cover image", "generate a blog cover", "make an OG image", "design a social preview", "create a thumbnail for a post", "add a cover to my article", "make a featured image", "create a header image for a post", "generate an open graph image", or mentions cover images, OG images, social preview images, or blog post thumbnails. Do NOT trigger for diagrams, architecture diagrams, or process flows.

process-infographicskills/process-infographic/SKILL.md

This skill should be used when the user asks to "create an infographic", "generate a process flow", "make a step-by-step diagram", "design a timeline", "create a workflow diagram", "visualize a pipeline", "make a numbered sequence", "show the steps as an image", "create a lifecycle diagram", "make a flow diagram", or mentions numbered steps, process stages, deployment pipelines, CI/CD flows, or sequential procedures. Do NOT trigger for cover images or system architecture diagrams.

Plugin manifests1

plugins/visual-gen/.claude-plugin/plugin.json

{
  "name": "visual-gen",
  "version": "1.0.0",
  "description": "Generate blog cover images, architecture diagrams, and process infographics as PNG files using HTML+CSS rendered via Chrome headless.",
  "author": {
    "name": "widnyana",
    "email": "[email protected]"
  },
  "license": "WTFPL",
  "repository": "https://github.com/widnyasa/eyay-toolkits",
  "keywords": [
    "media",
    "images",
    "diagrams",
    "visual",
    "html-css",
    "chrome-headless"
  ]
}