splatstudio - Aplicativo Gamificado Multi-tela

Skill de Aplicativo Gamificado

Produza um protótipo mobile multi-tela em uma única página de showcase escura. Três quadros de telefone lado a lado, cada um representando um momento diferente da jornada.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Para aplicativos gamificados, use tipografia ousada para títulos e uma paleta mais clara e ampla do que a maioria dos produtos — as missões parecem missões por causa das cores.
2. Escolha a marca + proposta de valor a partir do briefing. Gere nomes de missões reais (ex.: "Corpo — 20 min de força: flexões e pranchas", "Ler — Quatro Mil Semanas", "Ouvir — Huberman Lab · Arquitetura do Sono", "Nutrir — Cozinhar um almoço rico em proteínas", "Mente — 10 min de meditação focada", "Assistir — The Bear · T3 E4").
3. Cenário — página escura de sangria total (quase preto #0e0d0c ou token escuro DS) com um suave gradiente de spotlight no topo. Acima dos telefones, uma pequena linha de legenda: "PROTÓTIPO HI-FI · IPHONE" à esquerda, marca registrada à direita, ambas em mono.
4. Telefones — três quadros de telefone 360×780 em uma linha horizontal (empilha em viewports estreitas). Cada telefone:
   • Moldura preta de 12px, bordas arredondadas de 44px, notch ilha dinâmica.
   • Barra de status (hora / sinal / bateria).
   • Conteúdo específico do telefone (abaixo).
   • Barra de abas inferior com 5 ícones (Hoje, Biblioteca, Estatísticas, ⊕ CTA central, Perfil). Aba ativa em cor de destaque.
5. Telefone 1 — cartaz de capa (vendas / proposta de valor):
   • Barra de status.
   • Sobrancelha "PROTÓTIPO HI-FI · IPHONE".
   • Grande título display ("Missões diárias para se tornar um humano melhor."), destaque em "tornar".
   • 1–2 frases de corpo em serifa/sans suave.
   • Linha de dica mono ("Toque nas missões para abrir detalhes. Alterne [tema] na barra de ferramentas para trocar tema e layout.")
   • Sugestão sutil de rolagem para a próxima tela na borda inferior.
6. Telefone 2 — painel de missões de hoje (a tela principal):
   • Saudação "Bom dia, Sam" + pequeno sino de XP tocando.
   • Faixa de nível — "LV 14 · Nível 14 · 1648 / 2480 XP" com uma barra de progresso dentro de uma faixa glassmórfica.
   • Sublinha: "8 missões esperando · ganhe 430 XP hoje".
   • Grade 3×2 de blocos de missão. Cada bloco: borda arredondada, cor pastel de destaque, chip de glifo no canto superior esquerdo, título, linha mini-meta, pílula "+NN XP" no canto inferior direito.
   • Barra de abas inferior.
7. Telefone 3 — detalhe da missão:
   • Seta de voltar + título da tela ("Missão").
   • Bloco principal com a cor de destaque da missão, grande título serifado da missão ("Corpo — força"), corpo narrativo curto, carimbo "RECOMPENSA +90 XP".
   • Lista de etapas (3–4 microtarefas, uma concluída, duas pendentes).
   • Grande CTA primário "Iniciar missão" na parte inferior com cor de destaque.
8. Escreva um único documento HTML:
   • <!doctype html> até </html>, CSS inline.
   • Tudo em CSS — sem imagens. Use linear-gradient e glifos SVG inline para chips e ícones de abas.
   • data-od-id no cenário, em cada telefone, nas regiões de cada quadro.
9. Autoverificação:
   • Três quadros, cada um com um propósito distinto. Não três cópias da mesma tela.
   • As cores dos blocos não dominam — cada bloco de missão usa um pastel diferente contra a mesma superfície neutra.
   • Parece gamificado e adulto — lúdico, não infantil.

Contrato de saída

Emita entre tags <artifact>:

<artifact identifier="slug-do-jogo" type="text/html" title="Mobile — Nome do Aplicativo">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.