Design Systems
Material 3
Implementa o Material Design 3 do Google em Compose, Flutter e web.
O que é
Um guia do Material Design 3 que cobre o namespace de tokens md.sys, mais de 30 componentes, layout adaptativo, tematização e M3 Expressive. O Jetpack Compose é o alvo principal; Flutter e @material/web são secundários.
>
Por que isso importa para design
- Tokens de cor, tipografia, forma e elevação substituem valores de hex e raio fixos no código.
- Superfícies tonais carregam a profundidade no lugar das sombras, seguindo a spec atual do MD3.
- Uma auditoria pontuada avalia dez categorias e lista as correções por ordem de prioridade.
O que cobre
- Design token system
- Component quick reference
- Common patterns
- Anti-patterns
- M3 Expressive
- MD3 compliance audit
Como instalar
Material 3
-
Clone o repositório.
git clone https://github.com/hamen/material-3-skill -
Aponte o Codex para o arquivo da skill.
skills/material-3/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Informe a plataforma para o Codex escolher Compose, Flutter ou custom properties de CSS.
-
Peça um componente e receba a variante correta com a ligação de tokens.
-
Rode a auditoria sobre uma URL ou arquivos-fonte para um relatório de conformidade.
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.