skills.rest
dineshrevunuru
dineshrevunuruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-visual-assets

Creates static visual assets like posters, OG cards, and cover art as PNG or PDF files.

1|Updated Jul 13, 2026
Search Tags:#graphic design#poster design#png#visual assets#cover art#og image#social card
One-click install
npx skills add https://github.com/dineshrevunuru/SuperSkills --skill create-visual-assets-dineshrevunuru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-visual-assets
Source: https://github.com/dineshrevunuru/SuperSkills/tree/main/create-visual-assets
Command: npx skills add https://github.com/dineshrevunuru/SuperSkills --skill create-visual-assets-dineshrevunuru

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Producing standalone static graphics — posters, case-study hero images, OG/social cards, cover art — often results in generic, cluttered output when an AI jumps straight to canvas code. This Skill enforces a two-step philosophy-first method: write a short design philosophy document, then express it visually, so every asset is a deliberate composition rather than decoration. ## Core Features & Use Cases - Philosophy-first workflow: Writes a 3–5 paragraph design philosophy (.md) covering space, color, scale, composition, and craft standard before any canvas code is produced. - Multi-tool rendering: Chooses HTML/CSS with headless screenshot for exact-pixel PNGs, hand-written SVG for geometric marks, or print-to-PDF for printable pieces. - Mandatory refine pass and quality gate: Runs a subtractive refinement pass and a craft-critique verdict (PASS / PASS WITH NOTES) before delivery. - Use Case: Create a 1200×630 OG image for a portfolio case study — the skill writes the philosophy, renders the card with brand tokens, refines the composition, and delivers the PNG plus the philosophy file. ## Quick Start Use the create-visual-assets skill to design a 1200×630 OG image for my case study about an AI receptionist chatbot.

Frequently Asked Questions about create-visual-assets

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

FAQPage Schema
How do I create an OG image or social card with exact dimensions?▼

Specify the type and pixel size in the brief, such as 1200×630 for an OG card. The skill writes a design philosophy first, then renders HTML/CSS at fixed dimensions and captures a headless screenshot to produce the exact-size PNG.

What is the philosophy-first method for designing posters?▼

It is a two-step process: first write a 3–5 paragraph design philosophy covering space, color, scale, composition, and craft standard, then express that philosophy on canvas. The philosophy is an aesthetic worldview, not a layout spec, and is saved as a markdown file alongside the output.

Can this skill design UI screens or data charts?▼

No. UI screens and components belong to build-frontend-interfaces, and charts or data graphics belong to visualize-data. This skill only produces standalone static art objects like posters, covers, and social cards.

Which fonts are used for poster and cover design?▼

The default pool includes Work Sans, Instrument Sans, Outfit, Geist Mono, IBM Plex Mono, Crimson Pro, and similar OFL families referenced from the canvas-design skill's canvas-fonts bundle. Loud display, pixel, and handwriting fonts require an explicit reason.

When should I not use a static visual asset approach?▼

Avoid it for anything that moves (use craft-motion), multi-page reading documents, brand-token application across product surfaces, or literal illustrations of a subject. The skill also never imitates a living artist's recognizable style.

Related Skills

Explore More Design & Creative Skills→
hamadah10hamadah10

canvas-design

Generate PNG or PDF visual artworks guided by a design philosophy.

Community
Advanced
ArroganceGArroganceG

canvas-design

Translate a design philosophy into a single-page PDF or PNG canvas.

Community
Advanced
marcusfelixmarcusfelix

verification-before-completion

Ensures work completion claims are backed by actual command output and verification before committing or reporting success.

Community
Intermediate
AO-HySAO-HyS

make-interfaces-feel-better

Reviews and refines UI code for typography, surfaces, motion, icons, and performance polish.

Official
Intermediate