banner-designpor nextlevelbuilder

Banner Design Skill.

Um skill para Claude Code e Codex voltado a imagens: banners para redes sociais, anúncios, heróis de sites e impressão.

Imagens e Arte Generativa
Image

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/banner-design/SKILL.mdSKILL.md

--- name: banner-design description: Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, … --- ## When to Activate ## Workflow ## Art Direction Styles (Top 10) ## Design Rules ## Security

Metadados e cabeçalhos de seção lidos do arquivo original em 14/09/2026 · 7.010 caracteres no total

01 O que faz

O que o Skill banner-design Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Cria banners para capas de redes sociais, campanhas publicitárias, heros de site e impressos, gerando múltiplas opções de direção de arte em HTML/CSS. Coleta requisitos por meio de perguntas estruturadas (plataforma, conteúdo, marca, estilo, quantidade), consulta orientações de tamanho e zona de segurança incluídas e exporta PNGs pixel-perfect nas dimensões exatas da plataforma.

Suporta 22 estilos de direção de arte, incluindo minimalista, gradiente, tipografia marcante, baseado em foto, geométrico, glassmorphism e neon. Lida com Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display e formatos personalizados. Padrão de 3 opções por solicitação. Usa ativos fornecidos pelo usuário, visuais construídos em CSS ou fundos gerados opcionalmente — nunca inventa regras de marca. Não lida com edição de vídeo, design completo de site ou produção para impressão.

O que ele produz

Arquivos de imagem PNG nas dimensões exatas da plataforma, exportados para assets/banners/{campaign}/ com nomenclatura kebab-case
Código-fonte HTML/CSS de cada variante de banner quando a captura de imagem não estiver disponível

Veja o exemplo de prompt ↗

Como funciona

01
Coletar Requisitos por Meio de Perguntas Estruturadas
Coleta a finalidade (capa social, anúncio, hero, impresso), plataforma ou dimensões personalizadas, conteúdo (título, subtexto, CTA, logo), diretrizes de marca, preferência de estilo e quantidade (padrão de 3 opções).
02
Pesquisar Direção de Arte e Zonas de Segurança
Lê a referência banner-sizes-and-styles.md incluída para o formato de destino, zonas de segurança e estilos adequados.
03
Projetar Cada Opção em HTML/CSS
Cria banners nas dimensões exatas da plataforma com regras de zona de segurança (conteúdo crítico nos 70–80% centrais), usando no máximo 2 tipografias, um único CTA e contraste de texto de 4.5:1.
04
Escolher a Fonte Visual para Cada Opção
Prefere ativos fornecidos pelo usuário, usa visuais construídos em CSS (gradientes, formas geométricas) para resultados sem dependências, ou opcionalmente gera fundos na proporção de aspecto de destino, se o runtime suportar.
05
Exportar Banners como Imagens PNG
Visualiza cada banner no navegador na viewport exata, captura como PNG com a capacidade padrão de captura de tela e verifica dimensões em pixels, corte da zona de segurança, carregamento de fontes e qualidade da imagem.
06
Apresentar Opções com Justificativa
Mostra todas as imagens exportadas lado a lado com o nome do estilo de direção de arte, pré-visualização, principal justificativa de design, caminho do arquivo e dimensões.

02 Encontre o ideal para você

Quando usar a skill banner-design

Use a skill banner-design no Claude Code ou Codex quando o trabalho for de imagem desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Criação de capa ou cabeçalho para redes sociais em plataformas como Facebook, Twitter/X, LinkedIn, YouTube e Instagram
Design de banner publicitário ou anúncio de display para Google Ads e outras plataformas de publicidade
Design visual de seção hero de site em dimensões padrão ou personalizadas
Design de banner para evento ou impressão com saída CMYK e especificações de sangria
Geração de assets criativos para campanhas que exigem múltiplas variações de direção de arte

Conheça os Limites

Edição de vídeo ou motion graphics para banners

O Que Fornecer

Plataforma ou dimensões personalizadasEspecifica a plataforma social de destino (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Ads) ou fornece dimensões exatas em pixels para formatos personalizados.
Elementos de conteúdoFornece título, texto de apoio, texto de chamada para ação e requisitos de posicionamento de logo para a composição do banner.
Diretrizes de marca e assetsFornece cores de marca existentes, especificações de tipografia, arquivos de logo e qualquer outra orientação de marca verificada a ser aplicada.
Preferência de direção de arteIndica o estilo preferido entre 22 opções (minimalista, gradiente, tipografia marcante, geométrico, glassmorphism, neon, etc.) ou solicita recomendações de estilo.

03 Dentro da skill

Regras que a skill banner-design dá ao Claude Code e ao Codex

6 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Padrão de 3 Opções de Direção de Arte
Gera 3 opções de design por solicitação, a menos que o usuário especifique uma quantidade diferente durante o levantamento de requisitos.
Máximo de 2 Fontes e 1 CTA por Banner
Usa no máximo 2 fontes e inclui uma única chamada para ação, posicionada no canto inferior direito com altura mínima de 44px e um verbo de ação.
Nunca Inventa Diretrizes de Marca
Aplica apenas regras, cores, logos e tipografia fornecidas pelo usuário ou verificadas. Não cria especificações de marca fictícias.
Mantém a Proporção de Texto Abaixo de 20% para Anúncios
Limita a cobertura de texto a menos de 20% da área do banner em formatos de anúncio, já que o Meta penaliza texto excessivo em publicidade display.
Especificações de Impressão: 300 DPI, CMYK, Sangria de 3-5mm
Produz banners para impressão a 300 DPI de resolução, no espaço de cor CMYK, com margens de sangria de 3–5mm para saída profissional.
Usa Convenção de Nomenclatura de Arquivos em kebab-case
Nomeia os arquivos exportados como {style}-{width}x{height}.{ext} em kebab-case, prefixando opcionalmente campanhas sensíveis ao tempo com {YYMMDD}-.

04 Coloque em prática

Instalar banner-design no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar banner-design ao Claude Code, Codex ou seu agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formato genérico da CLI skills para .claude/skills/banner-design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Trabalho com Imagem

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Design 3 LinkedIn cover banners for our Q2 product launch. The headline is "Ship faster with AI-powered workflows," subtext "Join 10,000+ teams building better software," and CTA "Start free trial." Use our logo from assets/logo.svg, brand colors #0066FF (primary) and #00CC88 (accent), and Inter font family. Show minimalist, gradient, and bold typography options at 1584×396.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Verifica se as dimensões do PNG exportado correspondem exatamente às especificações de tamanho da plataforma na referência
Confirma que o tamanho do arquivo não excede os limites da plataforma, otimizando ou reduzindo a qualidade se necessário

No OpenDesign, importe o banner-design a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Arquivo da skill: .claude/skills/banner-design/SKILL.md Checksum do conteúdo registrado na verificação; commit 7f69fed
License: MIT De LICENSE; SKILL.md indica "MIT".
Estrelas do repositório: 127.450 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório nextlevelbuilder/ui-ux-pro-max-skill, que contém 7 skills neste catálogo. Não é uma avaliação ou contagem de uso para banner-design.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando AtivarLista gatilhos: solicitações de banner/capa/cabeçalho, redes sociais, anúncios, seções hero, eventos, campanhas criativas
Recursos DisponíveisWorkflow autocontido usando referência de tamanhos incluída; pesquisa em navegador e geração de imagens são opcionais
WorkflowProcesso de cinco etapas, da coleta de requisitos à pesquisa, design, exportação e iteração
Etapa 1: Coletar Requisitos (AskUserQuestion)Coleta propósito, plataforma, conteúdo, marca, preferência de estilo e quantidade por meio de perguntas estruturadas
Etapa 2: Pesquisa e Direção de ArteLê a referência de tamanhos, opcionalmente pesquisa exemplos, seleciona 2–3 direções de arte complementares
Etapa 3: Design e Geração de OpçõesCria banners em HTML/CSS nas dimensões exatas com zonas seguras, escolhe a fonte visual, compõe o final
Etapa 4: Exportar Banners para ImagensVisualiza no navegador, captura PNG, verifica dimensões e qualidade, otimiza se necessário
Etapa 5: Apresentar Opções e IterarMostra todas as variações com justificativa e caminhos de arquivo, itera com base no feedback
Referência Rápida de Tamanhos de BannerTabela de tamanhos comuns por plataforma: Facebook, Twitter, LinkedIn, YouTube, Instagram, Google, hero de site
Estilos de Direção de Arte (Top 10)Tabela com 10 estilos, melhores casos de uso e elementos-chave; lista completa com 22 na referência
Regras de DesignZonas seguras, posicionamento de CTA, limites de tipografia, proporção de texto, especificações de impressão, regras de aplicação de marca
SegurançaSalvaguardas padrão: sem detalhes internos da skill, recusas explícitas fora do escopo, sem exposição de dados, limites de função

A Descrição da Própria Skill

"Projete banners para redes sociais, anúncios, heróis de site, ativos criativos e impressão. Múltiplas opções de direção de arte com visuais gerados ou fornecidos. Ações: design, create, generate banner. Plataformas: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero de site, impressão. Estilos: minimalista, gradiente, tipografia ousada, baseado em foto, ilustrado, geométrico, retrô, glassmorphism, 3D, neon, duotone, editorial, colagem."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 7.010 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill banner-design

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Essa skill requer geração de imagens externa ou ferramentas de navegador?

Não. O workflow é autocontido e usa visuais construídos em CSS (gradientes, formas geométricas, tipografia) para resultados sem dependências. Pesquisa em navegador, geração de imagens e ferramentas de captura de tela são recursos opcionais que aprimoram o resultado quando disponíveis, mas não são obrigatórios.

Banner Design

Execute banner-design em uma tarefa real de trabalho com imagem.

Baixe o OpenDesign, importe banner-design a partir do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills