About brandfy-identidade-visual
brandfy-identidade-visual is a skill for translating brand strategy into a visual identity. It develops distinct visual routes, tests them across applications and display modes, and documents the selected direction and its principles.
Key features
- 01Translate strategy into visual principles
- 02Develop distinct visual routes
- 03Set color systems and typography
- 04Prototype across brand applications
- 05Document the selected direction
Use cases
- 01Explore visual directions for a brand
- 02Test identity concepts in web and social formats
- 03Define colors and typography for design tokens
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/brandfy-identidade-visualin Claude Code to confirm it loaded.
Bundled filesagents/openai.yamlreferences/visual-system.md
Details
From the project READMEDefinir 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
preferencesna 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 emCHROMATIC.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.