Blog Cover Image — Reusable Prompt Template¶
What this is. A repeatable recipe for generating OG/cover images for
/blog/posts (and LinkedIn articles) in a consistent hand-drawn watercolour style — modelled on the cover Darren Johns used in his "Teaching an Old Dog New Tricks" article (4 May 2026).Why it exists. The current dark-navy OG template (blue accent strips + dark card) is clean but generic. A series of warm, hand-illustrated covers builds an instantly recognisable visual identity for the blog — especially on LinkedIn where covers compete with hundreds of others in the feed.
Who reads this. Any Copilot CLI session writing a new blog post should pull a scene-specific prompt out of this file, run it through Microsoft Designer (or ChatGPT GPT-Image), and save the result as the post's OG image.
🌸 The locked-in style (don't change between covers)¶
Lock the palette · medium · composition rules · mood for every cover in the series. Only swap the scene description per post. That's what makes them feel like one brand.
| Pillar | Locked value |
|---|---|
| Palette | Desaturated pastels — peach (#FFD9C7), pink (#F9C4D2), periwinkle (#CFD4F0), soft lavender (#E1D7F0), pale teal (#C9E4DD). Lots of warm-white space. No saturated brand colours. |
| Medium | Watercolour wash background + pencil-sketch outlines + subtle paper-grain noise overlay. |
| Composition | "Concept flow" — left-to-right or central orbital, with hand-drawn arrows tying elements together. No human portraits — the scene tells the whole story, which gives the AI more canvas to play with. |
| Logos | Re-rendered in the same watercolour + pencil style so they harmonise. Never drop in flat brand assets. |
| Typography | Hand-lettered single-line title only (no body text). Or no text at all — let the scene carry it. |
| Aspect ratio | 16:9 (1280×720 ish) — works as OG image AND LinkedIn article cover. |
| Mood | Warm, optimistic, curious, "ideas-flowing" energy. Sketchbook page, not corporate slide. |
Why no portrait? A cover that includes a stylised face of the author works for personal-narrative posts ("here's my journey…"). But the vast majority of
/blog/posts are explainers, roundups, or how-tos where the concept deserves the canvas. Keeping the portrait out of the locked style gives every cover ~30% more room for icons, arrows, and ambient detail. Add a portrait only as a deliberate exception, never as the default.
📋 Reusable prompt template¶
Paste this into Microsoft Designer / ChatGPT / Midjourney, replace [SCENE] and [PORTRAIT], keep everything else.
Create a hand-drawn watercolour and pencil-sketch illustration
for a blog article cover (16:9 aspect ratio, 1280×720 pixels).
SCENE:
[SCENE — replace with your specific concept. Examples below.
NO human figures unless the post is explicitly a personal narrative.]
STYLE (LOCK THIS — do not vary across the series):
- Pastel watercolour wash background: peach (#FFD9C7), pink
(#F9C4D2), periwinkle (#CFD4F0), soft lavender (#E1D7F0),
pale teal (#C9E4DD). Desaturated. Lots of warm-white airy space.
- Pencil-sketch outlines with subtle paper-grain noise overlay.
- Hand-drawn arrows connecting elements (not vector arrows —
loose, sketchy strokes).
- Tech logos (GitHub, Azure, M365 apps, Copilot, etc.) re-rendered
in the same watercolour + pencil style so they harmonise with
the rest of the illustration. NOT flat brand assets dropped in.
- Concept-doodle aesthetic — like a visual essay on a sketchbook page.
- Hand-lettered title only (or no text at all) — never paragraph copy.
- No human portraits — the scene should tell the story by itself.
MOOD: warm, optimistic, curious, ideas-flowing energy.
OUTPUT: 16:9, 1280×720 pixels, suitable for blog OG image and
LinkedIn article cover. PNG or high-quality JPEG.
🎨 Three example scene prompts (ready to paste)¶
Example 1 — "Vibe-crafting" / Copilot CLI / tutorial-style post¶
SCENE: A large glowing lightbulb in the top-left third of the
frame (the seed of the idea) with tiny watercolour sparkles
drifting around it. Loose hand-drawn arrows flow diagonally
rightward through three "stations": (1) a terminal window with
the smiling Copilot CLI robot mascot peeking out, (2) the GitHub
octocat badge, (3) the Azure 'A' logo. Each station has a tiny
hand-lettered word underneath ("plan", "ship", "host"). The
arrows land on a small open laptop on the right showing a
stylised dashboard with three data tiles labelled with soft
abstract bars. A few ambient watercolour blobs float in the
empty spaces so it doesn't feel sparse.
Example 2 — Monthly Microsoft 365 Copilot updates roundup¶
SCENE: Central composition. A stylised calendar page floats in
the middle of the frame with "May 2026" hand-lettered at the top.
Five Microsoft 365 app icons orbit the calendar at equal angles
— PowerPoint, Word, Excel, Teams, Outlook — each connected back
to the calendar by a thin hand-drawn arrow. Each icon has a tiny
watercolour speech bubble next to it carrying a single hand-
lettered word: "Brand Kit", "Agent", "Cowork", "Notebook",
"Picker". A small Copilot bot character at the top of the
calendar smiles and holds a tiny watering can, droplets falling
onto the calendar (implying features being nurtured). Loose
sparkles fill the corners.
Example 3 — Licensing / Simplification / decision-making post¶
SCENE: A tangled, knotted ball of coloured watercolour threads
occupies the left third of the frame, with small tags hanging
off various strands labelled with M365 plan names: "E3", "E5",
"Business Premium", "F3", "Copilot". A hand-drawn pair of
scissors and a magnifying glass float in the middle of the
frame, mid-action — untangling the threads. The threads emerge
on the right side of the frame as five neat parallel horizontal
lines, each labelled with one plan name in clean hand-lettering,
each line a different pastel colour from the palette. Above the
parallel lines, a small "$" symbol with a soft downward arrow
(saving money). Loose pencil-arrow flow throughout.
🛠️ Tool comparison¶
Pick one tool and stick with it for the whole series — switching tools mid-series breaks consistency.
| Tool | Cost | Best for | Notes |
|---|---|---|---|
| Microsoft Designer (designer.microsoft.com) | Free | Default choice. M365 SSO, fast. | Uses DALL-E 3. Limited control over exact style — may need 3–5 generations to land. |
| ChatGPT Plus (GPT-Image / GPT-4o) | $20/mo | "Upload my photo + build scene around me" | Best for the personal-portrait pillar. Released April 2026 with strong reference-photo handling. |
| Midjourney v7 | $10–30/mo | Most artistic output | Discord/web UI. Best when you want the painterly quality cranked up. --ar 16:9 --stylize 500 is a good starting set. |
| Adobe Firefly | Free / CC included | If already in CC | Commercial-safe by default. Good but less stylised than MJ. |
Recommendation: Microsoft Designer for monthly roundups (fast, free). ChatGPT for posts where a recognisable Sush portrait matters.
🌿 Workflow when writing a new blog post¶
- Pick the scene archetype. Personal narrative? Roundup? Decision-explainer? Match to one of the 3 example prompts above (or write a new SCENE block).
- Pull the template (the "Reusable prompt template" block above) and paste into Designer/ChatGPT.
- Generate 3–5 variants. Don't accept the first one — the second or third usually nails the style better.
- Save at 1280×720. Filename = blog slug. Location:
aguidetocloud-revamp/static/images/og/blog/<slug>.jpg. - Frontmatter:
- Verify the OG image renders correctly via opengraph.xyz before publishing.
📌 Brand-consistency tips¶
- Reuse the palette block. Always paste the same 5 hex codes. Even small variations destroy series-feel.
- Limit the scene to 4–6 elements. Crowded covers don't read at thumbnail size — but with no portrait, we have a bit more headroom for ambient detail than Darren's reference.
- Test at LinkedIn thumbnail size. A cover that reads beautifully at 1280px but turns to mud at 256px isn't doing its job. Shrink + glance.
- Keep text minimal. Hand-lettered titles look amazing but get hard to read on tiny phones. Often better to let the scene speak.
- Portraits are the exception, not the rule. If a post is a personal narrative ("how I learned X"), adding Sush as a stylised figure is fine. For everything else, leave the canvas to the concept.
🔄 When this template needs updating¶
- If LinkedIn changes its preferred OG dimensions (currently 1280×720 at 1.91:1)
- If the palette feels stale after ~20 covers (slight rotation OK; full overhaul = whole new series)
- If we ever bring in a real illustrator and shift away from AI — at which point the human illustrator gets a brief based on the locked-in style above
Created 11 May 2026. Initial recipe based on Darren Johns's "Teaching an Old Dog New Tricks" article cover (LinkedIn, 4 May 2026).
🤖 Programmatic generation (now real — Azure Foundry / gpt-image-2)¶
Yesterday this section was speculative. Today it's a working system. See
og-image-system.mdfor the full Azure infrastructure playbook + Python wrapper + scene library + auth model + cost economics.
TL;DR: A Python wrapper at ~/.copilot/scripts/blog-cover-gen.py reads a LOCKED_STYLE block + named SCENE → calls gpt-image-2 on a Lab-tenant Azure OpenAI resource (clawy-images-openai, eastus2) → saves PNG. About $0.07/image at medium quality (~75-190s), $0.19 at high (~150-220s). Auth is Entra ID only (disableLocalAuth=true org policy).
$env:PYTHONIOENCODING="utf-8"; $env:PYTHONUTF8="1"
python "C:\Users\ssutheesh\.copilot\scripts\blog-cover-gen.py" `
--scene tier1-v4-az900-study-guide --output ".\test.png" --quality medium
Status as of 12 May 2026: infrastructure works. The visual direction is paused — Sush has asked for a fresh-perspective session to question whether watercolour is even the right medium for the OG layer before locking the LOCKED_STYLE prompt. Iteration history (v1 Darren-template → v2 dense brand-system → v3 cert covers → v4 bold ink) lives in og-image-system.md § 5, along with the open creative-direction brainstorm (§ 6) — competitor benchmark list, anti-directions, alternative media candidates (bold typography, vector flat, risograph, isometric, 3D, ink-not-watercolour, mixed media).
When the direction locks, this file and og-image-system.md get re-aligned: this one becomes the lean per-post recipe, og-image-system.md stays the infrastructure + system playbook.