Skip to content
Content
Skill

/design-blog-hero

Generate a blog post hero artifact — TWO pixel-exact HTML canvases in a single file: an Open Graph card (1200×630) for social meta tags AND an in-page hero (1440×600) for the article header. Both canvases share the same content + brand tokens; only the proportions differ. Reads

Boost this skill
@slogsdonslogsdon@slogsdon
From plugin
skills-design
319 skills
Install
$ npx -y skills add slogsdon/skills-design --skill design-blog-hero --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/design-blog-hero

Context preview

The summary Claude sees to decide when to auto-load this skill.

Generate a blog post hero artifact — TWO pixel-exact HTML canvases in a single file: an Open Graph card (1200×630) for social meta tags AND an in-page hero (1440×600) for the article header. Both canvases share the same content + brand tokens; only the proportions differ. Reads

SKILL.md

design-blog-hero.SKILL.md
name: design-blog-hero
description: |
  Generate a blog post hero artifact — TWO pixel-exact HTML canvases in a single file: an Open Graph card (1200×630) for social meta tags AND an in-page hero (1440×600) for the article header. Both canvases share the same content + brand tokens; only the proportions differ. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "blog hero for X", "OG card for X", "open graph image", "in-page hero", "/blog-hero".

Skill: blog-hero

Produces a single self-contained HTML file containing TWO pixel-exact canvases:

1. **OG card** (1200×630) — Open Graph / Twitter card dimensions for social link unfurls 2. **In-page hero** (1440×600) — wide format for the article's header section on the site

The same headline + meta render in both canvases at appropriate proportions. Screenshot each canvas separately for its respective use.

When to use

  • Publishing a blog post / field note that needs both an OG meta image and a page header asset
  • A `DESIGN.md` exists for the brand

Inputs

  • **Required:** brand slug, post title / hero headline (1 sentence, ending in period per brand voice)
  • **Optional:** dek (1 supporting sentence), category label, dateline, optional type-accent word (one word in the headline to set in `--color-accent`)

Output

`./design/<brand-slug>/artifacts/blog-hero-YYYY-MM-DD-<slug>.html` — single file, two canvases stacked vertically with a labeled header above each so it's clear which to screenshot for which use.

Steps

1. Verify brand exists

test -f ./design/<brand-slug>/tokens.css

If missing, stop and tell the user to run `/design-system <brand-slug>` first.

2. Gather the brief

Ask in one message:

1. Hero headline — the post's title, sentence-case ending in period (max ~12 words for legibility at OG thumbnail size)
2. Optional dek — 1 supporting sentence (max ~18 words)
3. Category label — short string (e.g. "field notes", "strategic insights")
4. Dateline — YYYY.MM.DD
5. Optional type-accent word — one word from the headline to set in the brand's accent color

3. Pick variation — ARCHITECTURE FIRST

Pick ONE archetype that applies to BOTH canvases (consistency between OG and in-page hero is important for brand recognition):

  • `chrome-led` — eyebrow + headline + dateline + category. Use cautiously — it's the AI-editorial default.
  • `type-only` — headline only at maximum scale; nothing else. Strongest for short titles.
  • `inverse-text` — body copy fills surface; headline carved out of the type wall.
  • `object-of-content` — looks like a fragment of the actual article (excerpt, pull-quote pattern, transcript line).
  • `pattern-led` — typographic pattern fills surface; headline is the punctum.

Then pick from:

  • **Layout**: `symmetric | asymmetric | off-grid | full-bleed | split`
  • **Color usage**: `monochrome | single-accent | inverted` (full dark inversion is the canonical v2 feature treatment for hero contexts)
  • **Type pressure**: `display-dominant | mixed-weight | mono-led`

**Cross-artifact rule:** if a recent artifact for this brand used the same archetype, pick differently. Read `./design/<brand-slug>/artifacts/*.html` variation comments before deciding.

4. Generate the canvas HTML

Template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — Blog hero — <topic></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<families from DESIGN.md>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>

html, body { margin: 0; padding: 0; background: #2a2a2a; min-height: 100vh; font-family: var(--type-sans-family); }
body { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px 0; }

/* Section labels (above each canvas — for the screenshotter, NOT part of the artifact) */
.canvas-label {
  font-family: var(--type-mono-family);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  align-self: center;
}

/* OG canvas — exact 1200×627 (LinkedIn/Twitter/Facebook OG spec) */
.canvas-og {
  width: 1200px;
  height: 630px;
  background: var(--color-surface);   /* or --color-ink for inversion */
  color: var(--color-ink);
  /* ... layout per variation ... */
}

/* In-page hero — wider format for article header */
.canvas-hero {
  width: 1440px;
  height: 600px;
  background: var(--color-surface);
  color: var(--color-ink);
  /* ... layout per variation ... */
}

@page { size: 1200px 630px; margin: 0; }   /* default page size for browser print export */
</style>
</head>
<body>
<!--
Variation choices:
  archetype:  <picked>
  layout:     <picked>
  color:      <picked>
  type-press: <picked>
-->

<span class="canvas-label">→ OG card · 1200×630 · screenshot this for og:image meta tag</span>
<article class="canvas canvas-og">
  <!-- hero content -->
</article>

<span class="canvas-label">→ In-page hero · 1440×600 · screenshot this for the article header</span>
<article class="canvas canvas-hero">
  <!-- same content, different proportions — vary headline scale and meta placement to suit -->
</article>
</body>
</html>

Adapt the inner content per archetype. For example:

  • **`chrome-led`**: dateline + category at top, headline center, dek + author at bottom
  • **`type-only`**: headline fills the canvas at max scale
  • **`inverse-text`**: full canvas dark inversion (`background: var(--color-ink); color: var(--color-surface);`); headline in cream
  • **`object-of-content`**: looks like a fragment of the article — excerpt, pull-quote, dateline strip mimicking the in-article layout

5. Verify and report

  • [ ] Both canvases at exact dimensions (1200×630 + 1440×600)
  • [ ] Architecture archetype documented AND differs from the most recent artifact in this brand
  • [ ] *
Read more
Read it on GitHub ↗
Ships withskills-design

Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total. Install via the slogsdon-claude-code-config marketplace.

Get the whole plugin
Stats
JavaScriptHTMLCSSGitHubAnthropic
3
Stars
0
Forks
Maintained
Maintenance
HTML
Language
MIT
License
1mo ago
Last commit
4mo ago
Created

Repo: slogsdon/skills-design

In this plugin
19 skills
See everything inside

Other skills on skills-design.

See all 19 skills in skills-design