> ## Content Index > Fetch the complete content index at: https://flateek.com/llms.txt > Use this file to discover other available public pages before exploring further. # UI UX Pro Max: design system gerado por IA para o seu projeto - URL: https://flateek.com/ui-ux-pro-max-skill-design-system-ia-cursor-claude/ - Published: 2026-10-09T15:00:00.000Z - Updated: 2026-10-09T15:00:00.000Z - Description: O UI UX Pro Max é uma skill open source para agentes de IA que gera design systems completos: cores, tipografia, padrões de layout e anti-padrões a evitar, com base no tipo de produto que você está construindo. - Author: Flaviano Rodriges - Tags: IA, Ferramentas, Programação, Open Source Você está usando Cursor, Claude ou qualquer agente de IA para construir uma interface. Você pede: "crie uma landing page para o meu app de meditação". O agente escreve o código. A interface funciona. E parece exatamente igual a qualquer outro app genérico: fundo branco, fonte sans-serif padrão, gradiente azul-roxo porque é o que a IA acha que "parece tech", botão de CTA sem personalidade. O problema não é que a IA não sabe escrever HTML e CSS. Ela sabe muito bem. O problema é que a IA não sabe, a menos que você explique, que um app de meditação se beneficia de tons terrosos e tipografia serifada de baixo contraste, que o gradiente azul-roxo é o "visual de IA" que leitores de tecnologia já aprenderam a ignorar, ou que o padrão de layout mais eficaz para esse nicho coloca o depoimento acima do CTA de assinatura. O UI UX Pro Max resolve exatamente essa lacuna. ## O que é uma skill para agentes de IA Antes de explicar o projeto, um contexto rápido sobre o formato. Ferramentas como Cursor, Claude, Windsurf e outras que suportam context files têm um mecanismo onde você pode fornecer arquivos de contexto que são carregados automaticamente para o agente antes de qualquer conversa. Esses arquivos funcionam como instruções persistentes: o agente os lê e os aplica em todas as respostas da sessão. Uma "skill" nesse contexto é um conjunto curado de regras, conhecimento e estruturas de raciocínio formatados para serem consumidos por esses agentes. O UI UX Pro Max é uma skill de design: um arquivo de contexto que carrega na IA um conjunto completo de inteligência de design UI/UX, específico por categoria de produto. ## Como o UI UX Pro Max funciona Quando você instala a skill e descreve o projeto para o agente, o sistema executa o seguinte raciocínio em paralelo: 1. **Identificação do tipo de produto:** o agente classifica o que você está construindo dentro de 192 categorias (SaaS, marketplace, wellness, e-commerce de luxo, ferramenta para desenvolvedores, fintech, etc.). 2. **Busca multi-domínio simultânea:** são feitas 5 buscas em paralelo em bases de dados diferentes: tipo de produto, estilos visuais disponíveis, paletas de cores, padrões de landing page e combinações tipográficas. 3. **Aplicação das regras de raciocínio:** o motor de raciocínio cruza os resultados e filtra anti-padrões específicos para aquela categoria. Um app de meditação não deveria usar neons. Uma plataforma de cibersegurança não deveria usar fontes orgânicas e tons pastéis. Essas regras estão explicitadas. 4. **Geração do design system completo:** o output é um documento estruturado com paleta de cores (com hex e justificativa), combinação tipográfica, padrão de layout recomendado com estrutura de seções, efeitos visuais sugeridos, uma lista de anti-padrões a evitar e um checklist de entrega pré-codificação. O exemplo do README para um spa de beleza gera, entre outras coisas: - Estilo: "Soft UI Evolution" (sombras suaves, profundidade sutil, formas orgânicas) - Cores: rosa suave (#E8B4B8), verde sage (#A8D5BA), dourado (#D4AF37) para CTAs - Tipografia: Cormorant Garamond para títulos, Montserrat para texto corrido - Anti-padrões a evitar: neons, animações agressivas, modo escuro, "gradientes roxo/rosa de IA" - Checklist: sem emojis como ícones (usar SVGs do Heroicons/Lucide), contraste mínimo 4.5:1 no modo claro, suporte a `prefers-reduced-motion` ## O que está disponível na base de dados O projeto documenta o que está catalogado: | Banco de dados | Quantidade | | ---------------------------------------------- | ---------- | | Categorias de produto com regras de raciocínio | 192 | | Estilos visuais catalogados e pesquisáveis | 79 | | Paletas de cores | 192 | | Padrões de landing page | 34 | | Combinações tipográficas | 74 | As categorias de produto cobrem: Tech e SaaS (ferramentas para desenvolvedores, plataformas de IA, cybersecurity, B2B), Finanças (fintech, cripto, banking), Wellness e beleza, E-commerce, Educação, Alimentação, Imóveis, e várias outras verticais. ## Como instalar O projeto oferece instalação via CLI (npm) ou manual. **Via npm:** ```bash npx ui-ux-pro-max-cli install ``` O CLI detecta automaticamente o agente de IA que você usa (Cursor, Windsurf, Claude Code, etc.) e coloca os arquivos da skill no diretório correto para que sejam carregados automaticamente. **Manual (qualquer agente compatível):** Baixe os arquivos de contexto do repositório e coloque na pasta de context files do seu agente. No Cursor, isso é a pasta `.cursorrules` ou `.cursor/rules/`. No Claude, é o `CLAUDE.md` na raiz do projeto. A documentação completa de instalação por ferramenta está no repositório do projeto. ## O gerador de design system na prática Depois de instalada a skill, o fluxo de uso é: 1. Você inicia uma conversa com o agente e descreve o que está construindo: "quero criar uma landing page para uma ferramenta de monitoramento de servidores para desenvolvedores". 2. O agente, com a skill carregada, executa o raciocínio multi-domínio e gera o design system antes de escrever qualquer código. 3. O design system gerado serve como contexto compartilhado para toda a sessão: quando o agente escrever os componentes, a paleta, as fontes e o padrão de layout já estão definidos. 4. O checklist pré-entrega fica disponível para verificação antes de finalizar. Para "ferramenta de monitoramento para devs", o resultado seria bem diferente do spa de beleza: Inter ou JetBrains Mono, tons de cinza e azul técnico, layout denso com hierarquia de informação clara, dark mode como padrão, densidade alta de informação sem espaçamento excessivo. ## Para quem é especialmente útil O UI UX Pro Max é mais valioso em dois cenários específicos: **Devs que constroem produtos mas não têm formação em design:** a skill funciona como uma espécie de designer de referência interno, que já conhece as convenções de cada nicho e aplica automaticamente sem que você precise pesquisar. **Projetos com múltiplos componentes:** quando a sessão é longa e envolve muitas telas diferentes, ter o design system definido no início garante coerência visual entre os componentes gerados em momentos diferentes da sessão. --- **Links e referências:** - [UI UX Pro Max no GitHub](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill?ref=flateek.com) - [Site oficial com demonstrações](https://uupm.cc/?ref=flateek.com) - [Pacote CLI no npm](https://www.npmjs.com/package/ui-ux-pro-max-cli?ref=flateek.com) - [Skill 3DViz Pro Max (projeto relacionado)](https://github.com/viettranx/3dviz-pro-max?ref=flateek.com)