Фронтенд и UI
WebGL Laser
Полноэкранный шейдерный луч с добела раскалённым ядром и дымкой в цвет бренда.
Что это
Сырой фрагментный шейдер WebGL, рисующий тонкий вертикальный лазер на полноэкранном квадрате. Ядро остаётся почти белым; ореол и дым FBM следуют вашему акценту.
Create a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout
Почему это важно для дизайна
- Ореол и дым берутся из акцента вашего бренда, а не из захардкоженного синего.
- Раздельные ширины ядра и свечения держат луч лезвием, а не полосой.
- Дым сгущается у луча и рассеивается наружу, оберегая контраст текста.
Что внутри
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
Как установить
WebGL Laser
-
Клонируйте репозиторий.
git clone https://github.com/MengTo/Skills -
Укажите Codex на файл скилла.
agent-skills/web-design/webgl-laser/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Задайте кастомное свойство --brand-accent, которое шейдер переводит в RGB.
-
Поместите фиксированный canvas за контент с pointer-events none.
-
Настройте coreWidth, glowWidth, smokeDensity и xOffset, чтобы разместить луч.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.