Design Systems
UI-UX Pro Max · Design System
Design tokens em três camadas, specs de componente e geração de slides fiel aos tokens.
O que é
Uma skill de design system que cobre as camadas de token primitivo, semântico e de componente como variáveis CSS, além de specs de estado de componente e um gerador de slides que monta decks a partir desses mesmos tokens.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design t
Por que isso importa para design
- A camada de token semântico faz a troca entre tema claro e escuro virar uma mudança de config, não uma reescrita.
- As specs de componente tabelam os estados default, hover, active e disabled, então o handoff não deixa nada ambíguo.
- Um validador sinaliza valores hex fixos no código, mantendo componentes e slides dentro do sistema de tokens.
O que cobre
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
Como instalar
UI-UX Pro Max · Design System
-
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/design-system/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Rode generate-tokens.cjs sobre um config de tokens em JSON para emitir seu arquivo de variáveis CSS.
-
Peça specs de componente ao Codex e depois rode validate-tokens.cjs sobre src/ para pegar valores crus.
-
Use search-slides.py com as flags de posição e contexto para escolher os layouts de um deck.
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.