メニュー
Generate text-heavy graphics (banners, social images, OG images) using Playwright to render HTML with real web fonts. Perfect for branded collateral where typography matters.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Run Gemini Deep Research reports on any topic. Use when user says "deep research", "research report", "gemini research", or "run a research report on...". Generates comprehensive research reports using Google's Deep Research agent.
Search for recent news and updates about topics in your INTERESTS.md file (like Google Alerts). Use when user says "check my interests", "interests digest", "what's new", "news digest", or "update me on my interests". Generates a concise digest only when there's new information.
Organize and triage files from the Notion export folder. Use when user says "triage notion", "organize notion", "clean up notion", "notion cleanup", or "let's work on notion".
Updates the NOW.md dashboard in Obsidian by aggregating tasks from project TODO.md files. Use when user says "update my NOW", "refresh my dashboard", "what should I work on", or "let's do my weekly review". Supports quick regeneration mode and guided weekly review mode.
Multi-phase market research for evaluating a business idea. Runs ecosystem surveys, competitive deep dives, distribution analysis, and CAC estimation. Creates comprehensive summary documents. Use when user says "research business idea", "market research", "evaluate this market", or wants to understand competitors and unit economics.
Create new Claude Code skills with proper structure and documentation. Use when the user asks to create, design, or build a new skill, or needs help structuring skill files.
| name | playwright-banner-generator |
| description | Generate text-heavy graphics (banners, social images, OG images) using Playwright to render HTML with real web fonts. Perfect for branded collateral where typography matters. |
Generate pixel-perfect graphics with real web fonts using Playwright. Unlike AI image generators, this approach renders actual fonts (Google Fonts, etc.) with perfect fidelity.
| Type | Dimensions | Notes |
|---|---|---|
| LinkedIn Personal | 1584×396 | Account for profile photo in bottom-left |
| LinkedIn Company | 1128×191 | Account for company logo on left |
| OG Image | 1200×630 | Standard social sharing size |
| Twitter Header | 1500×500 | Twitter/X profile banner |
Create an HTML file with:
<link>width: 100%; height: 100%)Template location: ~/.claude/skills/playwright-banner-generator/templates/
Example structure:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
background: #0d0d0d;
font-family: 'Inter', sans-serif;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 80px;
}
/* Your custom styles */
</style>
</head>
<body>
<div class="container">
<!-- Your content -->
</div>
</body>
</html>
Use Playwright MCP tools in this order:
Set viewport to 2x dimensions (for retina quality):
browser_resize: width=3168, height=792 # For 1584×396 output
Set deviceScaleFactor via CDP (for sharpness):
browser_run_code: async (page) => {
const client = await page.context().newCDPSession(page);
await client.send('Emulation.setDeviceMetricsOverride', {
width: 3168,
height: 792,
deviceScaleFactor: 2,
mobile: false
});
}
Navigate to the HTML file:
browser_navigate: file:///path/to/template.html
Wait for fonts to load (important!):
browser_run_code: async (page) => {
await page.waitForTimeout(1000);
await document.fonts.ready;
}
Take screenshot:
browser_take_screenshot: filename=banner-2x.png
Use sips (macOS) to resize to target dimensions:
sips -z 396 1584 banner-2x.png --out final-banner.png
For other platforms, use ImageMagick:
convert banner-2x.png -resize 1584x396 final-banner.png
./linkedin-banner.html:<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
background: #0d0d0d;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 420px; /* Clear profile photo */
}
.wordmark {
font-family: 'Playfair Display', serif;
color: white;
font-size: 36px;
margin-bottom: 24px;
}
.wordmark .stores { font-weight: 500; }
.wordmark .data { font-style: italic; font-weight: 400; }
.headline {
font-family: 'Playfair Display', serif;
color: white;
font-size: 72px;
font-weight: 500;
line-height: 1.1;
white-space: nowrap;
}
.headline em {
font-style: italic;
font-weight: 400;
}
</style>
</head>
<body>
<div class="container">
<div class="wordmark">
<span class="stores">Stores</span><span class="data">Data</span>
</div>
<h1 class="headline">
Invite-Only <em>Ecommerce Intelligence</em>
</h1>
</div>
</body>
</html>
Render with Playwright:
banner-2x.pngResize:
sips -z 396 1584 banner-2x.png --out linkedin-banner.png
Always wait for fonts to load before screenshotting:
await page.waitForTimeout(1000);
await document.fonts.ready;
padding-left: 420px to clear profile photopadding-left: 280px to clear company logowhite-space: nowrap to prevent text wrapping<em>) for typographic varietyPre-built templates are available in ~/.claude/skills/playwright-banner-generator/templates/:
banner.html - Generic banner template (customize for any use)og-image.html - Standard OG image template (1200×630)