dashboard
Ajuda seu agente a criar um painel de controle. Ele mostra informações importantes e gráficos em um formato fácil de entender.
O que ela faz
Cria uma página web única que funciona como um painel de controle. Ele mostra informações importantes, como métricas e gráficos, em um só lugar, com uma barra lateral para navegação.
Quando usar
- ✓Quando você precisa de um painel para ver dados importantes.
- ✓Para criar uma tela de administração ou controle.
- ✓Se o pedido mencionar 'dashboard', 'painel' ou 'relatório'.
Exemplo do que pedir para a IA
“Crie um dashboard de vendas com KPIs de receita e usuários, um gráfico de linha de vendas diárias e uma tabela de pedidos recentes.”
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
A IA organiza a página com uma barra lateral para menus, uma barra superior para título e busca, e a área principal exibe cartões com números importantes e gráficos.
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 dashboardOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/dashboard/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.
Dashboard Skill
Produza um painel administrativo / de análise de tela única.
Fluxo de Trabalho
- Leia o DESIGN.md ativo (injetado acima). Cores, tipografia, espaçamento, estilização de componentes vêm dele. Não invente novos tokens.
- Classifique o que o painel monitora (vendas, tráfego, uso, incidentes, operações, etc.) a partir do briefing. Gere nomes e valores de métricas específicos e plausíveis — sem placeholders "Métrica A / Métrica B".
- Disponha as regiões necessárias:
- Barra lateral esquerda (220–260px): marca da marca no topo, 6–8 links de navegação com ícones, o estado ativo usa o acento do DS.
- Barra superior: título da página à esquerda, campo de pesquisa + avatar / status do usuário à direita.
- Principal:
- Linha 1: 3–4 cartões de KPI (rótulo + número grande + delta vs. período anterior).
- Linha 2: um gráfico principal (largura total ou 2/3) — renderizado como um SVG inline gráfico de linha / barra / área desenhado a partir de números de aparência real.
- Linha 3: um gráfico ou tabela secundário (eventos recentes, itens principais, etc.).
- Escreva um único documento HTML autônomo:
<!doctype html>a</html>, CSS em um único bloco<style>inline.- CSS Grid para o layout geral; Flexbox dentro dos cartões.
- HTML Semântico:
<aside>,<header>,<main>,<section>. - Marque cada região lógica com
data-od-id="slug"para o modo de comentário.
- Gráficos: apenas SVG inline, sem bibliotecas de JS. Um gráfico de linha tem ~10 linhas de
<polyline>com um preenchimento de área sutil. Um gráfico de barras é N<rect>s com preenchimento de acento DS. Rotule os eixos levemente (texto atenuado, escala menor). - Auto-verificação:
- Cada cor vem dos tokens do DESIGN.md.
- Acento usado no máximo duas vezes (barra lateral ativa + um destaque de gráfico).
- Barra lateral + barra superior são fixas; o principal rola independentemente.
- A densidade corresponde ao humor do DS — DS mais arejados recebem mais preenchimento, DS densos (negociação, cripto) apertam as linhas.
Contrato de Saída
Emita entre as tags <artifact>:
<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>
Uma frase antes do artefato, nada depois.
Perguntas frequentes
O que são KPIs?
KPIs são 'Key Performance Indicators' ou Indicadores Chave de Performance. São números importantes que mostram o desempenho de algo, como vendas ou tráfego.
O que significa 'inline SVG'?
Significa que os gráficos são desenhados diretamente no código HTML, sem precisar de arquivos externos ou bibliotecas complicadas de programação.
Posso mudar as cores e o visual?
As cores e o estilo geral são definidos por um arquivo de design separado. A IA usa essas definições e não inventa novos estilos.
Detalhes
Descrição original do autor
Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #409
- 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