ckm:brand

Visão geral

O que é o ckm:brand

ckm:brand é uma skill focada em branding do repositório nextlevelbuilder/ui-ux-pro-max-skill. Ela ajuda você a definir, manter e aplicar uma marca consistente em conteúdos, UI e materiais de marketing.

Em vez de tratar a marca como um PDF estático, ckm:brand incentiva um sistema de marca vivo: diretrizes estruturadas, checklists e scripts que conectam decisões de marca a design tokens, CSS e assets reais.

Principais capacidades

Com ckm:brand ativado, você pode:

• Definir voz e tom de marca com frameworks reutilizáveis.
• Modelar a identidade visual: uso de logo, cores, tipografia e imagens.
• Criar e refinar frameworks de mensagem para campanhas e produtos.
• Rodar revisões de consistência de marca usando checklists detalhados.
• Melhorar o gerenciamento de assets com convenções de pastas e metadados.
• Sincronizar as diretrizes de marca com design tokens e CSS via scripts.
• Verificar uso de cores e acessibilidade em assets e interfaces.

Para quem o ckm:brand é indicado

Esta skill é indicada para:

• Times de marca e marketing que estão formalizando ou atualizando o brand book.
• Designers de produto e times de UI/UX que precisam de um handoff limpo da marca para o front-end.
• Estrategistas de conteúdo e redatores responsáveis por voz e mensagens da marca.
• Perfis de DesignOps / marketing ops que criam fluxos de trabalho de marca repetíveis.

Ela é especialmente útil quando o trabalho de marca envolve tanto conteúdo editorial quanto superfícies de produto digital, onde consistência e acessibilidade são críticas.

Quando o ckm:brand é (e não é) uma boa opção

Use ckm:brand quando você:

• Quer uma única fonte da verdade para diretrizes de marca (docs/brand-guidelines.md).
• Precisa de revisões repetíveis de materiais de marketing antes da aprovação.
• Está pronto para traduzir decisões de marca em tokens e variáveis CSS.
• Precisa de um framework estruturado de mensagem e voz para times de conteúdo.

Talvez não seja a melhor opção se você:

• Só precisa definir rapidamente um logo e uma paleta de cores, sem governança contínua.
• Não mantém sua marca em um repositório ou fluxo baseado em código.
• Está procurando uma ferramenta visual de design (Figma, Sketch) em vez de diretrizes e scripts.

Se sua marca já é versionada em Git, ou você quer caminhar nessa direção, ckm:brand oferece um ponto de partida opinativo e extensível.

Como usar

1. Instale a skill ckm:brand

Instale a skill no seu agente ou ambiente compatível com skills usando a URL do repositório GitHub e o slug da skill brand:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

Depois de instalada, os fluxos e referências do ckm:brand ficam disponíveis para o seu agente ou ferramenta. Use o estilo argument-hint para orientar as invocações:

[update|review|create] [args]

Por exemplo:

• brand update homepage-hero – atualizar diretrizes ou decisões para uma superfície específica.
• brand review campaign-email – revisar um asset ou fluxo quanto à consistência de marca.
• brand create launch-messaging – criar novas mensagens com base no framework.

Observação: Use exatamente o comando de instalação acima, mas adapte caminhos e detalhes de integração ao seu ambiente.

2. Entenda os arquivos centrais e a estrutura

Após a instalação, abra primeiro estes arquivos para entender como o ckm:brand está organizado:

• SKILL.md – Visão geral, quando usar, comandos de início rápido e workflow de sincronização de marca.
• references/ – Diretrizes detalhadas, checklists e frameworks de marca.
• scripts/ – Scripts em Node que conectam diretrizes a assets e design tokens.
• templates/ – Templates iniciais para você criar sua própria documentação de marca.

Principais arquivos de referência:

• references/brand-guideline-template.md – Estrutura completa de diretrizes de marca.
• references/visual-identity.md – Como expressar o lado visual da sua marca.
• references/logo-usage-rules.md – Quando e como usar cada variação de logo.
• references/color-palette-management.md – Hierarquia de paleta e padrões de documentação.
• references/typography-specifications.md – Escalas tipográficas, font stacks e usos.
• references/voice-framework.md – Traços de voz da marca, o que fazer e o que evitar.
• references/messaging-framework.md – Missão, visão, proposta de valor e arquitetura de mensagens.
• references/asset-organization.md – Estrutura sugerida de pastas e metadados para assets.
• references/approval-checklist.md – Checklist de aprovação de assets de ponta a ponta.
• references/consistency-checklist.md – Auditoria de consistência entre canais.

3. Injete contexto de marca em prompts e fluxos de trabalho

Para garantir que o contexto de marca esteja sempre disponível para seu agente ou ferramentas, use o script fornecido para injetar as diretrizes de marca em prompts:

node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json

Usos típicos:

• Preceder prompts de geração de conteúdo com as diretrizes de marca.
• Exportar uma representação JSON das regras-chave de marca para outras ferramentas.
• Manter redatores e designers alinhados sem precisar colar diretrizes extensas manualmente.

Se o seu ambiente permitir, conecte inject-brand-context.cjs ao pipeline de construção de prompts para que toda tarefa relacionada à marca inclua automaticamente as regras mais recentes.

4. Valide assets de marketing para marca e acessibilidade

Use o script de validação para conferir assets específicos em relação ao seu sistema de marca:

node scripts/validate-asset.cjs <asset-path>

Esse script foi projetado para funcionar com as estruturas e checklists documentados em references/approval-checklist.md, references/consistency-checklist.md e arquivos relacionados. Na prática, você pode:

• Rodar o script em uma nova peça de campanha antes do lançamento.
• Integrá-lo ao CI para bloquear assets fora da marca em pull requests.
• Usá-lo em design reviews como checklist estruturado.

Combine a saída do script com o checklist de aprovação para garantir:

• Uso correto de logo e cores.
• Respeito à tipografia e hierarquia de fontes da marca.
• Imagens alinhadas ao estilo da marca e com padrão mínimo de qualidade.
• Cobertura dos aspectos básicos de acessibilidade (contraste, alt text, visibilidade de foco).

5. Gerencie e documente seu sistema de cores

Cor é parte central da marca e da UI/UX. ckm:brand inclui diretrizes e um script auxiliar para manter a paleta consistente e bem documentada.

Use o script de cores para inspecionar ou comparar paletas:

node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>

Usos típicos:

• Extrair cores de assets existentes para checar se batem com a paleta oficial.
• Comparar uma nova paleta proposta com as diretrizes atuais.
• Montar e manter tabelas e variáveis CSS conforme documentado em references/color-palette-management.md.

A referência de gerenciamento de cores aborda:

• Hierarquia de cores primárias, secundárias, neutras e semânticas.
• Padrões de documentação em tabelas Markdown e variáveis CSS.
• Como representar cores em configs estilo Tailwind.
• Padrões de acessibilidade para contraste (WCAG 2.1).

6. Crie ou refine suas diretrizes de marca com templates

Inicie um documento estruturado de diretrizes de marca usando:

• references/brand-guideline-template.md
• templates/brand-guidelines-starter.md

Copie um deles para o seu repositório como docs/brand-guidelines.md ou nome similar, e depois personalize:

• Referência rápida (cores, fontes, traços de voz).
• Paleta de cores detalhada com notas de uso.
• Stacks tipográficos e escalas de tipo responsivas.
• Variações de logo, área de respiro e tamanhos mínimos.
• Princípios de voz, tom por contexto e exemplos de frases.
• Hierarquia de mensagens e mensagens por audiência.

Esses templates foram pensados para serem legíveis para designers e profissionais de marketing, mas ainda assim estruturados o suficiente para scripts (como sync-brand-to-tokens.cjs) processarem.

7. Sincronize diretrizes de marca com design tokens e CSS

Um dos pontos mais poderosos do ckm:brand é o Brand Sync Workflow descrito em SKILL.md. Ele conecta o que está escrito nas diretrizes à implementação no front-end.

Fluxo típico:

# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20

Arquivos envolvidos (como descrito na skill):

• docs/brand-guidelines.md → Fonte da verdade para decisões de marca.
• assets/design-tokens.json → Definições de design tokens geradas ou atualizadas.
• assets/design-tokens.css → Variáveis CSS expostas para o front-end.

Como usar isso na prática:

• Atualize cores, tipografia ou espaçamento em docs/brand-guidelines.md.
• Rode sync-brand-to-tokens.cjs para propagar essas mudanças.
• Importe assets/design-tokens.css no seu código de UI para que as atualizações de marca cheguem ao produto.

Isso mantém diretrizes de marca, design system e implementação alinhados, sem retrabalho manual.

8. Faça revisões e auditorias de marca usando checklists

Para times maiores ou campanhas complexas, use os checklists de referência como um processo de revisão repetível:

• references/approval-checklist.md – Passo a passo de aprovação de assets.
• references/consistency-checklist.md – Consistência de marca entre canais.

Você pode:

• Transformar esses docs em formulários ou checklists na sua ferramenta de gestão de projetos.
• Usá-los como critérios de aceite em tickets de novas páginas ou campanhas.
• Combinar com validate-asset.cjs para checagens semi-automatizadas.

Isso ajuda a garantir que padrões de marca, UI/UX e acessibilidade sejam aplicados de forma consistente em web, e-mail, social e peças impressas.

FAQ

O que o ckm:brand faz no dia a dia do meu time?

ckm:brand traz três ganhos práticos:

1. Diretrizes de marca codificadas – Templates e referências estruturadas para escrever regras claras de marca.
2. Workflows operacionais – Scripts e checklists que tornam o trabalho de marca repetível, não ad hoc.
3. Alinhamento com a implementação – Sincroniza diretrizes com design tokens e CSS, para que a UI reflita as decisões de marca.

Em vez de ser só um checklist genérico de branding, ele é orientado a como a marca é usada em fluxos modernos de UI/UX e marketing.

Como instalo o ckm:brand a partir do GitHub?

Use o instalador de skills com o repositório publicado e o slug da skill:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

Esse comando baixa a skill brand de .claude/skills/brand no repositório. Depois disso, consulte SKILL.md e a pasta references/ para integrar ao seu repositório e processos.

Posso personalizar as diretrizes de marca e ainda usar os scripts?

Sim. ckm:brand foi feito para ser adaptado. Você deve:

• Copiar os templates fornecidos para o seu diretório docs/ ou brand/.
• Editá-los com as cores, tipografia, mensagens e regras da sua marca.
• Manter a estrutura de forma geral semelhante para que scripts como sync-brand-to-tokens.cjs ainda consigam fazer o parse.

Se você alterar significativamente nomes de arquivos ou estruturas, talvez precise ajustar os scripts para refletir os novos locais ou formatos.

ckm:brand substitui nosso design system ou CMS?

Não. ckm:brand atua ao lado do seu design system e CMS:

• Ele define as regras e tokens de marca que o design system implementa.
• Ele documenta voz e mensagens que o conteúdo no CMS deve seguir.

Seu design system (por exemplo, biblioteca de componentes) e o CMS continuam sendo os mecanismos de entrega. ckm:brand mantém a lógica de marca por trás deles consistente e legível por máquina.

Como o ckm:brand ajuda com acessibilidade?

Acessibilidade está incorporada em diversas referências:

• references/approval-checklist.md inclui verificações visuais e de conteúdo voltadas à acessibilidade.
• references/color-palette-management.md documenta requisitos de contraste e uso de cores semânticas.

Use esses materiais em revisões de design e aprovação de assets para garantir que contraste de cor, visibilidade de foco, alt text e estrutura de conteúdo atendam a padrões como WCAG 2.1 AA.

ckm:brand ajuda pessoas não designers a manter a marca consistente?

Sim. Embora alguns assets sejam voltados a designers e engenheiros front-end, muitos documentos foram escritos para marketing, times de conteúdo e stakeholders em geral:

• Frameworks de voz e mensagem oferecem padrões prontos para uso.
• Checklists trazem critérios claros de sim/não, sem jargão de design.
• O contexto de marca injetado ajuda não designers a usar ferramentas de IA sem sair da marca.

Ao centralizar esses recursos, ckm:brand reduz a necessidade de orientação de marca caso a caso.

E se já tivermos um PDF de marca ou um style guide externo?

Você pode usar ckm:brand para operacionalizar o material existente:

• Traduzir seções-chave do seu PDF para docs/brand-guidelines.md usando os templates.
• Codificar regras de logo, paleta e tipografia nas referências estruturadas.
• Usar os scripts de sync e validação para levar essas regras a tokens e checagem de assets.

Você não precisa abandonar o documento atual de marca; trate o ckm:brand como a versão apoiada em repositório e pronta para automação desse material.

ckm:brand é só para produtos digitais ou serve para marketing em geral?

ckm:brand cobre ambos:

• Para UI/UX e front-end, oferece sincronização com design tokens, variáveis CSS, especificações de cores e tipografia.
• Para marketing e conteúdo, entrega frameworks de mensagem, checklists de aprovação e organização de assets.

Se sua marca está presente em web, produto e campanhas de marketing, ckm:brand ajuda a manter tudo alinhado em um único sistema.

Com que frequência devemos atualizar as diretrizes de marca usando ckm:brand?

O fluxo pressupõe que sua marca é um sistema vivo. Uma prática saudável é:

• Atualizar as diretrizes sempre que houver uma mudança relevante visual ou de mensagem.
• Rodar o Brand Sync Workflow logo após as alterações, para manter tokens e CSS em sincronia.
• Realizar auditorias de consistência periódicas usando os checklists nos principais canais.

Como tudo vive no repositório, as atualizações podem seguir o fluxo normal de versionamento e revisão de código.