告别 PS 搬砖：我也能用 Python 「生成」 App Store 截图了？
💡 TL;DR: 本文记录了一次利用 AI Agent 和自动化脚本（Skills）彻底重构 App Store 截图制作流程的体验。从手动 P 图的噩梦，到 Config 驱动的自动化流水线，再到用算法解决 Bezel 边缘适配的硬核操作。
😫 以前的我是怎么做截图的？
作为独立开发者，每次发版最头疼的不是写代码，而是做图。 iPhone 17 Pro Max, iPhone 17, iPad Landscape, Apple Watch… 甚至还有 Localization（中/英）。 打开 Sketch/Figma -> 找样机 -> 塞截图 -> 改文案 -> 导出… 一旦发现文案有个错别字？ 全·部·重·来。 💥
🏗️ Phase 0: 文案挖掘 —— 从文档到 JSON
在打开代码编辑器之前，一切始于对产品的重新理解。 以前写文案靠拍脑门，这次我让 Agent 先读了项目的产品文档。
Agent 敏锐地指出：“你的产品核心价值 Proposition A 需要调整为 Proposition B，以更精准地击中用户痛点。” 这一个定位的修正，直接决定了截图文案的灵魂。
自动化文案流
- 提取核心价值：Agent 从文档中提炼出产品的 Core Value Proposition。
- 生成营销文案：基于价值定位，自动扩写出 5 组中英文对照的 Title + Tagline。
- Before: “功能性通用描述”
- After: “场景化精准描述 - 结合设备特性的用户利益点”
- 配置化落地：这些文案没有停留在文档里，而是直接注入到了
screenshots_config.json中。
于是，Product -> Copy -> Config -> Image 的闭环形成了。我们不是在做图，我们是在把 PRD 变成像素。
🛠️ Skill 1: 自动化流水线的基石 —— Screenshot Generator
这次我不再手动 P 图，而是请 Agent 安装了一个名为 appstore_screenshot_generator 的 Skill。
这就好比给我的项目招了一个
「无情的 P 图机器」。
核心干货：Config 驱动开发 (CDD?)
这个 Skill 的精髓在于它把「设计」变成了「配置」。我不碰图片，我只写 JSON。
{
"input": "marketing/ipad_01.png",
"title": "核心功能 A",
"tagline": "利用大屏优势\n展示更丰富的信息",
"device": "iPad mini",
"canvas_size": "iPad Landscape",
"background": {
"top": "#AC8E68",
"bottom": "#C0A080"
},
"color": "Starlight",
"output": "marketing/processed/ipad_02.png"
}爽点在哪？
- 文案修改秒级响应：改 JSON 里的
title，回车运行脚本，所有尺寸的图自动更新。 - 排版自动适配：脚本内置了 iPhone、iPad、Watch 的字体大小策略。大屏用大字，小屏（Watch）自动缩小字号并避开表带区域。
- 批量生产：一条命令生成 9 张图，机器发热的那一刻，我感觉到了生产力的解放。
🔬 Skill 2: 像素级精度的「侦探」—— Bezel Analyzer
当然，只有通用工具是不够的。当我试图把 iPad mini 的截图塞进一个第三方提供的 Bezel（边框素材）时，翻车了。 素材是模拟的，截图塞进去要么露白边，要么被遮挡。
一般的做法：打开 PS，手动量坐标 -> 改代码 -> 再试 -> 再改。 Agent 的做法：写个脚本去「看」图片。
我们编写了一个 analyze_bezel.py，这不仅仅是个脚本，它像个侦探。
硬核干货：从中心向外「探测」
怎么知道一个镂空边框的内径是多少？
- 寻找中心点：脚本先定位到图片的正中心。
- 射线扫描：从中心向上下左右四个方向发射「射线」。
- 边缘检测：一旦遇到非透明像素（Alpha != 0），立即停止。
# 核心逻辑伪代码
Center pixel is transparent. Scanning for inner bounds...
Inner Transparent Area: x=142, y=146, w=2266, h=1488
Coordinates tuple: (142, 146, 2266, 1488)脚本直接吐出了精确到像素的坐标元组！把它填回 Generator 的配置里，严丝合缝。
细节狂魔：圆角的战争
iPad mini 的屏幕圆角和 iPhone 不一样。如果是默认的 “大圆角” 切割，iPad mini 四个角就会露出丑陋的背景色。
我们没有妥协，而是给 Generator 加上了 Device-Specific Corner Radius 支持：
- iPhone:
85px - Apple Watch:
55px - iPad mini:
28px(精准调优)
这一步的调整，让生成的图片从「能用」变成了「原生级精致」。
🎉 总结：当设计遇上工程化
这次体验让我意识到，Design Ops (设计运维) 并不是大厂的专利。
- 结构化思维：把重复劳动抽象成配置（Config）。
- 工具化思维：遇到视觉偏差，不靠肉眼调，靠脚本算（Analyze）。
- 长期主义：配置好这套流水线，下个版本更新，我只需要 30 秒。
如果你还在手动拖拽截图，不妨试试让 AI 帮你写个 Generator。毕竟，我们的生命应该浪费在美好的 Coding 上，而不是重复的 Pleading（P图）上。😉
Generated using Agentic Workflow