무엇인가
전체 화면 쿼드에 가느다란 세로 레이저를 그리는 순수 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 -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
셰이더가 RGB로 변환하는 --brand-accent 커스텀 프로퍼티를 설정하세요.
-
고정 캔버스를 pointer-events none으로 콘텐츠 뒤에 두세요.
-
coreWidth, glowWidth, smokeDensity, xOffset을 조정해 광선을 배치하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.