skills.rest
memoirlabs
memoirlabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

image

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

6|Updated Mar 26, 2026
Search Tags:#satori#image rendering#og images#social cards#json-to-svg#json specs
One-click install
npx skills add https://github.com/memoirlabs/mog --skill image-memoirlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/memoirlabs/mog/tree/main/.agents/skills/image
Command: npx skills add https://github.com/memoirlabs/mog --skill image-memoirlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns structured JSON UI or marketing layout specs into ready-to-share SVG and PNG images, removing the need to manually redesign and export graphics.

Core Features & Use Cases

  • JSON-to-Image Rendering: Convert JSON-based component trees into SVG and PNG outputs for consistent design.
  • Satori-based Output: Render through Satori to produce SVG strings and PNG buffers suitable for OG images and social cards.
  • Reusable Component Catalogs: Use standard image components or extend the catalog with custom components for brand-specific visuals (e.g., badges, branded headings).

Quick Start

Use the image skill to render your JSON spec into a PNG social card using the JSON-to-Satori pipeline for @json-render/image.

Frequently Asked Questions about image

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

FAQPage Schema
How do I generate OG images from JSON specs?▼

Generate social cards from JSON by rendering structured layout specifications through Satori, producing SVG strings and PNG buffers ready for marketing and design automation workflows.

What is the JSON-to-SVG rendering process for social cards?▼

The JSON-to-SVG rendering process uses Satori to transform a JSON component tree into an SVG string, allowing you to automate social card generation without manual graphic design and export.

Can I use custom components for branded social cards?▼

Yes, you can extend the standard image component catalog with custom components to render brand-specific visuals like badges and branded headings within your JSON specs.

Does Satori require font configuration to render PNG images?▼

Satori supports optional font configuration to ensure accurate typography when rendering JSON specs into PNG images, though default fonts can be used for basic layouts.

What's the best way to automate social card creation from structured data?▼

The best way to automate social card creation is defining a reusable JSON spec and rendering it through Satori, which outputs consistent SVG and PNG images for your marketing assets.

Why are my JSON-to-image rendered fonts not displaying correctly?▼

Fonts may display incorrectly if optional font configuration is missing during the Satori rendering process, so providing explicit font data ensures accurate typography in the output.

Related Skills

Explore More Design & Creative Skills→
FAIQahmFAIQahm

urdu-rtl-styler

Apply Urdu typography and RTL layout to Docusaurus sites via a CSS injection pipeline.

Community
Advanced
vercel-labsvercel-labs
15.9k

image

Render JSON-based specs into SVG and PNG images.

Official
Intermediate
z4nr34lz4nr34l

remotion-best-practices

Standardize Remotion best-practice guidance for video compositions.

Community
Basic
pengelbrechtpengelbrecht
6

SVG Logo Designer

Generate scalable SVG logo concepts from descriptive briefs with layout variations.

Community
Intermediate