UI UX Pro Max: Design intelligence para agentes de IA construírem interfaces profissionais
UI UX Pro Max: Design intelligence para agentes de IA construírem interfaces profissionais
Tem um problema recorrente quando peço para agentes de IA criarem interfaces: eles sabem codar, mas nem sempre sabem design. Você pede “uma landing page para meu SaaS” e recebe algo funcional, genérico, com aquela vibe de template Bootstrap de 2015. As cores não conversam, a tipografia é aleatória, o espaçamento parece ter sido decidido no feeling.
Eu já passei por isso inúmeras vezes. E a solução óbvia — descrever detalhadamente cada aspecto do design — é trabalhosa. Perde-se a graça de usar IA se você precisa escrever um brief de design completo a cada prompt.
Foi aí que eu encontrei o UI UX Pro Max.
O que é UI UX Pro Max?
É uma skill para agentes de código (Claude Code, Cursor, Windsurf, GitHub Copilot, Codex, OpenCode, e mais) que fornece inteligência de design para construir interfaces profissionais. A ideia é simples: em vez de partir do zero a cada pedido, o agente usa um motor de raciocínio especializado em UI/UX.
O destaque da versão 2.0 é o Design System Generator — um motor de raciocínio que analisa seus requisitos e gera um design system completo em segundos.
Como funciona o Design System Generator
O fluxo é elegante:
- Você pede — “Cria uma landing page para meu spa de beleza”
- Busca multi-domínio — 5 buscas paralelas em categorias de produto, estilos, cores, padrões de landing page e tipografia
- Motor de raciocínio — aplica regras específicas, filtra anti-patterns, processa decisões
- Design system completo — pattern + estilo + cores + tipografia + efeitos + o que evitar
O resultado é algo assim:
TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM
PATTERN: Hero-Centric + Social Proof
Conversion: Emotion-driven with trust elements
CTA: Above fold, repeated after testimonials
STYLE: Soft UI Evolution
Keywords: Soft shadows, subtle depth, calming, premium feel
COLORS:
Primary: #E8B4B8 (Soft Pink)
Secondary: #A8D5BA (Sage Green)
CTA: #D4AF37 (Gold)
Background: #FFF5F5 (Warm White)
Text: #2D3436 (Charcoal)
TYPOGRAPHY: Cormorant Garamond / Montserrat
Mood: Elegant, calming, sophisticated
KEY EFFECTS:
Soft shadows + Smooth transitions (200-300ms)
AVOID (Anti-patterns):
Bright neon colors + Harsh animations + Dark modeIsso é passado para o agente antes dele gerar qualquer código. O resultado? Interfaces que parecem ter sido desenhadas por um designer, não por um robô.
O que está incluído
A skill vem com uma base de dados impressionante:
- 67 estilos de UI — Glassmorphism, Claymorphism, Brutalism, Neumorphism, Bento Grid, AI-Native UI, e mais
- 161 paletas de cores — alinhadas 1:1 com 161 tipos de produto
- 57 combinações de fontes — com links diretos para Google Fonts
- 25 tipos de gráficos — recomendações para dashboards e analytics
- 15 stacks tecnológicas — React, Next.js, Vue, Nuxt, Svelte, SwiftUI, React Native, Flutter, etc.
- 99 guidelines de UX — best practices, anti-patterns, regras de acessibilidade
- 161 regras de raciocínio — específicas por indústria
Categorias cobertas
As 161 regras cobrem desde SaaS e fintech até nichos específicos:
| Categoria | Exemplos |
|---|---|
| Tech & SaaS | SaaS, Developer Tool, AI/Chatbot, Cybersecurity |
| Finanças | Fintech, Banking, Insurance, Personal Finance |
| Healthcare | Medical Clinic, Pharmacy, Mental Health |
| E-commerce | Luxury, Marketplace, Subscription Box |
| Serviços | Beauty/Spa, Restaurant, Hotel, Legal |
| Criativo | Portfolio, Agency, Photography, Gaming |
| Lifestyle | Habit Tracker, Recipe, Meditation, Weather |
| Emerging Tech | Web3/NFT, Spatial Computing, Quantum Computing |
Cada regra inclui pattern recomendado, prioridade de estilo, mood de cor, mood tipográfico, efeitos chave, e anti-patterns específicos.
Instalação
A instalação é simples via CLI:
npm install -g uipro-cliDepois, inicialize para seu agente:
uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai copilot # GitHub Copilot
uipro init --ai codex # Codex CLI
uipro init --ai opencode # OpenCode
uipro init --ai all # Todos os assistentesTambém dá para instalar globalmente:
uipro init --ai claude --globalUso
A skill ativa automaticamente quando você pede trabalho de UI/UX. Basta falar naturalmente:
Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode
Make a mobile app UI for e-commerceO agente vai:
- Gerar o design system automaticamente usando o motor de raciocínio
- Encontrar os melhores matching styles, cores e tipografia
- Implementar com as guidelines corretas
- Validar contra anti-patterns comuns
Persistência de Design System
Uma feature bacana é o pattern Master + Overrides:
# Gera e persiste em design-system/MASTER.md
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" \
--design-system --persist -p "MyApp"
# Cria override específico de página
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" \
--design-system --persist -p "MyApp" --page "dashboard"Isso cria:
design-system/
├── MASTER.md # Source of Truth global
└── pages/
└── dashboard.md # Overrides específicos da páginaQuando building uma página específica, o agente primeiro verifica o arquivo da página. Se existir, usa ele. Se não, usa o Master. É uma forma de manter consistência enquanto permite variações.
Alguns estilos disponíveis
Aqui estão alguns dos 67 estilos que mais me chamaram atenção:
- Minimalism & Swiss Style — para enterprise apps e dashboards
- Glassmorphism — moderno, para SaaS e fintech
- Brutalism — para portfolios artísticos e projetos ousados
- Claymorphism — educacional, apps para crianças
- Bento Box Grid — dashboards, product pages
- AI-Native UI — para produtos de IA, chatbots, copilots
- Neubrutalism — Gen Z brands, startups
- Spatial UI (VisionOS) — para apps de computação espacial
- 3D Product Preview — e-commerce, móveis, moda
Por que isso importa
Para mim, o UI UX Pro Max resolve três problemas:
Primeiro, consistência. Sem ele, cada tela que o agente cria é uma ilha. Com ele, existe um design system coerente guiando as decisões.
Segundo, velocidade. Em vez de perder tempo descrevendo detalhes visuais, você fala do negócio — “spa de beleza”, “fintech”, “healthcare” — e o motor cuida do resto.
Terceiro, qualidade. As recomendações vêm de patterns testados. Não é o agente chutando cores e fontes, é um sistema racionalizando decisões de design baseadas em boas práticas.
Considerações
O UI UX Pro Max tem 75k+ estrelas no GitHub e é um dos projetos mais populares na categoria de skills para agentes de IA. A curva de aprendizado é praticamente zero — instala, pede o que você quer, e deixa o motor trabalhar.
Se você constrói interfaces com agentes de IA e se importa com o resultado visual, essa skill é praticamente obrigatória. É a diferença entre “funciona” e “funciona e parece profissional”.
Links: