Frontend & UI
WebGL 3D Object
Ein echtes, beleuchtetes 3D-Hero-Objekt statt CSS-Transform-Trick.
Worum es geht
Ein echtes 3D-WebGL-Objekt mit geometrischer Mesh-Tiefe, physikalisch basiertem Material, gerichtetem und Umgebungslicht, perspektivischer Kamera und schwebender Bewegung.
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
Warum das fürs Design zählt
- Agenten greifen zu CSS-Transforms und bekommen eine flache Attrappe. Hier gibt es echtes Licht.
- Material- und Licht-Defaults lassen das Objekt wie ein Produkt wirken, nicht wie Spielzeug.
- Die Bewegung ist bewusst dezent, damit das Objekt den Hero trägt statt ihn zu stehlen.
Was es abdeckt
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
So installierst du es
WebGL 3D Object
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/webgl-3d-object/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Klone das Repo und verweise Codex auf diese Skill-Datei.
-
Frag nach einem 3D-Hero-Objekt und beschreibe das gewünschte Material.
-
Passe Material- und Licht-Defaults an, aber behalte das Kamera-Rezept.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.