Habilidade de Painel de Mídia Social

Produza um painel de análise de mídia social de tela única, voltado para criadores.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Cores, tipografia, espaçamento, raios e estilo de componentes vêm dele. Não invente novos tokens; não codifique em cores as cores de marca das plataformas — deixe o DESIGN.md carregar a identidade visual e refira-se às plataformas apenas pelo nome e monograma.
2. Identifique quais plataformas o briefing menciona. Use X / LinkedIn / YouTube / Instagram como padrão se não especificado. Mantenha o seletor de plataforma em uma única linha, com no máximo 5 entradas.
3. Gere dados plausíveis, nunca placeholders Metric A / Metric B. Escolha uma persona de criador (padrão: "criador independente de IA / design") e derive números consistentes em toda a página — por exemplo, contagens de seguidores no seletor devem corresponder à linha de KPI quando X for selecionado.
4. Organize a página de cima para baixo:
   • Barra de cabeçalho: marca da marca + rótulo da seção ("ANALYTICS"), um alternador escuro/claro, abas de intervalo de tempo (7D · 30D · 90D · YTD) e um bloco de avatar do criador à direita.
   • Faixa principal: um resumo de uma frase em tipo de exibição ("Você publicou 14 posts no X esta semana."), uma linha de suporte de metadados e duas CTAs ("Exportar relatório", "Novo post →").
   • Barra de perguntas: um campo de entrada de linha única estilizado como um campo de pesquisa, com sugestões de texto fantasma ("mais bem avaliados na semana passada", "comentários de contas verificadas").
   • Seletor de plataforma: 4 cartões em uma linha, cada um com o monograma da plataforma, nome, contagem de seguidores e um delta +X.XK this week. A plataforma ativa usa uma superfície elevada do DESIGN.md.
   • Linha de KPI: 4 cartões — Seguidores · Taxa de Engajamento · Curtidas (7D) · Repostagens (7D). Cada cartão tem um rótulo (maiúsculo, label-md), um valor grande (display ou headline-lg), um delta em relação ao período anterior e uma pequena nota de rodapé ("vs. 4,4% na semana passada", "9–17 de agosto · 14 posts").
   • Grade principal (2/3 + 1/3):
     • Esquerda: Crescimento de Seguidores · 30D — um gráfico de linha SVG inline de largura total com um preenchimento suave por baixo, marcas de eixo no início / ponto médio / fim e dois pontos de anotação rotulados ("Lançamento da newsletter +842", "Fio viral +1,2K").
     • Direita: Postagem Principal · Esta Semana — um cartão mostrando a postagem renderizada (avatar, nome de usuário, corpo da postagem, bloco de mídia opcional 16:9), com uma tag de cabeçalho "taxa de cliques 5,6%" no acento do DS.
   • Grade inferior (1/2 + 1/2):
     • Tópicos em alta nesta plataforma: 5–7 linhas em estilo de chip com nome do tópico + contagem de posts + sparkline de delta de 24h (10 pontos de polilinha, sem rótulos).
     • Melhores comentários: 3 cartões, cada um com avatar, nome de usuário (verificação verificada, se relevante), corpo do comentário (máximo 2 linhas, com elipse) e uma pequena linha ❤ 312 · 💬 18 em texto atenuado.
5. Escreva um único documento HTML autônomo:
   • <!doctype html> a </html>, CSS em um único bloco <style> inline.
   • CSS Grid para layout de nível de página; Flexbox dentro dos cartões.
   • HTML Semântico: <header>, <main>, <section>, <article>.
   • Marque cada região lógica com data-od-id="slug" para o modo de comentário: header, hero, ask, platform-switcher, kpis, follower-growth, top-post, trending, top-comments.
6. Gráficos: apenas SVG inline, sem bibliotecas JS.
   • Gráfico de linha: <path> para a curva, um segundo <path> com preenchimento de baixa opacidade para a área, dois pontos de anotação <circle> com rótulos de texto.
   • Sparklines: <polyline> com 10 pontos, sem eixos, ~16px de altura.
   • Use o acento do DS para destaques e o on-surface-variant do DS para texto atenuado. O acento aparece no máximo três vezes na página.
7. Auto-verificação:
   • Cada cor é resolvida em um token do DESIGN.md (ou um rgba(token, alpha) documentado para superfícies de vidro).
   • Os números são internamente consistentes (a contagem de seguidores do seletor corresponde ao KPI da plataforma ativa).
   • A barra de cabeçalho e a faixa principal são fixas; o conteúdo principal rola.
   • A densidade segue o humor do DS: DSes de vidro / cósmicos recebem mais espaço e brilho ambiente na plataforma ativa; DSes limpos / corporativos apertam os espaços e removem o brilho.

Contrato de Saída

Emitir entre as tags <artifact>:

<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.