Frontend & UI
UI-UX Pro Max · UI Styling
Constrói interfaces acessíveis com componentes shadcn e utilitários Tailwind.
O que é
Combina uma camada de componentes shadcn sobre primitivos Radix, uma camada de estilização com utilitários Tailwind e uma camada de design visual em canvas. Inclui arquivos de referência para tematização, acessibilidade, regras responsivas e customização.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing
Por que isso importa para design
- Diálogos e menus herdam o gerenciamento de foco do Radix, então a acessibilidade não é remendada depois.
- As cores do tema ficam em variáveis CSS, então o dark mode se mantém consistente.
- Breakpoints mobile-first fazem os layouts começarem pequenos e crescerem em camadas.
O que cobre
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
Como instalar
UI-UX Pro Max · UI Styling
-
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/ui-styling/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Rode npx shadcn@latest init para configurar o framework e o tema.
-
Adicione componentes com npx shadcn@latest add button card dialog form.
-
Rode scripts/tailwind_config_gen.py para gerar um config com tokens customizados.
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.