ZS

zaferayan/store-screenshots-panorama-skill

Developer tools

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る

26 stars 品質 67 トレンド 25MIT

エージェントスキル:アプリストアスクリーンショットは、パノラマを流れるように設定します - ライト/ダーク、iPhone 6.9"/6.3"とiPhone Duo、アプリの独自のコンテキストから3Dオブジェクト、ピクセル - 正確なUI

概要

生のアプリスクリーンショットを終了するApp Storeスクリーンショットに変えるエージェントスキルは、必要なすべてのiPhoneサイズとiPhoneデュオのために、光と暗いテーマで、パノラマを流れるように読み取ります。 上記のセットは5つの生のスクリーンショットのスキルによって作られました。 すべてのUIピクセルは、元のスクリーンショットで、サイズ変更とトリミングのみです。 背景、見出し、デバイスフレーム、および3Dオブジェクトがレンダリングされます。 - 背景は1つのストリップとして設計され、スライスされるので、ギャラリーがスクロールしながら、各継ぎ目を渡る大きな曲線が流れます。 - 重い中心の見出しとすべての画像の同じ場所でデバイス, ので、目はどのような変化に行きます. ・ 画面は、1:1の生ピクセルでデバイスを過去にポップアウトするカウントダウン、プレーヤー、カード - それの1つのクロップド部分の間に薄暗くなります。 スポットライト、2×2カードグリッド、ファン、機能チップ、勾配フレームが組み込まれています.

概要(AI 翻訳)

未加工アプリのスクリーンショットを終了するApp Storeのスクリーンショットに変えるエージェントスキルは、1つのフローとして読みます パノラマ — 光と暗いテーマで、すべての必要なiPhoneサイズとiPhoneのデュオのために。

上記のセットは5つの生のスクリーンショットのスキルによって作られました。 すべてのUIピクセルは元のスクリーンショットです、唯一の 再サイズとトリミング; 背景、見出し、デバイスフレーム、および3Dオブジェクトが周囲にレンダリングされます。

それを作るもの

  • 1つのパノラマは、カードを分離しません。 背景は1つのストリップとして設計され、切れます、従って大きいカーブは流れます ギャラリーをスクロールしながら、すべての縫い目を渡します。
  • 大きい、安定したレイアウト。 重心された見出しと、あらゆる画像の同じ場所にあるデバイス。そのため、目が目指す 変更内容
  • 証拠は、先に引きました。 画面は、それの1つの切り抜かれた部分が - カウントダウン、プレーヤー、カード - 1:1の生ピクセルでデバイスを貼り付けます。 スポットライト、2×2カードグリッド、ファン、機能チップ、勾配フレームは、 組み込み。
  • ※3Dオブジェクトはアプリ独自の世界から。** Glossy、puffy 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
MCP 初心者?mcpskill.org のガイドから始めましょう →