企业官网建设流程全解析

Goldie视觉系统全解析：11种布局+5套模板，让App Store截图拥有专业设计师水准

【免费下载链接】goldie✨ agentic app store previews and screenshots项目地址: https://gitcode.com/gh_mirrors/gol/goldie

Goldie 是一款专为 iOS 开发者打造的 App Store 截图与预览视频自动生成工具。它内置的视觉系统是最被低估的亮点：11 种可组合的截图布局 + 5 套开箱即用的设计模板，让不懂设计的开发者也能一键产出媲美专业设计师水准的商店截图。本文带你完整拆解这套视觉系统。

11种布局：每张截图的"构图公式"

Goldie 的每一张截图都是一次"构图"：背景、设备边框、标题文案、副标题各自有固定的几何规则。这些规则全部集中在 src/layouts.ts 中，共定义了 11 种布局：

💡 小技巧：App Store 页面前两张截图是访客看得最多的位置，官方建议 skills/goldie/references/config.md 推荐用classic、hero或panorama开场；minimal适合作为长图中的"呼吸感"留白。

5套模板：整组截图的"节奏感"

单张布局之外，Goldie 更聪明的是把整组截图当成一部"电影"来编排。模板（template）就是一组布局在商店顺序上的循环序列，定义见 src/layouts.ts：

如果布局序列短于截图数量，会自动从头循环；当然你也可以完全自定义序列，例如：

template: ["panorama", "hero", "tilt", "minimal"]

每个场景还可用layout字段单独覆盖模板选择，优先级高于模板。

设备边框与字体：细节决定专业度

截图像不像"商店级的图"，一半取决于设备呈现。Goldie 内置三种高保真 iPhone 边框（17-pro-silver、17-pro-blue、17-pro-orange），边框几何参数精确测量自 PNG 的 alpha 通道，见 src/frame.ts；也支持替换为自定义边框图，或设置screenOnly: true直接输出带柔和阴影的"裸屏"效果。

仓库的 assets/ 目录还附带了高分辨率设备素材图，适合做自定义边框或设计参考：

Goldie App Store 截图素材：高分辨率 iPad 银色横版设备样机

Goldie App Store 截图素材：高分辨率 iPad 深空灰横版设备样机

字体方面，Goldie 打包了 5 款 Google 开源字体（Merriweather、DM Mono、Lato、DM Sans、Montserrat），注册逻辑见 src/fonts.ts。关键在于：这些字体在浏览器预览和最终导出的 PNG 中呈现完全一致——因为它让 Canvas 渲染器与 Studio 的 Web 端共用同一套几何计算（compose()函数），所见即所得。

Studio 视觉工作台：所见即所得的微调

跑一条命令即可在浏览器里打开视觉工作台：

goldie studio

在 Studio 中你可以实时切换背景渐变、模板、边框配色、字体和每一张图块的文案。它甚至会用真实配置的几何参数绘制每个模板的"缩略图序列"（见 studio/src/components/TemplatePicker.tsx），选哪个模板，整组截图的构图长什么样，一眼可见。

调整满意后，所有选择会保存为goldie.design.json，CLI 再用同一份设计参数重新渲染——浏览器里看到的和上传到 App Store 的，是像素级一样的东西。

三步上手 Goldie 视觉系统

1. 把 goldie.config.example.ts 复制为goldie.config.ts，填入你的 App 路径与场景；
2. 在theme中挑选template（建议 4~5 张图先用editorial）和frame边框；
3. 运行goldie all，一条命令完成截屏 → 合成 → 预览视频 → 规格校验，产物落在out/目录，并通过 src/specs.ts 内置的 Apple 规格表自动校验尺寸与时长。

想更快？直接把这句话交给你的 AI 编码代理："create App Store screenshots using goldie"，它会探索你的 App、写好 flows 和配置，并自动打开 Studio 供你微调。

总结

Goldie 的视觉系统把"设计 App Store 截图"这件事拆解成了三个简单选择：选布局（11 种）→ 选模板（5 种节奏）→ 微调细节（Studio）。无需 Figma、无需设计师，一行goldie all就能产出符合 Apple 上传规格、具备专业排版水准的商店素材——这正是 agentic 工具对开发者体验的最好注解。

【免费下载链接】goldie✨ agentic app store previews and screenshots项目地址: https://gitcode.com/gh_mirrors/gol/goldie