Готовый настраиваемый промт для создания работающего PWA-приложения с помощью Claude.ai.
Этот промт нужен, чтобы Claude собрал вам готовое PWA-приложение под оффер. Это просто заготовка и демонстрация возможностей по созданию PWA с помощью ИИ. В приложении нет пушей (легко дописать), не вшита статистика (тоже не сложно) — в общем, это база, которую нужно дорабатывать под себя.
Claude — это ИИ-ассистент от компании Anthropic. Он умеет писать и редактировать тексты, анализировать большие документы и данные, помогать с программированием и решать повседневные рабочие задачи.
Подробнее что такое PWA и как они применяются в арбитраже трафика читайте здесь: https://cpa.rip/blogs/custom-pwa/.
Скопируйте этот готовый промт для создания PWA-приложения:
Pwa prompt english · MDCopyPWA Traffic Arbitrage — Compact Prompt
PARAMETERS
APP_NAME : Generate randomly
SHORT_NAME : Generate randomly
DEVELOPER : SkyNet Entertainment Ltd.
CATEGORY : Casino · Games
LANGUAGE : es
AFFILIATE_LINK : link
RATING : 4.8 | REVIEWS: 12K | DOWNLOADS: 500K+
SIZE : 4.2 MB | AGE: 18+
SPLASH_SECONDS : 10
SCREENSHOT_COUNT: 3
DESCRIPTION: …
REVIEWS (name / date / text):
1: Generate randomly / Generate randomly / Generate randomly
2: Generate randomly / Generate randomly / Generate randomly 🎡
3: Generate randomly / Generate randomly / Generate randomly
SCREENSHOTS (theme / emoji / bg-color / badge):
1: Slots / 🎰 / dark purple / "⭐ TOP"
2: Bonus / 🎁 / dark green / "🎁 Bonus"
3: Jackpot / 💸 / dark orange / "💸 Jackpot"
ZIP CONTENTS (all files in root, no subfolders)
index.html, app.html, manifest.json, sw.js,
icon-192.png, icon-512.png,
screenshot1.png … screenshot{SCREENSHOT_COUNT}.png
index.html
First lines immediately after <meta charset>:
html<script>
if (window.matchMedia("(display-mode:standalone)").matches || navigator.standalone)
{ document.documentElement.style.cssText="background:#fff;visibility:hidden";
window.location.replace("./app.html"); }
</script>
<style>body{visibility:hidden}html.ready body{visibility:visible}</style>
Page sections (Google Play style):
Sticky header — Google Play logo (4-color SVG) + search/profile icons
App block — 80×80px icon, app name, developer, category, badges
Statistics — star rating ★, downloads, editor's choice medal, age rating
Install button — color #01875f, 100% width, height 40px, border-radius 8px
Progress bar — below the button, hidden by default
Screenshot carousel — 130×230px thumbnails, border-radius 10px, horizontal scroll; show only screenshot1…N
Description — with "More ▾" toggle
Reviews — avatar (first letter), name, date, stars, text
Info grid 2×2 — size / Android version / downloads / developer
Fixed bottom bar — icon + app name + button
Button logic (in-memory variables only, ⛔ no localStorage/cookies):
jsvar deferredPrompt = null, installed = false, animationPlayed = false;
addEventListener('beforeinstallprompt', e => { e.preventDefault(); deferredPrompt = e; });
addEventListener('appinstalled', () => {
if (animationPlayed) return;
installed = true; deferredPrompt = null;
runInstallAnimation(() => setOpenState());
});
// On "Install" button click:
// • deferredPrompt exists → prompt() → accepted: run animation → setOpenState; dismissed: restore "Install" label
// • no prompt + iOS → show modal with Safari instruction
// • no prompt + not iOS → wait 4s → prompt()
runInstallAnimation(callback):
jsfunction runInstallAnimation(cb) {
if (animationPlayed) { cb?.(); return; }
animationPlayed = true;
// button → spinner + "Installing…", bg #e8f5e9, color #01875f
// progress bar steps: [10, 25, 45, 65, 80, 92, 100] with pauses between
// after reaching 100% → wait 500ms → call cb()
}
setOpenState / openApp:
jsfunction setOpenState() {
installed = true; // in-memory only — do NOT write to localStorage
// both buttons (main + bottom bar) → "✓ Open", onclick = openApp
}
function openApp() { window.location.href = './app.html'; }
End of script:
jsdocument.documentElement.classList.add('ready');
if ('serviceWorker' in navigator) navigator.serviceWorker.register('./sw.js');
// + add ripple animation to all buttons
app.html — Splash Screen + Redirect
Splash screen (white background, all content centered):
icon-512.png — 112×112px, border-radius 24px, box-shadow
App name — 26px, font-weight 400, color #202124
Spinner — border-top-color #01875f
Entrance animation: scale(0.75→1) + opacity(0→1), duration 0.5s
Progress bar — position: fixed; bottom: 0, height 3px, color #01875f; fills evenly over SPLASH_SECONDS seconds, jumps to 100% 400ms before the end
Redirect (fires 300ms after page load):
jsvar TARGET = 'AFFILIATE_LINK';
var host = new URL(TARGET).host, path = TARGET.replace(/^https?:\/\/[^/]+/, '');
var intent = 'intent://' + host + path
+ '#Intent;scheme=https;package=com.android.chrome'
+ ';S.browser_fallback_url=' + encodeURIComponent(TARGET) + ';end';
window.location.href = intent;
setTimeout(() => window.location.replace(TARGET), 1500); // fallback for non-Android
manifest.json
json{
"name": "APP_NAME",
"short_name": "SHORT_NAME",
"start_url": "./index.html",
"scope": "./",
"display": "standalone",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#01875f",
"icons": [
{"src":"icon-192.png","sizes":"192x192","type":"image/png","purpose":"any"},
{"src":"icon-512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}
]
}
⛔ Do NOT add a "screenshots" field — Chrome renders them inside the install dialog, which breaks UX.
sw.js
jsconst CACHE = 'app-v1';
const STATIC = [
'./manifest.json', './icon-192.png', './icon-512.png',
...Array.from({ length: SCREENSHOT_COUNT }, (_, i) => `./screenshot${i + 1}.png`)
];
// install → caches.open(CACHE).addAll(STATIC); self.skipWaiting()
// activate → delete old caches; self.clients.claim()
// fetch rules:
// cross-origin request → pass through (do not intercept)
// index.html / app.html / "/"→ network-first; fallback: cache(index.html)
// everything else → cache-first → on miss: fetch → store in cache
Icons (Python Pillow)
icon-192.png — 192×192px
icon-512.png — 512×512px
Background: vertical gradient #1a0a3e → #0d0628
First letter of SHORT_NAME, white, bold, centered
Screenshots (Playwright Chromium)
Generate exactly SCREENSHOT_COUNT files (screenshot1.png … screenshotN.png)
Viewport: 260×460px, save as PNG
Each screenshot structure:
Header — app name + colored badge (from SCREENSHOT_N params)
Center — large emoji ~80px with CSS drop-shadow filter
Bottom panel — background: rgba(0,0,0,0.65) + backdrop-filter: blur; title in #ffd700; description text; 3 decorative emojis; "Play Now" button in #01875f
Задайте в промпте свои параметры, такие как: название приложения, короткое название, разработчик, категория, язык, партнерская ссылка, рейтинг, количество отзывов, количество скачиваний, размер приложения, возрастное ограничение, время показа сплэш-скрина, количество скриншотов. Так же можно задать свои описания, отзывы и скриншоты, либо оставить данные параметры генерировать случайным образом. Все, что находится ниже этих параметров, оставьте без изменений.
Вставьте финальный промпт в Claude и запустите
Если в процессе будет запрашивать разрешение — выдайте их.
Скачайте полученный архив, нажав «Download», или найдите файлы в папке проекта, если он был предварительно настроен
Полученный архив распакуйте и замените изображения на заранее подготовленные. Изображения удобнее обновлять через замену файлов в корневой папке, сохраняя исходное название и формат.
Загрузите все файлы на хостинг.
PWA обязательно требует HTTPS — без него beforeinstallprompt не сработает и кнопка Install не появится.
Обязательно перед запуском трафика проверьте ваш PWA на работоспособность!
Также после теста можно доработать данное приложение на свое усмотрение.
А дальше думайте, куда это можно пристроить и как этим воспользоваться! Например, можете сделать панельку с пушами и статистикой и так далее.
Пример сгенерированного PWA
 |
 |
 |
 |
Скачать архив: https://drive.google.com/file/d/1yUxHKGMw1x4QiyQ3G8sGNr8TqtHEtMcw/view
Сервисы для создания PWA-приложений для арбитража: https://cpa.rip/mobile-app/pwa/
