Frontend e UI
design-skills · Dithered
Ombreggiatura a pattern di punti e palette limitata per schermate retrò ad alto contrasto.
Che cos’è
Una skill di linee guida per interfacce dithered che usano pattern di punti per simulare sfumature da una palette limitata. Corpo Open Sans, titoli Space Grotesk, IBM Plex Mono, accenti blu e viola.
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
Perché conta per il design
- I pattern di punti sostituiscono i gradienti, così l’ombreggiatura sopravvive a un set di colori volutamente ristretto.
- Il rendering ad alto contrasto tiene il testo leggibile anche quando le superfici portano una texture di pattern marcata.
- Le regole vietano il movimento decorativo, impedendo al trattamento retrò di diventare rumore visivo.
Cosa copre
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Required output structure
- Quality gates
Come installarlo
design-skills · Dithered
-
Clona il repository.
git clone https://github.com/bergside/awesome-design-skills -
Punta Codex sul file della skill.
skills/dithered/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Comunica prima a Codex il limite di palette, poi lascia che ne ricavi le regole di ombreggiatura a pattern.
-
Chiedi gli stati vuoto, di caricamento ed errore così le superfici a pattern restano leggibili.
-
Verifica aree di tocco e stati di focus, che questa skill segnala esplicitamente.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.