Turns real product UI into marketing-grade screenshot stills - flat-on framing, 12-16px radius frame, 1px hairline border, 2x capture, 20-40 percent edge crop, theme matched to the page - builds the internally consistent fixture dataset that makes every shot read as shipping product, and ships the framed composition as a runnable HTML/CSS artifact. Use when someone asks "make our product screenshots look premium", "how should I frame UI screenshots for our website", "our marketing screenshots look fake - fix them", "set up realistic demo data for screenshots", or when any campaign needs its first still. Do NOT use for compositing UI onto a physical device screen - use screen-compositing-craft instead; for deciding whether a device frame belongs at all, use device-mockup-direction; for what to show in a generated photograph, use photoreal-prompt-craft.
---
name: marketing-screenshot-craft
description: Turns real product UI into marketing-grade screenshot stills - flat-on framing, 12-16px radius frame, 1px hairline border, 2x capture, 20-40 percent edge crop, theme matched to the page - builds the internally consistent fixture dataset that makes every shot read as shipping product, and ships the framed composition as a runnable HTML/CSS artifact. Use when someone asks "make our product screenshots look premium", "how should I frame UI screenshots for our website", "our marketing screenshots look fake - fix them", "set up realistic demo data for screenshots", or when any campaign needs its first still. Do NOT use for compositing UI onto a physical device screen - use screen-compositing-craft instead; for deciding whether a device frame belongs at all, use device-mockup-direction; for what to show in a generated photograph, use photoreal-prompt-craft.
---
# marketing-screenshot-craft
The screenshot is the one marketing asset the audience can fact-check on sight: developers, founders, and design-literate buyers pattern-match fakeness professionally, and one fake-looking screenshot poisons every true claim on the page. The expensive failure is shipping a launch on lorem ipsum and reshooting every asset after the first "is this real?" comment. This skill turns real product UI into marketing-grade stills with one frame recipe and one honesty contract, and it defines the fixture dataset every downstream campaign surface reuses.
## Operating procedure
Work the steps in order: data before frame, frame before crop. A frame around fake data is a framed lie, and every downstream skill consumes both outputs of this one - the frame recipe and the fixture set - so both must exist before any other surface is designed.
### Step 1: Gather the charter and the shot inputs
Ask for these inputs before staging anything. If any input is a guess, label it a guess and move on.
1. **Charter**: the client's charter block, in the format defined in premium-design-foundations. Paste the charter block if one exists. If the client has a charter but the foundations pack is not installed, elicit the needed values directly and label them provisional. If no charter exists at all, halt and route to premium-design-foundations - never substitute worked-example values.
2. **Product**: name and the one-line job it does.
3. **Themes**: light or dark UI theme, and the page theme the still will sit on.
4. **Claim**: the ONE claim this shot must prove. One idea per attentional unit - a shot proving two things proves neither.
5. **Feature names**: the real labels the UI ships with, verbatim.
6. **Export surfaces**: web, store, social - so capture resolution is chosen once instead of re-captured per surface.
### Step 2: Build the fixture dataset