Digital Product Promo — AI image prompt

Digital Product Promo - Stills

Style DNA

Authenticity first. The product's real layout, typography, colors, copy, and interaction logic are the substance. Prefer real screenshots over generated UI whenever the plate represents an actual interface; never invent UI states, features, prices, metrics, or claims that are not in approved sources.
Capture discipline. Take screenshots at 2x device pixel ratio, in a consistent viewport, with realistic (not lorem-ipsum) content in every visible field. One product state per plate - no half-loaded skeletons unless the loading state is the feature.
Cinematic staging around the real thing. Depth comes from separation: the screenshot floats as a crisp plane over a staged background - soft brand-tinted gradients, subtle vignettes, large soft shadows (24-80px blur equivalents), and gentle perspective. The UI plane itself is never warped enough to hurt text legibility.
Reference intent, not reference content. When the user supplies a reference image or style board, treat it as a style constraint - framing, rhythm, depth treatment - adapted to this product. Never copy the reference's brand content, and never assume a template pack exists that wasn't supplied.
Palette derives from the product. Sample the brand's primary and one accent from the actual interface; backgrounds are desaturated or darkened relatives of those colors, not arbitrary decoration. Keep readable product and brand text pixel-exact.
Light: one soft directional key implied by the shadow, an optional rim or glow on the plate edge picked from the accent color. No lens-flare clutter.
Typography for overlay copy: the product's own brand font when known, otherwise a clean neutral sans. Short benefit-led lines, generous tracking, never covering interface content. Exact product wording stays exact.
Restraint: decorative ornament that competes with the interface is a defect. Every staging choice should clarify the product story.

Subjects & framing

Subjects: web apps, dashboards, mobile apps, landing pages, developer tools, desktop software - launch visuals, feature showcases, product storytelling. Not talking-head content or non-product graphic art.
Aspect ratios: 16:9 for launch pages and presentation decks, 9:16 for social posts, 1:1 for feeds. Lock the ratio across the whole plate set.
Framing the UI: full-bleed browser/device frame for establishing plates; tight crops on one component (a card, a button, a chart) for feature plates. Leave a margin of staged background so the plate never feels pasted edge-to-edge.
Safe areas: never crop mid-word in interface text; keep the product's primary action element fully visible; reserve one quiet corner or band for overlay copy.
Vertical crops of a desktop product: recompose around one column or component rather than shrinking the full page - a 9:16 plate showing an entire 16:9 dashboard reads as nothing.
Confirm the target platform only when it changes framing or safe areas; otherwise the ratio choice is enough.

Still set

A standalone series of promo plates - each a finished image, together a coherent product story:

Establishing plate - the product's identity moment: full interface (or landing hero) in a clean browser/device frame, brand-gradient background, soft shadow. Sets palette and mood for everything after.
Feature crop plates (2-3) - one component each, enlarged: the exact panel, editor, chart, or flow step the promo claims. Real pixels, one focal point per plate.
Interaction moment plate - a mid-interaction state: cursor on a button, an open menu, a drag in progress, a form half-filled. Caught mid-gesture, it shows the product being used, not just displayed.
Depth-stack plate - the interface split into 2-4 separated layers (backdrop plane, content cards, floating toolbar) with staggered offsets and individual shadows - an exploded view that reads as architecture.
Result/output plate - the concrete outcome the product delivers: the generated file, the finished dashboard, the sent message.
Closing brand card - logo, one-line value proposition, CTA/URL on the brand background. Exact logo file, never redrawn.

Coverage rule: every claim the overlay copy or accompanying campaign copy makes must have a plate that shows it. If a claim has no real screenshot behind it, cut the claim - don't generate the evidence.

HTML/CSS route

This style is frequently better built in code than generated - the interface is already HTML. Compose fully static pages:

Stage the real screenshot (or the live DOM) inside a device/browser chrome built from divs; border-radius, box-shadow: 0 40px 80px rgba(0,0,0,.35), and a linear-gradient body background.
Perspective: transform: perspective(1200px) rotateX(4deg) rotateY(-6deg) on the frame - keep angles under ~8 degrees so text stays sharp.
Depth stacks: absolutely-positioned layers with individual shadows and small translateZ/scale offsets.
Edge glow: an ::after with the accent color, blurred, mix-blend-mode: screen.
Overlay copy: brand font via @font-face, positioned in the reserved quiet band.
Depth-stack plates: screenshot regions cut into separate absolutely-positioned divs (crop with overflow: hidden on region-sized wrappers) so each layer reads as its own plane.
Browser chrome: a slim top bar div with three 10px dot spans and a rounded address pill - subtle and neutral, never a fake OS screenshot.
Export by screenshotting the composed page at the exact target resolution; text stays vector-sharp, which generation cannot guarantee.

Failure modes

Generated or "improved" UI standing in for the real product; invented features, metrics, prices, or copy.
Interface text blurred, warped, cropped mid-word, or repainted by an image model - re-composite with the real screenshot instead.
Decorative staging that competes with the interface: heavy flares, particle fields, glass-card clutter, random 3D props.
Palette unrelated to the product's actual brand colors.
Overlay copy covering interface content, or brand/product wording paraphrased instead of exact.
Mixed ratios or inconsistent frame chrome across the plate set.
Perspective tilts past ~8 degrees making interface text shimmer or skew unreadably.
Placeholder content (lorem ipsum, "[email protected]", empty-state zeros) visible in a plate meant to show the product working.
A reference style copied wholesale - someone else's brand colors or layout bleeding into this product's plates.

Copy-ready prompt

Paste a description of your product at the end. The colors are this style's defaults - swap any of them for your own (ideally sampled from your product's real interface).

Cinematic promo plate for a digital product. The interface is the hero: a
crisp, fully legible screenshot presented unaltered inside a slim, neutral
browser or device frame, floating over a staged background with a large soft
shadow and a gentle perspective tilt of no more than 8 degrees so every line
of interface text stays sharp. Depth comes from separation - the UI plane
hovers cleanly over a soft gradient with a subtle vignette and a thin edge
glow along the frame; generous margin of staged background so the plate never
feels pasted edge-to-edge, and one quiet corner or band left clear. Lit by a
single soft directional key implied by the shadow; no lens flares, no
particle clutter, no glass-card decoration, no random 3D props. Palette: deep
indigo-to-slate gradient background, cyan edge glow accent, charcoal shadow
tones (default palette - replace any of these with your own colors). 16:9,
premium and restrained, no invented interface elements, no added text inside
the UI, no watermark.

Subject: [DESCRIBE YOUR PRODUCT AND WHAT THE SHOT SHOWS - one or two sentences]

Example subject

A project-analytics dashboard in a browser frame, full interface visible, with the weekly activity chart as the focal point.