Design Systems
Beautiful Shadows
Três utilitários de sombra prontos em Tailwind para elevação neutra em camadas.
O que é
Um conjunto de classes de sombra arbitrárias e exatas em Tailwind, em três intensidades. Cada uma empilha várias camadas neutras de baixa opacidade em vez da escala de sombra padrão do Tailwind.
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows wit
Por que isso importa para design
- A elevação se mantém neutra, sem brilho colorido tingindo a superfície de baixo.
- Três intensidades fixas correspondem a controles, cards e mídia de hero, respectivamente.
- Camadas empilhadas de baixa opacidade parecem profundidade real em vez de um drop shadow bruto.
O que cobre
- Use when
- Shadow utilities
- Examples
- Usage rules
- Avoid
Como instalar
Beautiful Shadows
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/beautiful-shadows/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça ao Codex para aplicar o utilitário md a cards, painéis e popovers.
-
Reserve o utilitário lg para mídia de hero e containers tipo modal.
-
Combine cada sombra com um preenchimento de superfície limpo e raio consistente.
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.