designpor nextlevelbuilder

Design Skill.

Uma skill para Claude Code e Codex voltada a trabalho de marca e design systems: identidade de marca, design tokens, estilo de UI, geração de logotipos e programas de identidade corporativa.

Marca e Sistemas de Design

Baixar OpenDesign Ver guia de uso

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

--- name: design description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)

Cabeçalhos de seção e metadados lidos do arquivo original em 14/09/2026 · 13.348 caracteres no total

01 O que faz

O que o Skill de 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

Skill de design unificado que abrange identidade de marca, design tokens, estilização de UI com shadcn/ui e Tailwind, geração de logotipos (55 estilos via Gemini, Atlas Cloud ou MuAPI), programas de identidade corporativa com 50 entregáveis, apresentações em HTML usando Chart.js, design de banners (22 estilos de direção de arte para redes sociais, anúncios, web e impressos), design de ícones (15 estilos, saída SVG via Gemini 3.1 Pro) e design de fotos para redes sociais no Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok e Threads. Encaminha para sub-skills externas de brand, design-system e ui-styling, além de fornecer workflows integrados para logotipos, CIP, slides, banners, ícones e fotos sociais com scripts Python, geração por IA e exportação de HTML para captura de tela.

O que ele produz

Capturas de tela PNG de banners nas dimensões exatas de cada plataforma, exportadas via chrome-devtools
Arquivos de ícones SVG em 15 estilos, com exportações opcionais em múltiplos tamanhos e variações em lote
Imagens para redes sociais nas dimensões específicas de cada plataforma, armazenadas em diretórios de assets organizados

Veja o exemplo de prompt ↗

Como funciona

01
Roteamento por Tipo de Tarefa
O skill encaminha identidade de marca e voz para o sub-skill brand, tokens e especificações para design-system, código shadcn/ui e Tailwind para ui-styling, e trata logotipos, CIP, slides, banners, ícones e fotos sociais com workflows integrados.
02
Gerar Logotipos com Provedores de IA
Execute scripts Python para pesquisar 55 estilos, 30 paletas de cores e 25 guias de setor, depois gere logotipos via Gemini Nano Banana, Atlas Cloud ou MuAPI com fundos brancos.
03
Criar Entregáveis de CIP com Mockups
Gere mockups de programa de identidade corporativa para 50 entregáveis usando os modelos Gemini Flash ou Pro, opcionalmente com sobreposição de logotipo, e depois renderize apresentações em HTML da saída.
04
Criar apresentações estratégicas em HTML
Crie apresentações com integração do Chart.js, design tokens e fórmulas de copywriting carregando a referência do workflow de criação de slides.
05
Projetar banners com HTML/CSS
Reúna requisitos, pesquise no Pinterest via ui-ux-pro-max, projete banners em HTML/CSS com frontend-design e ai-artist/ai-multimodal para os visuais e, em seguida, exporte via chrome-devtools nas dimensões exatas.
06
Exportar e verificar capturas de tela
Use chrome-devtools ou Playwright para capturar telas dos designs nas dimensões exatas em pixels com fator de escala de dispositivo 2x, depois inspecione visualmente e corrija problemas de layout antes da exportação final.

02 Encontre o ideal para você

Quando Usar a Skill design

Use a skill design no Claude Code ou Codex quando o trabalho for de marca e sistema de design deste tipo. Adequação e limites abaixo são retirados do arquivo da própria skill.

Boa Combinação

Criação de pacotes de identidade de marca com logotipo, entregáveis de identidade corporativa e apresentações de pitch deck
Design de imagens multiplataforma para redes sociais para Instagram, Facebook, LinkedIn, Twitter, Pinterest e TikTok
Geração de banners para capas de redes sociais, campanhas publicitárias, cabeçalhos de site e materiais impressos
Construção de design systems com tokens semânticos, configuração do Tailwind e componentes shadcn/ui

Conheça os Limites

O gerador de ícones produz apenas saída de texto SVG, não arquivos de imagem raster

O Que Fornecer

Chave de API do GeminiVariável de ambiente obrigatória para geração de logotipo, CIP e ícones via Google AI Studio
Chave de API do MuAPI (opcional)Variável de ambiente opcional para usar o MuAPI como provedor alternativo de geração de imagens para logotipos
Caminho do arquivo de logotipo para o CIPCaminho para um arquivo PNG de logotipo existente a ser sobreposto em entregáveis de identidade corporativa ao gerar mockups de CIP
Requisitos do banner via AskUserQuestionPropósito, plataforma, conteúdo, diretrizes de marca, estilo de direção de arte e quantidade coletados de forma interativa antes do design do banner
Contexto de marca para fotos de redes sociaisDiretrizes de marca do sub-skill de marca e design tokens do design-system para manter a consistência entre as imagens de redes sociais

03 Dentro da skill

Regras que o skill de design dá ao Claude Code e ao Codex

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

Sempre gerar logotipos com fundos brancos
A geração de logotipos deve produzir imagens de saída com fundos brancos em todos os casos.
Os caminhos de script são relativos ao diretório do skill
Os caminhos de script neste skill e em sua pasta de referências são relativos ao diretório que contém o SKILL.md, não à raiz do projeto.
Perguntar ao usuário sobre a pré-visualização em HTML após a geração de logotipos
Após gerar os logotipos, sempre pergunte ao usuário via AskUserQuestion se ele deseja uma galeria de pré-visualização em HTML e, em caso afirmativo, invoque o skill ui-ux-pro-max para criá-la.
Corrigir scripts com falha diretamente
Quando scripts Python falharem durante a execução, tente corrigi-los diretamente em vez de reportar o erro.
Usar Sobreposição de Logo Recomendada para CIP
Ao gerar mockups de CIP, usar um arquivo de logo existente com a flag --logo é a abordagem recomendada.
Texto do Banner Deve Ficar Abaixo de 20% para Anúncios
Para banners publicitários, mantenha a cobertura de texto abaixo de 20% da área total, pois as plataformas Meta penalizam anúncios com muito texto.
Usar Python em Vez de Python3 no Windows
Em sistemas Windows, substitua python3 por python em todos os exemplos de comando ao longo da skill.
Conteúdo Crítico do Banner nas Zonas Seguras Centrais
Posicione todo o conteúdo crítico do banner dentro da zona segura central de 70-80% para garantir a visibilidade em todas as plataformas.

04 Coloque em prática

Instalar 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 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 design

Forma genérica de CLI skills para .claude/skills/design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma primeira tarefa de marca e design-system

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

Starter prompt

Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

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:

Verifique se os CTAs do banner atendem ao requisito mínimo de altura de 44px e estão posicionados no canto inferior direito
Garanta que banners para impressão usem 300 DPI, modo de cor CMYK e incluam sangria de 3-5mm

No OpenDesign importe o 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/design/SKILL.md Checksum de 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 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 UsarLista casos de uso: identidade de marca, tokens de design, estilização de UI, logos, CIP, apresentações, banners, fotos para redes sociais, ícones
Roteamento de Sub-skillsDireciona tarefas para skills externas de marca/design system/ui-styling ou para workflows internos de logo/CIP/slides/banner/social/icon
Caminhos de ScriptExplica que os caminhos dos scripts são relativos ao diretório da skill, não à raiz do projeto
Design de Logo (Integrado)Comandos para pesquisar 55 estilos e gerar logos via Gemini, Atlas Cloud ou MuAPI com fundos brancos
Design de CIP (Integrado)Comandos para pesquisar 50 entregáveis e gerar mockups de identidade corporativa com modelos Flash ou Pro
Slides (Integrado)Referencia a criação estratégica de apresentações em HTML com Chart.js e fórmulas de copywriting
Design de Banner (Integrado)Fluxo de trabalho para projetar 22 estilos de direção de arte usando frontend-design, ai-artist e chrome-devtools para exportação
Design de Ícones (Integrado)Comandos para gerar ícones SVG em 15 estilos usando saída somente de texto do Gemini 3.1 Pro
Fotos para Redes Sociais (Integrado)Fluxo de trabalho para design de imagens multiplataforma de HTML até exportação de captura de tela com verificação
Fluxos de TrabalhoSequências para pacotes de marca completos e criação de novo design system entre sub-skills
Pré-requisitosRequisito do Python com instruções específicas do Windows sobre os comandos python vs python3
ConfiguraçãoVariáveis de ambiente para as chaves de API do Gemini e da MuAPI, além da instalação de pacotes Python

A Descrição da Própria Skill

"Skill de design abrangente: identidade de marca, tokens de design, estilo de UI, geração de logotipo (55 estilos, Gemini, Atlas Cloud ou MuAPI AI), programa de identidade corporativa (50 entregáveis, mockups CIP), apresentações HTML (Chart.js), design de banner (22 estilos, redes sociais/anúncios/web/impressão), design de ícones (15 estilos, SVG, Gemini 3.1 Pro), fotos para redes sociais (HTML→screenshot, multiplataforma). Ações: design de logotipo, criar CIP, gerar mockups, criar slides, design de banner, gerar ícone, criar fotos para redes sociais, imagens para redes sociais, identidade de marca, sistema de design. Plataformas: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads."

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

06 Antes de instalar

Perguntas sobre a skill design

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

Como executo scripts Python no Windows?

Substitua python3 por python em todos os exemplos de comando. Por exemplo, use python scripts/logo/search.py em vez de python3 scripts/logo/search.py. O mesmo se aplica aos comandos pip, em que talvez seja necessário usar python -m pip install.

Design

Execute design em uma Marca Real e uma Tarefa de Trabalho de design-system.

Baixe o OpenDesign, importe 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

Terminal

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

O que o Skill de design Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill design

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o skill de design dá ao Claude Code e ao Codex

Sempre gerar logotipos com fundos brancos

Os caminhos de script são relativos ao diretório do skill

Perguntar ao usuário sobre a pré-visualização em HTML após a geração de logotipos

Corrigir scripts com falha diretamente

Usar Sobreposição de Logo Recomendada para CIP

Texto do Banner Deve Ficar Abaixo de 20% para Anúncios

Usar Python em Vez de Python3 no Windows

Conteúdo Crítico do Banner nas Zonas Seguras Centrais