What this prompt does
This prompt generates AI image prompts for realistic UI mockups and app screenshots, aimed at portfolio case studies when the real product isn't ready to show. You describe the [project_type], [industry], [device_type], [design_style], and [screens_needed], and it writes prompts for each key screen plus device-framing options, presentation layouts, consistency rules, and a post-processing guide.
The structure is built for believable, cohesive mockups. It generates prompts for a hero/dashboard screen, a detail screen, a mobile responsive view, a dark-mode variant, and an onboarding/empty state — all sharing the same [color_palette] and [design_style] so the set reads as one product. Because you set [device_type], the prompts request the right frame (a MacBook Pro, a phone) and offer clean-screenshot, device-mockup, and lifestyle-context variants. The consistency rules insist on realistic data instead of obvious lorem ipsum, and [consistency_note] lets you lock details like a shared chart-library look.
When to use it
- When you need portfolio mockups for a project whose real product isn't shippable yet.
- To produce a cohesive set of screens (dashboard, detail, mobile, dark mode) for a case study.
- When you want device-framed and lifestyle-context versions of the same UI.
- To build a flow-sequence layout showing a user journey across several screens.
- When you need the mockups to look like a real product, not a generic template.
Example output
You get AI prompts for each screen — hero/dashboard, detail/content, mobile responsive, dark-mode variant, and onboarding/empty state — each using your [color_palette] and [design_style]. Then device-framing options (clean screenshot, device mockup, lifestyle context, multi-device), portfolio presentation layouts (hero shot, feature grid, flow sequence), consistency rules for typography, navigation, and realistic data, and a post-processing guide for refining in Figma, applying device frames, and exporting at 2x for retina.
Pro tips
- Use a single named
[color_palette]with hex codes across every screen prompt — consistency is what makes the set look like one product rather than five. - Keep the data realistic: the consistency rules warn against round numbers and lorem ipsum, so describe believable content in
[screens_needed]. - Match
[device_type]to your target frame (MacBook Pro, specific phone) so the mockups sit in the right device context. - Treat AI output as a base, then refine in Figma — fix alignment, add real text, and ensure pixel-perfection before it goes in a portfolio.
- Use
[consistency_note]to lock cross-screen details, like making all charts share one chart-library visual style. - Generate the dark-mode variant from the same screen so contrast and layout stay faithful rather than reinvented.
