Goldie视觉系统全解析11种布局5套模板让App Store截图拥有专业设计师水准【免费下载链接】goldie✨ agentic app store previews and screenshots项目地址: https://gitcode.com/gh_mirrors/gol/goldieGoldie 是一款专为 iOS 开发者打造的 App Store 截图与预览视频自动生成工具。它内置的视觉系统是最被低估的亮点11 种可组合的截图布局 5 套开箱即用的设计模板让不懂设计的开发者也能一键产出媲美专业设计师水准的商店截图。本文带你完整拆解这套视觉系统。11种布局每张截图的构图公式Goldie 的每一张截图都是一次构图背景、设备边框、标题文案、副标题各自有固定的几何规则。这些规则全部集中在 src/layouts.ts 中共定义了 11 种布局布局 Key效果描述特殊要求classic居中文案在上居中的设备在下默认—copy-below设备从顶部垂下文案在下方—hero文案在上大设备延伸到画面底部之外—offset左对齐文案设备推向右下角—tilt文案在上设备倾斜并冲出底部—tilt-right左对齐文案设备斜插入右下角—duo双屏小的在左后主屏在前需要第二张截图duo-tilt两块倾斜的屏幕沿对角线错落需要第二张截图panorama占两格文案在左大设备斜跨接缝占用 2 个截图位panorama-duo两格共享一个标题两侧各一屏需要第二张截图占 2 格minimal无文案仅一个居中的大设备— 小技巧App Store 页面前两张截图是访客看得最多的位置官方建议 skills/goldie/references/config.md 推荐用classic、hero或panorama开场minimal适合作为长图中的呼吸感留白。5套模板整组截图的节奏感单张布局之外Goldie 更聪明的是把整组截图当成一部电影来编排。模板template就是一组布局在商店顺序上的循环序列定义见 src/layouts.ts模板布局序列气质editorialpanorama → hero → offset → minimal → tilt杂志大片感全景开场showcasehero → tilt → duo → tilt-right → minimal产品陈列感主角突出magazineoffset → copy-below → tilt-right → hero → minimal杂志排版感左右错落storyboardpanorama-duo → copy-below → hero → minimal → tilt分镜叙事感双屏开场dynamictilt → duo-tilt → panorama → minimal → tilt-right动感十足全程倾斜如果布局序列短于截图数量会自动从头循环当然你也可以完全自定义序列例如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.jsonCLI 再用同一份设计参数重新渲染——浏览器里看到的和上传到 App Store 的是像素级一样的东西。三步上手 Goldie 视觉系统把 goldie.config.example.ts 复制为goldie.config.ts填入你的 App 路径与场景在theme中挑选template建议 4~5 张图先用editorial和frame边框运行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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考