Habilidade de Web de Namoro

Produza um painel de consumidor de tela única que pareça uma coluna de namoro de jornal de domingo renderizada como software. Tipo editorial, um único toque de destaque, muito espaço negativo, sem deck de deslizar ou tropos de "pegação".

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Use um token de exibição serifado para os numerais métricos — essas telas vivem ou morrem pelos numerais.
2. Escolha uma voz de marca — irônica, observacional, ligeiramente literária. Gere cópia real e específica. Exemplos: "as pessoas que responderiam em um dia", "gerenciável. dois agora são amigos.", "seu único maior trunfo de compatibilidade."
3. Layout, em ordem:
   • Ticker superior — faixa horizontal de linha única na parte superior em um estilo de sobrancelha sans-serif: slogan à esquerda, "PRÓXIMO NÍVEL EM 2.080 MUTUAIS" à direita, ambos em mono maiúsculas com espaçamento entre letras. Linha fina abaixo.
   • Barra lateral esquerda — barra lateral de 220–260px. Marca da marca em itálico serifado no topo. Cartão do usuário (avatar / nome de usuário / proporção / nível). Três grupos de navegação: "HOJE" (exemplo, caixa de entrada, fila, notificações), "VOCÊ" (suas estatísticas, mútuos e comunidades, bloqueados, configurações), "ARQUIVO" (edições passadas, correspondências expiradas). O item ativo recebe texto de destaque + ponto de destaque.
   • Conteúdo principal:
     • Grade de KPIs — 3 colunas × 3 linhas (ou 9 células). Cada célula: rótulo mono em maiúsculas pequenas, um numeral serifado superdimensionado (use destaque ou verde suave para positivo, vermelho suave para cautela), nota de rodapé de uma linha em itálico. Detalhes plausíveis — "1.842 ↑ 41 esta semana · crescimento saudável.", "14% acima da mediana para sua coorte.", "4 / ex-parceiros em seu círculo · gerenciável. dois agora são amigos."
     • Painel de gráfico de barras — "mútuos — últimos 30 dias". Barras pretas altas e finas, últimos dois dias destacados em destaque. Legenda acima com "↑ TENDÊNCIA DE ALTA · +3 MÚTUOS PRÓXIMOS ESTE MÊS · DOIS VIA MESMO OFFSITE" em mono.
     • Painel de tendência — "taxa de correspondência — últimas 12 semanas". Uma linha de cópia do corpo abaixo ("SUBIDA CONSTANTE DE 8% → 14%. ATRIBUÍVEL A UMA ENTRADA NA COMUNIDADE…"). Regra de rodapé.
4. Escreva um único documento HTML:
   • <!doctype html> a </html>, CSS inline.
   • Fundo branco cremoso, corpo serifado, rótulos mono em todos os lugares.
   • Use font-feature-settings: 'tnum' nos numerais métricos.
   • Gráfico de barras SVG com ~30 barras, alturas variadas.
   • data-od-id no ticker, barra lateral, grade de kpi, gráfico, tendência.
5. Auto-verificação:
   • Lê como contido, editorial, ligeiramente engraçado — não "tarado".
   • Um único token de destaque usado no máximo em 3-4 lugares (um KPI, duas barras de destaque, um estado ativo de navegação).
   • Sem deck de deslizar, sem corações, sem emoji de fogo.

Contrato de Saída

Emitir entre as tags <artifact>:

<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.