Design Systems
Mesh Gradient Dark Blue Clean
Sistema navy quase preto com um campo mesh dentro de uma casca de hero.
O que é
Uma direção em azul-escuro com tokens de cor em CSS, uma casca de hero com borda em gradiente, campo mesh em canvas, pílula de nav em vidro, nós flutuantes, trilhos e CTAs em par.
Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black
Por que isso importa para design
- O mesh fica dentro da casca de hero, então ele conduz a composição em vez de só decorá-la.
- Tokens nomeados fixam os valores de fundo, casca, linha, texto e destaque em toda a página.
- Trilhos, quadradinhos de canto e pílulas de nó dão estrutura técnica à casca minimalista.
O que cobre
- System recipe
- Color tokens
- Hero shell
- Canvas mesh field
- Nodes and rails
- Motion defaults
Como instalar
Mesh Gradient Dark Blue Clean
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/mesh-gradient-dark-blue-clean/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Cole o bloco de tokens e depois monte a base da página e a casca de hero.
-
Adicione o canvas do mesh dentro da casca, atrás do conteúdo dela.
-
Posicione alguns nós, trilhos e marcadores e mantenha os loops de deriva lentos.
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.