promovaweb/brandfy

brandfy-identidade-visual

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

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/promovaweb/brandfy --skill brandfy-identidade-visual

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

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.

同じリポジトリから

関連する Skills

すべての Skills