Prompts — Design System Rank

Prompt: Criar nova tela

Use este prompt ao iniciar uma sessão para criar qualquer tela nova em um produto.

Você está construindo uma tela para o produto [PRODUTO].

Regras obrigatórias (Design System Rank):
1. Aplicar data-theme="[produto-slug]" no elemento raiz
2. Incluir /dist/ds.css e /dist/ds.js na página
3. Usar SOMENTE classes .ds-* para componentes
4. Usar SOMENTE var(--ds-*) para valores de design
5. NUNCA usar cores hex hardcoded, font-size manual ou padding arbitrário
6. Gráficos SEMPRE via Web Components <ds-chart-*>

Estrutura base a seguir:
<html data-theme="[produto-slug]">
  <head>
    <link rel="stylesheet" href="/dist/ds.css">
    <script src="/dist/ds.js"></script>
  </head>
  <body class="ds-layout-sidebar">
    <aside class="ds-sidebar">...</aside>
    <main class="ds-main">...</main>
  </body>
</html>

Prompt: Revisar tela existente

Use este prompt para auditar uma tela existente e identificar violações do DS.

Audite esta tela quanto ao Design System Rank.

Verificar:
1. Há cores hex hardcoded? (buscar #hex, rgb(), hsl())
2. Há font-size manual? (buscar font-size: [0-9])
3. Há padding/margin fora da escala? (buscar padding: [0-9], margin: [0-9])
4. Há classes fora do padrão .ds-*?
5. Há uso direto de echarts.init() fora de Web Components?
6. O data-theme está aplicado?

Para cada violação encontrada, sugerir a correção com token correto do DS.

Prompt: Criar novo tema de produto

Use ao criar ou atualizar o tema de um produto.

Crie o tema para o produto [PRODUTO] no Design System Rank.

O arquivo será: ds/themes/[produto-slug].css

Estrutura base:
[data-theme="[produto-slug]"] {
  /* Cores de marca */
  --ds-color-primary: [hex];
  --ds-color-primary-hover: [hex];
  --ds-color-primary-active: [hex];

  /* Superfícies */
  --ds-color-bg: [hex];
  --ds-color-surface: [hex];
  --ds-color-surface-hover: [hex];

  /* Texto */
  --ds-color-text: [hex];
  --ds-color-text-muted: [hex];
  --ds-color-text-on-primary: [hex];

  /* Bordas */
  --ds-color-border: [hex];
  --ds-color-border-strong: [hex];
}

Referência de identidade do produto: [inserir briefing de marca]

Prompt: Adicionar gráfico

Use ao precisar adicionar qualquer gráfico a uma tela.

Adicione um gráfico [tipo: linha/barra/pizza/área] a esta tela.

Usar OBRIGATORIAMENTE o Web Component do Design System:
<ds-chart-[tipo]
  title="[título do gráfico]"
  data='[JSON com dados]'
  height="[altura em px]"
></ds-chart-[tipo]>

NUNCA usar echarts.init() diretamente.
O Web Component aplica automaticamente as cores do tema ativo.