Frontend & UI
design-skills · Neumorphism
Superfícies extrudadas suaves em cinza-pedra com tipografia Space Mono.
O que é
Uma skill de guideline para UI neumórfica: sombras internas e externas sobre uma superfície monocromática cinza-pedra #E7E5E4, um destaque teal #006666, Space Mono no display e no corpo, espaçamento de densidade compacta.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Por que isso importa para design
- Superfícies monocromáticas fazem a profundidade vir da sombra, não do contraste de cor.
- O espaçamento de densidade compacta serve a painéis cheios de controles, como dashboards e telas de configuração.
- As regras proíbem misturar metáforas visuais, então a extrusão suave segue como a única linguagem de profundidade.
O que cobre
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Como instalar
design-skills · Neumorphism
-
Clone o repositório.
git clone https://github.com/bergside/awesome-design-skills -
Aponte o Codex para o arquivo da skill.
skills/neumorphism/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Faça o Codex definir os tokens de superfície e sombra antes de estilizar qualquer controle.
-
Peça estados de foco visíveis, já que sombras suaves sozinhas falham com quem usa teclado.
-
Exija HTML semântico antes de ARIA, como esta skill especifica.
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.