Apex logoGet Apex
AR
Free tool, no signup

Design your app screens by describing them

Describe your app idea in your own words, and AI will design 3 key screens you can browse like a real app — in under a minute.

Try an example:
Overall style
Primary color

3 free designs per day.

Your app screens will appear here after you describe your idea and click "Design my screens".

'; } function pressGroup(groupId, btn) { document.querySelectorAll('#' + groupId + ' [aria-pressed]').forEach(function (b) { b.setAttribute('aria-pressed', 'false'); }); if (btn) btn.setAttribute('aria-pressed', 'true'); } document.querySelectorAll('#styleGroup .apx-chip').forEach(function (b) { b.addEventListener('click', function () { pressGroup('styleGroup', b); state.style = b.dataset.value; }); }); document.querySelectorAll('#colorGroup button.apx-swatch').forEach(function (b) { b.addEventListener('click', function () { pressGroup('colorGroup', b); state.color = b.dataset.value; }); }); $('customColor').addEventListener('input', function (e) { pressGroup('colorGroup', null); state.color = e.target.value; }); document.querySelectorAll('.apx-example').forEach(function (b) { b.addEventListener('click', function () { $('idea').value = b.dataset.idea; $('idea').focus(); }); }); var ERRORS = { short: 'Add a bit more detail: what does the app do, and who is it for?', limit: "You've used your free designs for today. Come back tomorrow, or message us on WhatsApp and we'll design the screens for you.", busy: 'The tool is busy right now. Please try again shortly.', refused: "We can't design this type of app. Try a different idea.", ai_error: "The design didn't finish this time. Try again in a minute.", network: "Couldn't reach the tool. Check your connection and try again." }; var LOADING = ['Reading your idea…', 'Laying out the screens…', 'Picking colors and icons…', 'Adding the finishing touches…']; function setMsg(text, isError) { var m = $('formMsg'); m.textContent = text; m.className = 'min-h-[1.5rem] text-sm text-center ' + (isError ? 'text-rose-300' : 'text-white/55'); } function showSkeletons() { var wrap = $('phones'); wrap.innerHTML = ''; for (var i = 0; i < 3; i++) { var p = document.createElement('div'); p.className = 'apx-phone'; p.innerHTML = '
'; wrap.appendChild(p); } } function renderPhones(r) { var wrap = $('phones'); wrap.innerHTML = ''; r.screens.forEach(function (sc) { var p = document.createElement('figure'); p.className = 'apx-phone'; var frame = document.createElement('div'); frame.className = 'apx-frame'; var ifr = document.createElement('iframe'); ifr.setAttribute('sandbox', ''); ifr.setAttribute('loading', 'lazy'); ifr.title = sc.title; ifr.srcdoc = screenDoc(sc.html); frame.appendChild(ifr); var cap = document.createElement('figcaption'); cap.className = 'apx-cap'; cap.textContent = sc.title; p.appendChild(frame); p.appendChild(cap); wrap.appendChild(p); }); $('appName').textContent = r.app_name || 'Your app'; $('appSummary').textContent = r.summary || ''; $('resultHead').classList.remove('hidden'); $('swipeHint').classList.remove('hidden'); $('nextStep').classList.remove('hidden'); var wa = 'Hi Apex, I designed screens for "' + (r.app_name || '') + '" with your free tool and would like to discuss building it.\nIdea: ' + state.idea; $('waCta').href = 'https://wa.me/' + WA_NUMBER + '?text=' + encodeURIComponent(wa); $('resultHead').scrollIntoView({ behavior: 'smooth', block: 'start' }); } $('generateBtn').addEventListener('click', function () { var idea = $('idea').value.trim(); if (idea.length < 15) { setMsg(ERRORS.short, true); $('idea').focus(); return; } state.idea = idea; var btn = $('generateBtn'); btn.disabled = true; var step = 0; $('generateLabel').textContent = 'Designing…'; setMsg(LOADING[0] + ' This can take up to a minute.', false); var timer = setInterval(function () { step = (step + 1) % LOADING.length; setMsg(LOADING[step] + ' This can take up to a minute.', false); }, 6000); showSkeletons(); var ctrl = new AbortController(); var kill = setTimeout(function () { ctrl.abort(); }, 110000); var body = new URLSearchParams({ idea: idea, style: state.style, color: state.color, lang: 'en', website: $('apxWebsite').value }); fetch(API + 'apex-app-mockup', { method: 'POST', body: body, signal: ctrl.signal }) .then(function (res) { return res.json(); }) .then(function (r) { if (!r.ok) throw { code: r.error || 'ai_error', remaining: r.remaining }; state.result = r; renderPhones(r); setMsg(r.remaining === 1 ? '1 design left for today.' : r.remaining > 1 ? (r.remaining + ' designs left for today.') : 'No free designs left for today.', false); }) .catch(function (e) { var code = (e && e.code) || 'network'; setMsg(ERRORS[code] || ERRORS.ai_error, true); if (!state.result) { $('phones').innerHTML = ''; var p = document.createElement('div'); p.className = 'apx-phone'; p.innerHTML = '
'; p.querySelector('.apx-frame > div').textContent = ERRORS[code] || ERRORS.ai_error; $('phones').appendChild(p); } else { renderPhones(state.result); } }) .finally(function () { clearInterval(timer); clearTimeout(kill); btn.disabled = false; $('generateLabel').textContent = 'Design my screens'; }); }); function buildFile(r) { var phones = r.screens.map(function (sc) { return '
' + escText(sc.title) + '
'; }).join(''); return '' + '' + escText(r.app_name) + ' - draft design' + '' + '

' + escText(r.app_name) + '

' + escText(r.summary) + '

' + phones + '
' + '

Draft design by the free Apex tool · getapex.tech · WhatsApp +20 105 078 0807

'; } function download(r) { var blob = new Blob([buildFile(r)], { type: 'text/html;charset=utf-8' }); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = (r.app_name || 'app').replace(/[\\/:*?"<>|]+/g, '').trim() + ' - Apex.html'; document.body.appendChild(a); a.click(); a.remove(); setTimeout(function () { URL.revokeObjectURL(a.href); }, 4000); } $('leadBtn').addEventListener('click', function () { var r = state.result; if (!r) return; var phone = $('leadPhone').value.trim(); var msg = $('leadMsg'); if (phone.replace(/\D/g, '').length < 7) { msg.className = 'text-sm text-rose-300 min-h-[1.25rem]'; msg.textContent = 'Enter a valid phone number with country code.'; $('leadPhone').focus(); return; } var btn = $('leadBtn'); btn.disabled = true; msg.className = 'text-sm text-white/60 min-h-[1.25rem]'; msg.textContent = 'Sending…'; var body = new URLSearchParams({ name: $('leadName').value.trim(), phone: phone, source: 'app-mockup', lang: 'en', page: location.pathname, project_types: 'Mobile app', details: 'Idea: ' + state.idea + '\nSuggested app name: ' + (r.app_name || ''), website: $('apxWebsite').value }); fetch(API + 'apex-lead', { method: 'POST', body: body }) .then(function (res) { return res.json(); }) .then(function (out) { if (!out.ok) throw new Error('invalid'); download(r); msg.className = 'text-sm text-emerald-300 min-h-[1.25rem]'; msg.textContent = "Done. Your file download started, and we'll reach out on WhatsApp soon."; }) .catch(function () { msg.className = 'text-sm text-rose-300 min-h-[1.25rem]'; msg.textContent = 'Could not send. Try again or message us on WhatsApp.'; }) .finally(function () { btn.disabled = false; }); }); })();