draft-illustration

name	draft_illustration
description	Blog Post Visual Style (Cross-Repo)

Blog Post Visual Style (Cross-Repo)

Use this skill whenever you create or generate hero images, OG/social preview images, or any post artwork so that assets have the same visual style across repositories. The style is mandatory for blog/post imagery; repo-specific paths and scripts are documented per project.

Visual style (mandatory)

All hero and post imagery MUST follow this style. Apply it when prompting image generation (e.g. GenerateImage, DALL·E, Midjourney) or when briefing a designer.

Visual rules:

Rule	Requirement
Background	Solid black only. No gradients, no white sections, no mixed backgrounds.
Foreground	White line-art. Subtle edge shading for dimensionality is encouraged; large filled areas and color gradients are not.
Line work	Polished, refined white outlines with consistent stroke weight. Lines should feel engraved or blueprint-quality — smooth curves, clean joints, slight dimensional depth on edges. Not sketchy or rough.
Color	Monochromatic black and white only. No gray tones or other colors outside of subtle edge shading for depth.
Composition	Scene-based or centered. Objects may sit on surfaces with perspective (e.g. an angled desk, a platform). Generous negative (black) space around the subject.
Aesthetic	Polished, dimensional, iconic. Technical engraving or refined blueprint feel. Not flat/clip-art, not photorealistic. Symbolic objects should feel like they have weight and presence.
Typography	None. No text, labels, or captions within the image.

Focal brand: When the post is about a specific product or brand (e.g. Notion, Claude, OpenAI), focus the hero on that brand using recognizable shapes or motifs in the same white line-art style. No logos or wordmarks; the image should read as "this post is about X" at a glance.

Prompt template for image generation

When generating a new hero or post image, use a prompt that enforces the style. Example structure:

[Subject or theme]. Pure black background. White line-art with polished, refined outlines and subtle edge shading for dimensionality. Engraving or blueprint quality — smooth curves, clean joints, slight depth on edges. Objects may sit on a surface with perspective. Iconic, symbolic, not photorealistic. No text or labels. Generous negative (black) space around the subject.

Replace [Subject or theme] with the post topic (e.g. "Agent memory and a source of truth", "Three robot faces in wax-seal stamps on a desk", "Calendar grid connected to a mesh network").

Style references: know-which-of-your-agents-wrote-what-hero.png (wax seals with dimensional depth on angled desk), the-argument-cagan-already-won-hero.png (geometric Atlas figure with polished wireframe).

Asset variants (when a repo supports them)

Some repos (e.g. markmhendrickson website) expect multiple composed assets from the same style. Create separate compositions for each aspect ratio; do not just crop one image.

Asset	Aspect	Typical use
Hero	Flexible (keep-proportions)	Full-width on post page
Square thumbnail	1:1	Listings, cards, prev/next
OG / social	1200×630 landscape	Twitter, LinkedIn, etc.

All three must share the same visual style (black background, white line-art, no typography). Prefer a script or export step to generate OG from a composed 1200×630 source when the repo provides one.

Repo-specific paths and scripts

Each repository may define where to store assets and which scripts to run. Check that repo's docs (e.g. README.md, content/posts/README.md, or foundation adapter config) for:

• Image directory — e.g. public/images/posts/, static/images/posts/
• Naming — e.g. {slug}-hero.png, {slug}-hero-square.png, {slug}-hero-og.png, og/{slug}-1200x630.jpg
• Layout hint — e.g. {slug}-hero-style.txt with keep-proportions for uncropped display
• Scripts — e.g. generate-hero-square-from-hero.mjs, npm run generate:og:post -- <slug>, regenerate-hero-assets-centered.mjs
• Cache — e.g. python3 execution/scripts/generate_posts_cache.py after adding or changing assets

If the repo has no docs, apply only the Visual style (mandatory) and use sensible paths (e.g. images/posts/, slug-based filenames).

Checklist when creating post images

1. Generate or obtain the hero (and optional square/OG) using the mandatory visual style and prompt template above.
2. Save assets in the repo's configured directory with the repo's naming convention.
3. Add layout hint when the repo uses it (e.g. keep-proportions in -hero-style.txt).
4. Run repo scripts for derived assets (square crop, OG export) and cache regeneration when documented.
5. Do not add text, logos, or colors that break the black-background / white-line-art rule.

Reference

Canonical style reference: Hero Image Style Guide in the markmhendrickson website posts README (execution/website/markmhendrickson/react-app/src/content/posts/README.md). This skill is the foundation-level summary so the same style can be applied in any repo without reading that file.