EVO

Avançado

Kit de IA para designers e devs

Baixar contexto de IA· JSONSystem prompt

Contexto legível por máquina para que modelos, agentes de código e ferramentas de design gerem interfaces fiéis à marca EVO — sem inventar cor, fonte ou espaçamento.

evo-design-system.ai.json

Todos os tokens (cores, rampas, semânticos, tipografia, espaço, motion, componentes, modos de expressão) num único objeto com regras e restrições explícitas.

Baixar arquivo

evo-design-system.llms.txt

Resumo em texto puro no padrão llms.txt: identidade, cor, tipografia, layout, iconografia e proibições. Ideal para colar em janelas de contexto curtas.

Baixar arquivo

evo-ai-system-prompt.md

System prompt pronto com as dez regras que o agente deve seguir ao gerar qualquer artefato EVO.

Baixar arquivo

evo-tokens.json

Fonte da verdade no formato Design Tokens Community Group — importável como variáveis no Figma.

Baixar arquivo

evo-icons-sprite.svg

Sprite dos 12 ícones conceituais para o agente referenciar via <use href="#evo-icon-...">.

Baixar arquivo

Como carregar em cada ferramenta

ChatGPT / Claude

  1. 1.Crie um Projeto (ChatGPT) ou Project Knowledge (Claude).
  2. 2.Anexe evo-design-system.ai.json e evo-design-system.llms.txt.
  3. 3.Cole o conteúdo de evo-ai-system-prompt.md nas instruções personalizadas.

Cursor / Copilot / Windsurf

  1. 1.Salve o system prompt como .cursor/rules/evo.md ou AGENTS.md na raiz do repo.
  2. 2.Versione evo-design-system.ai.json em design/ para o agente ler no contexto.
  3. 3.Importe evo-tokens.css no entrypoint de estilos do projeto.

Figma / ferramentas de design

  1. 1.Importe evo-tokens.json como Variables (plugin de Design Tokens).
  2. 2.Mapeie as coleções primitive → semantic → component.
  3. 3.Publique como biblioteca para as equipes de produto.

Snippets

Regra de projeto (AGENTS.md / .cursor/rules)
# Marca EVO
Fonte da verdade: design/evo-design-system.ai.json.
- Nunca escreva HEX no componente — use tokens semânticos.
- Figtree (UI) e JetBrains Mono (código). Nunca Inter ou Poppins.
- Tema claro e escuro obrigatórios (semantic.light / semantic.dark).
- Espaçamento múltiplo de 4px; raios e sombras de radius/elevation.
- Proporção cromática 60/25/10/5 (navy+neutros / cinzas / cyan / acento).
- Contraste AA mínimo, foco visível, alvos de 44px, alt em imagens.
Prompt de geração
Use o EVO Design System em anexo como única fonte de verdade.
Gere um <componente> em React + Tailwind v4 usando apenas tokens
semânticos. Entregue variação clara e escura, estados de foco e
hover, e ao final liste os tokens utilizados.
Carregar o contexto no código
import ds from "./design/evo-design-system.ai.json";

const systemPrompt = [
  "Você gera UI para a marca EVO.",
  "Tokens: " + JSON.stringify(ds.semantic.light),
  "Restrições: " + ds.constraints.join(" "),
].join("\n");
Usar um ícone do sprite
<svg width="24" height="24" aria-hidden="true">
  <use href="/evo-icons-sprite.svg#evo-icon-conexao" />
</svg>

Como validar o resultado

  • • Nenhum HEX literal no código gerado — só variáveis CSS.
  • • Tema escuro renderiza sem contraste quebrado.
  • • Tipografia resolve para Figtree e JetBrains Mono.
  • • Logo intocado: sem recolorir, distorcer ou aplicar efeitos.
  • • Cyan aparece como acento, não como fundo de grandes áreas.