Фронтенд и UI
WebGL 3D Object
Освещённый герой-меш на Three.js с PBR-материалом и настоящими тенями.
Что это
Рецепт Three.js для одного гранёного герой-объекта: геометрия икосаэдра, MeshStandardMaterial, перспективная камера, ключевой и контровой свет, теневая плоскость, медленное парящее вращение.
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
Почему это важно для дизайна
- Настоящая геометрия и освещение дают грани, блики и тени, которые CSS-трансформы подделать не могут.
- Пресеты материалов покрывают премиальный металл, мягкую керамику и техно-вид с подсветкой.
- Движение ограничено медленным вращением и лёгким покачиванием, поэтому текст остаётся главным.
Что внутри
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
Как установить
WebGL 3D Object
-
Клонируйте репозиторий.
git clone https://github.com/MengTo/Skills -
Укажите Codex на файл скилла.
agent-skills/web-design/webgl-3d-object/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Добавьте квадратную canvas-оболочку, затем запустите на ней инициализатор Three.js.
-
Задайте color, metalness, roughness и emissive под настроение бренда.
-
Подтвердите обработку ресайза и снос геометрии, материала и рендерера.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке codex-design ↗Другие дизайн-плагины для Codex
Фронтенд и UI Что он делает gpt-taste Собирает премиальные лендинги в духе award-сайтов: GSAP-анимация скролла и плотные бенто-сетки без пустот. 
Дизайн-системы Что он делает Stitch Design Taste Пишет DESIGN.md, который уводит Google Stitch от шаблонных экранов. 
Фронтенд и UI Что он делает image-to-code Сначала генерирует изображения дизайна, разбирает их, а затем собирает соответствующий фронтенд-код. 
Фронтенд и UI Что он делает imagegen-frontend-mobile Генерирует премиальные флоу экранов мобильного приложения как изображения, а не код. Следующий шаг
Проектируйте с Open Design без возни с настройкой
Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.