Frontend y UI
design-skills · Dithered
Sombreado con patrón de puntos y una paleta limitada para pantallas retro de alto contraste.
Qué es
Una skill de guía para interfaces con dither que usan patrones de puntos para simular tonos a partir de una paleta limitada. Cuerpo en Open Sans, display en Space Grotesk, IBM Plex Mono, acentos azul y violeta.
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
Por qué importa para el diseño
- Los patrones de puntos sustituyen los degradados, así el sombreado sobrevive a un conjunto de color deliberadamente restringido.
- El renderizado de alto contraste mantiene el texto legible incluso cuando las superficies llevan una textura de patrón intensa.
- Las reglas prohíben el movimiento decorativo, evitando que el tratamiento retro se convierta en ruido visual.
Qué cubre
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Required output structure
- Quality gates
Cómo instalarlo
design-skills · Dithered
-
Clona el repositorio.
git clone https://github.com/bergside/awesome-design-skills -
Señálale a Codex el archivo de la skill.
skills/dithered/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Dile primero a Codex el límite de la paleta, y luego deja que derive las reglas de sombreado basadas en patrones.
-
Pide estados de vacío, carga y error para que las superficies con patrón sigan siendo legibles.
-
Verifica las áreas de pulsación y los estados de foco, que esta skill señala de forma explícita.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.