Frontend & UI
Border Gradients
Adiciona uma borda em gradiente refinada a cards, modais e superfícies de hero.
O que é
Uma receita de CSS para bordas em gradiente sutis usando camadas de padding-box e border-box, mais uma variante de pseudo-elemento mascarado para superfícies com fundos complexos.
Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
Por que isso importa para design
- Dá uma definição de borda premium sem o brilho gritante das bordas neon.
- A variante mascarada preserva um fundo existente em vez de sobrescrevê-lo.
- Os padrões mantêm os stops abaixo de 0.4 de opacidade, então as bordas emolduram em vez de competir.
O que cobre
- Use when
- Defaults
- Simple CSS pattern
- Masked pattern
- Tailwind shortcut
- Taste rules
Como instalar
Border Gradients
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/css-border-gradient/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Aponte o Codex para um card ou painel de preço que precisa de uma borda melhor.
-
Escolha o padrão simples para preenchimentos sólidos, o mascarado para fundos complexos.
-
Confira os temas claro e escuro separadamente, já que o alfa raramente se transfere.
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.