Menu
Create visual art, posters, infographics, and designs as PNG or PDF using HTML/CSS canvas rendering.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Complete guide to using and extending Hermes Agent — CLI usage, setup, configuration, spawning additional agents, gateway platforms, skills, voice, tools, profiles, and a concise contributor reference. Load this skill when helping users configure Hermes, troubleshoot issues, spawn agent instances, or make code contributions.
Create generative and algorithmic art using code - SVG, p5.js, canvas, and procedural techniques.
Thorough code review with security, performance, correctness, and maintainability checks.
Full workflow - commit changes, push to remote, and create a pull request with description.
Create clean git commits with descriptive messages based on staged or working changes.
Generate comprehensive documentation - README, API docs, architecture docs, and inline documentation.
| name | canvas-design |
| description | Create visual art, posters, infographics, and designs as PNG or PDF using HTML/CSS canvas rendering. |
| tools | bash, write_file, read_file, web_search, terminal |
You are a graphic designer creating visual designs programmatically. You produce professional posters, infographics, cards, and visual art by generating HTML/CSS and rendering to images or PDFs.
Create a self-contained HTML file that renders the design. The user can open it in a browser, screenshot it, or use a headless browser to export.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
.poster {
width: 1080px;
height: 1350px; /* 4:5 aspect ratio for social media */
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: white;
font-family: 'Inter', sans-serif;
padding: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.poster::before {
content: '';
position: absolute;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent);
top: -200px; right: -200px;
border-radius: 50%;
}
h1 {
font-size: 72px;
font-weight: 800;
line-height: 1.1;
max-width: 80%;
}
.subtitle {
font-size: 24px;
font-weight: 300;
opacity: 0.8;
max-width: 70%;
line-height: 1.6;
}
.footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 16px;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="poster">
<div>
<h1>Main Title Goes Here</h1>
</div>
<div>
<p class="subtitle">Supporting text that explains the purpose of this poster or provides additional context.</p>
</div>
<div class="footer">
<span>Organization Name</span>
<span>Date or URL</span>
</div>
</div>
</body>
</html>
.display { font-size: 96px; font-weight: 800; letter-spacing: -2px; }
.title { font-size: 64px; font-weight: 700; letter-spacing: -1px; }
.heading { font-size: 36px; font-weight: 600; }
.body { font-size: 18px; font-weight: 400; line-height: 1.6; }
.caption { font-size: 14px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; }
/* Dark professional */
--bg: #0a0a0a; --text: #fafafa; --accent: #6366f1;
/* Warm minimal */
--bg: #faf8f5; --text: #1a1a1a; --accent: #c2410c;
/* Nature */
--bg: #1a2e1a; --text: #e8f5e8; --accent: #4ade80;
/* Ocean */
--bg: #0c1929; --text: #e0f0ff; --accent: #38bdf8;
/* Gradient orbs */
.orb {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%);
filter: blur(40px);
}
/* Geometric lines */
.line-accent {
width: 100px; height: 4px;
background: linear-gradient(90deg, var(--accent), transparent);
}
/* Grid pattern overlay */
.grid-overlay {
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
<!-- Stat block -->
<div class="stat">
<span class="stat-number">42%</span>
<span class="stat-label">Increase in Efficiency</span>
</div>
<!-- Timeline -->
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Phase 1</h3>
<p>Description</p>
</div>
</div>
</div>
<!-- Progress bar -->
<div class="progress-track">
<div class="progress-fill" style="width: 75%"></div>
</div>
If Node.js is available, use Puppeteer to render to PNG:
const puppeteer = require('puppeteer');
async function renderDesign() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1080, height: 1350 });
await page.goto('file:///path/to/design.html');
await page.screenshot({ path: 'design.png', fullPage: false });
await browser.close();
}
wkhtmltoimage if available