Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/promovaweb/brandfy --skill brandfy-identidade-visualAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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
- Traduzir atributos estratégicos em forma, composição, densidade, contraste
e materialidade.
- Criar duas ou três rotas visuais distintas, sem imitar concorrentes.
- 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.
- 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.
- 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.
- Definir tipografia, escala, espaçamento, fotografia, tratamento de imagem,
ilustração, iconografia, grafismos, grid e motion.
- Prototipar as rotas em página web, avatar, peça social e documento.
- Selecionar uma rota e registrar os princípios em
.brandfy/visual-direction.md.
- Encaminhar cores e tipografia para
$brandfy-design-tokense
$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.
