ZS

zaferayan/store-screenshots-panorama-skill

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

26 stars 质量 67 趋势 25MIT

Agent Skill:应用商店截图组合成一个流动的全景——明暗分明,iPhone 6.9英寸/6.3英寸和 iPhone Duo,应用自身上下文中的3D对象,像素精确的用户界面

概览

一个能将原始应用截图转化为完成的App Store截图集的代理技能,呈现出一幅流畅的全景——明暗主题,适用于所有需要的iPhone尺寸和iPhone Duo。 上面的这套是技能根据五张原始截图制作的。每个UI像素都是原始截图,只是调整大小和裁剪;背景、标题、设备帧和3D物体都围绕其渲染。 - 背景设计为一条条带并切片,使其大曲线在每个接缝处流淌,画廊滚动。- 厚重的居中标题和同一位置的装置,使目光转向变化。- 屏幕调暗,裁剪部分——倒计时、球员、卡片——以1:1原始像素从设备外弹出。内置聚光灯、2×/2卡格、风扇、功能芯片和渐变帧。

概述(AI 翻译)

一个能将原始应用截图转化为完成的App Store截图集的代理技能,读起来就像一体成型 全景——明暗主题,适用于所有iPhone尺寸及iPhone Duo。

上面这套是技能根据五张原始截图制作的。每个界面像素都是原始截图,仅限于原始截图。 调整大小和裁剪;背景、标题、设备帧和3D物体围绕其进行渲染。

它所创造的

  • 一张全景图,非单独的卡片。 背景设计为一条带并切片,使其大曲线流畅 画廊滚动时,穿过每一条缝隙。
  • 大而稳健的版面布局。 重重的居中标题和每个图片同一位置的装置,让目光集中在 什么会改变。
  • 证明,拉出。 屏幕变暗,裁剪部分——倒计时、玩家、一张牌—— 以1:1的原始像素从设备外方突出。聚光灯、2×2张卡片网格、风扇、功能芯片和渐变帧 内置的。
  • 来自应用世界里的3D对象。 光滑、蓬松的SVG对象,带有真实光影滤镜,取自应用

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

store-screenshots-panorama

An Agent Skill that turns raw app screenshots into a finished App Store screenshot set that reads as one flowing panorama — in light and dark themes, for every required iPhone size and for iPhone Duo.

The set above was made by the skill from five raw screenshots. Every UI pixel is the original screenshot, only resized and cropped; the background, headlines, device frames and 3D objects are rendered around it.

What it makes

  • One panorama, not separate cards. The background is designed as one strip and sliced, so its large curves flow across every seam while the gallery scrolls.
  • Big, steady layout. Heavy centred headlines and a device at the same spot in every image, so the eye goes to what changes.
  • The proof, pulled forward. The screen is dimmed while one cropped part of it — a countdown, a player, a card — pops out past the device at 1:1 raw pixels. Spotlights, 2×2 card grids, fans, feature chips and gradient frames are built in.
  • 3D objects from the app’s own world. Glossy, puffy SVG objects with real lighting filters, picked from the app’s subject (a crescent and stars for a prayer app, speech bubbles and notes for a subtitle app) and placed on the seams.
  • A hero first. No phone: the app’s symbol as a giant 3D object holding the app’s own UI cards.
  • Light and a real dark theme. The dark theme is dark-dominant: accent colour only in headlines, objects and frames. Give it your app’s dark-mode screenshots and the dark set shows the dark UI.
  • Every required size. iPhone 6.9" (1320×2868) and 6.3" (1206×2622), plus iPhone Duo outer (1398×2034) and inner (2007×2853) when Duo screenshots are provided. Output is PNG without alpha.

What it won’t do: redraw, regenerate or translate the UI, put iPhone screenshots in a Duo frame, or add shopping-ad clutter like campaign badges and discount ribbons.

Install

npx skills add zaferayan/store-screenshots-panorama-skill

Works with any agent supported by the skills CLI (Claude Code, Codex, Cursor, and others).

Requirements: Node 18+ and a Chromium-based browser (Chrome, Chromium, Edge or Brave). No packages to install.

Usage

Put your raw screenshots in a folder and ask your agent:

Use the store-screenshots-panorama skill.
Make App Store screenshots from the screens in raw/, light and dark.

The agent derives the palette, headlines and 3D symbols from the screenshots and produces the sets directly — no plan files or approval stops. Output lands in out////01.png …, with the editable source HTML in out/.src/ so you can change a headline and render again.

If your app has a dark mode, put the light-mode screenshots in raw-light/ and the dark-mode ones in raw-dark/,

在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add zaferayan/store-screenshots-panorama-skill
新手?先看 mcpskill.org 教程 →