拓冰网站定制 
Goldie Studio实战浏览器实时换背景边框字体一键导出App Store素材包【免费下载链接】goldie✨ agentic app store previews and screenshots项目地址: https://gitcode.com/gh_mirrors/gol/goldieGoldie Studio 是开源工具 Goldie 内置的浏览器设计工作台专为生成 iOS App Store 截图与预览视频而设计。它基于模拟器自动截图再为画面套上设备边框、背景与营销标题你无需打开任何设计软件在浏览器里点击几下就能实时更换截图背景、边框和字体并一键导出符合 Apple 上传规格的素材包。一、Goldie 是什么截图 预览视频的一条流水线 Goldie 的工作方式是argent 驱动模拟器回放你预先写好的操作流flow自动截取每个屏幕的原始画面goldie负责包装给截图加上设备边框、渐变背景和卖点标题把预览片段拼接成视频校验器按 Apple 官方规格表逐项检查产物尺寸不合规会直接报错。它不挑技术栈——SwiftUI、UIKit、Flutter、React Native、Kotlin Multiplatform 的 App 都能用。最终产物是6.9 英寸截图1320 × 2868 PNG不带透明通道预览视频886 × 1920 H.264时长必须落在 1530 秒之间这些数字都硬编码在 src/specs.ts 中goldie verify就是拿它来逐项对账。二、快速安装一条命令配好环境环境要求macOS带 iOS 模拟器、Node 20、ffmpeg。npm i -g goldie然后从你 App 仓库的根目录开始把示例配置 goldie.config.example.ts 复制为goldie.config.ts填好 App 路径、场景与标题文案三条命令走完全流程goldie doctor # 检查工具链、模拟器与流程文件 goldie all # 截图 → 合成 → 预览视频 → 校验一步到位 goldie studio # 打开浏览器设计工作台studio默认启动在http://localhost:4321背后的静态服务与 API 由 src/studio-server.ts 提供。三、设计面板实战背景、字体、边框即时切换 打开 Studio 后你会看到一个仿真的 App Store 页面——你的素材就摆在真实的商店版式里右侧是设计面板。所有改动都在浏览器内即时重绘不点导出就不会真正落盘。1. 换背景24 个预设或自定义渐变面板内置 Arctic、Ocean、Midnight、Sunset、Coral 等 24 组渐变预设选中彩虹色块还能打开自定义弹窗用两个色值 角度滑块调出自己的渐变甚至导出透明底。预设定义在 studio/src/components/DesignPanel.tsx 的PRESETS列表里想加新风格改这一处即可。2. 换字体系统字体 5 款内置字体除 iOS 系统字体SF Pro外项目直接打包了 Merriweather、DM Mono、Lato、DM Sans、Montserrat 五款字体见 assets/fonts/ 与 src/fonts.ts下拉即切标题排版立刻换风格。3. 换边框三种配色或干脆去框截图默认套上 iPhone 17 Pro 渲染边框内置17-pro-blue、17-pro-silver、17-pro-orange三种配色也支持自定义边框图或切换仅屏幕模式去掉边框只留投影。这些边框是高分辨率渲染素材横版 iPad 边框长这样Goldie App Store 截图设备边框渲染素材示例iPad 银色横版边框Goldie App Store 截图设备边框渲染素材示例iPad 深空灰色横版边框4. 换版式模板 单格布局模板editorial、showcase、magazine、storyboard、dynamic五套整页节奏布局classic、hero、tilt、duo双屏一格、panorama通栏等 11 种单格版式可对每一格单独覆盖。布局与模板的完整定义在 src/layouts.ts。所有设计选择都会写入配置文件旁的goldie.design.json因此CLI 跑goldie frame会渲染出一模一样的结果——浏览器里试的效果就是最终导出的效果。四、一键导出拿到可直接上传的素材包 满意后点击侧边栏的Export screenshots按钮studio/src/components/ExportPanel.tsxStudio 会在后台依次执行goldie frame # 用当前背景/边框/字体重新合成截图 goldie preview # 拼接预览视频 goldie manifest # 生成商店页数据 zip screenshots previews执行日志会实时滚动在按钮上方完成后浏览器自动下载appstore-assets.zip——解压即是按目录分好的截图与预览可直接拖进 App Store Connect。上传前的合规检查由goldie verify完成Studio 侧边栏也会显示同样的校验行红色即代表不合规。五、进阶玩法让 AI 编程助手替你操作 Goldie 还以技能skill形式接入各类编码 Agent。安装后在 App 仓库里说一句create App Store screenshots using goldie助手就会自己探索 App、写流程、生成配置并打开 Studio后续只说换个深色背景、把搜索那屏换成设置页这类话它会精确修改对应文件并只重跑最便宜的阶段。技能定义与迭代对照表见 skills/goldie/SKILL.md配置字段与文案写法参考 skills/goldie/references/config.md。六、关键文件速查文件作用src/cli.ts全部 CLI 命令入口与单次覆盖参数src/specs.tsApple 上传规格表verify 的依据src/studio-server.tsStudio 的 HTTP 服务与设计/导出 APIstudio/src/components/DesignPanel.tsx背景/字体/边框/模板设计面板studio/src/components/ExportPanel.tsx一键导出与日志流goldie.config.example.ts场景、文案、预览分段配置模板小结零设计软件浏览器里点选背景、字体、边框所见即所得规格内置尺寸、时长、码率全部按 Apple 要求校验导出的 zip 可直接上传人机两用手动执行三条命令或交给 AI 助手一句话搞定框架无关SwiftUI、Flutter、React Native 的 App 通用。装好 Goldie、跑起goldie studio你的 App Store 素材就从设计周缩短到一杯咖啡时间。【免费下载链接】goldie✨ agentic app store previews and screenshots项目地址: https://gitcode.com/gh_mirrors/gol/goldie创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Goldie Studio实战：浏览器实时换背景边框字体，一键导出App Store素材包
Goldie Studio实战浏览器实时换背景边框字体一键导出App Store素材包【免费下载链接】goldie✨ agentic app store previews and screenshots项目地址: https://gitcode.com/gh_mirrors/gol/goldieGoldie Studio 是开源工具 Goldie 内置的浏览器设计工作台专为生成 iOS App Store 截图与预览视频而设计。它基于模拟器自动截图再为画面套上设备边框、背景与营销标题你无需打开任何设计软件在浏览器里点击几下就能实时更换截图背景、边框和字体并一键导出符合 Apple 上传规格的素材包。一、Goldie 是什么截图 预览视频的一条流水线 Goldie 的工作方式是argent 驱动模拟器回放你预先写好的操作流flow自动截取每个屏幕的原始画面goldie负责包装给截图加上设备边框、渐变背景和卖点标题把预览片段拼接成视频校验器按 Apple 官方规格表逐项检查产物尺寸不合规会直接报错。它不挑技术栈——SwiftUI、UIKit、Flutter、React Native、Kotlin Multiplatform 的 App 都能用。最终产物是6.9 英寸截图1320 × 2868 PNG不带透明通道预览视频886 × 1920 H.264时长必须落在 1530 秒之间这些数字都硬编码在 src/specs.ts 中goldie verify就是拿它来逐项对账。二、快速安装一条命令配好环境环境要求macOS带 iOS 模拟器、Node 20、ffmpeg。npm i -g goldie然后从你 App 仓库的根目录开始把示例配置 goldie.config.example.ts 复制为goldie.config.ts填好 App 路径、场景与标题文案三条命令走完全流程goldie doctor # 检查工具链、模拟器与流程文件 goldie all # 截图 → 合成 → 预览视频 → 校验一步到位 goldie studio # 打开浏览器设计工作台studio默认启动在http://localhost:4321背后的静态服务与 API 由 src/studio-server.ts 提供。三、设计面板实战背景、字体、边框即时切换 打开 Studio 后你会看到一个仿真的 App Store 页面——你的素材就摆在真实的商店版式里右侧是设计面板。所有改动都在浏览器内即时重绘不点导出就不会真正落盘。1. 换背景24 个预设或自定义渐变面板内置 Arctic、Ocean、Midnight、Sunset、Coral 等 24 组渐变预设选中彩虹色块还能打开自定义弹窗用两个色值 角度滑块调出自己的渐变甚至导出透明底。预设定义在 studio/src/components/DesignPanel.tsx 的PRESETS列表里想加新风格改这一处即可。2. 换字体系统字体 5 款内置字体除 iOS 系统字体SF Pro外项目直接打包了 Merriweather、DM Mono、Lato、DM Sans、Montserrat 五款字体见 assets/fonts/ 与 src/fonts.ts下拉即切标题排版立刻换风格。3. 换边框三种配色或干脆去框截图默认套上 iPhone 17 Pro 渲染边框内置17-pro-blue、17-pro-silver、17-pro-orange三种配色也支持自定义边框图或切换仅屏幕模式去掉边框只留投影。这些边框是高分辨率渲染素材横版 iPad 边框长这样Goldie App Store 截图设备边框渲染素材示例iPad 银色横版边框Goldie App Store 截图设备边框渲染素材示例iPad 深空灰色横版边框4. 换版式模板 单格布局模板editorial、showcase、magazine、storyboard、dynamic五套整页节奏布局classic、hero、tilt、duo双屏一格、panorama通栏等 11 种单格版式可对每一格单独覆盖。布局与模板的完整定义在 src/layouts.ts。所有设计选择都会写入配置文件旁的goldie.design.json因此CLI 跑goldie frame会渲染出一模一样的结果——浏览器里试的效果就是最终导出的效果。四、一键导出拿到可直接上传的素材包 满意后点击侧边栏的Export screenshots按钮studio/src/components/ExportPanel.tsxStudio 会在后台依次执行goldie frame # 用当前背景/边框/字体重新合成截图 goldie preview # 拼接预览视频 goldie manifest # 生成商店页数据 zip screenshots previews执行日志会实时滚动在按钮上方完成后浏览器自动下载appstore-assets.zip——解压即是按目录分好的截图与预览可直接拖进 App Store Connect。上传前的合规检查由goldie verify完成Studio 侧边栏也会显示同样的校验行红色即代表不合规。五、进阶玩法让 AI 编程助手替你操作 Goldie 还以技能skill形式接入各类编码 Agent。安装后在 App 仓库里说一句create App Store screenshots using goldie助手就会自己探索 App、写流程、生成配置并打开 Studio后续只说换个深色背景、把搜索那屏换成设置页这类话它会精确修改对应文件并只重跑最便宜的阶段。技能定义与迭代对照表见 skills/goldie/SKILL.md配置字段与文案写法参考 skills/goldie/references/config.md。六、关键文件速查文件作用src/cli.ts全部 CLI 命令入口与单次覆盖参数src/specs.tsApple 上传规格表verify 的依据src/studio-server.tsStudio 的 HTTP 服务与设计/导出 APIstudio/src/components/DesignPanel.tsx背景/字体/边框/模板设计面板studio/src/components/ExportPanel.tsx一键导出与日志流goldie.config.example.ts场景、文案、预览分段配置模板小结零设计软件浏览器里点选背景、字体、边框所见即所得规格内置尺寸、时长、码率全部按 Apple 要求校验导出的 zip 可直接上传人机两用手动执行三条命令或交给 AI 助手一句话搞定框架无关SwiftUI、Flutter、React Native 的 App 通用。装好 Goldie、跑起goldie studio你的 App Store 素材就从设计周缩短到一杯咖啡时间。【免费下载链接】goldie✨ agentic app store previews and screenshots项目地址: https://gitcode.com/gh_mirrors/gol/goldie创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考