Frontend & UI
UI-UX Pro Max · Banner Design
Projeta banners no tamanho certo em HTML e depois os exporta como PNGs.
O que é
Um fluxo de banner em cinco passos: levantar requisitos, pesquisar direção de arte, montar o banner em HTML e CSS com visuais gerados, capturar na medida exata em pixels da plataforma e então apresentar opções para iteração.
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, Linked
Por que isso importa para design
- Todo banner é exportado nos pixels exatos da plataforma, então nada é cortado ou redimensionado.
- Os visuais gerados são renderizados sem texto, então os títulos ficam nítidos em HTML.
- Três direções de arte por pedido, então a comparação vem antes da decisão.
O que cobre
- Workflow
- Banner size quick reference
- Art direction styles
- Design rules
- Prerequisites
Como instalar
UI-UX Pro Max · Banner Design
-
Clone o repositório.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Aponte o Codex para o arquivo da skill.
cli/assets/skills/banner-design/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Responda às perguntas de propósito, plataforma, conteúdo, marca, estilo e quantidade.
-
Ela monta um banner HTML por direção de arte, com as zonas seguras aplicadas.
-
Ela captura cada um na largura e altura definidas, comprimindo os arquivos acima do limite.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.