skills.rest
hasnaxyz
hasnaxyzOFFICIAL
Explore all skills by this author →
GitHub

image

Render JSON image specifications into SVG and PNG outputs.

Updated Jun 24, 2026
Search Tags:#png#image#svg#og-image#satori#json-render#social-cards
One-click install
npx skills add https://github.com/hasnaxyz/open-render --skill image-hasnaxyz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/hasnaxyz/open-render/tree/main/skills/image
Command: npx skills add https://github.com/hasnaxyz/open-render --skill image-hasnaxyz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the friction of turning structured JSON layout specs into finished visual assets, so you can generate reliable images without hand-designing each output.

Core Features & Use Cases

  • SVG and PNG Rendering: Convert JSON specs into shareable image outputs using Satori-based rendering.
  • Standard Component Catalog: Reuse built-in components like Frame, Box, Row, Column, Heading, Text, Image, Divider, and Spacer for consistent layouts.
  • Custom Image Components: Extend the catalog with your own component definitions for brand-specific social cards, Open Graph images, and generated banners.
  • Use Case: A product team can generate a branded announcement card from structured data and export it as PNG for social media or as SVG for web use.

Quick Start

Use the image skill to render your JSON image spec into a PNG social card with the standard component catalog and your required fonts.

Frequently Asked Questions about image

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

FAQPage Schema
How do I generate Open Graph images from JSON specifications?▼

Generate Open Graph images from JSON by rendering layout specs into SVG and PNG outputs using Satori-backed deterministic conversion. This enables programmatic social card creation without manual design work.

Can I create social cards programmatically using a standard component catalog?▼

You can create social cards programmatically by reusing built-in components like Frame, Box, Row, Column, Heading, and Text. This standard catalog ensures consistent layouts across generated visual assets.

Does Satori-based rendering require custom fonts for JSON image conversion?▼

Satori-based rendering requires font loading to successfully convert JSON image specifications. You must provide required fonts to satisfy deterministic rendering and generate valid SVG or PNG outputs.

What is the best way to extend the component catalog for branded social cards?▼

Extend the component catalog for branded social cards by defining custom image components within your JSON specs. This allows brand-specific Open Graph image generation and tailored visual asset workflows.

Why use JSON specs for SVG and PNG rendering instead of manual design?▼

JSON specs for SVG and PNG rendering remove the friction of hand-designing each output. This approach guarantees deterministic conversion and reliable image generation for programmatic graphics workflows.

Related Skills

Explore More Software Engineering Skills→
memoirlabsmemoirlabs
6

image

Convert JSON layout specs into SVG and PNG images via Satori.

Official
Intermediate
aryankumarraiaryankumarrai

repl-seo-optimizer

Review and optimize Replit application code for SEO discoverability and performance.

Community
Intermediate
magnusrodsethmagnusrodseth
2

tanstack-seo

Automate SEO setup for TanStack Router/Start projects with OG images, JSON-LD, and sitemaps.

Community
Advanced
liumeixinliumeixin
4

html-screenshot-image-gen

Render HTML templates in a browser and capture screenshots as images.

Community
Advanced