image

Render JSON image specs into SVG and PNG files using Satori-based tools.

Updated Jan 18, 2026
One-click install
npx skills add https://github.com/xztxy/json-render --skill image-xztxy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/xztxy/json-render/tree/main/skills/image
Command: npx skills add https://github.com/xztxy/json-render --skill image-xztxy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts JSON-based image specifications into SVG and PNG assets, enabling automated generation of visuals for social cards, OG images, and AI-generated image specs.

Core Features & Use Cases

  • Render JSON specs to scalable SVG and PNG outputs using Satori.
  • Support for a catalog of standard components and custom typography for consistent visuals.
  • Use Case: Generate a social card image for a shared link or a branded graphic for AI-generated specs.

Quick Start

Provide a Spec object and call renderToPng to generate an image.

Frequently Asked Questions about image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate social card images from JSON specs?

You can generate social card images from JSON specs by providing a Spec object and calling renderToPng. This Skill uses a Satori-based renderer to convert JSON specifications into SVG and PNG assets for social cards.

What is the best way to render Open Graph images dynamically?

The best way to render Open Graph images dynamically is by using a Satori-based renderer to convert JSON specs into SVG and PNG assets. This allows automated generation of visuals without manual design work.

Can I use custom typography and components when rendering SVG from JSON?

Yes, you can use custom typography and a catalog of standard components when rendering SVG from JSON. The renderer supports custom typography and catalog-based component definitions through its core modules.

Does Satori support exporting JSON specs to both SVG and PNG formats?

Yes, Satori supports exporting JSON specs to both SVG and PNG formats. This renderer uses @json-render/core and @json-render/image to output scalable vector and raster graphics from your specifications.

Why convert JSON specs to PNG for AI-generated image specs?

Converting JSON specs to PNG for AI-generated image specs allows automated, programmatic generation of branded graphics. It enables systems to dynamically produce visual assets directly from structured data using Satori.