frame-data-chart-nyt
Ajuda seu agente a criar gráficos informativos com animações. É útil para apresentar dados de forma clara e visualmente atraente em relatórios ou apresentações.
O que ela faz
Esta ferramenta cria gráficos de alta qualidade, parecidos com os do jornal The New York Times, a partir dos seus dados. Você pode escolher entre gráficos de linha, barra ou de intervalo, com animações sutis para destacar informações importantes.
Quando usar
- ✓Para apresentar dados de forma visualmente atraente em redes sociais.
- ✓Para criar um gráfico profissional para um vídeo ou apresentação.
- ✓Quando você precisa de um gráfico com um design editorial limpo e moderno.
Exemplo do que pedir para a IA
“Crie um gráfico de linha com os dados de vendas mensais do último ano, destacando o pico de dezembro.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Você fornece seus dados (como um texto, CSV ou JSON) e a ferramenta os transforma em um gráfico com o estilo visual do The New York Times. Ela cuida do design, cores e animações para você.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill frame-data-chart-nytOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/frame-data-chart-nyt/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
【Modelo: Quadro de Gráfico de Dados Estilo NYT】 【Intenção】Transformar um conjunto de dados (CSV / JSON / uma frase de conclusão) em um quadro/gráfico animado de quadro único com a sensação de uma coluna do "New York Times", adequado para clipes de vídeo ou cartões do Twitter. Inspirado em gráficos de dados hyperframes.
【Tela】1920×1080, fundo branco quente #f7f5ee ou fundo preto escuro #0e0e0e, escolha um; cor do texto oposta ao fundo.
【Layout】
- Kicker superior (11px maiúsculas, espaçamento entre letras 0.14em, cor = acento vermelho
#a91d1dou menta#5fb38a): Fonte dos dados + categoria, como "GLOBAL · USUÁRIOS ATIVOS SEMANAIS · 2018–2026". - Título em destaque (Cheltenham / Playfair / Source Serif Pro, 5.6vw, subtítulo em itálico opcional): Uma frase de conclusão. A conclusão deve ser extraída dos dados do usuário, não descrever o gráfico.
- Área do gráfico (ocupa 55-65% da tela):
- Linha: 1-2 linhas, linha principal tinta sólida 2.5px, linha secundária tracejada 1.5px; pontos de dados com círculos sólidos de 6px; rótulos ao lado de pontos-chave em fonte mono pequena
2024 · 412Mpreta. - Barra: Todas as barras em tinta monocromática ou com 1 barra em destaque de acento; números grandes no topo das barras; categorias na base das barras em itálico (Cheltenham itálico).
- Faixa de intervalo (range band): Preenchimento cinza claro
#e6e2d2envolvendo + linha central em tinta.
- Linha: 1-2 linhas, linha principal tinta sólida 2.5px, linha secundária tracejada 1.5px; pontos de dados com círculos sólidos de 6px; rótulos ao lado de pontos-chave em fonte mono pequena
- Fonte inferior + nota de rodapé (10px mono, opacidade 0.6): "Fonte: Dados do usuário · Gráfico por html-anything".
- Animação de revelação escalonada: Título fade-in (0s), kicker (200ms), linha stroke-dashoffset 1.2s ease-out (400ms), rótulos de dados em intervalos de 100ms. Pode ser
prefers-reduced-motiondesativado.
【Detalhes de Design】
- Nunca: Usar bibliotecas chart.js / d3 (a menos que importadas via CDN jsdelivr); recomenda-se escrever SVG manualmente, não excedendo 80 linhas inline.
- Fontes: Título
Source Serif ProouCheltenham(se não houver, usarPlayfair Display); corpoIBM Plex SansouInter; rótulos de dadosIBM Plex Mono. - 1 cor principal (tinta) + 1 acento (vermelho NYT
#a91d1d/ menta editorial#5fb38a/ laranja quente#d97757, escolha um). - Escalas do eixo Y apenas com linha fina + 3-4 ticks, rótulos em fonte mono fora do eixo.
- Proibido grid com linhas que cobrem a tela inteira, sombras, barras 3D; proibido emojis.
- Deve usar os dados fornecidos pelo usuário. Se a entrada for uma conclusão textual, estime automaticamente coordenadas razoáveis (mas marque como "esquemático"); se for CSV/JSON, desenhe diretamente.
- HTML de arquivo único; formato de comentário ao lado dos pontos de dados:
<text class="annot">2024 · 412M</text>.
Perguntas frequentes
Que tipos de gráficos posso criar?
Você pode criar gráficos de linha, de barra ou de intervalo (range band).
Posso usar minhas próprias cores?
A ferramenta usa uma paleta de cores inspirada no The New York Times, com uma cor principal e uma cor de destaque (vermelho ou verde menta). O foco é no design editorial.
O que acontece se eu fornecer apenas um texto de conclusão?
Se você fornecer apenas uma conclusão em texto, a ferramenta tentará estimar um gráfico razoável para ilustrá-la, mas indicará que é um esboço.
Detalhes
Descrição original do autor
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #541
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC