// Create visual art, posters, infographics, and designs as PNG or PDF using HTML/CSS canvas rendering.
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.
Create, read, edit, and manipulate Word documents (.docx files).
| 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