Communitygithub.com

thecatthatflies/identidade-de-marca

Crie uma identidade de marca completa como arquivos reais e utilizáveis - estratégia e vibe, um sistema de cores verificado (rampas OKLCH, temas claro e escuro, papéis verificados por WCAG), tipografia, um logotipo profissional em SVG (desde um wordmark limpo ou marca geométrica até um símbolo complexo e significativo), favicons, assets para aplicativos e redes sociais, design tokens e uma página de diretrizes de marca.

O que é identidade-de-marca?

Esta skill é uma ferramenta completa para criar uma identidade de marca do zero, produzindo artefatos prontos para uso, como logotipos, paletas de cores, tipografia e diretrizes. Ao contrário de soluções genéricas, ela garante que cada decisão de design seja fundamentada em uma ideia central, em vez de decoração superficial. A skill automatiza a geração de sistemas de cores perceptualmente uniformes (OKLCH), verifica acessibilidade de contraste (WCAG 2.2) e cria logotipos vetoriais com técnicas de construção robustas, como buracos reais em vez de 'pinturas brancas'. Funciona em qualquer plataforma que suporte Node.js (como Claude Code, Cursor ou Codex) e gera arquivos reais: tokens de design JSON, páginas de diretrizes em HTML, favicons e assets para PWA. O fluxo de trabalho segue uma abordagem estruturada: briefing estratégico, exploração de direções, definição de tokens, geração de paleta, criação do logotipo com scripts especializados e verificação final. A skill é ideal para desenvolvedores e designers que precisam de uma identidade de marca profissional, verificada e pronta para implementação técnica, evitando armadilhas comuns como marcas genéricas, cortes pintados ou cores que falham em contraste.

Funciona com~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/thecatthatflies/interface/tree/HEAD/skills/brand-identity
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Identidade de Marca

Uma identidade de marca é um conjunto pequeno de decisões que se sustentam em todos os lugares: uma ideia, uma marca que a carrega, cores e tipografia que soam como ela e regras que a mantêm consistente. A falha comum é decoração sem ideia: uma mancha degradê, uma fonte sem serifa genérica, uma paleta escolhida pelo humor e um logotipo que morre no tamanho de favicon ou em uma cor. Esta skill produz as decisões como arquivos e as verifica em um renderizador real.

Aplique os princípios hierárquicos de interface-guidelines (todos podem usar > diz a verdade > significa o que diz > a resposta vem primeiro > erros são sobrevivíveis > permanece no lugar > o possível é visível > convenção > polimento) sempre que a identidade encontrar uma interface. Se essa skill estiver instalada, seu script de auditoria verifica a página de diretrizes que esta skill gera.

Briefing

Responda a estas perguntas antes de desenhar qualquer coisa. Se o usuário estiver ausente, declare as suposições em brand.json e continue.

  • O que é, para quem e contra quem? Categoria, público-alvo, dois ou três concorrentes. A identidade precisa ser distinguível desses, não de marcas em geral.
  • A única ideia. Uma única frase sobre o que a marca é que um símbolo pode carregar ("Um forno transforma argila macia em algo permanente"). Tire-a do próprio assunto, do material, do processo, do lugar ou da promessa, não de um estilo. Consulte references/strategy.md.
  • Personalidade: três traços, cada um com o que significa na prática e o que descarta. "Aconchegante: tons terrosos e palavras simples, nunca chamativo."
  • Onde deve funcionar: favicon e ícone de aplicativo, telas de celular, sinalização, impressão, bordado, avatares sociais, modo escuro, e-mail. O contexto mais difícil define o teto de complexidade.
  • Restrições: patrimônio existente a preservar (uma cor que os clientes conhecem, um nome), orçamento para fontes licenciadas, mercados culturais (significados de cores e símbolos variam).
  • Nível de complexidade para a marca (references/logo.md seção 2): apenas wordmark, marca geométrica simples ou marca simbólica em camadas. Escolha pelo contexto e pela ideia, não pela ambição. Marcas complexas precisam de uma versão simplificada para tamanhos pequenos.

Fluxo de Trabalho

1. Direções, depois uma decisão

Desenvolva três direções que diferem em ideia, não apenas em cor. Para cada uma: a ideia em uma frase, o método de conceito do logotipo (references/logo.md seção 3), um esboço de paleta (duas ou três sementes), uma combinação tipográfica e uma frase sobre como se sente. Escreva-as e mostre-as se o usuário estiver presente; escolha uma e diga por que se não estiver. Não misture direções; uma mistura geralmente perde a ideia que fazia cada uma funcionar.

2. Escreva brand.json

É a fonte da verdade que todo script lê. Forma mínima:

{
  "name": "Kiln", "tagline": "Small-batch ceramics, fired in Leeds.", "url": "https://kiln.example",
  "idea": "One sentence the mark carries.",
  "personality": [{ "trait": "Warm", "means": "Earth tones and plain words, never slick." }],
  "voice": { "is": ["Plain", "Specific"], "isnt": ["Twee", "Salesy"], "examples": [{ "say": "Fired at 1,260°C.", "not": "Lovingly handcrafted!" }] },
  "colors": { "primary": "#d9480f", "accent": "#0b7285", "neutral": { "chroma": 0.01 } },
  "type": { "display": { "family": "Fraunces", "weights": [400, 700] }, "text": { "family": "Inter", "weights": [400, 600] }, "scale": { "base": 16, "ratio": 1.25 } },
  "logo": { "primary": "logo/lockup.svg", "mark": "logo/mark.svg", "story": "Why the mark looks like this.", "minSizePx": 16 }
}

3. Cor

Escolha duas ou três sementes com significado (references/color.md), depois:

node <skill-dir>/scripts/palette.mjs brand.json

Isso constrói rampas OKLCH perceptuais, mantém cada semente exata no degrau mais próximo, tinge neutros em direção à marca, mantém cores de estado (sucesso, aviso, perigo, informação) separadas da marca para que perigo sempre se leia como perigo, mapeia papéis semânticos para claro e escuro e verifica cada par visível contra WCAG 2.2. Corrija falhas alterando sementes ou papéis, não ignorando-as. Abra tokens/palette.html e veja as demonstrações claro e escuro.

4. Tipografia

Escolha uma face de exibição e uma face de texto (muitas vezes uma família é suficiente), com uma razão ligada à ideia e ao contexto de leitura (references/typography.md). Verifique licença, cobertura de idiomas, pesos, figuras tabulares se números importam e como ela renderiza entre 14 e 16 px. Prefira famílias de licença aberta (SIL OFL) a menos que o usuário tenha uma licença.

5. Logotipo

Desenhe a marca como SVG manualmente: planeje a geometria em uma grade, escreva caminhos com intenção e faça recortes como buracos reais (fill-rule="evenodd" ou caminhos combinados), nunca formas brancas pintadas por cima. Converta o wordmark em contornos para que não dependa de fontes instaladas:

node <skill-dir>/scripts/logo.mjs outline --text "Kiln" --google "Fraunces:700" --tracking -0.01 --out logo/wordmark.svg
node <skill-dir>/scripts/logo.mjs check logo/*.svg
node <skill-dir>/scripts/logo.mjs sheet logo/lockup.svg --mark logo/mark.svg --colors tokens/tokens.json --out logo/sheet.png

Veja a folha. Em 16 e 24 px a marca ainda deve se ler como ela mesma; em preto de uma cor, invertida e sobre uma imagem movimentada, cada parte deve sobreviver. Se o detalhe desaparecer, simplifique ou desenhe uma marca separada para tamanhos pequenos. Itere: a maioria das boas marcas leva várias rodadas de redução. Construa o lockup (marca mais wordmark) com alinhamento óptico, não matemático, e defina espaço claro e tamanho mínimo. Detalhes e artesanato SVG: references/logo.md.

6. Ativos e sistema

node <skill-dir>/scripts/assets.mjs brand.json    # favicons, ICO, Apple touch, ícones PWA e maskable, cartão Open Graph, manifesto, tags head
node <skill-dir>/scripts/book.mjs brand.json      # página de diretrizes da marca + type.css

Depois adicione o que o briefing precisa além disso: avatares sociais, cabeçalho de e-mail, um padrão ou textura extraída da marca, um estilo de ícone, direção de ilustração ou fotografia (references/system.md). Cada ativo usa os tokens, não valores hexadecimais copiados.

7. Verifique e entregue

  • Execute a auditoria de interface-guidelines na página de diretrizes, se disponível: node <interface-guidelines>/scripts/audit.mjs brand-book.
  • Leia você mesmo a folha do logotipo, a página da paleta, o cartão Open Graph e os ícones. Corrija o que parecer errado.
  • Teste a identidade em contexto: coloque o logotipo e os tokens em uma tela real do produto (um cabeçalho e um botão no mínimo), claro e escuro.
  • Entregue: a ideia, o que cada arquivo é, o que você verificou, o que não verificou (pesquisa de marca registrada, revisão cultural nos mercados-alvo, provas de impressão) e quaisquer exceções de contraste aceitas com razões.

Armadilhas

  • Sem ideia, apenas estilo. Escolher "moderno, limpo, ousado" não é uma ideia. Se você não consegue dizer o que a marca significa em uma frase, ela ainda não significa nada.
  • Marcas genéricas: um raio, um swoosh, uma faísca, um hexágono, um orbe degradê, uma inicial em um círculo sem nada feito com ela. Use-as apenas se a ideia exigir e algo nelas for apropriável.
  • Recortes pintados. Formas brancas em uma marca colorida transformam-se em blocos sólidos em uma cor, em fotos e quando invertidas. logo.mjs check sinaliza isso.
  • Detalhe que morre pequeno. Traços finos e detalhes internos desaparecem em 16 px. A folha mostra isso; forneça uma marca de tamanho pequeno.
  • <text> em um SVG de logotipo. Ele renderiza em uma fonte substituta onde a fonte estiver faltando. Converta em contornos.
  • Cor da marca como perigo, ou perigo como marca. Uma marca vermelha ainda precisa de uma cor de perigo distinta e reconhecível, e seu texto de erro deve passar no contraste.
  • Significado de cor como fato. "Azul significa confiança" é uma associação fraca e ligada à cultura, não uma lei (references/color.md seção 1). Escolha pela distintividade na categoria e pela ideia.
  • Cópia. Não recrie ou imite de perto a marca, nome ou vestimenta comercial de uma marca existente. Observe que uma pesquisa real de marca registrada é etapa do usuário antes do lançamento.
  • Imitar uma organização real para um usuário que não é essa organização não é branding; recuse.

Referências

ArquivoLeia quando
references/strategy.mdEncontrar a ideia, personalidade, nomear a vibe, escrever direções
references/logo.mdQualquer trabalho de logotipo: tipos, níveis de complexidade, métodos de conceito, construção, artesanato SVG, lockups, teste
references/color.mdEscolher sementes, evidência de significado de cor, OKLCH, papéis, modo escuro, acessibilidade
references/typography.mdEscolher e combinar faces, licenciamento, escala, numerais, carregamento web
references/system.mdÍcones, padrões, imagens, movimento, voz, ativos, tokens, diretrizes

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

thecatthatflies/content-site-design

Design, build, write, and review sites people come to read - documentation, developer docs and API references, help centers and knowledge bases, blogs, editorial and news articles, guides, changelogs, and personal or company writing - so readers find the answer fast and agents can read, cite, and navigate them. Use when someone says "build a docs site", "set up our help center", "make my blog", "our docs are hard to navigate", "restructure the knowledge base", "nobody finds anything with search", "write this page so people understand it", "make our docs work for AI coding agents", or when choosing page structure, headings, navigation, search, typography for long reading, or llms.txt and Markdown versions of pages. Not for marketing or launch pages meant to convert (use landing-page-design), app screens (use web-app-design), or visual identity (use brand-identity).

thecatthatflies/form-design

Design, build, and review forms and multi-step flows that people finish without errors and agents can fill without guessing - sign-up and sign-in, checkout and payment details, address and contact forms, applications, onboarding questionnaires, wizards, settings forms, validation and error messages, passwords and passkeys. Use whenever someone builds or fixes a form ("add a sign-up form", "our checkout converts badly", "make these errors better", "why won't autofill work", "turn this into a wizard"), even if they only mention one field. Includes a rendered-page checker for labels, autocomplete, input types, paste, and error wiring. Not for the surrounding app shell, tables, or settings navigation (web-app-design), store layout and product pages (ecommerce-design), or native desktop dialogs (desktop-app-design).

thecatthatflies/landing-page-design

Design and build marketing pages that people remember and understand, and that agents can read accurately - product and launch pages, homepages for a product or studio, pricing pages, waitlists, feature pages, one-pagers, event and campaign pages. Covers art direction (a concept drawn from the subject, one memorable idea, composition), message and page structure, honest proof, pricing, sign-up and waitlist flows, and speed. Use whenever someone asks for a landing page, "a site for my app", "a page to announce X", "make our homepage less generic", "a pricing page", "a coming-soon page", or wants an existing marketing page redesigned or critiqued, even if they only say "make it look good". Consumes brand tokens from `brand-identity` and does not invent logos, palettes or type systems; run that skill first when no brand exists. Not for product UI behind a login (`web-app-design`), docs or blogs (`content-site-design`), storefronts and checkout (`ecommerce-design`), or HTML email (`email-design`).

thecatthatflies/web-app-design

Design, build, and review SaaS and internal web application UI that people use for work and agents can operate - app shells and navigation, list and detail views, data tables with sorting, filtering, bulk actions and pagination, empty states, settings, onboarding, roles and permissions, workspace or tenant switching, optimistic updates and undo, command palettes, and URL-driven view state. Use whenever building or reviewing an admin panel, CRM, back office, internal tool, project tracker, or any logged-in product ("build me an admin for orders", "our app feels clunky", "add bulk delete", "make the table filterable", "add an org switcher"), even when the request names only one screen. Not for KPI and monitoring pages (dashboard-design), forms and wizards in depth (form-design), marketing pages (landing-page-design), native desktop shells (desktop-app-design), or AI chat surfaces (ai-chat-design).

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community