Habilidade de App Gamificado

Produza um protótipo mobile de múltiplas telas em uma única página de vitrine escura. Três molduras de telefone lado a lado, cada uma representando um momento diferente na jornada.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Para aplicativos gamificados, use tipografia em negrito para títulos e uma paleta de cores mais brilhante e ampla do que a maioria dos produtos — as missões parecem missões porque as cores também o fazem.
2. Escolha a marca + proposta de valor 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 — Meditação de foco de 10 min", "Assistir — The Bear · S3 E4").
3. Palco — página escura em tela cheia (quase preto #0e0d0c ou token escuro DS) com um gradiente suave de holofote no topo. Acima dos telefones, uma pequena linha de legenda: "PROTÓTIPO HI-FI · IPHONE" à esquerda, logotipo da marca à direita, ambos em mono.
4. Telefones — três molduras de telefone de 360×780 em uma linha horizontal (quebra para empilhar em viewports estreitas). Cada telefone:
   • Moldura preta de 12px, raio de canto de 44px, notch dynamic island.
   • 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 destaque.
5. Telefone 1 — pôster de capa (vendas/proposta de valor):
   • Barra de status.
   • Sobrancelha "PROTÓTIPO HI-FI · IPHONE".
   • Título grande em destaque ("Missões diárias para se tornar um ser humano melhor."), destaque em "tornar".
   • 1–2 frases de corpo em serif/sans suave.
   • Linha de dica mono ("Toque nas missões para abrir detalhes. Alterne [tema] na barra de ferramentas para mudar o tema e o layout.")
   • Teaser sutil de rolagem da 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ões. Cada bloco: canto arredondado, cor pastel em destaque, chip de glifo no canto superior esquerdo, título, mini-linha de 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, título grande em serif da missão ("Corpo — força"), corpo narrativo curto, carimbo "RECOMPENSA +90 XP".
   • Lista de verificação de etapas (3–4 microtarefas, uma concluída, duas pendentes).
   • Grande CTA principal "Iniciar missão" em pílula na parte inferior em destaque.
8. Escreva um único documento HTML:
   • <!doctype html> a </html>, CSS inline.
   • Tudo em CSS — sem imagens. Use linear-gradient e glifos SVG inline para chips de blocos e ícones de abas.
   • data-od-id no palco, cada telefone, regiões de cada moldura.
9. Auto-verificação:
   • Três molduras, cada uma com um propósito distinto. Não três cópias da mesma tela.
   • As cores dos blocos não se sobressaem — cada bloco de missão usa um pastel diferente contra a mesma superfície neutra.
   • Lê-se como gamificado e adulto — brincalhão, não infantil.

Contrato de Saída

Emitir entre as tags <artifact>:

<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.