Frontend & Arayüz
Dither Background
Görünür 4x4 Bayer dithering’i ve kare piksellerle canvas arka planı.
Nedir
Value noise, FBM ve 4x4 Bayer eşiğinden, büyütülmüş kare hücreler olarak çizilen neredeyse siyah prosedürel bir alanı render eden bir canvas reçetesi.
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
Tasarım için neden önemli
- Büyütülmüş hücreler, dither matrisini film tanesine çökmek yerine okunur tutar.
- Altı adımlı monokrom palet, ağır bir overlay olmadan ön plandaki yazıyı okunur tutar.
- Vignette ve eksen dışı kütle, eşit parlaklık değil, tek bir parlak odak alanı verir.
Neleri kapsıyor
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
Nasıl kurulur
Dither Background
-
Depoyu klonlayın.
git clone https://github.com/MengTo/Skills -
Codex’i skill dosyasına yönlendirin.
agent-skills/web-design/dither-background/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Sabit canvas’ı içeriğin arkasına bırakın ve pointer-events’i none yapın.
-
Matris okunurluğu için cellSize’ı 5px ile 10px arasında ayarlayın.
-
Kütleyi biçimlendirmek için wave, cloud, ridge ve vignette değerlerini ayarlayın.
Buradaki her eklenti ücretsiz, açık kaynak ve gerçek üst kaynağına bağlantı veriyor.
codex-design listesinde dahası ↗Diğer Codex tasarım eklentileri
Frontend & Arayüz Ne yapar gpt-taste GSAP scroll hareketi ve boşluksuz bento ızgaralarıyla ödüllük tarzda landing page’ler kurar. 
Tasarım Sistemleri Ne yapar Stitch Design Taste Google Stitch’i sıradan olmayan ekranlara yönlendiren bir DESIGN.md yazar. 
Frontend & Arayüz Ne yapar image-to-code Önce tasarım görselleri üretir, onları analiz eder, sonra eşleşen frontend kodunu kurar. 
Frontend & Arayüz Ne yapar imagegen-frontend-mobile Premium mobil uygulama ekran akışlarını kod değil, görsel olarak üretir. Sonraki adım
Kurulum derdi olmadan Open Design ile tasarlayın
Bu eklentiyi kendiniz kurun ya da Open Design ile Codex’in etrafına baştan sona küratörlü bir tasarım katmanı geçirin. Kendi anahtarınızı getirin, çıktınızın sahibi olun.