promovaweb/brandfy

brandfy-identidade-visual

Define o sistema visual da marca além do logo.

Quelltext ansehen

Verwendung

  1. Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
  2. Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
  3. Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/promovaweb/brandfy --skill brandfy-identidade-visual

Vor dem Start

  • Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
  • Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

Definir a identidade visual

Protocolo operacional

  • Plano e progresso: planejar referências, rotas visuais, protótipos e

seleção.

  • Fontes de verdade: ler estratégia, voz, BRAND.md, CHROMATIC.md,

.brandfy/mvp-context.json, .brandfy/asset-brief.md, .brandfy/interview-summary.md, ativos atuais e visual-system.md.

  • Escopo e idempotência: manter referências com origem e não substituir

ativos aprovados durante a exploração.

  • Validação: testar cada rota em aplicações reais, nos modos light e dark e

em tela pequena.

  • Resumo final: registrar a direção escolhida, o motivo, os ativos e as

pendências.

Fluxo

  1. Traduzir atributos estratégicos em forma, composição, densidade, contraste

e materialidade.

  1. Criar duas ou três rotas visuais distintas, sem imitar concorrentes.
  2. Definir a cor-base a partir de pesquisa ou preferência declarada, nunca por

gosto do agente: usar cor de referência pesquisada na categoria, cultura ou concorrência, ou a cor preferida registrada em preferences na entrevista (.brandfy/interview.json, ver $brandfy-entrevista). Quando nenhuma das duas existir, perguntar ao responsável pela marca antes de prosseguir.

  1. Ajustar essa cor-base tecnicamente pelo círculo cromático: escolher um

esquema de harmonia com $brandfy-design-tokens (references/circulo-cromatico.md) e registrar origem, esquema e escolha em CHROMATIC.md.

  1. Definir paleta funcional com combinações de fundo, texto, acento, estado e

superfície, a partir das famílias derivadas do círculo cromático.

  1. Definir tipografia, escala, espaçamento, fotografia, tratamento de imagem,

ilustração, iconografia, grafismos, grid e motion.

  1. Prototipar as rotas em página web, avatar, peça social e documento.
  2. Selecionar uma rota e registrar os princípios em

.brandfy/visual-direction.md.

  1. Encaminhar cores e tipografia para $brandfy-design-tokens e

$brandfy-tipografia-web.

O sistema visual precisa continuar reconhecível sem o logo. Não depender somente da cor para comunicar estado ou hierarquia.

Raciocínio do especialista

Traduzir cada atributo estratégico em princípios visuais observáveis, como contraste, ritmo, proporção, densidade, materialidade e comportamento de imagem. Uma rota visual precisa explicar ideia, sinais, vantagens, limitações e condições de uso. Comparar rotas nas mesmas aplicações e com acabamento equivalente para reduzir viés de apresentação.

aus demselben Repository

Weitere Skills

Alle Skills