{"slug": "a-weeknight-pipeline-for-dev-blog-heroes-og-images-and-doc-screenshots", "title": "A Weeknight Pipeline for Dev Blog Heroes, OG Images, and Doc Screenshots", "summary": "A developer described a repeatable weeknight workflow for producing blog hero images, Open Graph cards, and documentation screenshots using an AI photo editor that transforms existing reference images—such as dashboard screenshots and desk photos—based on text prompts. The workflow keeps references and prompt files versioned alongside the article, generates each output at its target aspect ratio rather than cropping, and uses review-style prompts that lock UI typography and forbid invented elements like extra browser windows.", "body_md": "When I ship a technical post, the markdown is usually done before I have a single image I am willing to put above the fold. Terminal screenshots are accurate and ugly. A generic \"developer at a laptop\" still does not match the stack I just wrote about. A blank Open Graph card looks like I forgot the last mile of the publish checklist.\n\nI wanted a weeknight habit, not a design sprint: a small folder of references, a short prompt, and a still I can export in the shapes a blog actually needs. I have been doing that in an [AI photo editor](https://ai-image-editor.com/) that starts from a picture I already have — a dashboard screenshot, a desk photo, a product UI — and applies the change I describe in text.\n\nThis is the layout and the rules I reuse. It is not a tour of every model on the market.\n\nI treat images the same way I treat code samples: the inputs live with the article, the outputs are disposable.\n\n```\nposts/how-we-debounced-webhooks/\n  index.md\n  media/\n    refs/\n      ui-dashboard.png    # the screen that must stay readable\n      desk.jpg            # the surface I want under the screen\n      style-grade.jpg     # a still whose light and color I want\n    prompts/\n      hero-v2.txt\n      og-21x9.txt\n      banner-8x1.txt\n    out/\n      hero-16x9.png\n      og-21x9.png\n      banner-8x1.png\n```\n\n`refs/` is reviewed like copy. If the UI changes, the screenshot changes, and every render downstream is stale on purpose. `prompts/` is source too; I will not trust a hero I cannot regenerate. `out/` can be deleted. I do not retouch pixels in `out/` if I can describe the change instead, because a hand fix will not survive the next dashboard redesign.\n\nThe brief at the top of each prompt file is short: destination (blog hero, social card, docs banner), aspect ratio, what must remain readable, and which reference is in charge of which job.\n\nA blog hero fails in a specific way. The mood is fine and the typography on the screen has turned into almost-letters. Or the desk is beautiful and a second, invented browser window has appeared behind the one I uploaded.\n\nThe prompt has to sound like a review comment, not like a mood board.\n\nKeep the typography, spacing, and layout of the dashboard in the first image exactly. Place that screen on the wooden desk from the second image, morning window light from the left, no extra windows, cables, or browsers. Do not rewrite any label on the screen. Mid shot, slight angle, shallow depth of field behind the laptop.\n\nIf I also have a still whose grade I like, I say so in a separate clause: \"Match the color and contrast of the third image, but do not copy any object from it.\" Untagged piles are how a plant from the grade still ends up growing out of the laptop.\n\nFor a documentation illustration, I often want the opposite of a lifestyle desk: a clean surface, the UI large, nothing competing with the screenshot. The sentence changes; the structure does not. Lock the screen, name the set, forbid invented chrome.\n\nCropping a 16:9 hero into a wide social card is how you lose the part of the UI you were trying to show. I decide the shape in the prompt file, then generate that shape.\n\nMost models in the editor support Auto plus ratios from 1:1 to 21:9, which covers a blog hero and a wide Open Graph-style card. For a thin docs banner or a panorama strip, Nano Banana 2.1 adds 4:1, 1:4, 8:1, and 1:8. A few other models add 3:1 and 1:3. I do not treat those as interchangeable. A 21:9 card and an 8:1 banner are different compositions; I run them as two jobs with the same references and a framing line that changes.\n\nWhen I start from a screenshot whose proportions I want to keep, I leave the job on Auto and do not force a banner shape onto a nearly square UI crop.\n\nUpload limits are ordinary and worth checking once: JPG, JPEG, PNG, and WebP, each up to 10MB. That is enough for a retina screenshot if I do not also dump a raw desktop photo into the same file.\n\nThe editor exposes several models, including Nano Banana 2.1, Nano Banana 2 and its Lite and Pro variants, GPT Image 2.6 and 2.5, GPT Image 2, and the Seedream 5.x family. I do not have a universal winner. I have a habit: the first pass is the cheapest model that can hold the typography, at 1K, which is what a free account produces. If the lock holds and I need the image for a header that will be viewed large, a subscription or credit pack unlocks 2K and 4K on supported models.\n\nEach task costs credits based on the model and the resolution, and the cost is shown on the Generate button before I start. If a generation fails, the credits come back. That is the only reason I am willing to iterate on a banner at night; I am not guessing the price of a typo.\n\n`refs/` is the current UI, not last month's.\nNone of this replaces a real screenshot in the body of the tutorial. It replaces the blank or mismatched image at the top of the post, and the social card that used to be a cropped heading. The next article should be a copy of the folder, a new screenshot, and a new render — not a new production.", "url": "https://wpnews.pro/news/a-weeknight-pipeline-for-dev-blog-heroes-og-images-and-doc-screenshots", "canonical_source": "https://dev.to/jack_2737d4f05bb6873eb5fd/a-weeknight-pipeline-for-dev-blog-heroes-og-images-and-doc-screenshots-36a1", "published_at": "2026-11-14 08:34:05+00:00", "updated_at": "2026-11-14 08:50:14.775703+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "ai-products"], "entities": ["Nano Banana 2.1", "Nano Banana 2"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/a-weeknight-pipeline-for-dev-blog-heroes-og-images-and-doc-screenshots", "markdown": "https://wpnews.pro/news/a-weeknight-pipeline-for-dev-blog-heroes-og-images-and-doc-screenshots.md", "text": "https://wpnews.pro/news/a-weeknight-pipeline-for-dev-blog-heroes-og-images-and-doc-screenshots.txt", "jsonld": "https://wpnews.pro/news/a-weeknight-pipeline-for-dev-blog-heroes-og-images-and-doc-screenshots.jsonld"}}