| name | yakshaver-blog-banner |
| description | Create a YakShaver blog banner image (1200×675 PNG) in the consistent house style — dark background, red glow, YakShaver logo, bold headline left, flat vector illustration right. Use whenever adding or updating a banner for a YakShaver blog post in content/blogs/YakShaver/. |
YakShaver Blog Banner Generator
Generates blog banner PNGs that match the existing YakShaver blog style. Banners are
authored as a self-contained HTML file, rendered to PNG with headless Chrome, and
saved to public/YakShaver/Blogs/<blog-slug>.png.
Before designing, look at 2–3 existing banners for calibration:
public/YakShaver/Blogs/ROI.png,
macos_update.png, yakshaver-anywhere-banner.png (view them with the Read tool).
Design system (do not deviate)
Canvas: 1200×675 px (16:9 — matches the bannerImage frontmatter requirement).
Layout:
- YakShaver logo top-left at
top: 44px; left: 56px; height: 46px
- Left column (x=56, width ≤ 560px, vertically centred around y≈380): kicker → headline → red dash → subtitle
- Right zone (roughly x 690–1140, y 110–500): one flat vector illustration of the topic
- Never place text or illustration within 56px of the canvas edge
Colors:
- Background:
#161616 with two radial red glows (see template) — the glow sits behind the illustration side
- Brand red (accents, kicker, dash, highlights):
#e5484d
- Headline:
#ffffff · Subtitle / secondary: #9b9b9b · Muted UI text: #bdbdbd
- Illustration surfaces:
#1c1c1c–#262626 cards with 1px solid #333 borders
Typography (Helvetica Neue / Arial):
- Kicker: 20px, bold, uppercase,
letter-spacing: 6px, brand red. Usually PRODUCT UPDATE; other options: PRODUCTIVITY · ROI, GETTING STARTED — pick to match the post category
- Headline: 62px, weight 800, white, max 2 lines,
line-height: 1.13. Shorten the blog title if needed — punchy beats complete
- Red dash: 92×6px,
border-radius: 3px, 30px above/26px below
- Subtitle: 26px,
#9b9b9b, one line, ≤ 45 characters — a benefit statement, not a description
Illustration (the only part you design per-post):
- One concept, flat vector style, no photos, no gradients on shapes, no more than ~3 elements
- Built from the design-system palette; brand red is the focal accent (glow shadows like
box-shadow: 0 0 0 10px rgba(229,72,77,0.18), 0 0 40px rgba(229,72,77,0.5) make red elements pop)
- Common motifs already in use: browser/app window with macOS traffic lights, dashed red capture
region with corner handles, red record button, stopwatch/timer, document/work-item card, badges
and pill chips. Reuse these CSS pieces from the template where they fit
- Give containers
display: flex; flex-direction: column and inner areas flex: 1 so nothing
clips at fixed heights (this has bitten before)
Process
-
Copy the template template.html (next to this file) into the scratchpad directory as
<blog-slug>-banner.html.
-
Set the logo path: replace {{LOGO_SRC}} with the absolute file URL to the logo, e.g.
file:///<repo-root>/public/YakShaver/yakshaver-logo.png.
-
Write the copy: kicker, headline (≤ 2 lines), subtitle. Update <title> too.
-
Design the illustration: replace the contents of <div class="illustration"> with your
concept, following the illustration rules above.
-
Render with headless Chrome from the scratchpad directory:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--headless=new --disable-gpu --hide-scrollbars \
--window-size=1200,675 \
--screenshot=<blog-slug>.png \
--allow-file-access-from-files \
"file://$PWD/<blog-slug>-banner.html"
(On Windows/Linux substitute the Chrome/Chromium binary path.)
-
Verify visually: open the PNG with the Read tool and check —
-
Ship it: copy the PNG to public/YakShaver/Blogs/<blog-slug>.png and set
bannerImage: /YakShaver/Blogs/<blog-slug>.png in the post's MDX frontmatter (both the
English post and its zh/ translation reference the same image).
