skills.rest
timscheuerai
timscheueraiCOMMUNITY
Explore all skills by this author →
Website𝕏@timscheuerGitHub

graphics-designer

Convert HTML brand templates into PNG graphics via headless Chrome.

24|8|Updated May 3, 2026
Search Tags:#branding#templates#graphics#rendering#notion#drive#headless-chrome
One-click install
npx skills add https://github.com/timscheuerai/content-vault --skill graphics-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphics-designer
Source: https://github.com/timscheuerai/content-vault/tree/main/skills/graphics-designer
Command: npx skills add https://github.com/timscheuerai/content-vault --skill graphics-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often struggle with manually turning HTML templates into polished, on-brand graphics. This skill automates the production of single images or multi-slide carousels from HTML templates, ensuring consistency with brand tokens and efficient delivery.

Core Features & Use Cases

  • Branch from existing templates or start fresh from brand tokens, render 1× and @2× PNGs via headless Chrome, and mirror outputs to Drive.
  • Output is logged to the Notion Content database for traceability; supports LinkedIn banners, portraits, and carousel formats.

Quick Start

Provide a design brief (format, channel, and brand constraints), and the skill will branch templates, render the final PNG, and log the result.

Frequently Asked Questions about graphics-designer

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

FAQPage Schema
How do I convert HTML templates to PNG graphics for LinkedIn banners and carousels?▼

To convert HTML templates to PNG graphics, you provide a design brief with format, channel, and brand constraints. The skill renders single images or multi-slide carousels via headless Chrome, outputting 1× and 2× PNGs.

Can I render multi-slide carousels from HTML using headless Chrome?▼

Yes, you can render multi-slide carousels from HTML using headless Chrome. The skill processes HTML-based brand templates and outputs publish-ready single or multi-slide PNG graphics.

Do I need Notion and Drive to automate HTML to PNG rendering?▼

Notion and Drive are not required to render PNGs, but they are used for logging and storage. Rendered graphics are mirrored to Drive, and processing results are logged to the Notion Content database for traceability.

What is the best way to generate on-brand graphics from HTML templates?▼

The best way to generate on-brand graphics from HTML templates is to start from brand tokens or existing templates. This ensures visual consistency across LinkedIn portraits, banners, and carousels before rendering to PNG.

Does HTML to PNG rendering support 2x resolution outputs?▼

Yes, HTML to PNG rendering supports both 1× and 2× resolution outputs. This ensures your publish-ready graphics meet high-resolution display requirements across various platforms and devices.

Why use brand tokens when converting HTML to PNG graphics?▼

Using brand tokens when converting HTML to PNG graphics ensures strict adherence to brand guidelines. It allows you to branch from existing templates or start fresh, guaranteeing visual consistency across all rendered outputs.

Related Skills

Explore More Design & Creative Skills→
hongbietcodehongbietcode
3

brand-guidelines

Apply Anthropic brand colors and typography presets to documents and presentations.

Community
Basic
Mattyreed1Mattyreed1

content-publish

Automate LinkedIn publishing and collect 7-day performance analytics into Notion.

Community
Advanced
1000ssam1000ssam
7

notion-to-docs

Convert Notion pages and databases into Google Docs documents.

Community
Advanced
zivtechzivtech

graphic-design-executor

Transform design-planner specifications into SVG and HTML assets.

Official
Advanced