Create a screenshot mockup tool that places uploaded screenshots into realistic device frames — phones, laptops, and tablets — all drawn with CSS and SVG. Customize the background with solid colors or gradients, add shadow effects, and download the final composite as a high-quality PNG using HTML Canvas. Perfect for app store listings, landing pages, and social media.
Build Prompt
Copy this prompt into Claude Code
Build a single-page screenshot mockup tool as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, card surfaces #12121a, and accent color #ec4899 (pink). The layout has a large preview area at the top (taking 60% of viewport height) and a controls panel below it.
Upload Area: When no image is loaded, show a large dashed-border drop zone (400x300px centered, border-color #2a2a3a) with "Drop screenshot here or click to upload" text and a small upload icon (CSS-drawn arrow). Support drag-and-drop (handle dragover, dragleave, drop events with visual feedback — border turns accent color on dragover) and click-to-browse (hidden file input triggered by click). Accept PNG, JPG, JPEG, WebP images up to 10MB. Display the image filename and dimensions after upload.
Preview Area: After upload, show the screenshot placed inside the selected device frame, centered on the configurable background. This is rendered live using HTML/CSS (not canvas yet — canvas is for export only). The preview should scale to fit within the available space while maintaining aspect ratio.
Device Frame Selector: A row of 6 device buttons, each showing a small CSS icon representing the device:
1. "iPhone 15" — Phone portrait frame. Draw with CSS: rounded rectangle (border-radius 40px) with a dark bezel (#1a1a1a, 12px wide), a small notch cutout at the top center (dynamic island style — a pill shape 90px wide, 25px tall), and the screenshot fills the screen area inside the bezel. Screen dimensions: 393x852 (19.5:9 ratio). The frame adds roughly 24px padding on each side.
2. "iPhone 15 Landscape" — Same phone frame rotated 90 degrees. Screen area 852x393.
3. "MacBook Pro" — Laptop frame. Draw a rounded rectangle screen bezel (#1a1a1a, 8px wide, border-radius 12px) with a small camera dot at top center, sitting on a trapezoid base (the keyboard/trackpad section drawn with CSS using perspective transform). Base is wider than screen, gray (#2a2a3a), 30px tall. Screen dimensions: 1512x982 (approximately 3:2).
4. "iPad Pro" — Tablet portrait frame. Rounded rectangle bezel (#1a1a1a, 14px wide, border-radius 20px). No home button (modern iPad). Screen dimensions: 1024x1366 (3:4 ratio).
5. "iPad Landscape" — Same tablet rotated. Screen area 1366x1024.
6. "Browser Window" — A minimal browser chrome frame: a top bar (36px tall, #1e1e2e background) with three traffic light dots (12px circles: #ef4444, #eab308, #22c55e) on the left, a centered URL bar (rounded rectangle, #12121a, 60% width, with "https://yoursite.com" placeholder text in #4a4a60), and the screenshot fills below. No specific device dimensions — matches the screenshot's aspect ratio. Border-radius 12px on the overall frame.
The screenshot is scaled to fill the device screen area using object-fit: cover (cropping edges if aspect ratio doesn't match) or object-fit: contain (with letterboxing — make this a toggle). Show which mode is active.
Background Controls:
- Background type toggle: Solid Color, Gradient, or Transparent
- Solid Color: a color picker (default #1e1e2e). Also include 8 preset buttons: #1e1e2e (dark), #ffffff (white), #f1f5f9 (light gray), #3b82f6 (blue), #8b5cf6 (purple), #22c55e (green), #ef4444 (red), #f97316 (orange)
- Gradient: two color pickers (from/to) with an angle slider (0-360 degrees, default 135). Presets: "Sunset" (#f97316 to #ec4899), "Ocean" (#3b82f6 to #06b6d4), "Forest" (#22c55e to #14b8a6), "Night" (#1e1e2e to #312e81), "Candy" (#ec4899 to #8b5cf6)
- Transparent: renders on a checkerboard pattern in preview, exports with alpha channel
Shadow Controls:
- Shadow toggle: on/off (default on)
- Shadow intensity: slider from 0 to 100 (default 50), controls the opacity and blur radius of the drop shadow
- The shadow is rendered as a CSS box-shadow on the device frame in the preview and drawn onto the canvas during export
Padding Control: Slider (20-120px, default 60) controlling how much background space surrounds the device frame.
Export Section (bottom of controls):
- "Download PNG" button — renders the entire composition (background + shadow + device frame + screenshot) onto an HTML Canvas element at 2x resolution for retina quality. Use ctx.drawImage for the screenshot, draw the device bezel using canvas primitives (rounded rectangles, arcs), and apply shadow via ctx.shadowBlur/ctx.shadowColor. Export as PNG via canvas.toDataURL and trigger download. The filename should be "mockup-[device]-[timestamp].png".
- "Download 2x" button — renders at 2x the preview dimensions for high-DPI marketing materials
- Output size display showing the final PNG dimensions (e.g., "1920 x 1080px")
Make it responsive: on mobile, the preview scales down proportionally, device buttons wrap into a 3x2 grid, and control sections stack vertically. The drag-and-drop area still works on mobile via the click-to-browse fallback. Add a "Reset" button that clears the uploaded image and returns to the drop zone state.
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Multi-Device Composition
Let users place multiple devices on the same canvas — a phone and laptop side by side — with drag positioning for creating hero images.
Text Overlay
Add a text layer on top of the composition for headings like "Available on iOS" with font, size, and position controls.
Clay Mockup Style
Add a "clay" rendering mode where the device frame is a solid matte color (white, black, pastel) without realistic details for a modern aesthetic.
Batch Processing
Let users upload multiple screenshots and generate mockups for all of them at once with the same device and settings, downloading as a zip.
3D Perspective
Add CSS perspective transforms to tilt the device at an angle (isometric or slight rotation) for more dynamic marketing shots.
Background Patterns
Add subtle background pattern options: dots, grid, waves, noise texture — rendered with CSS or SVG patterns behind the device.
SEO Tips
Target "screenshot mockup tool" and "device mockup generator" — these have 25K+ monthly searches from marketers and app developers.
Create device-specific landing pages like "iPhone mockup generator" and "laptop screenshot frame" for high-intent long-tail traffic.
Add FAQ schema answering "How to create app store screenshots" and "How to make device mockups without Photoshop" for snippet potential.
Write a guide "How to Create Professional App Screenshots for the App Store" with examples generated by your tool, attracting backlinks.
Target niche queries like "browser mockup generator" and "iPad screenshot frame" with dedicated features and SEO content.
Monetization Ideas
Offer premium device frames ($6.99) including Android phones (Pixel, Galaxy), smartwatches (Apple Watch, Galaxy Watch), and TV screens.
Sell background packs ($3.99 each) with professional gradient collections, abstract patterns, and seasonal themes for marketing materials.
Add a batch processing tier ($4.99/month) for agencies that need to generate mockups for multiple app screenshots in bulk.
Create a Figma plugin ($12.99 one-time) that exports Figma frames directly into device mockups without leaving the design tool.
Offer an API ($14/month) for programmatic mockup generation — pass screenshot URL and device type, get mockup PNG back for automated pipelines.