Frontend y UI
WebGL 3D Object
Una malla de hero iluminada en Three.js con material PBR y sombras reales.
Qué es
Una receta de Three.js para un objeto de hero facetado: geometría de icosaedro, MeshStandardMaterial, cámara en perspectiva, luces key y rim, plano de sombra y una rotación flotante 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 qué importa para el diseño
- La geometría y la iluminación reales producen aristas, reflejos y sombras que las transformaciones CSS no pueden fingir.
- Los presets de material cubren looks de metal premium, cerámica suave y tecnología con tinte luminoso.
- El movimiento se limita a una rotación lenta y un ligero balanceo, así el texto sigue siendo lo primero.
Qué cubre
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
Cómo instalarlo
WebGL 3D Object
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/webgl-3d-object/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Añade la carcasa de canvas cuadrada, y luego ejecuta sobre ella el inicializador de Three.js.
-
Ajusta color, metalness, roughness y emissive para casar con el mood de la marca.
-
Confirma el manejo del redimensionado y la liberación de la geometría, el material y el renderer.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.