📱 App Mobile Multi-tela

O que é

Três skills, três cenários:

Por que aprender

Skills certas têm anti-patterns próprios. onboarding proíbe muitos campos no signup; gamified exige tipografia em destaque para números; mobile-app assume tab bar inferior. Trocar = quebrar premissa.

Conceitos-chave

• mobile-app: default para protótipo "qualquer app"
• mobile-onboarding: first-time experience
• gamified-app: Duolingo-style, fitness, learning
• Mistura?: use mobile-app + adicione 1 tela onboarding

O que é

Em apps/web/public/frames/ moram 5 wrappers HTML pixel-accurate, prontos pra envolver seu protótipo:

• iphone-15-pro.html — Dynamic Island, status bar, home indicator
• android-pixel.html — Pixel 8, status bar Material You
• ipad-pro.html — landscape/portrait toggle
• macbook.html — barra macOS no top
• browser-chrome.html — Chrome address bar + tabs

Seu protótipo entra como <iframe srcdoc> dentro do frame. Você foca no app; o frame está pronto.

Por que aprender

Frames bons são chatos de fazer (status bar SVG, Dynamic Island com clip-path correto, safe-areas). O OD nunca deixa o agente desenhar isso do zero — sempre carrega frame existente. Reuso massivo, output consistente.

Conceitos-chave

• Pixel-accurate: dimensões reais, não aproximação
• Iframe wrapper: protótipo entra via srcdoc
• Frame style: 100% CSS+SVG, sem imagens raster
• Light/dark variants: frames respondem a theme

O que é

Estrutura padrão para multi-tela:

app-meditacao/
├── index.html              # gallery: thumbnails de todas as telas
└── screens/
    ├── splash.html
    ├── onboarding-1.html
    ├── onboarding-2.html
    ├── home.html
    └── player.html

Cada tela vira ?screen=home via query param; o gallery embed via iframe.

Por que aprender

Multi-tela como arquivos separados > multi-tela como tabs. Cada tela é isolada: deep-link, iframe, edição independente. Cliente pode abrir só "home" pra mostrar pra alguém. Designer pode editar uma sem regenerar todas.

Conceitos-chave

• screens/ folder: 1 HTML por tela
• index.html gallery: grid de iframes pequenos com label
• ?screen= deep-link: URL parameter abre tela direto
• Iframe in frame: screen.html dentro de iphone-15-pro.html

O que é

Os 3 elementos visuais que separam "mockup amador" de "protótipo apresentável":

• Status bar: hora, signal SVG, wifi SVG, bateria SVG (não emoji 🔋)
• Dynamic Island: pill no topo com clip-path correto (iPhone 14 Pro+)
• Home indicator: linha branca/preta na base, 134×5px

Tudo vem dos frames; agente nunca redesenha.

Por que aprender

Esses elementos pareceriam "detalhes minúsculos" — mas designers experientes os usam pra avaliar protótipo em 2 segundos. Errado = "feito com IA"; certo = "alguém pensou nisso".

Conceitos-chave

• SVG inline: ícones de status como path SVG
• clip-path Dynamic Island: pill com 32px raio
• Home indicator: 134×5px com border-radius full
• Position fixed: sempre no top/bottom da viewport do frame

O que é

Apple HIG diz: todo elemento clicável tem ≥ 44×44pt. Material Design diz: ≥ 48×48dp. O OD usa o mais conservador (44pt = ~44px). Safe-area insets respeitam Dynamic Island (top), home indicator (bottom) e curvas das bordas.

Por que aprender

Esses são P0 mecânicos: o checklist verifica via grep. Botões < 44px = warning automático. Sem padding-top: env(safe-area-inset-top) = warning. Acessibilidade não é "boa intenção"; é ASCII verificável.

Conceitos-chave

• 44pt min: Apple HIG hit target
• env(safe-area-inset-top/bottom): CSS API nativa
• P0 verification: grep mecânico no template
• Padding 16px lateral: contexto de safe-area-inset-left/right

O que é

Recriar um iPhone 15 Pro frame em CSS leva ~80 linhas de código + 6 SVGs + clip-path + safe-areas. Sempre dá erro: clip-path mal calculado, status bar fora de lugar, home indicator com largura errada. A regra do OD: agente NUNCA redesenha frame; SEMPRE carrega de frames/.

Por que aprender

É um caso onde "deixa o agente fazer" sai pior que "obriga reuso". Frame existe pra evitar erro recorrente. Não é falta de criatividade; é escolha de onde aplicá-la.

Conceitos-chave

• Reuso forçado: P0 do checklist
• Frame está versionado: Apple atualiza; equipe atualiza repo
• Customização: via CSS variables no frame, não redesign
• Frames customizados: aceitos em ./frames/local/

O que é

Multi-tela merece micro-animações que sugerem transição: slide horizontal (next/prev), fade + scale (modal), spring (sheet bottom), parallax (header). Tudo CSS keyframes; Framer Motion-style sem importar a lib.

@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.screen { animation: slide-in 280ms cubic-bezier(0.32, 0.72, 0, 1); }

Por que aprender

Protótipo estático vs protótipo animado é diferença de "ideia" vs "experiência". Stakeholder olha animado, sente o produto. Estático vira "vou imaginar". Animação básica é low-effort, high-signal.

Conceitos-chave

• 280ms cubic-bezier: default sentir natural
• Slide horizontal: page transition padrão iOS
• Spring (Apple): aproximação CSS com easing nonlinear
• prefers-reduced-motion: respeitar acessibilidade