App Store Design: Bikin Screenshot yang Jual, Bukan Cuma Pamer UI

⚠️ Sebelum Install Skill Ini

Skill ini butuh Claude Code terinstall duluan di komputermu. Claude Code berbeda dari Claude.ai yang kamu buka di browser. Ini versi yang jalan di terminal.

Langkah 1: Pastikan Node.js sudah ada

Buka terminal dulu:

Mac: Tekan Cmd+Space → ketik "Terminal" → Enter
Windows: Tekan Win+R → ketik "cmd" → Enter Lalu ketik perintah ini dan tekan Enter:

bash

node --version

Kalau muncul angka seperti v20.0.0, Node.js sudah ada. Kalau muncul error, download Node.js dulu di https://nodejs.org. Pilih versi LTS.

Langkah 2: Install Claude Code

bash

npm install -g @anthropic-ai/claude-code

Tunggu sampai selesai. Biasanya 1–2 menit.

Langkah 3: Cek apakah berhasil

bash

claude --version

Kalau muncul angka versi, Claude Code sudah siap.

Langkah 4: Login

bash

claude

Ikuti instruksi login yang muncul. Kamu perlu akun Anthropic (daftar gratis di https://claude.ai).

Apa itu App Store Design Skill?

Skill buatan Parth Jadhav (software engineer di Atlassian) ini punya filosofi sederhana: screenshot App Store bukan dokumentasi UI. Itu iklan. Setiap slide harus menjual satu ide. Skill ini build editor screenshot full stack (Next.js) yang bisa kamu edit langsung di browser, bukan generate file statis. Export ke semua ukuran yang dibutuhkan App Store dan Google Play.

Kegunaan

Generate screenshot untuk semua resolusi Apple: 6.9", 6.5", 6.3", 6.1"
Google Play untuk Android phone dan tablet
Multi-locale: satu build, output ke banyak bahasa
RTL support untuk bahasa Arab dan Hebrew
Export bundle siap upload ke App Store Connect

Cara Install — 3 Pilihan

📁 Pilihan 1: Download ZIP dari GitHub (paling mudah)

Langkah 1. Buka https://github.com/ParthJadhav/app-store-screenshots di browser

Langkah 2. Klik tombol hijau "Code" di kanan atas

Langkah 3. Klik "Download ZIP". File masuk ke folder Downloads kamu

Langkah 4. Extract file ZIP (klik kanan → Extract All di Windows, double-click di Mac)

Langkah 5. Pindahkan folder hasil extract ke folder skills Claude Code:

Mac: Finder → Go → Go to Folder → ketik ~/.claude/skills/ → pindahkan folder ke sini
Windows: File Explorer → address bar → ketik %USERPROFILE%\.claude\skills\ → Enter → pindahkan folder

Langkah 6. Rename folder jadi app-store-screenshots (hapus "-main" di akhir jika ada)

Langkah 7. Buka Claude Code dengan ketik claude di terminal. Skill siap dipakai.

⚡ Pilihan 2: Via npx (perlu terminal, lebih cepat)

Buka terminal, ketik:

bash

npx skills add ParthJadhav/app-store-screenshots

Tunggu sampai selesai. Skill langsung terinstall di lokasi yang benar.

🔧 Pilihan 3: Via git clone (perlu Git terinstall)

Cek dulu apakah Git sudah ada:

bash

git --version

Kalau muncul versi, lanjut dengan:

bash

git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots

Kalau Git belum ada, download di https://git-scm.com

✅ Cara Verifikasi Install Berhasil

Buka Claude Code, ketik:

javascript

Bikin App Store screenshot untuk aplikasi saya. Pakai App Store Design skill.

Claude akan tanya detail app kamu. Itu tanda skill sudah aktif.

Cara Pakai

Setelah install, minta Claude Code:

javascript

Bikin App Store screenshot untuk habit tracker saya.
App ini bantu orang konsisten dengan rutinitas harian.
6 slide, gaya minimal bersih, warna hangat netral.

Claude akan tanya dulu: screenshot app-mu di mana, platform apa, locale apa, gaya visual seperti apa, berapa slide. Setelah itu Claude scaffold editor, jalankan dev server, kamu edit di browser, lalu export.

Workflow

Capture screenshot dari simulator atau device
Jalankan skill, minta Claude Code bikin App Store screenshots
Claude setup project editor di folder kamu
Buka editor di browser
Edit copy dan layout via sidebar
Klik Export bundle, download semua ukuran siap upload

Link GitHub: https://github.com/ParthJadhav/app-store-screenshots Showcase: https://www.parthjadhav.com/products/app-store-screenshots