Wireframe Fluxo de Habilidade para Mobile

Produza um único quadro mostrando o fluxo do usuário de um aplicativo móvel como uma linha de molduras de telefone de baixa fidelidade. O ponto é o fluxo — como um usuário se move de tela em tela — não o polimento de uma única tela. Mantenha as telas como caixas cinzas limpas (não rabiscadas), mas mantenha os conectores e anotações soltos e informais.

Fluxo de Trabalho

1. Pule o DESIGN.md se ele exigir UI finalizada. Esta habilidade é deliberadamente de baixa fidelidade: caixas cinzas, retângulos de espaço reservado e barras substituem o conteúdo real. Honre os tokens de tipo apenas de forma solta (sans do sistema para o quadro, mono para rótulos e linhas de data).
2. Escolha as etapas do fluxo do briefing — geralmente 3–4 telas conectadas como Onboarding → Feed inicial → Detalhe do item → Confirmar. Nomeie cada etapa para que as setas do conector possam carregar um rótulo numerado e com o verbo primeiro ("① tocar em Iniciar", "② abrir item", "③ adicionar ao carrinho").
3. Organize o quadro, em ordem:
   • Cabeçalho do quadro — título sans em negrito com uma tag "WIREFRAME v0.1 · MOBILE" fixada (borda tracejada, leve rotação) e uma linha de data mono à direita (data / dispositivo / fidelidade).
   • Linha de telefones — 3–4 molduras de dispositivo arredondadas (~240–280px de largura) em uma linha horizontal, cada uma com um entalhe / barra de status. Dentro de cada moldura, coloque o conteúdo da caixa cinza para sua etapa: espaço reservado para imagem principal (retângulo + X), barras de título/preço, cartões de lista (miniatura X + 2 barras de texto), chips de categoria, uma barra de abas inferior, barras de CTA fixas, uma marca de verificação de confirmação — combine a função da tela.
   • Conectores — setas tracejadas entre telefones consecutivos, cada um carregando um pequeno rótulo de etapa mono descrevendo o toque que avança o fluxo.
   • Anotações — 1–2 pequenas notas adesivas / balões fixados perto de uma tela para sinalizar a intenção ("o principal deve vender o valor em 3s", "checkout = 1 tela").
4. Escreva um único documento HTML:
   • <!doctype html> até </html>, CSS inline, sem JS externo, sem imagens externas (apenas espaços reservados CSS/SVG).
   • Use Inter / system-ui para o quadro e IBM Plex Mono para rótulos via Google Fonts; uma fonte de marcador leve é permitida apenas para anotações.
   • Bordas de moldura de dispositivo escuras definidas, blocos de conteúdo cinza médio em telas brancas e uma única cor de destaque para setas e anotações para que o quadro seja lido claramente mesmo como uma pequena miniatura.
   • data-od-id no cabeçalho, cada tela de telefone, os conectores e as anotações.
5. Auto-verificação:
   • Os três telefones principais são visíveis em uma viewport de ~1280px; o fluxo é lido da esquerda para a direita.
   • As telas são caixas cinzas limpas (não rabiscadas); conectores e notas adesivas são as partes soltas e informais.
   • Sem regiões quase brancas sobre brancas — cada bloco tem um preenchimento ou borda cinza visível. Se uma tela renderizar em branco como uma miniatura, aumente o contraste.

Contrato de Saída

Emitir entre as tags <artifact>:

<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.