Frontend & UI
WebGL 3D Object
Um mesh de hero iluminado em Three.js com material PBR e sombras reais.
O que é
Uma receita em Three.js para um objeto de hero facetado: geometria de icosaedro, MeshStandardMaterial, câmera em perspectiva, luzes key e rim, plano de sombra, rotação flutuante lenta.
Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero obje
Por que isso importa para design
- Geometria e iluminação reais produzem arestas, brilhos e sombras que os transforms de CSS não conseguem falsear.
- Os presets de material cobrem metal premium, cerâmica suave e visuais tech com brilho colorido.
- O movimento se limita a rotação lenta e uma leve flutuação, então o texto segue em primeiro plano.
O que cobre
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
Como instalar
WebGL 3D Object
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/webgl-3d-object/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Adicione a casca de canvas quadrada e depois rode o inicializador do Three.js sobre ela.
-
Ajuste color, metalness, roughness e emissive para casar com o clima da marca.
-
Confirme o tratamento de resize e o descarte de geometria, material e renderer.
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.