프런트엔드 & UI
Dither Background
눈에 보이는 4x4 Bayer 디더링과 사각 픽셀로 짜인 캔버스 배경.
무엇인가
밸류 노이즈, FBM, 4x4 Bayer 임계값으로 검정에 가까운 절차적 필드를 만들어, 확대된 사각 셀로 그리는 캔버스 레시피.
Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and
디자인에 왜 중요한가
- 확대된 셀이 디더 매트릭스를 필름 그레인으로 뭉개지지 않고 또렷하게 지켜 줍니다.
- 여섯 단계 모노크롬 팔레트가 무거운 오버레이 없이도 전경 타입을 읽히게 유지합니다.
- 비네트와 중심에서 벗어난 덩어리가 고른 밝기가 아니라 밝은 초점 하나를 만듭니다.
다루는 내용
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
설치 방법
Dither Background
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/dither-background/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
고정 캔버스를 콘텐츠 뒤에 깔고 pointer-events를 none으로 설정하세요.
-
매트릭스 가독성을 위해 cellSize를 5px에서 10px 사이로 조정하세요.
-
wave, cloud, ridge, vignette 값을 조정해 덩어리의 형태를 잡으세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.