canvas-design

Generate HTML/CSS visual designs and render them to PNG or PDF.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/VYRE-Studios/Windows-Agentic-Framework --skill canvas-design-vyre-studios
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas-design
Source: https://github.com/VYRE-Studios/Windows-Agentic-Framework/tree/main/skills/claude-code/canvas-design
Command: npx skills add https://github.com/VYRE-Studios/Windows-Agentic-Framework --skill canvas-design-vyre-studios

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and creators often need a fast, programmable way to produce high-quality visual assets and export them as PNG or PDF without manual layout or repeated tooling steps.

Core Features & Use Cases

  • HTML/CSS-first templates: Produce self-contained HTML files that render complete posters, infographics, cards, and social images.
  • Flexible exports: Guidance for exporting to PNG or PDF using headless browsers (Puppeteer) or tools like wkhtmltoimage for print-ready output.
  • Design building blocks: Typography scales, color palettes, decorative shapes, stat blocks, timelines, and layout patterns for quick composition.
  • Use case: Create a social media poster with a headline, subtitle, brand colors, and a downloadable PNG for campaign publishing.

Quick Start

Request a canvas-design HTML layout with the intended dimensions, headline and subtitle text, color scheme, and specify PNG or PDF as the desired output format.

Frequently Asked Questions about canvas-design

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

FAQPage Schema
How do I generate a poster from HTML and CSS and export it as a PNG?

To generate a poster from HTML and CSS and export it as a PNG, you create a self-contained HTML file with your design and use a headless browser like Puppeteer to render the output to an image file.

Can I use Puppeteer to render HTML designs to PDF for print-ready output?

Yes, you can use Puppeteer to render HTML designs to PDF for print-ready output. The Skill produces self-contained HTML files that Puppeteer processes to create high-quality PDF documents.

What is the best way to programmatically create social media images without manual layout?

The best way to programmatically create social media images without manual layout is using HTML and CSS building blocks like typography scales and color palettes, then rendering the file to a downloadable format.

Do I need a headless browser to export HTML infographics to PDF or PNG?

Yes, you need a headless browser or rendering tool such as Puppeteer or wkhtmltoimage to export HTML infographics to PDF or PNG, as they render the self-contained HTML files deterministically.

What design elements can I use to build infographics and printable layouts with HTML and CSS?

You can use design elements including typography scales, color palettes, decorative shapes, stat blocks, and layout patterns to build infographics and printable layouts with HTML and CSS.

Does canvas-design work with wkhtmltoimage for exporting visual assets?

Yes, canvas-design works with wkhtmltoimage for exporting visual assets. You can use this tool alongside Puppeteer to render self-contained HTML files into PNG or PDF formats.