MÓDULO 4.4

📱 Galeria: 8 protótipos mobile

Clicáveis hi-fi em ios_frame/android_frame: onboarding, checkout, dashboard, empty states, social, food delivery, banking, settings.

📸 Protótipos mobile reais com ios_frame + Tweaks

Dois exemplos de apps de meditação iOS gerados com ios_frame.jsx + Tweaks customizados controlando paleta, tipografia e densidade.

App de meditação Jared com Tweaks complexo
Meditation app "Jared": ios_frame com bom dia + cards "Forest Rain". Painel Tweaks com 6 swatches de tema (Stone, Moss, Mist, Clay, Dusk, Sakura, Ink), Typography sliders, Sections toggles, Layout density. Fonte: adweek.com
App de meditação com player + Knobs button
Player de áudio: "12:38, 17:22 remaining". Toolbar com modo "Knobs" visível (controles avançados além de Tweaks). Fonte: agence-scroll.com

📌 Note: ambos protótipos usam ios_frame.jsx (notch + status bar + home indicator visíveis). Realismo +80% percebido pelo stakeholder vs mockup sem moldura.

🚪 ONBOARDING · 6 TELAS

App genérico iOS

Splash, 3 carousel telas, permission, welcome. Transições CSS suaves entre telas, botão "skip" visível.

ios_frame · CSS transitions · Skip button · Progress dots

💳 CHECKOUT COMPLETO

Apple Pay-first

Cart summary, shipping, payment (Apple Pay destaque + card), review, success com animação.

Apple Pay hero · Review · Success animation

📊 DASHBOARD FINTECH

Dense mobile data

Balance card hero, quick actions horizontais, transactions list, spending chart inline, insights AI.

Balance · Quick actions · Chart inline · AI insights

🫙 EMPTY STATES · 3 VARIANTES

First-use, list-empty, error

Cada com ilustração custom SVG + CTA claro. Evita "sem resultados" genérico.

SVG ilustração · CTA claro · Tom acolhedor

📱 FLOW SOCIAL

Feed + Post + Profile

Feed infinito, botão like com animação, compose post, profile com stats. Micro-interações subtle.

Feed · Compose · Profile · Micro-interações

🍔 FOOD DELIVERY

iFood-style completo

Home (restaurantes), busca, cardápio, carrinho, tracking do entregador em mapa.

Restaurantes · Cardápio · Tracking + mapa · Apple Pay

🏦 BANKING TRADICIONAL

App bancário formal

Login biométrico, saldo, pagamento de boleto, transferência Pix, extrato com filtro.

Biometria · Boleto · Pix · Extrato

⚙️ SETTINGS COM TABS

Profile · Privacy · Notifications

Tabs profundas (2 níveis), toggles animados, confirmações modais, busca em settings.

Tabs profundas · Toggles · Modal confirmação · Busca

✅ Resumo

✓
8 protótipos cobrem 90% de mobile — onboarding, checkout, dashboard, empty, social, delivery, banking, settings.
✓
ios_frame/android_frame é regra — realismo +80% vs sem bezel.
✓
Micro-interações importam — transições, toggles, confirmações fazem protótipo parecer "real".
← Módulo 4.3Módulo 4.5 →