Frontend & UI
Skeuomorphic UI
Dá profundidade tátil a botões e painéis com gradientes e sombras em camadas.
O que é
Uma receita de superfície para UI web tátil: preenchimentos em gradiente vertical, uma borda em gradiente reflexivo de 1px, sombras externas e internas empilhadas. Texto em relevo, ícones e microtextura são opcionais.
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
Por que isso importa para design
- Os estados elevado e pressionado invertem a profundidade, então os controles parecem físicos.
- A profundidade se mantém direcional, com luz vindo de cima e sombra embaixo.
- Alerta contra misturar glassmorphism, neumorphism e skeuomorphism num só componente.
O que cobre
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
Como instalar
Skeuomorphic UI
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Defina os tokens base uma vez e depois ajuste-os por marca e tema.
-
Aplique a superfície elevada a cards, botões, abas e carcaças de controle.
-
Adicione a variante pressionada só para toggles ativos e abas selecionadas.
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.