dev-screenshot-beautifier

Transforms raw UI screenshots into device-framed hero images with gradient backdrops via the gen-ai CLI.

4|2|Updated May 6, 2026
One-click install
npx skills add https://github.com/PicsArt/gen-ai-skills --skill dev-screenshot-beautifier-picsart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-screenshot-beautifier
Source: https://github.com/PicsArt/gen-ai-skills/tree/main/skills/dev-screenshot-beautifier
Command: npx skills add https://github.com/PicsArt/gen-ai-skills --skill dev-screenshot-beautifier-picsart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Raw screenshots of localhost captures or production screens look unpolished in release notes, blog posts, docs, and launch posts, and most PM/eng teams have no designer on call to frame them. ## Core Features & Use Cases - Background swap and removal: Replace or remove screenshot backgrounds with picsart-change-bg and picsart-remove-bg while keeping UI pixels exact. - Device framing and re-compositing: Place screenshots inside MacBook, iPhone, or browser-chrome frames with shadows and reflections using flux-kontext-pro. - Paired dark-mode variants: Generate a dark-mode version from the light variant so tilt, bezel, and shadows stay identical. - Batch processing: Beautify an entire release's screenshots at once with a JSON job file and gen-ai batch run. - Use Case: Before publishing a changelog entry, pass your raw dashboard PNG through the pipeline to get a 16:9 MacBook-framed hero plus a matching dark-mode version in under a minute. ## Quick Start Beautify the attached raw screenshot raw.png into a 16:9 blog hero with a MacBook frame, soft drop shadow, and magenta-to-purple gradient backdrop, plus a dark-mode variant.

Frequently Asked Questions about dev-screenshot-beautifier

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a raw screenshot into a blog hero image?▼

Run gen-ai change-bg for a background swap that keeps the UI pixel-exact, or use gen-ai generate with flux-kontext-pro and the screenshot as -i input to add a device frame, shadow, and gradient backdrop in one pass. Always use PNG input for clean edges.

How do I create a dark-mode variant of a screenshot hero?▼

Pass the already-beautified light variant as the -i input to flux-kontext-pro and prompt to re-light for dark mode while keeping UI content identical. Generating from the light variant preserves the tilt, bezel, and shadows exactly.

Which model should I use for screenshot background removal?▼

Use picsart-remove-bg for transparent PNG output with preserved anti-aliasing, or picsart-change-bg to swap directly onto a new surface. For full re-compositing with device frames, flux-kontext-pro follows the reference image best.

Why does the AI rewrite or garble UI text in my screenshot?▼

Full-edit models like flux-kontext-pro can redraw UI text during re-compositing. Switch to a background-swap-only approach with picsart-change-bg, or generate a standalone backdrop and composite the raw PNG locally with sharp or ffmpeg.

Can I batch-process multiple screenshots for a release?▼

Yes, define jobs in a JSON file with per-job prompts, image paths, and aspect ratios, then run gen-ai batch run with a concurrency flag. Partial runs can be resumed with gen-ai batch resume on the output directory.

When should I not use AI editing on screenshots?▼

Avoid it for generating UI that does not exist, and never run screenshots containing real customer data without blurring first. Also skip --save-to-drive for pre-launch or sensitive screens to keep files local.