dev-screenshot-beautifier
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseScreenshot beautifier
截图美化工具
A polish pipeline that takes a raw UI screenshot (localhost capture, production screen grab, mobile viewport) and turns it into a blog-ready, changelog-ready, doc-ready hero: device-framed, drop-shadowed, on a gradient backdrop, dark-mode matched.
这是一套打磨流程，可将原始UI截图（本地环境截图、生产环境截图、移动端视口截图）转换为适用于博客、更新日志、文档的精美首图：添加设备边框、投影效果、渐变背景，并匹配深色模式。
When to Use
适用场景
- Release notes / changelog entries that need a hero image per ship.
- Blog posts and docs that reference a product screen.
- PR descriptions where a raw screenshot looks amateurish.
- Twitter/LinkedIn launch posts where the screenshot is the creative.
- Dark-mode and light-mode site variants that each need their own polished hero.
- PM/eng team members who don't have a designer on call.
Not for: generating UI that doesn't exist (use Figma or a mockup tool), or replacing real content with fake text (prefer annotation/blurring).
- 发布说明/更新日志中，每次版本发布需要一张首图的场景。
- 引用产品界面的博客文章与文档。
- 原始截图显得不够专业的PR描述。
- 以截图为创意核心的Twitter/LinkedIn发布帖。
- 需要分别制作深色、浅色版本精美首图的网站变体。
- 没有设计师待命的产品经理/开发团队成员。
不适用场景：生成不存在的UI（使用Figma或原型工具），或用虚假文字替换真实内容（优先选择标注/模糊处理）。
Prerequisites
前置要求
Before processing, ask (one message, 5 questions):
- Raw screenshot path — PNG preferred over JPEG for clean edges.
- Device frame: browser chrome (Chrome/Safari/Arc), iPhone bezel, Android, MacBook, iPad, or none (just soft shadow)?
- Background vibe: soft studio gradient, brand palette, dark rim-lit surface, glassmorphic, matte neutral?
- Output target + aspect: blog hero (16:9), Twitter card (1200×675), LinkedIn (1200×627), mobile story (9:16), doc inline (3:2)?
- Dark mode variant needed? If yes, generate a paired dark version.
Skip if the user hands over a detailed brief.
处理前，需询问以下5个问题（一次性发送）：
- 原始截图路径 — 优先选择PNG格式，边缘更清晰，优于JPEG。
- 设备边框：浏览器边框（Chrome/Safari/Arc）、iPhone边框、Android设备、MacBook、iPad，或无边框（仅添加柔和阴影）？
- 背景风格：柔和工作室渐变、品牌配色、深色 rim-lit 表面、玻璃态、哑光中性色？
- 输出目标+比例：博客首图（16:9）、Twitter卡片（1200×675）、LinkedIn（1200×627）、移动端故事（9:16）、文档内联图（3:2）？
- 是否需要深色模式变体？ 如果是，生成配对的深色版本。
若用户提供了详细需求，则可跳过上述询问。
How to Run
运行步骤
-
Estimate the background swap cost.bash
gen-ai models info recraftv3-replace-bg gen-ai pricing recraftv3-replace-bg -
Option A — Background swap only (UI stays pixel-exact, just drop on a new surface). Use this when the screenshot itself is final.bash
gen-ai change-bg \ -i ./raw.png \ -p "soft studio gradient, magenta #FF006E to deep purple #0D0A1F, subtle rim light from top-left, very slight film grain" \ --download ./out -
Option B — Full edit (add device frame + shadow + reflection in one pass). Use when you want the model to re-composite.bash
gen-ai generate -m flux-kontext-pro \ -i ./raw.png \ -p "product screenshot of the provided UI, placed inside a MacBook Pro 14 bezel, floating slightly tilted at 4° right, soft drop shadow below, glassy reflection underneath, matte charcoal background, centered composition, 16:9" \ --aspect-ratio 16:9 \ --download ./out -
Option C — Background only, composite locally (maximum UI fidelity, optional). Use only when local compositing tools are available; otherwise use Option A or B. Generate a backdrop, then overlay the raw PNG with, browser canvas/CSS, or ffmpeg if already installed.
sharpbashgen-ai generate -m flux-2-pro \ -p "abstract studio backdrop, soft magenta-to-purple gradient, subtle light orb top-left, empty center composition, 1920×1080" \ --aspect-ratio 16:9 \ --download ./out/bg # Then locally: sharp, browser canvas/CSS, or optional ffmpeg composite with device frame + shadow -
Dark-mode paired variant.bash
gen-ai generate -m flux-kontext-pro \ -i ./out/result.png \ -p "same composition, re-lit for dark mode: deep #0D0A1F background, teal #00F0FF accent rim light, subtle glow behind the device, keep UI content identical" \ --aspect-ratio 16:9 \ --download ./out/dark -
Verify. Open side by side with the raw. UI text must still be readable. No melted edges on the bezel. No duplicated chrome.
-
估算背景替换成本bash
gen-ai models info recraftv3-replace-bg gen-ai pricing recraftv3-replace-bg -
选项A — 仅替换背景（UI保持像素级精确，仅更换背景）。当截图本身已确定最终版本时使用此选项。bash
gen-ai change-bg \ -i ./raw.png \ -p "soft studio gradient, magenta #FF006E to deep purple #0D0A1F, subtle rim light from top-left, very slight film grain" \ --download ./out -
选项B — 完整编辑（一次添加设备边框+阴影+倒影）。希望模型重新合成时使用此选项。bash
gen-ai generate -m flux-kontext-pro \ -i ./raw.png \ -p "product screenshot of the provided UI, placed inside a MacBook Pro 14 bezel, floating slightly tilted at 4° right, soft drop shadow below, glassy reflection underneath, matte charcoal background, centered composition, 16:9" \ --aspect-ratio 16:9 \ --download ./out -
选项C — 仅生成背景，本地合成（最高UI保真度，可选）。仅当本地有合成工具时使用；否则使用选项A或B。先生成背景图，再通过、浏览器画布/CSS或已安装的ffmpeg叠加原始PNG。
sharpbashgen-ai generate -m flux-2-pro \ -p "abstract studio backdrop, soft magenta-to-purple gradient, subtle light orb top-left, empty center composition, 1920×1080" \ --aspect-ratio 16:9 \ --download ./out/bg # 然后本地操作：使用sharp、浏览器画布/CSS，或可选的ffmpeg添加设备边框+阴影进行合成 -
深色模式配对变体bash
gen-ai generate -m flux-kontext-pro \ -i ./out/result.png \ -p "same composition, re-lit for dark mode: deep #0D0A1F background, teal #00F0FF accent rim light, subtle glow behind the device, keep UI content identical" \ --aspect-ratio 16:9 \ --download ./out/dark -
验证。将处理后的图片与原始截图并排查看。UI文字必须仍清晰可读。设备边框边缘不能模糊。不能出现重复的浏览器控件。
Quick Reference
快速参考
Batch-beautify all screenshots for a release:
json
{
"defaults": {
"model": "flux-kontext-pro",
"aspectRatio": "16:9"
},
"jobs": [
{ "id": "hero-dashboard", "imageUrls": ["./raw/dashboard.png"], "prompt": "MacBook Pro 14 bezel, soft drop shadow, magenta-to-purple studio gradient, slight 3° tilt right" },
{ "id": "hero-dashboard-dark", "imageUrls": ["./raw/dashboard.png"], "prompt": "MacBook Pro 14 bezel, deep #0D0A1F backdrop, teal rim light, subtle glow, identical UI content" },
{ "id": "hero-mobile-timer", "imageUrls": ["./raw/timer.png"], "prompt": "iPhone 16 Pro bezel, portrait, floating with soft shadow, gradient backdrop", "aspectRatio": "9:16" },
{ "id": "hero-settings", "imageUrls": ["./raw/settings.png"], "prompt": "Browser chrome (Arc-style), soft studio gradient, subtle reflection under window" }
]
}Run with .
gen-ai batch run screenshots.json -c 3 -o ./out/beautified批量美化版本发布所需的所有截图：
json
{
"defaults": {
"model": "flux-kontext-pro",
"aspectRatio": "16:9"
},
"jobs": [
{ "id": "hero-dashboard", "imageUrls": ["./raw/dashboard.png"], "prompt": "MacBook Pro 14 bezel, soft drop shadow, magenta-to-purple studio gradient, slight 3° tilt right" },
{ "id": "hero-dashboard-dark", "imageUrls": ["./raw/dashboard.png"], "prompt": "MacBook Pro 14 bezel, deep #0D0A1F backdrop, teal rim light, subtle glow, identical UI content" },
{ "id": "hero-mobile-timer", "imageUrls": ["./raw/timer.png"], "prompt": "iPhone 16 Pro bezel, portrait, floating with soft shadow, gradient backdrop", "aspectRatio": "9:16" },
{ "id": "hero-settings", "imageUrls": ["./raw/settings.png"], "prompt": "Browser chrome (Arc-style), soft studio gradient, subtle reflection under window" }
]
}运行命令：。
gen-ai batch run screenshots.json -c 3 -o ./out/beautifiedQuick Reference
快速参考
| Sub-task | Model | Why |
|---|---|---|
| Background swap only, preserve UI pixel-exact | | Cleanest edge extraction on UI shapes |
| Background removal (transparent PNG out) | | Fast, reliable, preserves anti-aliasing |
| Device frame + shadow + reflection (full recomposite) | | Best edit model, follows |
| Standalone backdrop for local compositing | | Richest textures + lighting |
| Quick draft while choosing direction | | Lowest credits |
| Upscale final export to print | | 2-4× with UI-safe edges |
Verify with .
gen-ai models --mode image| 子任务 | 模型 | 原因 |
|---|---|---|
| 仅替换背景，精确保留UI像素 | | 对UI形状的边缘提取最清晰 |
| 移除背景（输出透明PNG） | | 快速可靠，保留抗锯齿效果 |
| 添加设备边框+投影+倒影（全重新合成） | | 最佳编辑模型，遵循 |
| 用于本地合成的独立背景图 | | 纹理和光影效果最丰富 |
| 快速生成草稿用于选型 | | 消耗积分最少 |
| 放大最终导出图用于印刷 | | 2-4倍放大且UI边缘保持清晰 |
可通过验证模型信息。
gen-ai models --mode imageProcedure
操作规范
- Always input PNG, not JPEG. JPEG compression artifacts compound when the model recomposites.
- Preserve the UI, don't let the model redraw it. If text gets rewritten, you chose the wrong approach — switch from Option B (full edit) to Option C (local composite).
- Lock palette per project. Save with hex values; pass ` so backdrops don't drift between posts.
brand.md - Device frames should match reality. Use the actual device the user was on. Shipping an Android screenshot inside an iPhone bezel is a credibility tell.
- One tilt, not five. 3-5° of rotation reads premium; 15°+ reads stock-photo.
- Dark variant off the light variant, not off raw. Pass the already-beautified output as — shadows, tilt, and bezel stay identical, only lighting changes.
-i - Don't use for sensitive screenshots (pre-launch UI, customer data). Keep local or use
--save-to-drive.--no-save-to-drive - Blur before beautifying anything with real user data. The model will happily preserve a leaked email — do the blur pass first.
- 始终输入PNG格式，而非JPEG。当模型重新合成时，JPEG的压缩伪影会加剧。
- 保留原始UI，不要让模型重绘。如果文字被改写，说明选择了错误的方法——从选项B（完整编辑）切换到选项C（本地合成）。
- 每个项目锁定配色方案。保存包含十六进制颜色值的；在提示词中传入这些值，避免不同帖子的背景出现偏差。
brand.md - 设备边框应与实际一致。使用用户实际使用的设备。将Android截图放在iPhone边框内会影响可信度。
- 仅添加一次倾斜效果。3-5°的旋转看起来高端；15°以上会显得像库存图片。
- 基于浅色变体生成深色变体，而非原始截图。将已美化的输出图作为传入——阴影、倾斜和边框保持一致，仅更改光影效果。
-i - 敏感截图不要使用（预发布UI、客户数据）。保存在本地或使用
--save-to-drive。--no-save-to-drive - 美化前模糊处理包含真实用户数据的内容。模型会原样保留泄露的邮箱——先进行模糊处理。
Pitfalls
常见问题与解决方法
| Pitfall | Fix |
|---|---|
| UI text is rewritten / garbled after edit | Use Option A (bg swap) or Option C (local composite) — not Option B |
| Device bezel looks melted at corners | Drop Flux Kontext Pro; use remove-bg + local PNG composite with a real bezel asset |
| Perspective is wrong (tilted + fish-eye) | Prompt explicitly "flat, frontal, no perspective distortion" — or composite locally |
| Dark variant shifts UI colors | Pass the light variant as |
| Screenshot contains leaked customer data | Blur/redact in the raw PNG BEFORE running gen-ai |
| Anti-aliasing fringe after bg removal | Use |
| Gradient backdrop clashes with UI accent color | Pull the UI's accent into the prompt palette; match rather than contrast |
| 问题 | 解决方法 |
|---|---|
| 编辑后UI文字被改写/乱码 | 使用选项A（背景替换）或选项C（本地合成）——不要使用选项B |
| 设备边框边角看起来模糊 | 放弃Flux Kontext Pro；使用remove-bg工具+本地PNG合成真实边框素材 |
| 透视效果错误（倾斜+鱼眼） | 在提示词中明确说明“平面、正面、无透视变形”——或进行本地合成 |
| 深色变体改变了UI颜色 | 将浅色变体作为 |
| 截图包含泄露的客户数据 | 在运行gen-ai之前，先在原始PNG中进行模糊/编辑处理 |
| 移除背景后出现抗锯齿边缘毛边 | 使用 |
| 渐变背景与UI强调色冲突 | 将UI的强调色加入提示词配色；选择匹配而非对比 |
Verification
验证方法
Run to confirm authentication, then re-run the failed command with .
gen-ai whoami--debug运行确认身份验证状态，然后添加参数重新运行失败的命令。
gen-ai whoami--debugCost & time
成本与耗时
| Task | Credits | Time |
|---|---|---|
| Background swap (picsart-change-bg) | 1-2 | ~4-8s |
| Background removal (picsart-remove-bg) | 1 | ~3-5s |
| Full edit with device frame (flux-kontext-pro) | 3-6 | ~10-18s |
| Standalone backdrop (flux-2-pro) | 3-5 | ~10-15s |
| Paired dark-mode variant | +3-6 | +10-18s |
| Upscale to 4K (topaz-upscale-image) | 2-4 | ~15-30s |
| Typical blog hero (light + dark, framed) | ~10-15 | ~30-45s |
| 任务 | 积分 | 耗时 |
|---|---|---|
| 背景替换（picsart-change-bg） | 1-2 | ~4-8秒 |
| 背景移除（picsart-remove-bg） | 1 | ~3-5秒 |
| 添加设备边框的完整编辑（flux-kontext-pro） | 3-6 | ~10-18秒 |
| 独立背景图（flux-2-pro） | 3-5 | ~10-15秒 |
| 配对深色模式变体 | +3-6 | +10-18秒 |
| 放大至4K（topaz-upscale-image） | 2-4 | ~15-30秒 |
| 典型博客首图（浅色+深色，带边框） | ~10-15 | ~30-45秒 |
See also
相关参考
- — full CLI reference, remove-bg, change-bg, enhance flags
gen-ai-use.md - — batching multiple screenshots,
gen-ai-batch.mdfor partial runsgen-ai batch resume <output-dir> - — Workflow 1 (blog-to-visuals) for the full post asset set
gen-ai-workflows.md - — turn the beautified hero into a per-URL OG card
dev-og-image-service - — App Store screenshot framing at scale
dev-app-assets
- — 完整CLI参考，包含remove-bg、change-bg、enhance参数说明
gen-ai-use.md - — 批量处理多张截图，使用
gen-ai-batch.md恢复部分运行任务gen-ai batch resume <output-dir> - — 工作流1（博客转视觉素材），获取完整帖子资产集
gen-ai-workflows.md - — 将美化后的首图转换为对应URL的OG卡片
dev-og-image-service - — 批量处理App Store截图边框
dev-app-assets