mira-image-template

Skill: Template a partir de Imagem (Mira)

Objetivo

Transformar imagem(ns) de referência (prints de slides e/ou logomarca) em um template de deck reutilizável do Mira: reconhecer o design system e a disposição dos elementos, e produzir um template nomeado que o /mira-new passa a oferecer.

Pertence ao grupo Agentes visuais e dados (ao lado de /mira-visuals, /mira-chart, /mira-img-animator, /mira-image-prompt).

REGRA ZERO: fidelidade à referência

O template obedece à imagem, não a reinventa. Cores, fundo, contraste, tipografia, raio dos cantos, sombras e (havendo print) a disposição dos elementos saem da imagem. Logo manda na paleta; print manda no layout.

Regra de ouro (escopo de escrita)

Tudo o que esta skill cria vive dentro de mira-templates/: o tema em mira-templates/themes/<nome>.css e o esqueleto em mira-templates/decks/<nome>/index.html. Esta skill cria o template, não cria decks (isso é o /mira-new).

Fluxo de Execução

Passo 1: Receber e ler a(s) imagem(ns)

O usuário pode mandar:

• Print(s) de tela / slides: a disposição dos elementos importa: leia onde está o título, o subtítulo, as pílulas, o palco de conteúdo, a grade, as margens, a proporção 16:9.
• Logomarca / identidade de marca: foco na paleta e personalidade (cores, peso tipográfico, clima claro ou escuro).
• Os dois juntos: a logomarca dá a cor primária; o print dá o layout e o fundo.

Numa sequência de imagens, trate-as como o mesmo sistema: extraia o consistente (paleta recorrente, estilo de card, tipografia) e use o print mais representativo como base do layout.

Olhe a imagem de verdade (o harness é multimodal). Não peça para o usuário descrever o que já está na imagem.

Passo 2: Reconhecer o design system

Extraia, da(s) imagem(ns), os valores abaixo. Quando um valor não der para inferir, derive-o pelas fórmulas da tabela do Passo 4 (a partir da primária e do fundo), nunca chute fora do sistema.

• Cor primária / da marca (#RRGGBB): a cor de acento dominante (logo, botões, títulos em destaque).
• Fundo (#RRGGBB): cor de fundo do palco. Pela luminância do fundo, decida se o tema é escuro (fundo escuro, texto claro) ou claro.
• Texto: cor do texto principal (branco no escuro, quase-preto no claro).
• Estilo de card: translucidez (glassmorphism), espessura e cor da borda, raio dos cantos.
• Acento secundário: tom mais claro/vivo da primária, usado em realces.
• Tipografia (opcional): se a fonte for claramente diferente de Inter (serifada, condensada, geométrica), anote a família para o Passo 5.

Passo 3: Pedir o nome do template

Mostre ao usuário um resumo curto do que você reconheceu e peça um nome para o template:

Reconheci este design system:
  Primária: #XXXXXX | Fundo: #XXXXXX (tema <claro|escuro>) | Acento: #XXXXXX
  Cards: <vidro translúcido | sólido> | cantos <suaves|retos>
  Tipografia: <Inter | nome da fonte>
  Layout: <descrição curta da disposição vista no print>

Que nome dou a este template?

Gere um slug em kebab-case, minúsculo, sem acento (ex.: "Identidade Reversa" → identidade-reversa). Se já existir mira-templates/decks/<slug>/ ou mira-templates/themes/<slug>.css, avise e peça outro nome (ou confirme sobrescrever).

Passo 4: Gerar o tema (design system) — mira-templates/themes/<nome>.css

O tema é só o bloco :root com o contrato de variáveis do Mira (a estrutura visual mora no base.css e não muda). Preencha todas as variáveis:

Onde R, G, B são os componentes da primária e Tr, Tg, Tb os do texto principal. Esse esquema garante contraste em tema claro e escuro e mantém compatibilidade com o base.css e com o override de cor do /mira-new.

Escreva o arquivo com um cabeçalho de comentário curto:

/* MIRA THEME: <nome> (gerado por /mira-image-template a partir de imagem)
   Design system reconhecido: <1 linha descrevendo a referência>. */
:root {
    --mira-primary: #RRGGBB;
    /* ...todas as variáveis acima... */
}

Passo 5: Gerar o esqueleto do deck — mira-templates/decks/<nome>/index.html

Não escreva o esqueleto do zero. Clone um esqueleto existente como base estrutural (use mira-templates/decks/aula-capitulo/index.html por padrão, ou o que mais se parecer com o print) e adapte:

1. Embuta o design system entre os marcadores @MIRA:THEME: o conteúdo de mira-templates/themes/<nome>.css seguido de mira-templates/themes/base.css, entre /* @MIRA:THEME:START */ e /* @MIRA:THEME:END */. Assim o template abre sozinho (file://) e continua compatível com a injeção de tema do /mira-new.
2. Obedeça à disposição do print (quando houver): posição do título/subtítulo, presença e lugar das pílulas, grade do conteúdo, proporções e margens, mantendo o palco 16:9. Não invente seções ausentes na referência nem remova a espinha que o pipeline espera (cabeçalho, palco de conteúdo, rodapé).
3. Tipografia (se diferente de Inter): troque o <link> da Google Font no <head> pela fonte reconhecida e adicione, logo após o base.css dentro do bloco @MIRA:THEME, um override curto body { font-family: '<Fonte>', sans-serif; }. Se a fonte for Inter, não mexa.
4. Atualize o <title> para Mira — Template: <Nome>.

Mantenha os mesmos CDNs e a estrutura <head> do esqueleto base (Tailwind, AOS, Lucide, D3) para o template seguir compatível com o pipeline.

Passo 6: Confirmar e apontar para o /mira-new

Mostre o resumo do que foi salvo:

Template criado: <nome>
  Esqueleto: mira-templates/decks/<nome>/index.html
  Tema (design system): mira-templates/themes/<nome>.css

Já disponível no /mira-new, junto com os templates existentes.
O tema "<nome>" é o padrão natural deste template (a identidade que veio da imagem).

Depois ofereça o próximo passo (não execute sem confirmar):

"Pronto. Quer criar um deck agora com esse template? Posso acionar o /mira-new."

Regras Inegociáveis

• Escreva apenas dentro de mira-templates/ (themes/<nome>.css e decks/<nome>/index.html). Cria template, não deck.
• O tema define todas as variáveis --mira-* do contrato; o base.css é embutido sem alteração estrutural.
• Fidelidade à referência (REGRA ZERO): nada de identidade ou layout que contradiga a imagem.
• O <nome> do tema e do deck é o mesmo slug, para o /mira-new casar template e design system.
• Texto visível em português brasileiro com acentuação correta. Proibido travessão (—); use vírgula ou dois-pontos.
• Regra de idioma do projeto: ver agents/_shared/idioma.md.