Flux

Verified against Flux · 2026-08-08

Build a SaaS website hero image on Flux.1 Kontext around a real product screenshot

A Kontext editing brief that takes an actual app screenshot you already have and composites it into a polished marketing-hero scene, instead of asking the model to hallucinate a fake UI from a text description.

Flux.1 Kontext [pro]7 fillable variables

The prompt

Ready to copy — highlighted parts are example details you can swap.

SOURCE SCREENSHOT
analytics_dashboard_v2.png — a project-management dashboard showing a burndown chart and three colored task columns. This is the fixed input — every pixel of the interface inside it (labels, charts, buttons, copy) must stay exactly as shown. Do not redraw, relabel, or "improve" any on-screen text or UI element.

DEVICE FRAME
Place the screenshot inside a matte silver MacBook Pro screen, three-quarter angle from camera-left, at a angle and perspective that reads as intentional art direction rather than a flat straight-on crop — a slight tilt or three-quarter angle the way a real product page would present it.

SCENE AROUND THE DEVICE
a minimal light-oak desk beside a single potted plant, softly blurred office window light behind it. Build the environment around the device, not through it — nothing from the background should overlap or dim the screen's legibility.

BRAND COLOR
a deep indigo appearing in the desk lamp's glow and the plant pot's glaze should appear as the dominant accent in the scene's lighting, gradient, or one supporting object — enough to feel on-brand without repainting the screenshot itself in that color.

COMPOSITION FOR HEADLINE SPACE
the upper-left third of the frame, above and beside the laptop must stay genuinely uncluttered: since Kontext has no negative-prompt field, describe that region positively as a soft gradient or out-of-focus background rather than simply asking for empty space. Nothing text-shaped, sign-shaped, or high-contrast should sit there, since a region that reads as "label-shaped" tends to grow illegible pseudo-text on its own.

LIGHT AND DEPTH
soft north-facing window light, cool and even, no harsh shadows, with the device sitting slightly forward of the background on its own soft contact shadow so it reads as a physical object in a photographed scene, not a flat screenshot pasted onto a stock photo.

WHAT MUST NOT HAPPEN TO THE SCREEN
The screenshot's interface must remain sharp, legible, and unaltered at full resolution — no chromatic blur across the UI text, no warping of straight edges or grid lines in the interface, and no reflection or glare so strong it obscures any label or number shown.

CHECK BEFORE FINALIZING
Zoom into the screen region specifically and confirm every word of UI copy still matches analytics_dashboard_v2.png — a project-management dashboard showing a burndown chart and three colored task columns exactly — this is the single most common failure in device-mockup composites, since the model will sometimes quietly re-render small text as a similar-looking but different string.

OUTPUT
One hero-ready image at 21:9 wide desktop hero banner, the device and its unaltered screen contents convincingly lit and placed in the described scene, with the upper-left third of the frame, above and beside the laptop clean enough to drop a headline directly on top in a design tool.

Customize

Optional — swap in your own details for the highlighted parts above.

Why this works

Kontext's real advantage over a pure text-to-image Flux generation is that it edits from an actual input image rather than inventing one, and a UI screenshot is exactly the kind of content that a text prompt alone reliably gets wrong — asking any diffusion model to "generate a dashboard with a burndown chart" produces plausible-looking but factually garbled charts and mislabeled buttons, because interface text rendered from a description is never guaranteed to match anything real. Anchoring to the actual screenshot and treating it as fixed content to composite around, rather than regenerate, is the only way to guarantee the on-screen copy a visitor reads is the real product, not an approximation of one. The device-angle instruction matters because a flat, straight-on screenshot crop reads as a support-documentation screenshot, not marketing art direction — a slight three-quarter tilt with a real contact shadow is what separates a hero image from a spec sheet. The headline-space section exists for the same reason it recurs across Flux briefs generally: there is no negative-prompt field to say "keep this area empty," so the only lever is describing what that region does contain (a soft gradient, an out-of-focus background) rather than what it lacks, and avoiding any framing that reads as sign-shaped, since text-shaped empty regions are a well-documented trigger for garbled pseudo-text in diffusion and flow-matching models alike. Finally, the explicit "zoom into the screen and check the copy" step exists because compositing a real screenshot doesn't fully guarantee pixel-perfect preservation on every generation — Kontext is strong at this relative to base text-to-image, but a reviewer who assumes it's automatic rather than verifying it will occasionally ship a hero image with subtly wrong on-screen numbers.

What you get back

A tilted MacBook Pro showing the exact analytics dashboard screenshot, resting on a light-oak desk beside a blurred plant, indigo lamp glow as the brand accent, with the upper-left third of the 21:9 frame left as a soft out-of-focus gradient ready for a headline.

Verified against

Flux Flux.1 Kontext [pro] · 2026-08-08

Changelog

  • 2026-08-08 — Initial publish, verified against Flux.1 Kontext [pro] for screenshot-accurate device-mockup hero compositing.

Need this built into your business?

If a prompt isn't enough — what Scult builds, built and maintained for you — that's Scult's day job.

EXPLORE WHAT SCULT BUILDS
Get a clean, ecommerce-ready product shot from Flux.2 with no negative promptsA structured product-photography brief for Flux.2 that produces a genuinely clean, seamless studio background purely through positive description — because Flux has no negative-prompt field to simply tell it "no clutter, no props, no shadows."Flux.2Flux.1 [pro]2026-07-22Brief Flux.2 for an editorial lifestyle photograph, steered by positive descriptionA camera-and-film-aware natural-language brief for Flux.2 that gets a genuine editorial-magazine look — because Flux has no negative-prompt field, unwanted elements have to be steered out through what you describe, not an exclusion list.Flux.22026-07-24Design a scroll-stopping social graphic on Flux.2 with real reserved caption spaceA platform-aware brief for a social campaign graphic on Flux.2 that reserves genuinely clean space for a text overlay added later in a design tool — achieved by describing the empty area explicitly, since Flux has no exclusion field to keep text or clutter out of it.Flux.22026-08-01Keep a character consistent across multiple scenes with Flux.1 KontextA sequential in-context editing workflow for Flux.1 Kontext that locks a character's face, outfit, and proportions across a series of new scenes by editing forward from one reference image each time, instead of re-describing the character from scratch and getting a visibly different person every generation.Flux.1 Kontext [pro]Flux.1 Kontext [dev]2026-07-26
All Flux prompts

Check your AI visibility

One URL in, a 0–100 score and the exact fixes out.

RUN THE CHECK

Browse all the tools

15 tools across six categories
13 of them never send your data anywhere

Free · No signup · No trial clock

SEE THE DIRECTORY