# UI Design Device Mockups Canonical page: https://fuser.studio/recipes/ui-device-mockup Creator: @maggie Saved recipe example · version 2 Place one UI design image into phone, tablet, and desktop mockups for realistic product presentation previews\. Header image: https://media.fuser.studio/2fa4c3235a8793d6b4c11314e1dbe04688b85ed7ebbcbf6f54f2ac255860e0ec.jpg ## Explore UI Design Mockup Previews The saved example connects one UI Design Image to Mobile Preview, Tablet Preview, and Desktop Preview outputs\. Together, they show the design presented across multiple device contexts\. ## Default inputs ### UI Design Image Type: image [UI Design Image]() ## Saved outputs ### Mobile Preview Type: image [Mobile Preview]() ### Tablet Preview Type: image [Tablet Preview]() ### Desktop Preview Type: image [Desktop Preview]() ## Ways to use these device mockups Use the phone, tablet, and desktop previews to present the same UI design in different product and interface contexts\. ### Product page presentations Add device previews to product pages when you want to show how a UI design appears in a realistic presentation context\. ### App portfolio case studies Use the mobile and tablet previews to give an app design portfolio a clearer sense of how the interface is presented on devices\. ### Website redesign reviews Present the desktop preview alongside the original UI design image when discussing a website or interface direction\. ### Brand identity decks Include device mockup previews in branding presentations to connect a visual identity with a finished digital interface\. ### Stakeholder design reviews Use the three output previews to discuss the same UI design across mobile, tablet, and desktop presentation formats\. ### Product launch concepts Build a more complete launch concept around the UI design by showing its phone, tablet, and desktop mockup presentations\. ## Frequently asked questions ### What does the UI Device Mockup recipe do? It places a UI design image into phone, tablet, and laptop\-style device mockups\. The recipe produces Mobile Preview, Tablet Preview, and Desktop Preview image outputs with natural perspective, lighting, and context\. ### Who is this recipe for? It is useful for interface designers, product teams, brand designers, and anyone presenting a digital product or website concept\. The outputs help show one UI design in device\-based presentation contexts\. ### What input should I prepare? Prepare one image of the UI design you want to present\. UI Design Image is the recipe’s exposed input, and you can change it in Fuser for a new run\. ### What outputs should I expect? Each run provides three image outputs: Mobile Preview, Tablet Preview, and Desktop Preview\. They present the submitted UI design across the recipe’s phone, tablet, and desktop mockup formats\. ### Can I customize the recipe in Fuser? You can replace the exposed UI Design Image input in Fuser with another design\. The listed recipe input does not expose separate controls for selecting individual device formats or changing mockup details\. ### What does the saved example show? The saved example shows one connected UI Design Image input and its three saved preview outputs: mobile, tablet, and desktop\. It is a default example of the recipe, not a live generation or a preview of a new input\. ### What is this recipe best used for? Use it for presenting UI concepts in product, branding, and web or interface work\. It is designed for mockup\-based presentation of an existing UI design image rather than for creating the interface itself\. ## Present Your UI Across Devices Bring a UI design image into Fuser and create phone, tablet, and desktop mockup previews for your next presentation\. [Use this recipe](https://app.fuser.studio) [Browse recipes](https://fuser.studio/recipes)