ParthJadhav/app-store-screenshots

App Store 및 Google Play 스크린샷 생성기

이것은 무엇인가 – AI 코딩 에이전트를 위한 스킬로, Apple App Store, Mac App Store 및 Google Play에서 요구하는 마케팅 스크린샷을 만들기 위한 완전한 기능의 Next.js 편집기를 구축합니다. 이 도구는 원시 기기 캡처를 광고 스타일 슬라이드 덱으로 변환하고, 연결된 캔버스에서 요소를 배열하며, 스토어에서 요구하는 모든 크기로 PNG 번들을 내보냅니다.

주요 기능

• 드래그 앤 드롭이 가능한 연결된 캔버스, 레거시 덱을 위한 격리 모드, 화면 재정렬을 위한 사이드바.
• 검사기 패널에서 카피, 헤드라인, 레이아웃 및 요소 변환을 편집할 수 있으며, 기성 헤드라인 공식이 포함된 Copy ideas 메뉴를 포함합니다.
• 테마 선택기와 Style Lab은 18가지 사전 정의된 시각적 스타일(팔레트, 타이포그래피, 레이아웃)을 제공하며 잠그거나, 섞거나, 리믹스할 수 있습니다.
• 전역 배경, 기기 그림자, 3D 기울기, 확대경 루페를 위한 씬 플레이그라운드.
• 다중 플랫폼 지원: iPhone, iPad, iPhone Duo, Apple TV, Apple Watch, CarPlay, Mac, Android 휴대폰/태블릿 및 Play Store 피처 그래픽.
• 로케일 및 RTL 인식 처리, 플랫폼, 기기, 해상도 및 언어별로 구성된 내보내기 번들.
• 모든 프로젝트 상태는 app-store-screenshots.json에 저장되고 업로드된 소스 이미지는 public/screenshots/uploaded/ 아래에 있어 덱을 완전히 git으로 추적할 수 있습니다.

사용 방법

1. npx skills add ParthJadhav/app-store-screenshots를 통해 스킬을 설치합니다(또는 수동으로 클론).
2. 코딩 에이전트(Claude Code, Cursor 등)에게 앱에 대한 App Store 스크린샷 빌드를 요청하고, 간단한 설명, 원하는 슬라이드 수, 시각적 스타일, 플랫폼 및 로케일을 제공합니다.
3. 스킬은 위에서 설명한 편집기 UI를 갖춘 Next.js 프로젝트를 구축합니다.
4. 개발 서버를 실행하고, 원시 기기 스크린샷을 로드하고, 카피/레이아웃을 조정하고, 스타일을 선택하고, 스토어 준비 PNG가 포함된 zip을 내보냅니다.

중요한 이유 – 규정을 준수하는 스크린샷 자산을 생성하는 것은 모바일 개발자에게 지루하고 세부 사항이 많은 작업입니다. 이 프로젝트는 UI 중심 부분을 자동화하여 AI 에이전트가 프롬프트와 스캐폴딩을 처리하고 개발자는 전용 편집기에서 시각적 덱을 미세 조정할 수 있게 합니다.

기술 스택 – Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Radix, html-to-image, JSZip, dnd-kit, react-rnd.

라이선스 – MIT.