Frontend & UI
design-skills · Dithered
Ombrage en motif de points et palette réduite pour des écrans rétro, très contrastés.
De quoi il s’agit
Un skill de directives pour des interfaces tramées qui utilisent des motifs de points pour simuler des nuances à partir d’une palette réduite. Corps Open Sans, titrage Space Grotesk, IBM Plex Mono, accents bleu et violet.
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
Pourquoi ça compte pour le design
- Les motifs de points remplacent les dégradés : l’ombrage survit à un jeu de couleurs volontairement restreint.
- Un rendu très contrasté garde le texte lisible même quand les surfaces portent une texture de motif dense.
- Les règles bannissent le mouvement décoratif, empêchant le traitement rétro de virer au bruit visuel.
Ce que ça couvre
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Required output structure
- Quality gates
Comment l’installer
design-skills · Dithered
-
Clonez le dépôt.
git clone https://github.com/bergside/awesome-design-skills -
Pointez Codex sur le fichier du skill.
skills/dithered/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Indiquez d’abord à Codex la limite de palette, puis laissez-le en déduire les règles d’ombrage par motif.
-
Demandez les états vide, chargement et erreur pour que les surfaces à motif restent lisibles.
-
Vérifiez les zones cliquables et les états de focus, que ce skill signale explicitement.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.