ckm:design

Visão geral

O que é ckm:design?

ckm:design é um skill unificado, com foco em design, que ajuda seu agente a planejar e produzir assets visuais para toda a experiência da sua marca. Ele é feito para fluxos de UI/UX e branding, não apenas para despejar código, e combina referências estruturadas com scripts locais opcionais para dar suporte a:

• Identidade de marca e direção visual
• Design tokens e especificações de design system
• Orientação de UI styling para shadcn/ui e Tailwind
• Criação de logos e geração de logos com IA (55 estilos)
• Entregáveis e mockups de Corporate Identity Program (CIP)
• Apresentações em HTML e pitch decks (com Chart.js)
• Criação de banners para social, ads, web e impressão (22 estilos, matriz completa de tamanhos)
• Design de ícones com SVGs gerados por IA (15 estilos)
• Fotos para redes sociais e imagens de marketing para as principais plataformas

O skill vem com material de referência rico e tabelas de dados para que o agente possa fazer recomendações concretas e prontas para implementação, sem você precisar buscar tabelas de tamanhos ou normas de marca manualmente.

Para quem é o ckm:design?

ckm:design é uma boa opção se você é:

• Um(a) designer de UI/UX que quer um assistente que fale em termos de fluxos, componentes, tokens e direção de arte.
• Um(a) desenvolvedor(a) frontend que precisa de tamanhos exatos de banners, especificações de ícones ou estruturas de HTML para slides, mantendo código e design alinhados.
• Um(a) líder de branding ou marketing planejando logos, rollouts de CIP, campanhas em redes sociais e decks de apresentação.
• Um(a) founder ou parte de um time pequeno que precisa de orientação de marca e UI de ponta a ponta, mas não tem um departamento de design completo.

Se você só precisa de geração de código bruto sem justificativa de design, um skill mais leve, focado apenas em engenharia, pode ser melhor. ckm:design é pensado para cenários em que qualidade visual, consistência e aderência à marca são importantes.

Que problemas o ckm:design resolve?

Usando as referências e dados incluídos, ckm:design ajuda seu agente a:

• Padronizar a saída de marca – alinhar logos, banners, fotos para redes sociais e assets de CIP em um sistema visual coerente.
• Acertar tamanhos e formatos já na primeira tentativa – usando tabelas específicas por plataforma para redes sociais, Google Display Network, heros de web e impressão.
• Escalar programas de identidade corporativa – mapeando setores, estilos e entregáveis para grandes conjuntos de CIP.
• Fazer a ponte entre design e implementação – conectando decisões de marca a design tokens, variáveis CSS, shadcn/ui e uso de Tailwind.
• Prototipar rápido – com templates de slides em HTML e mockups de CIP que podem ser avaliados muito antes de um design system completo estar pronto.

---

Como usar

1. Instale o skill ckm:design

Você instala o ckm:design no seu setup de skills compatível com Claude a partir do repositório upstream:

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

Esse comando busca o skill design no repositório nextlevelbuilder/ui-ux-pro-max-skill para o diretório local ~/.claude/skills/design (ou equivalente no seu ambiente).

Após a instalação, você deverá ver:

• SKILL.md – descrição de alto nível e orientação de roteamento.
• data/ – datasets em CSV para estilos de CIP, logo e ícone.
• references/ – a principal base de conhecimento para tarefas de design.
• scripts/ – utilitários Python opcionais para CIP e geração de ícones.

2. Entenda o modelo de roteamento de design

ckm:design atua como ponto de entrada de design e roteia o trabalho para sub-skills focados, conforme descrito em references/design-routing.md e SKILL.md.

Domínios principais de design:

• Brand identity → normalmente tratado por um skill separado brand.
• Design systems e tokens → via skill design-system.
• Implementação de UI (shadcn/ui, Tailwind) → via skill ui-styling.
• Criação de logo → referências internas de logo design.
• Design de CIP → entregáveis e mockups de identidade corporativa.
• Slides → apresentações em HTML usando Chart.js.
• Design de banners → banners para social, ads, web e impressão.
• Design de ícones → geração de ícones SVG via scripts.

Nos prompts, você pode indicar o tipo de design usando o padrão argument-hint do skill:

ckm:design [design-type] [context]

Exemplo:

• ckm:design logo fintech SaaS brand for B2B dashboards
• ckm:design cip rebrand for hospitality hotel chain
• ckm:design banner LinkedIn company cover product launch

3. Use as referências para decisões de UI/UX e marca

A força do ckm:design está nos arquivos de referência estruturados. Use-os como fonte canônica ao pedir especificações ao seu agente.

Planejamento de UI/UX e design system

Embora a execução possa ser roteada para design-system ou ui-styling, você pode usar ckm:design para:

• Discutir tokens e especificações em nível de design (cores, tipografia, espaçamento, estados).
• Mapear cores e tipografia da marca para variáveis CSS e Tailwind config.
• Planejar comportamento e estados de componentes antes da implementação.

O agente pode combinar a intenção de design de alto nível do ckm:design com skills focados em código para a implementação.

Criação de banners e campanhas

Para campanhas e banners de UI, use references/banner-sizes-and-styles.md como base:

• Escolher os tamanhos corretos por plataforma (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, Google Display Network, website, email e formatos de impressão).
• Optar entre 22 estilos de direção de arte (por exemplo, Minimalist, Corporate Minimal, Luxury Premium, Modern Tech, Warm Organic, Bold Dynamic).
• Pedir que o agente faça o mapeamento de mensagem e layout para posicionamentos específicos, como:
  • Facebook cover vs event cover
  • LinkedIn company cover vs personal banner
  • GDN billboard vs medium rectangle
  • Website hero vs blog header

Exemplo de prompt para planejamento de campanha:

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

Rollouts de Corporate Identity Program (CIP)

O suporte a CIP está descrito em:

• references/cip-deliverable-guide.md – o que incluir em um sistema de identidade completo.
• references/cip-design.md – como os dados e scripts dão suporte a 50+ entregáveis, 20 estilos e 20 setores.
• references/cip-style-guide.md – arquétipos detalhados de estilo (Corporate Minimal, Modern Tech, Luxury Premium, Classic Traditional, Warm Organic, Bold Dynamic etc.).
• references/cip-prompt-engineering.md – estruturas de prompt para geração de mockups.

Use esses materiais para:

• Definir o escopo de um rebrand (cartões de visita, sinalização, veículos, vestuário, ativos digitais, eventos e mais).
• Alinhar cada entregável a um guia de estilo adequado ao setor.
• Gerar prompts altamente estruturados para mockups que um modelo Gemini ou outro mecanismo de imagem consiga interpretar de forma consistente.

Exemplo de prompt de alto nível:

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. Gere briefs e mockups de CIP com scripts (opcional)

Se você quiser ir além do planejamento conceitual e realmente gerar mockups de CIP usando os scripts em Python incluídos, siga references/cip-design.md.

Certifique-se de que o Python 3 está instalado e de que você tem acesso a um modelo Gemini compatível, conforme descrito no seu próprio toolchain.

4.1. Pesquise dados de CIP e crie um brief

Use o script de busca com BM25 para explorar entregáveis, estilos e setores e gerar um brief inicial:

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

Você pode pesquisar domínios específicos:

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

Os arquivos CSV em data/cip/ armazenam os entregáveis, setores, estilos e contextos de mockup usados por esse utilitário de busca.

4.2. Gere imagens de mockup de CIP

references/cip-design.md inclui comandos para usar scripts/cip/generate.py com geração de mockups baseada em Gemini:

# Mockup de um único deliverable com logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Conjunto completo de CIP com logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

Use suas próprias chaves de modelo e configuração de ambiente conforme necessário; ckm:design fornece a estrutura de dados, o esqueleto de prompts e os entry points dos scripts, não o modelo em si.

4.3. Renderize apresentações em HTML com os resultados de CIP

Depois de gerar os dados de mockup, você pode criar uma apresentação em HTML usando:

python3 ~/.claude/skills/design/scripts/cip/render-html.py

Isso vai gerar um overview em HTML que você pode enviar para stakeholders como um resumo visual do sistema de identidade.

5. Crie logos e ícones com suporte de IA

ckm:design também inclui orientações e scripts focados em trabalho de logo e ícone.

5.1. Planejamento de logo e prompt engineering

Baseie-se em:

• references/logo-design.md – fundamentos de composição de logos.
• references/logo-color-psychology.md – escolhas de cor por personalidade e setor da marca.
• references/logo-style-guide.md – como escolher entre os 55 estilos de logo disponíveis.
• references/logo-prompt-engineering.md – estruturas de prompt recomendadas para geração de logos com Gemini.

Use essas referências ao pedir para o seu agente:

• Definir um sistema de logo (principal, empilhado, apenas ícone, versões monocromáticas).
• Escolher cores e tipografia alinhadas à sua estratégia de marca.
• Elaborar prompts de IA detalhados o suficiente para gerar opções de logo utilizáveis.

A capacidade de logo embutida foi pensada para funcionar em conjunto com as ferramentas de CIP e banners, para que a sua marca visual permaneça consistente em todos os pontos de contato.

5.2. Design de ícones com saída em SVG

references/icon-design.md documenta como gerar ícones SVG com IA usando scripts/icon/generate.py e Gemini 3.1 Pro Preview.

Exemplos de comando:

# Ícones simples
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"

# Ícone nomeado em uma categoria
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

# Geração em lote
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

# Múltiplos tamanhos
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

# Descobrir estilos e categorias disponíveis
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

Isso é especialmente útil para times de UI/UX que precisam de conjuntos de ícones coesos, alinhados à mesma linguagem visual dos logos e materiais de CIP.

6. Monte decks de slides em HTML e visuais para marketing

ckm:design inclui um conjunto completo de referências para design de slides, ideal para demos de produto, decks de vendas e apresentações internas:

• references/slides.md – visão geral do sistema de slides.
• references/slides-create.md – como ir do outline ao deck.
• references/slides-layout-patterns.md – layouts de página mais comuns.
• references/slides-copywriting-formulas.md – frameworks de mensagem para clareza e persuasão.
• references/slides-strategies.md – estratégias de estrutura narrativa.
• references/slides-html-template.md – template base em HTML para slides (com integração Chart.js).

Com isso, você pode:

• Pedir ao agente para criar um outline de slides e mapear seções para padrões de layout.
• Gerar decks de slides em HTML que sigam seus tokens e cores de marca.
• Adicionar visualizações Chart.js para métricas e dashboards.

Exemplo de prompt:

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. Fotos para redes sociais e campanhas multiplataforma

references/social-photos-design.md traz orientações para criação de fotos de social e assets multiplataforma.

O skill de design ajuda você a:

• Coordenar fotos de perfil, imagens de capa e templates de posts em plataformas como Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads e Google Ads.
• Usar fluxos de HTML-to-screenshot para iterar rapidamente visuais sociais com tipografia e layout consistentes.
• Conectar cada asset de social ao seu núcleo de marca e ao sistema de CIP.

---

FAQ

Quando o ckm:design é uma boa escolha?

ckm:design funciona especialmente bem quando você:

• Precisa de direção visual de ponta a ponta cobrindo UI/UX, branding, CIP e marketing.
• Quer que seu agente fale em termos de design tokens, direção de arte e sistemas de marca, não apenas trechos de CSS.
• Está planejando um rebrand, lançamento de produto ou rollout de design system e precisa de uma abordagem consistente e apoiada em referências.
• Deseja combinar geração de imagens com IA (logos, ícones, mockups de CIP, fotos para redes sociais) com supervisão humana de design.

Quando o ckm:design não é a ferramenta certa?

Ele pode não ser ideal se você:

• Só precisa de ajuda de backend ou algoritmos, sem componente de design.
• Quer um gerador de logo em um único passo, sem pensar em sistemas de marca mais amplos.
• Não tem capacidade ou interesse em rodar os scripts Python opcionais (o skill continua útil como guia sem os scripts, mas você dependerá da sua própria stack de geração de imagens).

O ckm:design exige Figma ou algum app específico de design?

Não. ckm:design é agnóstico em relação à ferramenta. Ele fornece estrutura e orientação que você pode aplicar em:

• Figma ou ferramentas similares para layout e prototipação de UI/UX.
• Codebases frontend usando shadcn/ui e Tailwind.
• Ferramentas de apresentação ou HTML puro para slides.
• Qualquer editor de imagem ou pipeline de IA que consiga consumir os prompts e especificações produzidos.

Você pode manter sua stack de design atual; o skill atua como uma camada de decisão e especificação por cima.

Posso usar ckm:design sem rodar os scripts em Python?

Sim. O principal valor do ckm:design está nas referências estruturadas e nos arquivos de dados:

• Você pode depender totalmente de references/*.md e data/*.csv via agente para planejamento e especificação.
• Os scripts em scripts/cip/ e scripts/icon/ são aceleradores opcionais para times que desejam automatizar a geração de mockups e SVGs.

Se você não rodar os scripts, ainda terá:

• Tamanhos, estilos e listas de entregáveis corretos.
• Frameworks de prompt para uso nas suas próprias ferramentas de IA para imagens.
• Orientação consistente para alinhamento de marca, UI e marketing.

Como o ckm:design funciona junto com outros skills de design?

O repositório é organizado como um conjunto de skills de design que cooperam entre si. O ckm:design:

• Atua como camada de roteamento e orquestração para tarefas visuais.
• Delega trabalho profundo de identidade de marca para brand.
• Delega arquitetura de tokens e especificações de componentes para design-system.
• Delega detalhes de implementação (shadcn/ui, classes Tailwind) para ui-styling.

Na prática, você:

1. Começa com ckm:design para enquadrar o problema visual e escolher o sub-skill certo.
2. Usa o skill especializado correspondente para a execução detalhada.
3. Volta ao ckm:design para garantir que todos os outputs permaneçam consistentes com o plano geral de marca e CIP.

Onde devo olhar primeiro depois de instalar o ckm:design?

Para uma orientação rápida, mas completa:

1. Abra SKILL.md para entender o escopo e os principais fluxos de trabalho.
2. Veja references/design-routing.md para entender como as tarefas se distribuem pela família de skills de design.
3. Dê uma olhada nestas referências-chave, dependendo da sua necessidade imediata:
   • references/banner-sizes-and-styles.md – para campanhas e banners.
   • references/cip-deliverable-guide.md e references/cip-style-guide.md – para sistemas de identidade corporativa.
   • references/logo-design.md e references/logo-color-psychology.md – para projetos de logo.
   • references/slides.md e references/slides-html-template.md – para decks e apresentações.
   • references/social-photos-design.md – para campanhas em redes sociais.

Isso já dá contexto suficiente para você decidir como aplicar o ckm:design nos seus fluxos de UI/UX, branding ou marketing antes de mergulhar em qualquer script opcional.