ZS

zaferayan/store-screenshots-panorama-skill

Developer tools

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기

26 stars 품질 67 트렌드 25MIT

에이전트 스킬 : 앱 스토어 스크린 샷 세트 하나 흐르는 파노라마 - 빛 / 어두운, 아이폰 6.9 "/6.3" 및 아이폰 듀오, 3D 개체 앱의 자신의 맥락에서, 픽셀 정확한 UI

개요

원시 앱 스크린 샷을 완성 된 앱 스토어 스크린 샷 세트로 전환하는 에이전트 스킬은 1 개의 흐르는 팬라마로 읽습니다. - 빛과 어두운 테마, 모든 필수 iPhone 크기 및 iPhone Duo 용. 위의 세트는 5 개의 원시 스크린 샷에서 기술에 의해 만들어졌습니다. 모든 UI 픽셀은 원래 스크린 샷, 만 크기 및 작물입니다. 배경, 헤드 라인, 장치 프레임 및 3D 객체는 주변 렌더링됩니다. - 배경은 하나의 스트립과 슬라이딩으로 설계되므로 갤러리 스크롤 동안 모든 솔기에 걸쳐 큰 곡선이 흐릅니다. - 무거운 중심 헤드 라인 및 모든 이미지의 동일한 지점에서 장치, 그래서 눈은 어떤 변경에 간다. - - - 스크린은 1개의 작물한 부분이 그것 — 카운트다운, 선수, 카드 - 1개의 익지않는 화소에 장치를 과거에 대중에게 합니다. 스포트라이트, 2 × 2 카드 그리드, 팬, 기능 칩 및 그라디언트 프레임이 내장되어 있습니다.

개요(AI 번역)

Raw 앱 스크린 샷을 완성 된 App Store 스크린 샷으로 전환하는 Agent Skills는 하나의 흐름으로 읽습니다. panorama - 빛과 어두운 테마, 모든 필수 아이폰 크기 및 아이폰 듀오에 대 한.

위의 세트는 5 개의 원시 스크린 샷에서 기술에 의해 만들어졌습니다. 모든 UI 픽셀은 원래 스크린 샷입니다. 크기와 작물; 배경, 헤드 라인, 장치 프레임 및 3D 개체는 주위에 렌더링됩니다.

그것이 만드는 것

  • ** 하나 파노라마, 별도의 카드. ** 배경은 1개의 지구로 디자인되고, 이렇게 그것의 큰 곡선 교류 갤러리 스크롤 동안 모든 솔기에 걸쳐.
  • ** 큰, 꾸준한 배치. ** 모든 이미지의 동일한 반점에 무거운 중심의 헤드 라인 및 장치, 그래서 눈이 간다 어떤 변화.
  • ** 증거, 앞으로 당겨. ** 화면이 흐리게 한 동안 한 번의 자르기 부분 — 카운트 다운, 플레이어, 카드 — 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
MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →