dev-screenshot-beautifier

Name: dev-screenshot-beautifier
Author: picsart

github.com/picsart设计与 UI6309 次安装2 天前更新

代码仓库

关于 dev-screenshot-beautifier

这项技能将现有 UI 截图整理为适用于更新日志、博客和文档的精修配图。它介绍图像生成与本地合成流程，并强调保留清晰、未改动的 UI 内容。

主要功能

01替换背景或完整重新合成
02添加设备边框、阴影和背景
03生成配套深色模式版本
04批量处理版本截图
05检查 UI 保真度与隐私

适用场景

01制作更新日志的截图主视觉
02准备博客或文档配图
03生成浅色与深色截图版本

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/picsart/gen-ai-skills --skill dev-screenshot-beautifier

安装后在 Claude Code 中输入/dev-screenshot-beautifier确认已加载。

详细介绍

截图美化工具

一套润色流程，可将原始 UI 截图（localhost 捕获、生产环境截图、移动端视口）转化为适合博客、更新日志和文档的主视觉图：添加设备边框和阴影，置于渐变背景上，并匹配深色模式。

适用场景

每次发布都需要主视觉图的发布说明／更新日志条目。
提及产品界面的博客文章和文档。
原始截图看起来不够专业的 PR 描述。
截图就是创意素材的 Twitter／LinkedIn 发布内容。
深色模式和浅色模式的网站变体，各自都需要精美的主视觉图。
身边没有设计师可随时求助的产品经理／工程团队成员。

不适用于：生成并不存在的 UI（请使用 Figma 或模型图工具），或用虚假文本替换真实内容（建议使用标注／模糊处理）。

前置条件

处理前，请先询问以下 5 个问题（用一条消息发送）：

原始截图路径 — PNG 优于 JPEG，边缘更清晰。
设备边框：浏览器外框（Chrome/Safari/Arc）、iPhone 边框、Android、MacBook、iPad，还是不加边框（只加柔和阴影）？
背景风格：柔和的影棚渐变、品牌配色、暗色轮廓光表面、玻璃拟态，还是哑光中性色？
输出用途与宽高比：博客主视觉图（16:9）、Twitter 卡片（1200×675）、LinkedIn（1200×627）、移动端故事（9:16）、文档内嵌图（3:2）？
是否需要深色模式版本？ 如果需要，请生成一组配对的深色版本。

如果用户已提供详细需求，则跳过。

运行方式

估算背景替换成本。

gen-ai models info recraftv3-replace-bg
gen-ai pricing recraftv3-replace-bg

选项 A — 仅替换背景（UI 保持像素级精确，只替换为新的背景）。当截图本身已定稿时使用。

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 — 完整编辑（一次性添加设备边框、阴影和反光）。需要模型重新合成时使用。

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 — 仅生成背景，本地合成（可选，保真度最高）。仅在有本地合成工具时使用；否则请使用选项 A 或 B。生成背景后，使用 sharp、浏览器 canvas/CSS，或已安装的 ffmpeg 叠加原始 PNG。

gen-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

配套的深色模式版本。

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 文本必须仍清晰可读。边框不能有融化变形的边缘。不能出现重复的浏览器外框。

快速参考

为一次发布批量美化所有截图：

{
  "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/beautified 运行。

快速参考

子任务	模型	原因
仅替换背景，保留像素级精确的 UI	`picsart-change-bg`	提取 UI 形状边缘最干净
移除背景（输出透明 PNG）	`picsart-remove-bg`	快速、可靠，并保留抗锯齿效果
添加设备边框、阴影和反光（完整重新合成）	`flux-kontext-pro`	最佳编辑模型，能遵循 `-i` 参考图
用于本地合成的独立背景	`flux-2-pro`	纹理和光照最丰富
选择方向时快速起草	`gemini-3.1-flash-image`	消耗额度最低
将最终导出图放大以供印刷	`topaz-upscale-image`	放大 2-4×，边缘适合 UI

使用 gen-ai models --mode image 验证。

流程

始终使用 PNG，不要使用 JPEG。 JPEG 压缩伪影会在模型重新合成时叠加。
保留 UI，不要让模型重新绘制。 如果文本被改写，说明你选错了方法——从选项 B（完整编辑）切换到选项 C（局部合成）。
为每个项目锁定调色板。 保存包含十六进制值的 brand.md；传入，避免不同帖子的背景色出现偏差。
设备边框应与实际情况相符。 使用用户实际使用的设备。把 Android 截图放进 iPhone 边框会显得不可信。
倾斜一次就够了，不要倾斜五次。 旋转 3-5° 显得高级；15° 以上则像图库素材。
从浅色版本生成深色版本，而不是从原始图生成。 将已经美化的输出作为 -i 传入——这样阴影、倾斜和边框都保持一致，只改变光线。
不要对敏感截图使用 --save-to-drive（例如发布前的 UI、客户数据）。请保存在本地，或使用 --no-save-to-drive。
美化任何包含真实用户数据的内容前，先进行模糊处理。 模型会毫不迟疑地保留泄露的邮箱地址——请先完成模糊处理。

常见问题

问题	修复方法
编辑后 UI 文本被改写或变得乱码	使用选项 A（替换背景）或选项 C（局部合成）——不要使用选项 B
设备边框的角落看起来像融化了一样	不要使用 Flux Kontext Pro；改用 remove-bg，并在本地使用真实的边框素材合成 PNG
透视效果不正确（倾斜且有鱼眼效果）	在提示词中明确写上“平面、正面、无透视失真”——或者在本地合成
深色版本改变了 UI 颜色	将浅色版本作为 `-i` 传入，并在提示词中写上“保持 UI 内容完全一致，仅重新打光背景”
截图包含泄露的客户数据	运行 gen-ai 前，先在原始 PNG 中进行模糊处理或涂抹遮盖
移除背景后出现抗锯齿边缘	使用 `picsart-remove-bg` 并输入 PNG；避免使用 JPEG 源文件
渐变背景与 UI 强调色冲突	将 UI 的强调色纳入提示词调色板；让颜色相匹配，而不是相互对比

验证

运行 gen-ai whoami 确认身份验证成功，然后使用 --debug 重新运行失败的命令。

费用与耗时

任务	积分	耗时
替换背景（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 秒

另请参阅

gen-ai-use.md — 完整的 CLI 参考、remove-bg、change-bg 和 enhance 标志
gen-ai-batch.md — 批量处理多张截图，以及用于部分运行的 gen-ai batch resume <output-dir>
gen-ai-workflows.md — 工作流 1（从博客生成视觉素材），涵盖完整的帖子素材集
dev-og-image-service — 将美化后的主视觉转换为按 URL 生成的 OG 卡片
dev-app-assets — 大规模制作 App Store 截图边框

支持 Markdown

登录后评论