5 min read
diagram-to-html
Generated source view for the actual executable
misc/diagram-to-htmlskill. The durable routing article is Media Generation Skills. Source: skills/misc/diagram-to-html/SKILL.md
Runtime Source
| Field | Value |
|---|---|
| Category | misc |
| Origin | personal |
| Slug | diagram-to-html |
| Source slug | diagram-to-html |
| Family | Media Generation Skills |
| Source | skills/misc/diagram-to-html/SKILL.md |
Bundled Resources
No bundled resource files.
Description
Generate publication-quality diagrams and infographics by ideating with AI image generation, then converting to pixel-perfect HTML with custom fonts. Use when the user says "create a diagram", "make an infographic", "visualize this data", "diagram for LinkedIn", "chart for a post", or wants a data visualization they can screenshot for social media. Also triggers on "make this look good as a graphic" or "turn this into a visual.
Skill Source
---
name: diagram-to-html
description: Generate publication-quality diagrams and infographics by ideating with AI image generation, then converting to pixel-perfect HTML with custom fonts. Use when the user says "create a diagram", "make an infographic", "visualize this data", "diagram for LinkedIn", "chart for a post", or wants a data visualization they can screenshot for social media. Also triggers on "make this look good as a graphic" or "turn this into a visual."
origin: personal
source_slug: diagram-to-html
---
# Diagram to HTML
Two-phase workflow: ideate the layout with image generation, then build it as
a standalone HTML file with the user's own fonts for pixel-perfect typography.
## Why This Exists
AI image generation produces good layouts but bad typography (wrong fonts,
misaligned text, hallucinated characters). HTML/CSS produces perfect typography
but designing the layout from scratch is slow. This skill chains both: use the
image to nail the composition, then rebuild it in HTML where every pixel is
controllable.
## Phase 1: Ideate with Image Generation
Use the GenerateImage tool to explore layout, visual weight, and composition.
**Prompt guidelines:**
- Describe a clean data visualization, not an illustration
- Specify: white/dark background, no 3D, no AI art, no photorealistic elements
- Reference a visual style: "Bloomberg Terminal", "Stripe docs", "Vercel dashboard"
- Call out information hierarchy: title size > stat callouts > body text > labels
- Describe proportional elements (bar widths based on data, not aesthetics)
- Include all text content in the prompt so the layout accounts for real copy
**Iterate 1-3 times** until the composition feels right. Don't worry about font
accuracy or small text rendering. Focus on:
- Visual weight distribution
- White space balance
- Information hierarchy
- Element alignment and grid structure
- Color palette
## Phase 2: Convert to HTML
Build a standalone `.html` file that recreates the layout with real fonts.
### Font Loading
Kevin's font library lives at `ui/public/fonts/`. Load via @font-face with
relative paths from the HTML file location:
```css
@font-face {
font-family: "Nacelle";
src: url("../../ui/public/fonts/nacelle/Nacelle-Regular.otf") format("opentype");
font-weight: 400;
}
@font-face {
font-family: "Nacelle";
src: url("../../ui/public/fonts/nacelle/Nacelle-SemiBold.otf") format("opentype");
font-weight: 600;
}
@font-face {
font-family: "Nacelle";
src: url("../../ui/public/fonts/nacelle/Nacelle-Bold.otf") format("opentype");
font-weight: 700;
}
```
**Available fonts** (check `ui/src/app/fonts.css` for full list):
- Nacelle (Kevin's current preference for diagrams)
- Neue Montreal, PP Mori, PP Neue Machina, PP Supply Mono (monospace)
- Any font in `ui/public/fonts/` can be loaded
### HTML Structure
```
wiki/assets/<slug>-diagram.html ← the file
wiki/assets/<slug>.png ← any background images
```
**Template:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1200">
<title>Diagram Title</title>
<style>
@font-face { /* load fonts */ }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Nacelle", system-ui, sans-serif;
background: #fff;
color: #111;
width: 1200px; /* LinkedIn optimal */
padding: 64px 72px;
position: relative;
overflow: hidden;
}
/* ... layout styles ... */
</style>
</head>
<body>
<!-- content -->
</body>
</html>
```
### Design Rules
**Dimensions:** 1200px wide for LinkedIn/X optimal. Height is content-driven.
**Typography hierarchy:**
- Title: 40-48px, font-weight 700, letter-spacing -0.02em
- Subtitle: 16px, color #666
- Stat callouts: 48px, font-weight 700, letter-spacing -0.03em
- Body/descriptions: 14-15px, color #333
- Labels/dates: 13px, font-weight 600, color #999, uppercase
**Color palette:**
- Use the subject's brand color for bars/accents (npm red #CB3837, etc.)
- Badges: light tinted background + dark text (e.g., #FEE2E2 + #B91C1C)
- Defense/positive callouts: green border #16A34A, green text #15803D
- Dividers: #E5E5E5
**Layout patterns:**
- Left-aligned date labels in a fixed column (grid-template-columns: 72px 1fr)
- Horizontal bars scaled proportionally to real data
- Stat callout row: 3-column grid with large numbers + small labels
- Generous whitespace: 48-56px between sections, 20px between rows
**Background imagery:** For thematic images (logos, illustrations), use a real
PNG/SVG with CSS opacity (0.04-0.08), `filter: invert(1)` if needed for
white-background contrast, positioned absolute in the corner. Never use inline
SVG illustrations for complex imagery.
### Logos
Use real SVG logos, not text approximations. For npm:
```html
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<rect width="256" height="256" fill="#C12127"/>
<path d="M48 48h160v160h-32V80h-48v128H48V48z" fill="#fff"/>
</svg>
```
Search for official SVG logos or use brand assets. Never approximate a logo
with styled text.
## Phase 3: Screenshot and Ship
User opens the HTML in their browser and screenshots it. The result is a
pixel-perfect diagram with correct typography that can be posted to LinkedIn,
X, or embedded in articles.
**Tip:** `Cmd+Shift+4` on macOS for region capture, or use browser DevTools
device toolbar set to exactly 1200px wide for consistent captures.
## Output Checklist
- [ ] Image generation explored 1-3 layout options
- [ ] HTML uses @font-face with the user's chosen font
- [ ] Width is 1200px (LinkedIn/X optimal)
- [ ] Bars/sizes are proportional to real data
- [ ] Brand colors are accurate (not approximated)
- [ ] Logos are real SVGs
- [ ] Background imagery uses real PNGs at low opacity
- [ ] All text is selectable (not baked into images)
- [ ] File saved to wiki/assets/ with descriptive name
Timeline
- 2026-07-15 | Generated a browseable source page from the actual executable skill file. Source: skills/misc/diagram-to-html/SKILL.md