skills.rest
Marky-Team
Marky-TeamOFFICIAL
Explore all skills by this author →
GitHub

create-post-graphic

Create branded diagram graphics from concepts and render them as 1080x1350 PNGs.

3|1|Updated Jun 30, 2026
Search Tags:#content creation#infographics#png generation#html rendering#social media graphics#marky api#branded diagrams
One-click install
npx skills add https://github.com/Marky-Team/marky-skills --skill create-post-graphic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-post-graphic
Source: https://github.com/Marky-Team/marky-skills/tree/main/skills/create-post-graphic
Command: npx skills add https://github.com/Marky-Team/marky-skills --skill create-post-graphic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill turns complex post ideas into polished, readable social graphics without relying on generic stock images or inaccurate AI-generated text. It helps you communicate processes, comparisons, instructions, quotes, and statistics in a visual format that matches the business's brand.

Core Features & Use Cases

  • Brand-aware design: Pulls brand colors, fonts, logo, and business settings from the Marky API or cached brand data.
  • Diagram creation: Produces hand-authored HTML layouts for layers, flows, loops, quote-and-stat cards, sequence diagrams, and numbered steps.
  • Production workflow: Renders designs as 1080x1350 PNGs, checks the output for layout problems, uploads approved media, and tags the resulting post metadata.
  • Use Case: Turn a product onboarding process into a branded step-by-step graphic, inspect the rendered image, and attach it to a social post for scheduling.

Quick Start

Ask the create-post-graphic skill to turn your post idea into an on-brand diagram, render it as a social-ready PNG, and prepare it for attachment to the post.

Frequently Asked Questions about create-post-graphic

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

FAQPage Schema
How do I create branded social media graphics for processes and comparisons?▼

Branded social media graphics are created by hand-authoring HTML and CSS layouts for diagrams, which are then rendered as feed-optimized PNGs. This approach pulls brand colors, fonts, and logos to match business identity.

Can I render HTML and CSS layouts into PNG images for social media posts?▼

HTML and CSS layouts are rendered into 1080x1350 PNG images using a headless browser when available. The output is visually inspected for layout problems before being uploaded and tagged to a post.

What is the best way to turn onboarding instructions into a numbered-step visual?▼

Numbered-step visuals are produced by authoring custom HTML layouts that structure instructions into readable sequence diagrams. The design is checked visually and rendered at a portrait size optimized for social feeds.

Do I need Marky API access to generate branded infographics?▼

Marky API access is required to pull brand settings such as colors, fonts, and logos. Cached brand data may be used if available, ensuring the generated diagram graphics match the business identity.

Why use hand-authored HTML instead of AI-generated images for social media diagrams?▼

Hand-authored HTML layouts prevent the inaccurate text often generated by AI image tools. This method ensures complex concepts like loops, flows, and statistics are rendered with precise, readable text and brand consistency.

What dimensions should social media graphics be for portrait feed optimization?▼

Social media graphics should be rendered at 1080x1350 pixels for portrait feed optimization. This feed-optimized size ensures diagrams and quote cards display properly without cropping on social platforms.

Related Skills

Explore More Design & Creative Skills→
Marky-TeamMarky-Team
3

build-brand-kit

Extract brand assets and guidance from a business website into Marky.

Official
Advanced
Marky-TeamMarky-Team
3

create-post-from-image

Create multiple social media post drafts from a Marky library image.

Official
Intermediate
TheCraigHewittTheCraigHewitt
7.3k

social-content

Create, schedule, and optimize social media content across platforms.

Community
Basic
KartikSharma4448KartikSharma4448

media-generation

Generate and retrieve AI images, videos, and stock images with configurable prompts and output paths.

Community
Intermediate