Habilidade de Painel de Namoro
Produza um painel de consumidor de tela única que pareça uma coluna de namoro de jornal de domingo transformada em software. Tipografia editorial, um único acento contido, muito espaço negativo, sem deck de swipe ou clichês de paquera.
Fluxo de Trabalho
- Leia o DESIGN.md ativo (injetado acima). Use uma fonte de exibição serifada para os numerais das métricas — estas telas vivem ou morrem pelos numerais.
- Escolha uma voz de marca — irônica, observacional, levemente literária. Gere texto real e específico. Exemplos: "as pessoas que responderiam em até um dia", "administrável. duas agora são amigas.", "seu maior ativo de compatibilidade individual."
- Layout, em ordem:
- Ticker superior — faixa horizontal de linha única no topo em estilo de sobrancelha sem serifa: tagline à esquerda, "PRÓXIMO NÍVEL EM 2.080 MÚTUOS" à direita, ambos em maiúsculas mono com espaçamento entre letras. Linha fina abaixo.
- Barra lateral esquerda — sidebar de 220–260px. Logotipo da marca em itálico serifado no topo. Cartão do usuário (avatar / handle / proporção / nível). Três grupos de navegação: "HOJE" (espécime, caixa de entrada, fila, notificações), "VOCÊ" (suas estatísticas, mútuos e comunidades, bloqueados, configurações), "ARQUIVO" (edições passadas, matches expirados). Item ativo recebe texto acentuado + ponto acentuado.
- Conteúdo principal:
- Grade de KPIs — 3 colunas × 3 linhas (ou 9 células). Cada célula: rótulo mono em caixa alta e baixa, um numeral serifado grande (use acento ou verde suave para positivo, vermelho suave para cautela), nota de rodapé em itálico de uma linha. Especificidades plausíveis — "1.842 ↑ 41 esta semana · crescimento saudável.", "14% acima da mediana para seu grupo.", "4 / ex-parceiros no seu círculo · administrável. duas agora são amigas."
- Painel de gráfico de barras — "mútuos — últimos 30 dias". Barras finas e pretas altas, últimos dois dias destacados em acento. Legenda acima com "↑ TENDÊNCIA DE CRESCIMENTO · +3 MÚTUOS PRÓXIMOS ESTE MÊS · DOIS VIA O MESMO OFFSITE" em mono.
- Painel de tendência — "taxa de matches — últimas 12 semanas". Uma linha de corpo de texto abaixo ("SUBIDA CONSTANTE DE 8% → 14%. ATRIBUÍVEL A UMA COMUNIDADE INGRESSADA…"). Linha de rodapé.
- Escreva um único documento HTML:
<!doctype html>até</html>, CSS inline.- Fundo creme claro, corpo serifado, rótulos mono em todo lugar.
- Use
font-feature-settings: 'tnum'nos numerais das métricas. - Gráfico de barras SVG com ~30 barras, alturas variadas.
data-od-idno ticker, sidebar, grade de KPIs, gráfico, tendência.
- Autoverificação:
- Parece contido, editorial, levemente engraçado — não sensual.
- Token de acento único usado em no máximo 3–4 lugares (um KPI, duas barras destacadas, um estado ativo de navegação).
- Sem deck de swipe, sem corações, sem emoji de fogo.
Contrato de Saída
Emita entre tags <artifact>:
<artifact identifier="dating-slug" type="text/html" title="Painel de Namoro — Título">
<!doctype html>
<html>...</html>
</artifact>
Uma frase antes do artifact, nada depois.